Frontend
Interfaces, design systems and the front-end craft that survives past the first sprint.
An Icon System a CMS Can Author
Inline SVG keyed on the class strings a CMS already stores, a missing icon that renders nothing, and the script that stops paths being pasted by hand.
Scroll-Stacking Cards That Do Not Reverse on Mobile
A sticky cascade needs more height than a phone has, so the last cards pin above their own resting position and the effect silently runs backwards.
The Table of Contents That Points at Nothing
Two slugifiers agree on most headings and disagree on the ones with punctuation. One function, used by both the renderer and the contents list.
Structuring Tokens So Dark Mode Is Possible Later
Semantic tokens over literal ones, the two-layer split that makes a second theme a data change, and an honest case for not shipping dark mode at all.
Forms That Work Without a Framework
Labels, error announcement, autocomplete and the keyboard a phone shows — the plain HTML most form libraries reimplement badly.
Stop Stacking Cards One Per Row on Mobile
Two-up grids on a 375px screen, the CSS that handles an odd card, and why a page 26 screens long is a design problem rather than a content one.
Writing Your Own Portable Text Renderer
Portable Text stores each list item as a sibling, so naive rendering gives one list per bullet. That and four other things the format does not tell you.
Why 100vh Puts Your CTA Underneath the Nav
svh, dvh and lvh explained by what breaks, plus the fixed bottom bar that no viewport unit knows about and the shorter lede a phone actually needs.
A Design System Small Enough That People Use It
Tokens, four primitives and a rule about inline styles. What to build, what to skip, and the signs a system has quietly stopped being used.
Killing Every Third-Party CSS Request
Two render-blocking hops to other people's servers, removed. Self-hosted fonts with the right preload, and icons as inline SVG instead of a webfont.
The Contrast Audit That Found 300 Failing Elements
One grey token failed AA across an entire site. How to find that, why the same grey passes on white and fails on a panel, and how to stop it recurring.
A Fluid Spacing Scale That Replaces Ten Breakpoints
One clamp per step instead of a media query per component — plus the self-referential custom property that silently flattens a whole stylesheet.
Respecting prefers-reduced-motion Properly
The global override that misses half your animations, why animation does not inherit, and how to check a whole site in ten minutes.
GSAP and Lenis Together, Without Breaking Scroll
Smooth scroll and scroll-triggered animation fight over the same number. Wiring them properly, and the accessibility work that is not optional.
Astro Islands: Shipping Interactivity Without Shipping a Framework
Which client directive to use and when, the state problem nobody mentions, and why most islands turn out not to need a framework at all.
Astro or Next.js: Picking by What the Page Has to Do
Not a benchmark. The question is whether your pages are documents or an application — and what it costs when you answer it wrong.