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! — frontend.horse 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 — frontend.horse 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 — www.youtube.com
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!
CodePens
A demo made possible by Chrome 105 — codepen.io
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 — codepen.io
An elegant pen from our friend Tom Miller. Use your mouse to draw two paths and lines appear between them.
Resources
useAnimations: Free micro-animations — useanimations.com
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.dev
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.”
Inspiration
Best Version Course Page — unleashingbest.com
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.
Articles
Starting Strong in Developer Relations — trost.codes
I wrote an article for anyone who wants to get into DevRel and start strong.
CSS container queries are finally here — ishadeed.com
For more info about Container Queries, check out this excellent article.
Explore Astro.js with a Quick App — prismic.io
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,
Alex