Five lessons from building this site
A numbered rundown — and a demo of the listicle post layout.
This post uses the listicle layout variant (variant: listicle in the
frontmatter): every h2 gets an automatic big red numeral and a thin rule
above it, in the style of Fishwife’s “Our Story” page. There’s also a
feature variant with a loud yellow banner header. Regular markdown —
nothing else to do.
The platform keeps catching up
Half the JavaScript this site almost shipped got replaced by things
browsers just do now: popovers, @starting-style animations, :has()
selectors, scroll-driven styling.
Semantic HTML is a design system
Pico CSS styles bare elements, so most pages here have almost no classes. When markup stays semantic, restyling the whole site is a token swap.
Steal palettes from the physical world
The colors here are sampled from a tinned fish company. Print-inspired design — flat blocks, thin rules, chunky borders — translates to the web beautifully.
Ship less, load faster
Every feature earned its bytes: build-time syntax highlighting, build-time image optimization, web components only on pages that use them.
Write it down
The blog is the point. A place to put things forces you to finish them.