Little late, but better late than never: Checkout the 12 Days of Web! Covering topics such as the Popover API, CSS @scope, new JS array methods, View Transitions and CSS Nesting. There are so many great topics to read about!

The previous Today’s Readings contained a bunch of “year-end wrap-ups”, but some didn’t arrive until after that post published. So DebugBear‘s 2023 In Review: What’s New In Web Performance? gets a space all to itself… :-) Their list covers topics ranging from the upcoming FID > INP transition, to Firefox now reporting LCP, to Safari now supporting 103 Early Hints and fetchpriority, and Chrome now allowing the fist few video frames to be considered for LCP, and more…

That same previous post also mentioned that Scott Jehl helped get responsive video back into Firefox. And now he shows us how to resolve a responsive limitation for videos by using a HTML Web Component.

David Darnes shares a rather clever way to reveal a “back to top” link only after the user has scrolled a bit.

Francesco Vetere shows why isolation: isolate; is the CSS property you didn’t know you needed. Simple and yet so powerful!

Cliff Crocker explains why INP can be worse on mobile, and says “INP for mobile has a *stronger* correlation with business metrics than INP for desktop”…

And so you might want to read Ivailo Hristov‘s Yielding to the Main Thread: How Breaking Up Tasks Can Fix INP article to work on getting those scores down now!

Brecht De Ruyte show us how to create a full-width, CSS-only, scroll-snapping carousel and align it with the page content. Make sure to turn on the “Toggle overlay” when you get down to the final CodePens, they really help with the visual.

Geoff Graham demonstrates how simplly elegant page transitions can be added with next-to-no code! View Transitions FTW!

Sticking with Geoff for a second, anyone that works with performance has surely had to explain test results/scores to someone. And you have also likely had to explain why that someone experienced something different than the test results you reported… Never fun. Well Geoff offers some help with Answering Common Questions About Interpreting Page Speed Reports.

Anyone working in the web needs tools. Without them we would have to hand-crank everything little thing we need to do. Bleh! So Tiny Helpers has tried to help by curating a list of seemingly every single tool that anyone has ever created for anything. Luckily there are categories for things like accessibility, animations, favicons, performance, and much, much more.

TIL that JSON.parse has an optional callback… Technically, a reviver (???), but in reality something that can be used like a filter/mapper as the JSON is parsed… Wow.

One of the more exciting, but not-yet-ready-for-prime-time CSS APIs coming down the pipe is the Scroll-Driven Animations! In Roman Komarov‘s article, Scroll-Driven State Transfer, he shows us how to “transfer the state of one element to a completely different place on a page by connecting them with a unique identifier in CSS via a timeline-scope”. Wow, that’s a mouthful, maybe best to let the full article do the talking…

And speaking of scroll-driven animation, Kevin Powell provides a really great intro, starting with a simple scroll-watcher (one of those progress bars at the top of the browser that tells the reader how far they have scrolled), works through image fade-ins, horizontally scrolling content based on vertical scrolling, a sort of parallax effect (including using @supports (animation-timeline) to prevent issues where scroll-driven animations break things in unsupported browsers), and is sure to point out that, as with all animations, these should all be within a @media (prefers-reduced-motion: no-preference) block. At the end, he also covers browser support (currently Chromium-only), highlights a polyfill if you really need it, but also points out that this is a really awesome progressive enhancement.

Sticking with Kevin for one more video, here he presents a very clever approach to reduce repetitive, chained CSS selectors by using locally-scoped “pseudo-private custom properties” (acknowledging Lea Verou for the naming). This approach does make your code slightly less readable / harder to maintain, but the naming convention should help (if you can remember why you were doing it…).

And sticking with Kevin for one more video, here he demonstrates how AI can be a fantastic time-saver. He even demonstrates how to pull files from Figma in to get things started! Amaze-balls!!

And finally, what the heck, let’s wrap this up with yet another Kevin Powell video, but this time he interviews the mighty Ben Evans, who you might know from his seemingly-impossible CSS-only feats. The interview starts with the obvious question of “What’s the point?” which is initially answered with the equally-obvious “It’s pointless”, but then eventually followed-up with the somewhat-less-obvious “Because you can’t master something without knowing it’s limits”… Powerful concept, powerful CSS, lots to learn…

Happy reading,
Atg

Top⇪