A WooCommerce boutique was choking on JS sliders and a custom select. Swapping them for native CSS selects, scroll-marker carousels and scroll-state queries cut a second off Time to Interactive.
A team page that broke every time someone joined pushed me to rebuild it with sibling-index(), a double rotation transform and trig inside calc(). The ring now spaces itself, cut-out mask included.
A bespoke furniture shop was A/B testing gray buttons against other gray buttons. The fix was per-page color palettes injected from post meta into CSS variables, so the products set the tone instead of the theme.
An 85% churn score with no reason attached is a support ticket waiting to happen. What worked instead: a plain-language because statement, the charts behind a link, and code that maps feature names to words.
A SaaS team had Storybook, Figma tokens and a dedicated Slack channel, and still shipped one-off CSS for every feature. Strict linting made it worse. A contribution bridge is what finally moved them.
One WooCommerce stylesheet had twelve @keyframes definitions for a single fade-in, spelled three different ways. Here is the tokens file that replaced them, and how reduced-motion support fits in at the token level.
Our WooCommerce configurator passed the automated audits and still stopped a screen reader user at step one. Accessible UX research, and Michele A. Williams’ new book on it, is what got us out of the patch-and-move-on habit.
A client’s WooCommerce site shipped a JavaScript bundle whose main job was resizing a textarea. field-sizing does it in one line. Here are the modern CSS features that are baseline now, and the code they let you delete.
Console logging the Gamepad API at 60 frames per second tells you nothing useful. Here is the visual debugger I built instead, with its styles isolated in a CSS cascade layer so they stop fighting the theme.
CSS still has no :nth-letter selector, so letter-by-letter text effects mean splitting a header into spans, which screen readers then read out one letter at a time. Here is the ARIA markup and the PHP helper that avoid that.