The Quiet Power of Plain HTML Forms
Native form elements have decades of accessibility, autofill, and platform integration baked in. A custom div-and-JavaScript dropdown rarely improves on <select> when measure…
Read article →
chris
Website →Available for work
Interested in working together? Let's talk.
Designing With prefers-reduced-motion
About 5% of users have prefers-reduced-motion set — vestibular disorders, headaches, or just a preference for calmer interfaces. Respect it.The CSS pattern: @media (prefers-reduced…
Read article →Search That Feels Instant
Three rules: debounce keystrokes, cancel in-flight requests, render results progressively. Together they make a slow backend feel responsive.The minimum debounce that still feels i…
Read article →Buttons vs Links: The Five-Second Rule
If the control navigates to a URL, use an anchor. If the control performs an action, use a button. Get this right and middle-click, copy-link,…
Read article →Core Web Vitals in 2026
The three Core Web Vitals are LCP (Largest Contentful Paint, ≤2.5s), INP (Interaction to Next Paint, ≤200ms), and CLS (Cumulative Layout Shift, ≤0.1). INP replaced…
Read article →INP Replaces FID — What Changed
FID measured the delay before the browser could start handling the first input. INP measures the round-trip latency of every interaction, then reports the worst…
Read article →CLS Root Causes
The four classic CLS sources: images without explicit dimensions, ads and embeds, dynamically injected content above existing content, and fonts loading after the initial render.Fi…
Read article →AVIF vs WebP for Real Sites
AVIF typically delivers 30–50% smaller files than WebP at the same perceived quality, but encodes much more slowly.The right pattern: serve AVIF if the browser…
Read article →Font Subsetting Saves Real Bytes
A typical web font ships every Latin glyph plus extensive language coverage you do not use. Subsetting to just the characters you render trims it…
Read article →font-display: swap vs optional
font-display: swap shows fallback text immediately, swaps to the web font when ready. The cost is a visible swap on slow connections.font-display: optional gives the…
Read article →