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

Tangled wires and messy cables

Phantom Dependencies: What pnpm Strict Mode Reveals

Migrating from Yarn Classic to pnpm exposes dependencies that worked by accident, not by declaration.

3 min read
An hourglass with sand flowing through it

An 8-Second Timeout for Third-Party Iframes

An iframe that never loads looks like a broken page. An 8-second timeout and a direct booking link keep users moving instead of staring.

2 min read
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.

3 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