Scroll-driven corner-shape animations in Chrome 139+
The CSS corner-shape property paired with a scroll timeline, using superellipse() exponents instead of keywords, plus the isolation fix for mix-blend-mode breaking your stacking context.
Category: Front-end
Why dropdowns get clipped in scrollable containers
Overflow clipping and stacking contexts, not z-index, are what break action menus inside scrollable tables. Portals, CSS anchor positioning and the Popover API each solve a different part of the problem.
Emotion in Flow: when delight breaks the user’s trust
Adding delight everywhere backfires. This post compares how anime handles a tonal shift against the Marvel background-gag habit, then covers Don Norman’s three levels and the microinteractions that hold a flow together.
Styling a native select with the Customizable Select API
Chromium made the native select element styleable. This walks through appearance: base-select, the ::picker pseudo-element, sibling-index() for per-option maths, and the anchor positioning that makes a radial picker possible, without giving up keyboard support.
Modern CSS features that replaced my JavaScript hacks
A pass through the CSS landing in browsers now: random() and random-item(), clip-path folded corners, the containing-block catch in anchor positioning, and tabular-nums for WooCommerce dashboards that refuse to sit still.
Replacing Moment.js with the native JS Temporal API
Moment.js is in maintenance mode and still costs you bundle size. The JS Temporal API is native, immutable and Stage 4, so this walks through creating dates, arithmetic, Intl formatting and a time zone refactor in a WooCommerce extension.
Why SmashingConf Amsterdam is on my list for April 2026
SmashingConf Amsterdam runs in April 2026 at the Pathé Tuschinski. What pulled me in is the live-work format: speakers working through CSS and accessibility problems on stage instead of walking an audience through finished slides.
CSS corner-shape: bevels and scoops without clip-path
Chromium ships corner-shape, so beveled and scooped corners no longer need clip-path or SVG masks. What each value does, how it pairs with border-radius, and how to ship it behind @supports while Firefox and Safari get plain rounded corners.
Scalable z-index values without magic numbers
Magic numbers like z-index: 99999 are guesses. How I set up z-index tokens in CSS variables, pair a modal with its backdrop using calc(), and use isolation to keep a component’s layering inside the component.
Dynamic forms in React: schema or component logic
RHF and Zod handle flat CRUD forms well, but branching logic leaks across the schema, the state and the JSX. Where SurveyJS keeps those rules instead, and how to pick between the two.