Izimani | Colophon

Technologies and techniques used

The current version of the site is built upon the following tech:

• Astro
  • Content-driven, mostly static sites are a pleasure to build with Astro. It’s type-safe, fast, has a large community, and includes patterns for making maintainable webpages.
• Markdoc
  • Markdown is my go-to format when authoring content, but it has its limitations. For example, I needed a way to add asides or code listings with captions. Markdoc adds just enough expressive power to solve such problems elegantly.
• Fontsource
  • To avoid relying on Google Fonts.
• Astro OG Canvas
  • It’s not as gangsta as you’d think, as OG stands for Open Graph. Nevertheless, this Astro add-on is extremely valuable, as it makes generating Open Graph images for posts (and every other page, of course) effortless.
• Modern CSS
  • I’ve tried to make extensive use of relatively modern CSS features such as nesting (with a shout-out to nested media queries), the light-dark() function, or the :is pseudo-class. I know this isn’t a big deal, but I’m coming from the backend, so I’m just getting up to speed with CSS.
• Semantic HTML
  • It’s all too easy to solve everything with divs and spans while ignoring gems like hgroup or mark. I’ve tried to get it right and looked up semantically correct HTML elements, whenever possible.

If the tech stack above changes, you’ll find links to previous versions here.

Of course, technology alone can only take you so far. Here are all the tips, tricks, and techniques I used when building this site:

• Light/Dark Theme Switch
  • Native HTML light and dark color scheme switching by Vadim Makeev
  • light-dark() isn’t always the same as prefers-color-scheme by Stefan Judis
• Markdoc Code Blocks
  • Replacing the Shiki integration with Expressive Code in a Astro-Markdoc setup by Anca
• Reading Time
  • Adding reading time to Astro without the hassle by Jahir Fiquitiva
• Open Graph Images
  • Creating dynamic OG images in Astro by Balázs Barta
• Accessibility and Semantic HTML
  • The article element (and others in the series) by Heydon Pickering
  • Semantics, what does it mean? by Erik Kroes
  • The A11Y Project
  • Inclusive Design Principles
• CSS Reset
  • A Modern CSS Reset by Josh Comeau

A few books I used for guidance:

• Laws of UX by Jon Yablonski
• Universal Principles of Typography by Elliot Jay Stocks
• Writing for Developers by Piotr Sarna and Cynthia Dunlop

Technologies avoided (anti-colophon)

When building the site, I deliberately avoided the following tech:

• Active server-side components.
  • I wanted a lean, performant, and cheap-to-host site. That’s why I avoided active server-side components (whether traditional servers or serverless) and went with a static site generation (SSG).
• Front-end frameworks and excessive JavaScript use.
  • “Surely you didn’t need client-side JS; this is a personal site!” you might think. And that’s right, a content-driven site like this one shouldn’t ship with megs and megs of JS. However, you add a little script here and there, one little dependency for this feature, and another one for something different, and boom, your visitors spend seconds downloading scripts. Not on my site!
• Tailwind.
  • In the past two years, I’ve grown so close to Tailwind that I’ve barely used vanilla CSS at all. I felt that using utility-class-only styling alienated me from bog-standard CSS. For this site, I wanted to go back to the roots.
• Tracking.
  • I’m not interested in numbers; I write for my own self-expression and to help and inspire individuals. Please get in touch with me if you find anything exciting on this site!

Inspiration

This site was shaped by the endless list of personal pages and blogs I’ve come across throughout my career. A few of them, however, stand out:

• The stream format of TheSephist (Linus Lee).
• The article layout and the monthly notes format of Evan Hahn.
• The post listing of Ruud van Asseldonk.
• The front page of Dimitri Sabadie’s site, Strongly Typed Thoughts.