Design & Hack

I think this is working now

Mon, 27 Jul 2026 00:00:00 GMT

Alright…final POSSE test!

Hopefully…

Syndicate to Mastodon

Is brid.gy working? Not sure...

Sun, 26 Jul 2026 00:00:00 GMT

Trying to get bridgy working…can you see this?

Syndicate to Mastodon

A cross-posting test

Sun, 26 Jul 2026 00:00:00 GMT

Really happy with this new setup, just trying to figure out if everything is working altogether. Test 1..2..3..

Syndicate to Mastodon

Five lessons from building this site

Sat, 25 Jul 2026 00:00:00 GMT

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.

A note on static maps

Sat, 25 Jul 2026 00:00:00 GMT

TIL you can composite OpenStreetMap tiles into a single image at build time and overlay the markers as plain HTML — popups and all, zero JavaScript. This note is a micro post: no title, just a date and a thought. Good for links, TILs, and half-formed ideas.

Syndicate to Mastodon

Photo galleries with zero JavaScript

Fri, 24 Jul 2026 00:00:00 GMT

This site now has a <Gallery> component, and it cheats in the best way: the lightbox — click to expand, click outside or press Esc to close, arrows to move between photos — is handled almost entirely by the browser’s native Popover API. Total JavaScript shipped: one ~200-byte snippet.

One photo

A single photo renders full width and keeps its natural aspect ratio. Click it:

Several photos

Multiple photos snap into a grid — click any of them, then use the arrows (or Tab + Enter) to flip through:

How it works

Each thumbnail is a <button popovertarget="photo-3">, and each full-size photo is a <div popover>. The browser does the rest: open on click, light dismiss, focus handling. The prev/next arrows are just buttons targeting the neighboring photo’s popover. The fade-in is CSS @starting-style, and the images themselves are resized and converted to modern formats at build time by Astro.

The one place the browser needs help: when you open photo 2 from inside photo 1, the Popover API considers photo 1 an ancestor and stacks the two instead of swapping them. A tiny script listens for beforetoggle and closes the previous photo, adds ←/→ navigation, and turns horizontal swipes into prev/next on touch screens — that’s the entire JavaScript budget of this component.

import Gallery from '../../components/Gallery.astro';
import dusk from '../../assets/photos/dusk.jpg';

<Gallery photos={[{ src: dusk, alt: 'Warm gradient at dusk', caption: 'Dusk.' }]} />

Web components in MDX

Wed, 22 Jul 2026 00:00:00 GMT

Most of this site ships zero JavaScript — Astro renders everything to static HTML. But when a post needs interactivity, web components are a perfect fit: they’re just HTML tags with behavior attached, no framework runtime required. Here are two in action.

A home-made component: `<star-rating>`

This one is defined in about seventy lines of vanilla TypeScript in src/scripts/star-rating.ts — shadow DOM, keyboard-accessible buttons, and a custom event when the rating changes. Click a star:

Using it in a post is one import and one tag:

import StarRating from '../../components/StarRating.astro';

<StarRating value={3} />

An imported component: `<lite-youtube>`

lite-youtube by Justin Ribeiro renders a YouTube embed as a static thumbnail and only loads the real iframe (and its ~1 MB of YouTube JavaScript) when you press play. Same one-tag usage:

import YouTube from '../../components/YouTube.astro';

<YouTube videoid="dQw4w9WgXcQ" videotitle="A very important video" />

Why wrap them in `.astro` components?

Both tags are wrapped in tiny Astro components (src/components/) whose <script> block imports the element definition. Astro bundles and dedupes those scripts automatically — use ten ratings on a page and the definition still loads once. The pattern for adding any future web component is the same three steps: install (or write) it, wrap it, import it in your post.

Hello, world

Mon, 20 Jul 2026 00:00:00 GMT

Welcome! This site is built with Astro and styled with Pico CSS. Posts are written in MDX, which means normal Markdown works everywhere, and components can be sprinkled in when a post needs something interactive.

Everything you’d expect from Markdown

Lists, links, and emphasis all work. So do blockquotes:

The cheapest, fastest, and most reliable components are those that aren’t there. — Gordon Bell

And tables:

Thing	Why it’s here
Astro	Static output, zero JS by default
Pico CSS	Beautiful semantic HTML, no classes
MDX	Markdown plus components

Code blocks are syntax-highlighted at build time with Shiki, so highlighting costs nothing at runtime and adapts to light and dark mode:

const posts = await getCollection('blog');
const latest = posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

Writing a new post

Add a file to src/content/blog/ with a small frontmatter block — title, description, date — and start writing. That’s the whole workflow.

Design & Hack

I think this is working now

Is brid.gy working? Not sure...

A cross-posting test

Five lessons from building this site

The platform keeps catching up

Semantic HTML is a design system

Steal palettes from the physical world

Ship less, load faster

Write it down

A note on static maps

Photo galleries with zero JavaScript

One photo

Several photos

How it works

Web components in MDX

A home-made component: <star-rating>

An imported component: <lite-youtube>

Why wrap them in .astro components?

Hello, world

Everything you’d expect from Markdown

Writing a new post

A home-made component: `<star-rating>`

An imported component: `<lite-youtube>`

Why wrap them in `.astro` components?