Writing
Articles
Notes on React, Next.js, modern CSS, and the parts of front-end work that are easy to miss.
18 articles
What Web Design Actually Looks Like in Late 2026
Which trends made it into production this year, which are still stuck on award sites, and the CSS that separates the two.
CSS Subgrid: When Nested Layouts Finally Line Up
Subgrid lets a nested element share its parent's tracks. Where that saves markup, where the model bends, and what the fallback costs.
Better Headlines Without JavaScript: text-wrap: balance and pretty
Two CSS declarations that fix stranded headline words and orphaned paragraph endings. When each one helps, and when it makes things worse.
View Transitions: Animate Between Pages Without an Animation Library
How the View Transitions API works, what the pseudo-elements give you, and the two mistakes that make it look broken.
Stop Hand-Picking Shades: color-mix() and Relative Colors
Derive hover states, borders and a whole palette from one brand colour in CSS, so a theme change stops being an afternoon of colour picking.
Animating height: auto Is Finally Possible
interpolate-size and calc-size() remove the oldest hack in CSS. How they work, where they still fall short, and the fallback I keep using.
useDeferredValue: Keep Slow Lists Feeling Instant
What useDeferredValue actually defers, why it needs memoised children to do anything, and where a debounce is still the right tool.
CSS Superpower: Unlocking the Magic of Container Queries
Components that respond to the space they sit in rather than the viewport, and the one declaration people forget to add.
A Fun CSS Fact: Meet the Magic of clamp()
One declaration instead of three breakpoints for type sizes, plus the viewport-unit catch that bites in narrow sidebars.
Native CSS Nesting Is Here: Ditch the Preprocessor
Native CSS nesting works in every current browser. The syntax, the `&` rules, and what still needs a preprocessor.
React 19 Hooks You Should Be Using in Next.js
useOptimistic, use(), useFormStatus and useActionState, with the placement rules and argument order that are easy to get wrong.
CSS :has() — The Parent Selector That Changes Everything
Conditional styling based on descendants, siblings and form state, with the performance caveats that actually matter.
CSS Logical Properties: Write Once, Support Every Writing Direction
Logical properties replace left, right, top and bottom with rules that follow the writing direction, which is what RTL support actually needs.
Stop Using HEX Colors: A Practical Guide to oklch()
Perceptually even colour, predictable lightness steps, wide-gamut output, and the contrast caveat that usually goes unmentioned.
React Server Components: The Mental Model That Makes It Click
What `"use client"` actually marks, how server data reaches client components, and the serialization rule behind most RSC errors.
CSS Scroll-Driven Animations: No JavaScript Required
Scroll-linked animation in CSS only, from progress bars to parallax, plus the jank that scaleX and a careless animation-range cause.
CSS @property: Typed Custom Properties That Actually Animate
Typed custom properties make gradients and other complex values animatable, and give design tokens an actual type.
CSS Anchor Positioning: No More JavaScript Tooltips
Attach a tooltip or dropdown to another element in CSS, with fallback positions when the preferred side has no room.