Links

The `-path` of Least Resistance
There’s a whole layer of CSS that lives just below the surface of most interfaces. It’s not about layout, spacing, or typography. It’s about shape. About cutting through the default boxes and letting your UI move in new directions. This series is all about one such family of features, the kind that doesn’t just style your layout but gives you entirely new ways to shape, animate, and express your interface.
Rolling the Dice with CSS random()
Random functions in programming languages are amazing. You can use them to generate variations, to make things feel spontaneous and fresh. Until now there was no way to create a random number in CSS. Now, the
random()
function is on its way. You’ll be able to create a random animation delay, layout content at a random place on the screen, create a random color, or anything you want — all without any JavaScript.
The Basics of Anchor Positioning
In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier. Please use Chrome on a desktop or laptop if you want to try the interactive demos. If not, I’ve attached a video for most of the demos.
Visualizing Responsive Typography
There are multiple tools that can help create a fluid font-size calculation for CSS – generally expressed as a
clamp()
function combiningem
(orrem
) withvw
(orvi
) units. But the results are difficult to understand at a glance, so I wanted to visualize what’s going on, and how the various units interact.
The interpolate-size property is a great example of progressive enhancement
When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.
Videos

CSS Custom Functions with @function
If you are excited about
if()
statements coming to CSS, then hold on to your hats, because an even more powerful feature just landed that is an absolute game-changer for writing more organized and dynamic CSS. Let me show you a couple examples for how this works.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.