Links

Time Travel with JavaScript
In today's issue, I want to show you how to time travel — with JavaScript. OK, it might not be "Doc Brown" levels of time travel. But it's a powerful animation trick that feels like magic when the opportunity arises to use it. We're gonna build a 3D split flap display.
Rounded triangular boxes in CSS/SVG
In the Motorway brand refresh, I had to build a lot of rounded rectangular & triangular shapes (I don’t know what they’re officially called), and got quite good and understanding the pro’s and con’s of each approach. Depending on your use-case, there’s a few possible options available to you.
The Lost CSS Tricks of Cohost.org
In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.
Quick and Dirty Colour Palettes using color-mix()
Learn how to use CSS
color-mix()
to create tints, shades, opacity variants, and even dynamic palettes for your projects. From simple setups to advanced techniques, this guide explores how to enhance your design system and streamline theming with modern CSS tools.
Polishing your typography with line height units
Learn how to use line-height units when setting paragraph margins — creating vertical rhythm in your text.
Videos

How to set max-columns using auto-fit or auto-fill
It takes a little bit of work, but we can relatively easily take control of CSS Grid’s auto-fit (or auto-fill) by using a
calc()
to help set an upper limit on how many columns it creates.
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.