Today’s Readings

has updated his Performance Inequality Gap series for 2026. BLUF: It is not good news…

[T]he median mobile page is now 70 times larger than the total storage of the computer that landed men on the moon

offers-up A complete guide to the HTML number input. And, man, is it! Everything from removing the teeny-tiny default up and down arrows from inside input type="number" elements, to adding custom increment/decrement functionality via commandfor and command attributes, to inputmode and step attributes, to localization, validation and more!

shares his Lined Shadow effect. Very cool, subtle. Amazing what can be done with linear-gradient and background-clip!

Sticking with super cool CSS effects, inspired by a couple of really cool text effect examples, notably from and , shows off an amazing 3D image animation using only HTML & CSS. It might seem a little heavy-handed, needing so many HTML elements, but it’s a great effect! (Also, note the animation is all CSS, no JS, until the “controls” are added…)

And sticking with Noah Blon for a second, check out his awesome Hyperspace Pen! Come on, Chewy, time to go home! All with one image, a few transforms and a few keyframes… CSS is amazing, as are the people that figure out how to wield it like a lightsaber!

runs through three different vibe-coding experiments with GitHub’s Copilot (YouTube). The first couple of tasks were pretty light, Copilot successfully studied the prompts, and created a quite faithful PRs, including thorough explanations of the changes it made, and screenshots of the before and after states. Awesome! For the third request, which was a but more ambitious, Copilot didn’t quite create the requested effect, but Addy seemed happy with what it did create. Anyhow, quite powerful stuff!

Following up an Addy article with a DevTools article seems appropriate, so here is with part 1 of things you might not know about Chrome’s DevTools. The monitor function was new to me! Which also led me to monitor events, as well as several other parts of the Console Utilities API! Good stuff! Can’t wait for part 2! And while I was busily writing this post, Rachel cranked-out part 2! This part covers contentEditable, the Recorder tab and throttling specific URLs.

builds a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). Nils starts the article by saying that Timetables are one of those components that look simple… I could not disagree more… This is a big undertaking, trying to figure out how to align elements, including the overlapping times, etc. Great walk-through!

‘s CodePen CSS view() for carousel introduced me to a new CSS property, view(). As I write this, it is still Limited Availability (not yet in Firefox), but cool nonetheless!

live-streams Animating the Re-Ordering of a List with View Transitions (YouTube). I so love watching someone walk through their “thinking” as they’re doing stuff… (Also very comforting to see someone as smart as Chris tripping and finding his way through inventing…)

Two Project Baseline items:

  1. ESLint Plugin for Baseline JavaScript: A plugin that flags usage that exceeds your chosen Baseline threshold.
  2. Baseline Status for Video: A handy tool that will let you easily show Baseline Status in your videos.

has come out with a super handy JS script called Obs.js that reads a handful of browser signals to infer a device’s capability. Things like connection strength and battery status are tracked and the revealed as CSS classes on the html element and as a JS property, window.obs. This could also be super helpful info to send back to your RUM provider to help fine-tune your audience!

Back in October I mentioned ‘s 3-part series on Anchor Positioning. Apparently I was a little premature, because Part 4 just dropped, this time adding a stretchy behavior when the tooltip gets closer to the edges!

And finally, who didn’t love playing with a Slinky when they were a kid??? Well, thanks to , you can play with one again today, only via CSS

Happy reading,
Atg

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)