Newsletter • Issue 69

Container Queries, Parent Selector, & Micro Animations!

Upcoming LiveStreams

We have two excellent shows this week! They’ll both be live over on our Twitch Channel, so make sure you’re subscribed.

Build a Hit Counter with Web Components & Lit! Build a Hit Counter with Web Components & Lit! We’ll learn the basics of Web Components and the Lit framework, then query the Netlify API make a hit counter for our website!

Working with Adult ADHD Working with Adult Chris and Alex will talk about their experience with Adult ADHD, how it affects them, and strategies they use to still get things done.

Last Week’s Stream

Accessibility and Responsiveness with GSAP Accessibility and Responsiveness with

Cassie showed us the new gsap.matchMedia() and we built some really fun demos! It’s a new feature that makes responsive and accessible ‘reduced motion’ animations simple!


A demo made possible by Chrome 105 A demo made possible by Chrome

Chrome’s new version 105 has delivered two huge features: Container Queries and **:has()**.

Container Queries let us write media queries based on containers, rather than just the viewport. People call :has() the “Parent Selector,” letting us style a parent based on its children for the first time.

Check out this excellent demo that combines both new features to show just some of the potential we’ve unlocked.

Note: Right now this will work best in desktop Chrome: it supports both features, and you can change the browser width.

Interpolate Between Paths Interpolate Between

An elegant pen from our friend Tom Miller. Use your mouse to draw two paths and lines appear between them.


useAnimations: Free micro-animations useAnimations: Free

I think a ton of folks are going to use this in their apps.

Quality animations for icons like stars, hearts, bookmarks, trashcans, etc.

SND: Crafted UI sound assets for UX developers SND: Crafted UI sound assets for UX

I always wondered where apps get delightful sound effects for toggles, buttons, and other actions. Well here’s an awesome resource with a few free kits. My personal favorite is “Sine.”


Best Version Course Page Best Version Course

Most course landing pages are all the same: a wall of text and some testimonials. This course page advertising Victor Work’s course on Awwwards is more about the animations and experience than anything else. It’s stunning.


Starting Strong in Developer Relations Starting Strong in Developer

I wrote an article for anyone who wants to get into DevRel and start strong.

CSS container queries are finally here CSS container queries are finally

For more info about Container Queries, check out this excellent article.

Explore Astro.js with a Quick App Explore Astro.js with a Quick

Astro has quickly become my personal favorite framework for building websites, and this is an excellent article by Ben Holmes on the core team.

So long, partner

That’s all for this week; thanks for riding with me!

This upcoming week is going to be excellent. After over two years of writing it, I’ve got my first sponsor for the newsletter. Check the next issue to see who it is and what it’s for!

Until then, have a great week!

Your neigh-bor,