You might be unfamiliar with the word “colophon”, and I admit it’s pretty niche. Merriam Webster’s definition is: “an inscription at the end of a book or manuscript usually with facts about its production”. And because it’s a new year, and I spent the weekend cooking up a big batch of changes to this website it’s only fair to include a post on how it’s built, and my reasoning behind the choices I made.
A bit of background
Like most things in IT that isn’t maintained well, the repository for my website also turned into a bit of a mess. Builds were starting to get too slow for comfort, updates to dependencies would break the build more often than not, and old decisions became obstacles for implementing new ideas. In short: the interest rate on old technical debt was becoming a pain and it doesn’t spark joy to spend a lot of time refactoring. I do enough refactoring in my day-job where I’m actually getting paid, and would prefer to avoid it for hobby projects.
This is what I kept using
- All content is still in Sanity. I like having a “content lake” where I can get data, transform it, and end up with output in whatever format I need. The image pipeline and CDN was the biggest reason for my last re-invention of the website two years ago, and that is still just as valid today
- I still use Astro to generate a static site. I am a bit sceptic about CloudFlare’s recent acquisition, but decided to keep it for now
- I also still use a Static Web App in Azure for hosting. Mostly because it’s cheap (free) and I don’t have to manage any infrastructure or certificates. I considered moving to a hosting that gives me more options to be unfriendly to the herd of AI crawlers that doesn’t respect robots.txt but I suspect the amount of work involved wouldn’t be worth it, so I have ignored that problem for now
But I got rid of these
- I got rid of Tailwind CSS. Every time I wanted to make a change, it often became a fight to figure out just how many utility classes I had to apply to a bunch of html tags to make it “tailwindy”. It was ugly, hard to read, and I had so much duplication all over the place because I’m not a clever frontend developer. This old post comparing it to smart steering in Mario Kart is on point =)
- My tech stack was full of dependencies. A bunch plugins for Astro, Tailwind’s typography plugin ++. I got rid of most of them in favor of just doing it myself and not having to curse at dependabot breaking builds. There is still a few Astro plugins left, and fontsource still grants my font, but more of them will be replaced soon
And this is what I used instead
My first exploration project that ended up in this website refresh was really just a test of how much effort it would be to go from “I havent really written css in 20 years” to “this actually looks pretty good”. Turns out, it’s not a massive amount!
- I used Andy Bell’s (more) modern css reset to give myself a good start
- Utopia is used to generate font sizes, spacing and grid that works well across all viewports
- I set fonts and colors as variables in my global.css file and just import it in my base layout to make them available everywhere
- This makes it easy to use scoped styles in my Astro components to keep logic, html and styling near each other, but still a lot more flexible and easier to read and understand than Tailwind’s approach
- I just use plain javascript/typescript where needed. My needs are simple, and the various AI tools do a decent job of helping a rookie get the code good enough. (After all, everything I wanted to do is something a lot of clever people have solved years ago and posted their solutions to codepen etc.)
- I spent hours creating the svg stuff in the header. It’s funny how you can ask any AI assistant to generate a picture of a tree and it would spit out a pretty good result. But when you try to explain that you want a lowpoly forest in svg format it turns into a massive waste of a slop machine. It took me way too long to give it proper instructions (and svg examples) to create enough trees, in multiple layers and variations in size and form.