Using the CSS rotate function without the jitter
A walk through the CSS rotate function: the syntax and angle units, why transform-origin trips people up, independent transform properties, and how to stop rotations from jittering on the main thread.
Tag: Accessibility
How to give WooCommerce design feedback on X
The WooCommerce design team joined X to gather feedback on product variations and order pages. Here is why technical input from developers and agencies matters before these core UI changes ship.
System tool UX: making maintenance software worth using
Utility software gets designed to be invisible, which is why people resent it. Linear, Vercel and MacPaw treat the maintenance layer as something a person actually sits through, and it shows.
Why your CSS saturate() filters look bad
Saturation is a correction tool, not a volume knob. How CSS saturate() actually paints, why the order you chain filters in changes the result, and the stacking context backdrop-filter quietly creates.
WordPress E2E tests with Playwright and wp-env
Manual regression testing was my bottleneck, so I automated it. This covers wp-env setup, Playwright with the WordPress test utils, and testing block variations and meta bindings without clicking through the editor.
Using the CSS contrast() filter in WordPress themes
Notes on using the CSS contrast() filter in WordPress themes: how the RGB math works, why it beats a black overlay on hero images, a 125% hover fix for washed out product cards, and where filters get expensive.
The CSS hypot function: distance math without JavaScript
CSS has a hypot() function that does Pythagorean distance math and, unlike pow(), accepts units like px and rem. I cover what it returns, a cursor-proximity example using container style queries, and the edge cases worth knowing.
Fixed-height cards break the moment content changes
Fixed-height cards look tidy in a mockup and fall apart when an editor doubles the copy or a translation runs long. I go through what breaks, and how Flexbox and intrinsic sizing hold the same grid together without hard-coded heights.
Streaming content interfaces that don’t fight the user
Appending text to a container is the easy part. This post covers the scroll flag that stops snap-back, batching renders to keep layout shift down, ARIA live regions for screen readers, and cleaning up after a broken stream.
CSS contrast-color(): let the browser pick readable text
The CSS contrast-color() function returns black or white text for whatever background color a user picks. How the syntax works, why the @supports fallback still matters, and the cases it does not cover.