An Update About This Very Webbed Site

Author: Jake Bauer | Published: 2024-09-12

I’ve made some significant changes to this website in the time before I last posted my previous blog post previously before in the past and I wanted to detail them in case people find some things I’ve done useful for their own site.

This is what my website used to look like:

Kinda stale and boring and bleh. The old style felt a bit too plain—lacking in personality and flair; not something I was really happy with. I wanted to make some changes and spruce some things up. This was also partially spurred on by the death of 10kbclub.com.

Dobby is FREE!

I don’t know why 10kbclub.com died or when it happened, but what I do know is that I no longer have to care about keeping the transmitted bandwidth of my front page under 10kB. I can stop with the stupid page size measuring contest and have nice things again!

Besides, I’m really not interested in website asceticism anymore. I want my site to feel like it’s my site; to have a kind of personality rather than just being a plain slab with words.

This includes making my site actually look good consistently across different operating systems using the power of slapping away your font choices and giving you what I prescribe: IBM Plex.

So I went to their website, downloaded the particular font files I wanted to use on my site along with their CSS samples, dropped these files on my server, integrated the CSS, and now hooray! Fonts! Things can finally look good across Windows, iOS, and Linux without a visitor already needing to have the fonts I specified or having chosen a different default font in their web browser settings—which almost nobody does.

To stop this from hurting people on slower connections, I’ve added font-display: optional to all the fonts in my CSS which “Gives the font face an extremely small block period and no swap period"— whatever the hell that means. (Source)

Alright I’m being told by an advanced intelligence (some guy who actually bothered to explain things on the DigitalOcean blog) that this means the font is given 100ms to load, and if it doesn’t load in that time then the page is displayed using the fallback font. The font should continue downloading in the background and will be cached so it can be made available on subsequent page loads. Pretty nifty!

My fonts are also split by Unicode code point and font face so only the fonts required to display a given page’s content will be loaded. For example, if I’m not using any kind of Greek mathematical symbols on a page, that particular font file won’t be requested. That way the custom fonts only add about 100KiB to a given page which is practically nothing when compared with media (that I also attempt to optimise) such as the images on this blog post. As usual, once the font files are fetched then they will be cached, and if a user has disabled custom font loading in their browser then the font files won’t be downloaded at all.

Oh, yeah and apparently there’s no real readability difference between sans and serif fonts. I thought that a sans font might look better with the new design, so I’m trying that out.

There were a few other minor tweaks I made to make things feel a little less plain too. There’s now a background around the page content to separate it from the endless sea of background colour, new styling for headings, outlines around images, and some CSS that lets me use custom emoji the same way I can on the Fediverse so I can actually express my complex inner storm of emotions.

And this is the result:

Now that the CSS is a good bit larger (mostly thanks to the font configuration) I’m no longer embedding a minified stylesheet in the HTML. When the CSS was around 600 bytes per page it made sense to embed it because the added bandwidth and latency of an extra request made no sense for such a small amount of data. Now the CSS is a little over 2kB (compressed) and the cost of downloading it is quickly made up for by caching the same data across several page visits. Here’s what that looks like for the front page:

Embedding minified CSS into my HTML was a bit unwieldy anyways when I wanted to make changes, and it also means it’s easier for someone to download the CSS and review it without having to un-minify it first.

[Something Edgy About Darkness]

A couple years back I switched to using my computers primarily with a light theme. This is an objectively superior choice that everyone should agree with, but sometimes I’m using my phone in a dark environment and would prefer to maintain the health of my retinas so I decided to re-make a dark theme.

I previously removed my dark theme before I wasn’t happy with it and got tired of maintaining it when I hardly used it, but I’ve drastically simplified my CSS since then and also found a much nicer colour scheme:

I stumbled across these particular colours when I chose a colour scheme that was roughly based on the colours in the light theme but would also contrast well on a dark background, and then checked it against various colourblind filters to make sure things were still readable. Turns out, tritanopia is aesthetic af, so I just colourpicked the colours right from the browser with that filter activated and went with those.

That means that if you’re one of the 0.0008% of the human population with tritanopia then you can rest easy knowing that you see the dark mode version of this website exactly the same as everybody else does.

Index Dot Haych Tee Em Ell

Along with the visual frontend changes, I also remixed the backend to make it much more convenient to work with.

The site was previously arranged something like:

.
|-- img/
|   |-- hot-single-laptops-in-your-area.jpg
|   `-- history-of-the-roman-empire.png
|-- blog.html
|-- blog/
|   |-- what-happened-to-the-romans.html
|   `-- my-laptop-is-better-than-yours.html
|-- projects.html
|-- projects/
|   |-- tiny-5mb-javascript-framework.html
|   `-- c-replacement-language-number-37952.html
`-- home.html

But now it’s arranged like:

.
|-- blog/
|   |-- index.html
|   |-- what-happened-to-the-romans/
|   |   |-- index.html
|   |   `-- history-of-the-roman-empire.png
|   `-- my-laptop-is-better-than-yours/
|       |-- index.html
|       `-- hot-single-laptops-in-your-area.jpg
|-- projects/
|   |-- index.html
|   |-- tiny-5mb-javascript-framework/
|   |   `-- index.html
|   `-- c-replacement-language-number-37952/
|       `-- index.html
`-- index.html

Basically, I made every page an index.html inside of a directory, so each page is contained within its own folder. This has several advantages:

• Simplified web server configuration since I don’t have to tell the webserver to look for $page_name.html if a path doesn’t end in an extension.
• Grouping related resources (images, videos, etc.) together with their pages instead of having them in separate directories.
• Easier navigation of the directory structure on the command line since there’s no longer both a blog.md file and blog/ directory to mess up tab completion.

I mostly did it because of the second point though. Whenever I removed a page it was hard to know if it was safe to also remove its related media because it could be still linked to by another page. I also would have to record what resources the page used and go hunt for them under /img/ or /vid/ instead of just being able to rm -rf --no-preserve-root my-wonderful-post /.

Nothing Happens Now

One bit of cruft that I wanted to excise from my now-beautiful phoenix of a website was the “Now” page. A now page is supposed to be a page you maintain to keep people up to date with what you’re up to now, without having to make something like a full life-update blog post. Some people make a habit of updating it monthly as a way of showing others what they’ve been up to that month, where others just update it once in a while when they get around to it.

I tried doing a monthly update to help keep me on track with personal projects, but it got to a point of feeling oppressive. I don’t tend to like doing things on a schedule, and for many months after moving to Germany I didn’t really have much to say because I wasn’t focused on personal projects at all. It was also a bit awkward to integrate into my RSS feed without drastically changing some functionality of my static site generator.

So now I have a little “Now Reading” and “Now Investigating” blurb on my front page (which, coincidentally is also where the Colophon and About and Contact information live), and that’s good enough along with maybe an occasional status update blog post when I actually have something to say.

Git Out of Here

I also used to keep my website in a git repository. This made it so I could keep around a log of changes, dig around in the history to roll something back, accept changesets from people to fix things, and it acted kind of like another off-site backup.

But it was completely useless.

Maintaining good git hygiene really just became annoying. Checking in atomic changes and coming up with commit messages was way too onerous (I just resorted to “*“ after a while), and I’ve never needed to roll things back in the 5 years this site has been online. When I wanted to get rid of something it’s because I actually wanted it gone, and a git history negated that completely too.

It also meant I couldn’t keep anything private without totally losing the advantages of source control, and if I wanted to use it as an effective backup of sorts then including the media along with the text just bloated the repository size. Plus, absolutely nobody is collaborating with me on my own website—any time people have noticed spelling mistakes or something they’d just email me or tell me on Fedi rather than sending me an entire pull request e-mail changeset diff to fix one single missing letter.

The git hammer didn’t apply to this particular nail, and I could finally be released from yet another self-imposed obligation.

Anyways, I think that’s it for all the big changes I can remember making recently. Now if you’ll excuse me, Satisfactory 1.0 was just released. Bye!