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 — 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.
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.
Inspiration
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.
Past Shows
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.
Upcoming Shows
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.
JavaScript
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 — gomakethings.com 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.
CSS
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.
Frontend Resources
The State of JavaScript Survey — stateofjs.com
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.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.
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 — 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.
Your neigh-bor,
Alex