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 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
Three identical geometric shapes casting different shadows

The Rule of Three in Design Systems

When to extract a repeated pattern into a shared abstraction, and when to leave it inline. A framework from auditing portfolio typography.

3 min read
Neatly organized files in a filing cabinet

ESLint Import Ordering for Monorepos: Taming 77 Violations

Setting up import/order with custom path groups for monorepo aliases, fixing ESLint 10 compatibility, and auto-fixing 77 violations across the codebase.

2 min read
A close-up of a keyboard with a glowing focus indicator

Removing focus-trap-react: Native Focus Management in Modals

Replacing a 15KB focus-trap dependency with native dialog behavior and manual focus management drops bundle size and simplifies the shared-ui library.

1 min read
Wooden letterpress type blocks arranged in rows

Building a Typography System for a Next.js Design System

Auditing three competing heading systems and consolidating them into a variant-based Heading/Text API that serves as a single typography source of truth.

1 min read
Colorful interlocking puzzle pieces on a white surface

Composing React Providers Without the Nesting Nightmare

A functional composition pattern that turns deeply nested provider trees into a flat, readable list. Includes automatic React DevTools display names.

2 min read
Neatly organized colorful building blocks arranged in a grid pattern

From Wrapper Hell to One Source of Truth

Promoting kit wrappers into a shared-ui library with typography variants and layout primitives eliminates 2,000 lines of duplication.

3 min read
A monitor displaying lines of code in a dark editor

Automating Visual Regression Testing in GitHub Actions

A CI pipeline catches visual regressions with Playwright screenshots, auto-updates baselines via workflow dispatch, and re-triggers itself with a PAT.

3 min read
A clean desk with an open notebook showing a table of contents

Building an Auto-Generated Table of Contents with Scroll Spy

Extracting headings from rendered MDX, tracking reading position with IntersectionObserver, and adapting between a sticky sidebar and a mobile bottom sheet.

3 min read