Skip to main content

Notes from shipping code

Deep-dives on the problems I've debugged, the patterns I've extracted, and the decisions I'd make differently next time.

Posts
A person filling out a form on a clipboard

Aligning Five Form Components Around aria-describedby

Five form components, five approaches to displaying errors. One aria-describedby pattern turns inconsistency into a shared accessibility contract.

2 min read
A ruler and tape measure for precise measurement

Standardizing a Component Size Scale

A design system with five avatar sizes, no badge size, and three spinner sizes is a design system arguing with itself.

3 min read
A terminal window showing command-line output

A Favicon Pipeline from One SVG

A 64-line bash script turns one SVG into 11 SEO-ready images: favicon.ico, apple-touch-icon, android-chrome, and mstile via rsvg-convert.

2 min read
A smartphone displaying a mobile application interface

Mobile Nav Accessibility: The Bottom Sheet Dialog Pattern

A nav redesign passes code review but fails E2E tests on mobile. Here's what axe caught and how aria-hidden, inert, and proper dialog semantics fixed it.

3 min read
Two puzzle pieces fitting together on a clean surface

Fixing Hydration Mismatches Without Suppressing Them

A three-line useSyncExternalStore hook helps server and client renders agree, no more suppressHydrationWarning.

2 min read
A safety net stretched beneath a high structure

Graceful Degradation for Third-Party Embeds

Adding a timeout-based fallback when a Calendly iframe gets blocked by ad blockers or network issues.

2 min read
A layered architectural structure showing different levels

Z-Index Choreography for a Mobile Bottom Nav

The z-index choreography behind adding a fixed bottom bar without breaking scroll-to-top, table-of-contents, and bottom sheet overlays.

2 min read
Tangled cables forming a circular loop

Why import type Isn't Optional: A Circular Dependency Crash

How a subtle difference between import and import type causes a circular dependency crash in a Turbopack-bundled Next.js app.

2 min read
A spreadsheet displayed on a monitor screen

Making Data Tables Keyboard-Navigable

Adding scope, caption, clickable row keyboard support, and focus-visible to a Table component. The accessibility basics HTML tables need but rarely get.

2 min read
A notification bell icon on a blurred background

Pause-on-Hover: Making Toast Notifications Respect the User

Adding aria-live regions and pause-on-hover to a Toast system. Screen readers and sighted users have conflicting timing needs.

2 min read
A keyboard with illuminated keys in a dark environment

Building an Accessible Dropdown Without a Library

Full ARIA menu semantics and keyboard navigation in ~150 lines of React, no Radix, no Headless UI, just the spec.

3 min read
An open style guide book with color swatches and typography samples

Documenting Design Tokens for Developer Experience

Documenting 100+ theme tokens for a Tailwind CSS 4 component library so developers pick semantic names instead of guessing gray values.

2 min read