Newsletter #40 - Cascade Layers, Better Gradients, and Better Teachers
We're touching on Cascade Layers, Josh Comeau's tool for creating beautiful gradients, a gorgeous 3D IKEA experience, and lots more.
Saddle up, because it's time to ride!
Articles & Videos
CSS Cascade Layers: An overview of the new @layer and layer() CSS primitives — www.youtube.com
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? — css-tricks.com
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 — www.joshwcomeau.com
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 — www.family.ikea.es
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.
Building Consistent UIs with Open Props w/ Adam Argyle! — www.youtube.com
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 — www.youtube.com
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 — www.youtube.com
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.
Making a Fish Swim with Three.js! — frontend.horse
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!
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.
Go Make Things - Vanilla JS — gomakethings.com A simpler, more resilient way to make things for the web.
Another one of those teachers is Kevin Powell, who specializes in CSS in a friendly, approachable way.
Kevin Powell — www.youtube.com
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.
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.netlify.app
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.app
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.
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 — www.focusmate.com
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 — www.centered.app
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.