Colophon

The site felt chonky. Traced it from view transition jank on mobile through modal lag and same-page nav bugs to the real culprit: the critical CSS integration was async-loading stylesheets, causing massive layout shift on every page load.

Swapped every cover image on the site from Recraft v3 to v4. Same palette, same style prompt, better compositions. The prompt generation pipeline got an overhaul too.

Discovered web-haptics, a zero-dep wrapper around the Vibration API (with a clever iOS fallback). A handful of prompts later, every interactive element on the site has tactile feedback on mobile.

Misconfigured critters was inlining everything. Went looking for alternatives, found archived projects and dated advice, ended up building a Playwright-based critical CSS integration from scratch.

Flipped one toggle and now every page on this site speaks Markdown to agents.

Five templates had nearly identical prose CSS, roughly 200 lines each. Rebuilt the project detail page and found the real work was in the shared styles I should've extracted months ago.

I wanted to see what I'm actually shipping, not just that I'm shipping. Built a GitHub activity dashboard with a local sync, static JSON, and two very different chart implementations.

The 'Calling the Plumbers' post has an optional background animation, a recreation of the Windows 3D Pipes screensaver. Canvas 2D with simplified 3D projection. Hit play on the control strip to start it up, or go fullscreen for the screensaver experience.

Hovering external links now shows a preview tooltip with favicon, title, and description. A Cloudflare Worker fetches and caches metadata, while the client uses a singleton tooltip and Floating UI for positioning.

Standard X embeds load tracking scripts and set cookies on every page view. This site uses astro-tweet to fetch posts at build time and render them as static HTML. X never knows when someone views the embedded post.

Added build-time mermaid diagrams using beautiful-mermaid. SVG output, themeable via CSS variables, zero client-side JavaScript.

Spent hours convinced my images weren't caching across View Transitions navigations. Server headers were perfect. Cloudflare config was perfect. The problem was DevTools "Disable cache" being checked.

Added LQIP (Low Quality Image Placeholders) to the about page using astro-lqip. Base64-encoded blurred previews now load instantly before the full images, eliminating layout shift and giving a smoother perceived load.