colophon

I like using fancy words, and upon first reading the word colophon, decided my site had to have one, solely because then I’d get to use the word more. Amusingly, the first proto-colophons were short and punchy, often expressions of relief that the tedious hand-copying of a manuscript was now over, presumably concluded with an overdramatic drop of the quill. “I have made an end at last, and my weary hand can rest.” But as the printing press came to be, the term colophon was coined to refer to a little section describing the technical details of printed books. In the same spirit, websites have started to have colophons describing how the site is put together; here are three. The colophon Wikipedia page has plenty more interesting details.

In the spirit of those first colophons, here’s a pithy quote about how I treat this website, and my work in general. I leave inferring the philosophical meaning as an exercise to the reader.

The work is never finished. One must imagine Sisyphus happy.

And now, true to my normal style, the rest that follows is a much wordier colophon describing everything else.

design

Modern sites all look kinda same-y. For how the old web was kinda ugly, at least there was personality to it. Minimalism is elegant, simple, and kinda boring. But until I develop the design ability to make a more maximalist site feel non-garish, I’ll have to keep it simple.

I also kinda hate how all sites look and feel as if they were built for mobile first, then desktop second, what with the single column layout and excessively wide margins. Yes, the irony is not lost on me.

I stick to normal sentence-case for extended writing pieces (readability reasons), but for other things I prefer all-lowercase (save for the word ‘I’) for a more casual vibe.

technical stack

This site is built using the Astro framework for static site generation, primarily using MDX for most content-driven pages and occasionally using React components for some pages which have more interactivity. Astro is really nice for my purposes because while I can build some reusable components using JS, I can also ensure they compile down to non-interactive HTML for efficiency of load. I actively minimize the amount of JS I’m serving to improve page load speed, but I can’t get rid of all of it — dark mode, for instance, virtually necessitates a little bit of client-side JS. No fancy CSS libraries here either, I’m using vanilla CSS, mostly for learning purposes.

I also have a Ko-Fi button component which unfortunately does use client-side JS. I’ll get rid of it soon and replace it with something which doesn’t suck. Or just get rid of it entirely.

Thus, while this site is not quite as fast and lightweight as some other personal websites (looking at you, Judah), it still does pretty well by my own standards.

I use GitHub for version control and Cloudflare Pages for hosting, because it’s free and I’m cheap. It’s all open-source because I’m quirky like that. I use Buttondown for my email newsletter.

For analytics, I use GoatCounter, because it’s simple, free (to be more precise, donation-supported), and privacy-friendly. I’ve also recently started using Cloudflare Web Analytics, but I honestly fail to see what difference it makes. I’ve heard good things about Umami, and I previously used the free trial of Simple Analytics but stopped once they asked for money, lol.

Finally, I bought my domain name from Porkbun and use Cloudflare for DNS. Whew. There’s a lot of things that go into a website, eh?

article features

I tend to write the way I talk, which is somewhat of a tangent-laden ramble filled with off-hand wit, snark, and humour. The accessory features thus serve to supplement this. Sidenotes, click-to-expand aside blocks — all this because I don’t want to write “properly”. Sorry, Dr. Zag.

sidenotes

The first implementation I tried for sidenotes was a simple JSX component which would take the content of the sidenote and put it in a <span>. While simple and functional, the underlying markdown feels awful, with a massive block of JSX in the middle of it. If the sidenote is meant to be an off-hand comment, embedding it in the middle of the text is cumbersome, and the JSX tags aren’t much to look at either.

So I rolled my own rehype plugin to parse normal markdown footnotes and turn them into sidenotes, plugin code here. No client-side JS, just some pre-processing at build time.

When the screen is large enough, the sidenotes are shown. When it is too small, then there’s a click/hover-to-expand orb inspired by those on Tim Urban’s blog. Instead of using the library that he used, bigfootjs (which, really, is how anyone sensible should implement this), I made my own version without any client-side JS using a input checkbox. I still need to double-check if this works properly for screen readers, but I’m relatively happy with how it turned out.

aside blocks

I’m just using a specially-styled <details> HTML element such that it once again requires no client-side JS.

typography

Body text is set in Lora, selected because I had spent 5 hours staring at fonts and just needed to pick something already. It feels less formal than, say, EB Garamond, while maintaining some level of the pretension I associate with serifs. It’s also fairly readable, which is good considering how lengthy my tirades can be. I also appreciate how the name is Lora, like the technique for optimizing deep neural networks, LoRA.