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.
Tag: Accessibility
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.
Streaming UI stability: fixing scroll jumps and layout shifts
Streaming interfaces jump around and drag the scrollbar back to the bottom. What fixes it: tracking whether the user scrolled away, batching renders into the animation frame, and marking the container up as an ARIA log region.
Polyfilling the ::nth-letter selector with a JavaScript shim
The ::nth-letter selector still is not in any browser, and hand-wrapping every character in a span wrecks the DOM. A shim that rewrites the raw CSS into :nth-child and lets SplitText handle the markup and the ARIA.