The NightScript Domain!

This website was made to record various accomplishments I’ve done over the years, pass time during COVID-19 & used as a distraction from listening to the teachers. The content you may find here could range from video game reviews, blogs, projects or other things I may throw onto here. Like the other projects you’ll find on here, it is open source on GitHub. While the goal has stayed the same over the years, the design has completely changed.

History of the Website Design

This website didn’t originally start out as a personal website. The layout was made originally for a 1:1 discord clone I was told to make in the summer of 2017. I left when I got tired of being bossed around, but I didn’t want to waste all the work I put into it. That’s when I started making it a portfolio website instead. Since it was planning to be a static website, I opened up a GitHub repository and started hosting it on GitHub pages, commenting out any Discord-specific content. I also got sick of the color choice used by discord’s official dark theme, so I used Material Discords’s color scheme. However, regardless of the new paint job, the root of the projects were still a discord clone, boiling down to a bunch of unused CSS.

The unused CSS wasn’t the only badly designed thing. I developed this before I took a dive into Bootstrap, meaning I used Acmlmboard page design. Using tables for page layouts was highly discouraged and has been an outdated practice since 2001 (source: The Programmer’s Hangout Discord Server). This outdated design also led to mobile issues and incorrect layout rendering. Plus, even if I fixed it, discord’s design wasn’t mobile friendly. In order to actually accomodate everything, I’d have to zoom out the screen. Also, I always hated how the sidebar was always there when you didn’t need it. It was time to start from scratch, this time using Bootstrap 4.

The first thing I wanted to introduce with this rewrite was have a sidebar similar to what I’ve drawn in my notebook in school while not caring what the teacher is saying. A large icon with my avatar in a circle with the name “NightScript Domain” on the bottom was exactly what I had in mind, and I was looking online for the nicest looking one. The closest I found was this example by Catriona Henderson and while the code was bloated and it looked quite ugly, the functionality did what I was looking for. I started mass editing the codebase, removing any unnecessary bloat and switching to pure JavaScript (it previously used jQuery). The asthetic was matching the green JavaScript asthetic Javier used when designing my avatar. The original page had the old-Discord light theme design; a gray sidebar with pure white text. That’s not what I wanted, so I used yet again Material Discord colors. It turned out nice, but I was getting tired of those colors. It was a step up from original Discord, but now I wasn’t confined to discord design. I should be able to take whatever asthetic I want and plug it in. Thankfully, I started looking into BetterDiscord themes, and found Midnight UI.

Midnight UI was extremely eye catching for me, and I have to give all the credit to Tropical#8908 for knocking every other discord theme out of the park with this custom theme. After adjusting the color sceme and importing the macOS mountain background, I’ve got an identical match between the BetterDiscord theme and my website. I did have to slightly tweak the design because a Discord chat room and a portfolio wesbite had two different goals and design philosophies, but it was still recognizable to the betterdiscord theme. As an example, rather than have the gray background used on posts, I had my text go directly on the background for a bit of a cleaner vibe. Also, my sidebar links were slim whereas they’re fully fledged buttons on Midnight UI. I hadn’t stolen any actual code either, since the BetterDiscord code was confusing whereas I’m trying to keep mine clean. The only issue I’d run into myself was the mask-image not working properly, but Evie11 helped me with that. Of course, I used a Windows 10 PC whereas people would be using all sorts of devices, and that’s why I hadn’t caught the issues of mobile and Apple.

The other part of the website I wanted to focus on this time was accessibility. I frequently ran tests on Google Lighthouse Audits to get a score on how the website is and would do whatever I could to try and have a higher score. I’ve had to add zooming by scaling on mobile because apparently, that’s needed to get a higher score because “accessibility”. I’ve decided that adding a “back-to-top” button was necessary for accessibility, but I wanted to have it implemented confortably. The actual link implementation worked out great and JavaScript isn’t even mandatory (but it gives a better experience by not adding a number sign to the URL). Basically, I wanted the button to appear only after the user scrolled 20 pixels past the top of the screen. I couldn’t do that via CSS so if the user has Javascript disabled, he would have to see the scroll back to top button at all times. There wasn’t an easy way to have a “if no JS, show at all times” method, so now there’s a 0.3 second pop-in. That’s fine though, since it’s short and lets the user know that the button exists when it’s needed. The second issue was the arrow not working on mobile and Apple, again.

Notice how I repeated mobile and apple? The first issue I had was with the background not appearing. It was just the solid color. Thankfully, Evie made me aware that background-attachment: fixed would not work on mobile and made a solution. Evie is also the one who fixed the button issue, suggesting that I use Font Awesome’s up arrow instead. Both of her workarounds worked fine, I just needed to do things on my end. To fix the background error, I had to make a new div element that had a fixed position, and that would contain the background. I also needed to change the cover to the top, and that was quite…I dunno, I’d rather have it in the middle but life isn’t perfect. I’d much rather having presentability on a mobile device than just a simple few pixels towards the top.

The next thing I wanted to implement were share buttons for blog cards. Back when I did this for MakerBoard, I could do it from the backend, no problem. Here, I had no PHP backend; it was just a static website. I had to improvise a way. This is one of the few things I decided to force users to use Javascript for. Dynamically having the link would be much easier to maintain. How I ended up doing it was adding a noscript tag telling users that they needed to have Javascript in order to see share links, which ironically checking for that noscript tag in the JavaScript. It would then add onto the parent div the contents of an array containing information of the shared social media links.

The static bubbles images on the sidebar worked but I thought I could do even better. Thankfully, my skills with CanvasJS back when I was working on Yamamura paid off. I switched out the CSS background image to have the canvas and div elements overlap eachother. The new code allows me to generate a linear gradient and easily change the colors without having to redo the entire image. Plus, the bubbles are now generated at random locations each time the page has loaded and there’s now a nice fade in effect. The downside is JavaScript is mandatory, but at this point, it’s the modern internet; users should be accustomed to JavaScript. I don’t use any malicious JavaScript so we’re good.

The above changed has also let me do something I was dreaming of doing ever since I saw RocketRobz’s Homebrew Launcher theme for TWiLight Menu++; moving bubbles. I wasn’t sure how to do it, but Samplasion helped me out. I had to make it two canvases (since I had the gradient and bubbles in one) but it was all worth it.

After a certain point, however, I couldn’t work on simple HTML. Inconsistencies were bound to happen, I was tired of indentation and HTML is eh. Thankfully, I made my own Jekyll theme and GitHub pages works directly with JeKyll. Shoutouts to Evie11 for helping me convert pages when I was too lazy.

Credits

Who to give credits to is actually confusing for the most part. See, Tropical introduced me to the general asthetic but then again, it’s only a color. I didn’t steal any of their HTML either, so I’m not really sure how to credit her. Do you really own color? The original person who made me do the discord layout (and what got me to start developing this website) has no actual part on the website itself anymore and they deleted their discord account. Also, Catriona Henderson made the bloated code, but without her I wouldn’t have been able to do this. I actually have a blog entry on the issues of ownership, if you want to take a read. Still, I know what Evie and I did and I definitely do have to give credit for things I know happened.

Honorable mentions to Tropical#8908 on Discord for the color selection and Catriona Henderson for the original sidebar code used. Both have been changed significantly, but I couldn’t have done it without their help.