Website: New look and more

This article is a bit overdue as I wanted to write this for about a week or so, but each time I found another oppertunity to improve the website. Enough chit-chat, let's talk bizz!

New domain

Probably the least noticable part. It changed from merijnhendriks.github.io to nohurry.moe. Quite a bit shorter! No;Hurry is my online nickname, so it's pretty fitting to pick as nickname. The domain extension has a bit of a story to it however.

I wanted to go for .io, but that's 50(!) EU a year. That's a steep price considering that other domain names cost like 25EU a year. I didn't want to go for the Dutch domain (.nl) because I'm unsure if I want to continue to reside in the Netherlands in the future. And well, I do like anime/manga alot, so... the .moe domain extension was pretty much a given. In case you don't know, "moe" is slang in Japan for something cute. So a plushie could be moe.

I'll have to look into a professional domain later for business emails and such but that can wait for now. I'll probably try to find a nice .net domain or something.

New layout

I personally liked the big banner, but it's a waste of space if it's just there to be pretty. The sidebar didn't have enough information on it to make it worth the space it took either. That's why I made effort to improve the layout to give a better initial impression.

I moved the sidebar to the right, moved the banner into the sidebar and made it sticky on wider screens. It has a hidden scrollbar on wider screens as well in case the sidebar doesn't fully fit in height.

I think it works well; the article gets much more space and importance, and the sidebar feels like its taking up enough space to be useful but not too much. Sometimes it feels like the text gets a bit too much space, but I can't find the sweetspot so I'm happy with what I got so far.

Dark mode

It took me a while to figure out how I wanted to support this, but now it is finally here. I picked the royal blue-ish colors with gold for links and accents because they match the surplus Dutch Navy's wool coat that I bought and love to wear. It also plays nice with the color theme for code highlighting (prism-nord).

I just use the standardized media query for css to check for the system color mode and go with it. Making it toggable on the website would require either javascript or other shenanigans, which I really don't want for this website. Overall I think the new color theme is an improvement over the old (white) one.

Optimizations

The use of JSDOM has always bothered me. It's so slow that I ended up implementing a cache system so I didn't have to rebuild everything to save up on build time. But after reworking and decoupling the code for a bit, I realized that the only place where I still was using JSDOM was for injecting the article html. All of that can perfectly be done without JSDOM.

After scrapping JSDOM and rewriting the code, I dropped from 80 packages to as low as 24 packages! That is a huge improvement. Generating all pages was so fast that I could just remove the whole caching system I wrote the week before. Simplifying things and removing unneeded junk feels very productive and worthwhile, this case is no exception.

I also checked the transfer size of some of my articles. They all hover around 5kB transfer size when disabling cache, which is very decent. Otherwise the size is around 3kB. Hopefully it'll be helpful for those with a bad network connection.

A new user

Also fun is that a close friend of mine adapted my website generator for his own website. I never thought that my generator would be used elsewhere, but here we are hahahaha. Glad he did, and I hope it will be useful to him!

Conclusion

I'm really happy with the amount of changes, and especially in the amount of improvements made in the small period of time. The generator became more usable and maintainable. The website itself does a better job at presenting the articles.