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 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
An abstract network of connected nodes glowing in blue

Building a Unified Content Pipeline with Next.js and MDX

How a single content registry replaces duplicated per-type data files, cutting the cost of adding new content types from 6+ files to 3.

2 min read