J

Colophon

There’s this annoying tension between personal and public that comes with personal websites. Are they a home or a gallery? a personal record or a public document?

On the one hand, it feels like it would be fun to have a massive index of everything you’ve done, thought, or written about, all in one place. On the other, this makes it harder for people to find the bits that might be worth reading.

Equally tempting is the idea of perfectly designed templates for each section of your site. I have accepted that I will never do it as well as Aaron, and it’s allowed me to be at peace with tasteful minimalism instead.

Principles

Despite the rumors, I do indeed have a few.

Speed

This site is fast. As fast as you can get without getting fancy Javascript SPA-based fetch and swapping.

It uses web fonts, but has good fallbacks. There is just one 500-line stylesheet. There is no JS-based rendering. This page weighs less than 15kb. Images are compressed to within an inch of legibility, and Netlify’s CDN ensures a low time-to-first-byte.

Everything is a static asset, everything is cached locally. Yes, even the HTML, it just has a refresh period of 15 minutes. The result is a website that crushes all the speed tests I could find, and is a comfortable member of the 250KB club.

Robustness

This site is perfectly readable on a variety of viewport widths. It is perfectly readable without any CSS. It is almost completely functional without any Javascript. It acknowledges the pace layers of the web. It uses semantic HTML for all it’s elements.

Maintainability

If you aren’t already, you should seriously consider using a static site, built on a foundation of Markdown and Git. It frees you from being reliant on a private company to keep your site alive, and you can switch hosting with ease. It lets your site degrade gracefully.

You’re also free to pick how you want to build your site, instead of being limited to one default method (JS Handlebars for Ghost sites, PHP for Wordpress, etc). I use Hugo because it lets me write my templates in plain HTML, and has lots of useful pre-defined functions.

The fewer special styles and element names I have to remember, the better. Every writing page is plain old Markdown, with no extra formatting.

The important consequence of this minimalism is that writing a new post is simple as opening up a new markdown file, adding a title to the front-matter, and starting to type.

Stack

It’s 2023, and web hosting has never been cheaper. Other than the $10/year that I pay for the domain, it costs me nothing to put this website online. I don’t need to rent a server to host pure static files, and Github provides free storage.

ServicePurpose
GithubHosting and version control
NetlifyDeployment and CDN provider
Google DomainsDomain provider with the most transparent pricing, and excellent UX.
PorkbunMoved my domains here ever since Google announced that they’re selling to Squarespace

The site itself is generated with Hugo, which I like because it’s really fast and provides a bunch of of sensible defaults that frees me from having to fiddle with plugins.

Inspiration

I love weird personal sites and near-unreadable layouts. I’ve even designed some myself. But for better or worse, this version of my site seems to have unconsciously adopted most parts of the brutalism code of practice.

Brutalist Web Design

If you’re a web designer or front-end developer, I will help save you from yourself. To help you put fancy to one side. I am going to offer you a brutalism code of practice:

  1. Don’t be influenced by tools
  2. Use a system font and only one
  3. Write clean code
  4. Write your own CSS
  5. Don’t use Javascript (if you can avoid it)
  6. Don’t hack the scrollbar
  7. Don’t create custom cursors
  8. Don’t use an effect just because you can (especially fade effects)
  9. Have as little design as possible
  10. Make navigation obvious or not at all
  11. Be practical rather than pretty
  12. Don’t use gradients or shadows
  13. Use high contrast colours
Carl Barenbrug

I might change my mind eventually, but for now this simple set-up suits me well. It means I’m actually writing words on here instead of endless fiddling with stylesheet files. The layout also translates well between mobile and desktop, which is the part I usually find most frustrating.

Where is the the dark mode switch??? I'm not telling, but it's not that hard to find.

Type

This version’s gimmick is the ability to pick what kind of font you’d like to view the site with. There are four options, and they use the following fonts:

Sans-serif: Inter, system-ui

Serif: Sentient, serif

Monospace: PT Mono, monospace

Handwriting: Shantell Sans, cursive

Javascript

There is only one piece of Javascript on this site. It is responsible for switching between dark/light modes, and swapping fonts.

Analytics

Basic stats are collected by Umami, an open-source, self-hosted analytics platform. Hosting fits comfortably into the free tiers on Netlify and Supabase.

It seems like every site that mentions the existence of an analytics script does so with an overly-apologetic “I don’t actually care about numbers, I just have this for such-and-such completely benign reasons”. It’s your site dude, you don’t need to feel guilty about it.

As for my own numbers, I rarely check them, but it’s nice to have some idea of how people use this site. It helps me figure out what pages should make it into the “popular” section, and if a half-complete page is getting enough visits for me to bump it up my to-do list.