Playground Blueprints: theme demos that run in the browser
A Blueprint turns a bare Playground instance into a real theme demo. Here is the WXR export, the GitHub media swap and the blueprint.json steps that get you there.
Tag: Block Themes
January 2026 wallpapers: a clean desktop to start the year
A new year is a decent excuse to refactor your desktop. Three picks from the January 2026 wallpaper collection, plus the CSS I use when an image like that becomes a hero background.
Learning WordPress without burning out
The WordPress ecosystem ships faster than anyone can absorb it. After 14 years I scan most of it and go deep on very little. Here is how I set stopping points so that keeping up does not turn into burnout.
Component variants beat a pile of CSS variables
Twenty near-identical buttons in one design file cost me three hours per border-radius tweak. Component variants in Penpot fixed that, and DTCG tokens made the handoff to CSS boring, which is exactly what you want.
Animate SVG symbols with CSS custom properties
Seven avatars from one SVG symbol, each with its own animation. The CSS cascade dies at the Shadow DOM, but custom properties pass straight through it, which is how one symbol ends up blinking and tapping at a different rate per instance.
Real-time dashboards that people can actually read
A fleet dashboard flashed so hard that a broken-down truck went unnoticed for twenty minutes. Faster polling made it worse. What helped: delta indicators, sparklines, skeleton screens, an honest last-sync label and ARIA live regions.
Adaptive SVGs with symbols instead of duplicate files
A hero illustration that looked right at 16:9 and collapsed on mobile. Instead of shipping two SVG files, I moved the artwork into a hidden symbol library and referenced it from two wrappers with different viewBox values, then animated the use elements.
Using CSS cascade layers on a legacy stylesheet
I inherited a landing page with 450 lines of IDs, duplicate selectors and !important flags everywhere. Notes on moving it onto cascade layers: the five-layer order I settled on, where media queries belong, and why !important inverts layer priority.
The SVG animation workflow that fixed my stiff UI
I spent three hours hand-coding cubic-bezier keyframes for a WooCommerce build and the bounce still felt stiff. A spring-based SVG animation workflow with SMIL exports got it right and kept the animation inside the asset.
Circular avatar lists that space themselves with modern CSS
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.