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 funnel filtering and sorting items

Replacing a GitHub Action with 15 Lines of Shell

dorny/paths-filter silently ignored its own config. A 15-line shell case statement replaces it and actually works.

2 min read
Speech bubbles in a conversation

Tooltip aria-describedby Was on the Wrong Element

A Tooltip component passed every test but put aria-describedby on a wrapper div instead of the trigger. Screen readers never announced it.

1 min read
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