The hypot() function takes a list of values and returns the square root of the sum of their squares. .hypotenuse { width: hypot(30vmin, 40vmin); /* 50vmin */ } Most of the time, we’ll pass it two arguments: hypot(A, B). Think of it like a way to complete the Pythagorean theorem where we give Read more…
Managing state in CSS is not exactly the most obvious thing in the world, and to be honest, it is not always the best choice either. If an interaction carries business logic, needs persistence, depends on data, or has to coordinate multiple moving parts, JavaScript is usually the right tool Read more…
View transitions are really, really neat. Not only that, but they’re starting to pop up everywhere. I’m sure you’re like me and have come across more than a few in the wild that both make you go wow and want to instantly use them on your own site or project. Read more…
A date range selector lets users pick a time frame between a start and end date, which is useful in booking trips, sorting info by date blocks, picking time slots, and planning schedules. Example pulled from Airbnb I’m going to show you an example where, even though JavaScript is involved, Read more…
The CSS saturate() function increases or decreases an element’s color saturation level, or in other words, the intensity of the element’s color. The saturate() is used alongside the filter or backdrop-filter properties. img { filter: saturate(200%); } CodePen Embed Fallback The CSS saturate() function is defined in the Filter Effects Module Level 1 specification. Syntax The saturate() function’s formal syntax is given as: <saturate()> Read more…
The CSS justify-self property aligns an individual element, overriding its parent container’s justify-items value. .container { display: grid; grid-template-columns: 2fr 1fr; justify-items: center; /* overrides this value */ } .item:nth-child(1) { justify-self: start; } .item:nth-child(2) { justify-self: center; } .item:nth-child(3) { justify-self: end; } .item:nth-child(4) { justify-self: stretch; } CodePen Embed Fallback Although justify-self works Read more…
A lot has happened in CSS in the last few years, but there’s nothing we needed less than the upcoming Olfactive API. Now, I know what you’re going to say, expanding the web in a more immersive way is a good thing, and in general I’d agree, but there’s no Read more…
I deployed a contact form that last month that, in my opinion, was well executed. It had all the right semantics, seamless validation, and great keyboard support. You know, all of the features you’d want in your portfolio. But… a mere two weeks after deployment, my client called. We lost a Read more…
I’m really interested in this emerging idea that the future of web design is Generative UI Design. We see hints of this already in products, like Figma Sites, that tout being able to create websites on the fly with prompts. Putting aside the clear downsides of shipping half-baked technology as Read more…
Over the last few years, there’s been a lot of talk about and experimentation with scroll-driven animations. It’s a very shiny feature for sure, and as soon as it’s supported in Firefox (without a flag), it’ll be baseline. It’s part of Interop 2026, so that should be relatively soon. Essentially, Read more…
