A single HTML `progress` element can have quite an elaborate design with custom colors, a tooltip showing the active %, and even an entrance animation.
You can give a name (“custom ident”) to any scrolling element’s “timeline”, have a parent element pick it up, then have any other element use it for their own animation timeline. It’s a trip!
jQuery for was great and all, but Alpine.js simplifies tasks like data binding and DOM manipulation, providing using a more declarative and clear structure, making it ideal for smaller projects.
Learn how Interaction to Next Paint (INP) measures web interactivity, why it matters for user experience and SEO, and practical strategies to keep your site feeling fast and responsive.
If you give a scroll or view timeline a –custom-ident name, then any descendent can “listen” to that timeline and base @keyframe animations off of it.
A rather exceptional CSS trick discovered by Roman Komarov that uses scroll driven animations to resize lines of text to fit exactly to their container.
If you’re creating a scroll-driven animation and the goal is “when the page is scrolling through this general section, animate the children” it’s probably going to involve passing scrolling data through custom properties.
The other day I needed to quickly see pixel dimensions that were exactly in a 9 / 16 aspect ratio. Like: 180 / 320. That’s perfectly in that ratio. You might be able to think of that one in your head, but how about 351 / 624? That’s harder to think of. And I wanted […]
When you use View Transitions on multiple elements, it can be a very nice look to stagger them out a little bit. It’s possible now, but a bit finicky. Let’s take a look at some code, present and future, that will help.
You can keep it chill and just use HTML email to apply a nice typeface, reign in the line length, use real links, and honor dark mode.
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
