Blog.
Responsive type scales with composable CSS utilities
With the help of calc(), clamp() and CSS vars, we can create composable, responsive, and fluid type scales that smoothly adapts to viewport and container widths.
Hiding empty elements with CSS :empty and :has()
You might be used to toggling classes on elements to handle state styles. What if we could just write CSS that reflected the state of the DOM?
Selecting previous siblings with CSS :has()
Selecting a previous sibling was for long impossible, but is now a breeze with the has() pseudo-class
A brief introduction to A/B-testing
Learn how to use A/B-testing as a guiding compass for making product decisions, and how to avoid its pitfalls
Chaining styles with a JavaScript Proxy
If you miss method chaining from Ruby or jQuery when working with styles in JavaScript, you can recreate the pattern with a few lines of code
Smoother & sharper shadows with layered box-shadows
With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects
Cheat sheet for moving from jQuery to vanilla JavaScript
This reference guide will help you convert jQuery's most common patterns to vanilla JavaScript
Breaking to a new row with flexbox
You can break to a new flexbox row or column without setting the size of an item: add a collapsed flex item between two flex items
Read all posts
I write about design, CSS, animation, and the projects that are keeping me busy.
