Newsletter • Issue 40

Cascade Layers, Better Gradients, and Better Teachers

Articles & Videos

CSS Cascade Layers: An overview of the new @layer and layer() CSS primitives CSS Cascade Layers: An overview of the new @layer and layer() CSS

Una Kravets gives a five-minute demo on what Cascade Layers are and how they’ll work. They’ll be a tool to help us with specificity concerns, and they’re coming to browsers soon!

If you want an in-depth read, I love this article from Bramus.

What should someone learn about CSS if they last boned up during CSS3? What should someone learn about CSS if they last boned up during CSS3?

Keeping up with CSS while maintaining your day job can feel Sisyphean. Chris Coyier lists out the nine biggest CSS additions in the past eight years, with helpful instruction on why each item is important.

Make Better, Beautiful Gradients Make Better, Beautiful

Our friend Josh Comeau helps us do away with washed-out and gray gradients by switching from RGB to something more color-friendly like HCL. The article explains why it’s needed, and the generator is the tool you’ll use to build your gradients from now on.


The IKEA Family universe The IKEA Family

This is a really beautifully made 3D experience made around IKEA customers. I really love when sites are able to combine 3D on the page with pre-rendered videos in a seamless experience.

Note: Like many ‘web experiences,’ this site seems to fail with accessibility basics like keyboard navigation. Sharing this primarily for the visuals and clever use of personalization.

Past Shows

Building Consistent UIs with Open Props w/ Adam Argyle! Building Consistent UIs with Open Props w/ Adam Argyle!

Open Props provides us with a lightweight baseline of web design tokens that we can use to craft consistent components in any framework. Its creator Adam Argyle stopped by to show us how helpful its CSS Custom Properties are.

At this point, I’m beating a dead horse, but I’m loving Open Props. I want to infuse it into all past and future projects. It’s just so good.

Build Sites Faster with Next.js and Prismic Slice Machine w/ Dan Spratling Build Sites Faster with Next.js and Prismic Slice Machine w/ Dan

Dan Spratling showed us how he uses Prismic Slice Machine with Next.js to quickly build high-quality sites at his agency. He provides us with the exact boilerplate that helps him get sites up and running, and the workflow that helps him iterate on components for his clients.

Simulating and Animating Fur with Three.js w/ Louis Hoebregts Simulating and Animating Fur with Three.js w/ Louis

Louis Hoebregts (Mamboleoo) came back to teach us how to simulate and animate fur on a 3d model! There were so many great techniques and tricks to this episode, where we created our own version of his Neon Fox Codepen. It’s always a treat when Louis stops by.

Upcoming Shows

Making a Fish Swim with Three.js! Making a Fish Swim with Three.js!

On Tuesday, David Fitzgibbon will show us how to animate objects along a path, by bringing a 3D model of a fish to life with a fun swimming animation.

David recently joined the Discord, and it’s already been great having him as part of the community. I’m excited to learn from him tomorrow!

Frontend Teachers

When it comes to learning web development, the quality of your educators is important. Not only will a good teacher help you learn quicker, but you’ll avoid frustration and burnout when complex topics are made simple.


One of those teachers is Chris Ferdinandi, who covers vanilla JavaScript in depth. His newsletter is incredibly high quality, and I’ve relied on his helpful blog posts for years now.

Go Make Things - Vanilla JS Go Make Things - Vanilla A simpler, more resilient way to make things for the web.

Chris joined us on the stream to teach us how to build a JavaScript library from scratch, and his deep knowledge and teaching style made it a great learning experience.


Another one of those teachers is Kevin Powell, who specializes in CSS in a friendly, approachable way.

Kevin Powell Kevin

Helping you learn how to make the web, and make it look good while you’re at it.

We’ve had Kevin on twice now, once for CSS SubGrid, and again for the holiday show to see into the future of CSS.

Frontend Resources

The State of JavaScript Survey The State of JavaScript

The annual survey of the JavaScript ecosystem.

This one is extra cool because Frontend Horse makes an appearance as a survey option! Would greatly appreciate your vote ♥.

CSS Speedrun | Test your CSS Skills CSS Speedrun | Test your CSS

A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible.

Don’t take your time as an indicator of your skills, it’s just for fun.

Shared by our pal Dom in the Discord.

DevToys - A Swiss Army knife for developers DevToys - A Swiss Army knife for

DevToys is a Swiss Army knife for developers for Windows. DevToys helps in daily tasks like formatting JSON, comparing text, testing RegExp. No need to use many untruthful websites to do simple tasks with your data.

Shared by our friend Leif in the Discord.

Productivity Resources

Even though I’ve been working from home now for almost two years, I still struggle with routinely focusing on my own. To help, I’ve been leveraging a couple tools you might find useful.

Focusmate - Where life gets done, together Focusmate - Where life gets done,

Work in 50-minute sessions with a live accountability buddy. You schedule your work block, the app pairs you with someone else, you say your goals for the session, and you both get to it, working silently on camera until the end.

It’s been the single most impactful tool on my productivity since the pandemic began.

Centered - Get Your Life Back Centered - Get Your Life

If the mandatory ‘on camera’ aspect of FocusMate seems a bit too intense, Centered might be more your speed. When you dip into a Centered session, you see avatars or webcam feeds of others working at the same time, plus you get a coach that shames you if it detects you’re on a distracting site like Twitter.

So Long, Partner

That’s it for this week. Let me know which bits you enjoyed or found helpful, or just what you’ve been learning! I love when this newsletter can act more like a conversation.

Your neigh-bor,