The previous installment of Today’s Reading talked quite a bit about RSS feeds and the harm being caused to the web by our content being disseminated primarily via social networks. Interesting to see people now becoming very interest (once again) in publishing & hosting their own content (via things like, you know, blogs). Also very interesting to see things like sections for “links” taking off again, as sort of “localized social networks”. I remember when we all used to have a Links section to our websites that linked to all the cool people we knew, liked, followed and recommended around the web… :-)

The great Sara Soueidan very kindly shares Accessible notifications with ARIA Live Regions (Part 1) and Accessible notifications with ARIA Live Regions (Part 2) from her 38-chapter Practical Accessibility video course because she want “an extensive guide to ARIA live regions to be publicly available to everyone in the community”. Again, very kind…

And the also great Ahmad Shadeed writes about Designing better target sizes. Naturally, it depends on the device, so read through and get your sizes straight!

And once you think you have everything sussed-out, let your pal pa11y run accessibility tests on your pages via the command line or Node.js.

And now considering the amount of time and energy that I have put into religiously creating abbr elements with title attributes for all of the abbreviations I write in this blog, Adrian Roselli‘s article about the lack of support/response browsers and accessibility give them is quite deflating… :-/

Sticking with Adrian, he also offers his approach for how to embed YouTube videos, code examples and slides into a webpage. Nice, thorough code examples and explanations!

remoteStorage is a super helpful library to help sync data across devices and browsers for a specific user. You would still be responsible for identifying the user across devices and browsers, such as when they login, but then you could update their preferences or settings, shopping carts, etc., via the remoteStorage library.

Adam Argyle offers a very entertaining Bouncy image radio group. Fun stuff!

Sticking with Adam, he also offers a slick Bento-style grid animation using :has(), @container, and View Transitions.

Okay, just one more from Adam, this time his Practical Introduction to Scroll-Driven Animations with CSS scroll() and view(). Crazy what we can do with just CSS / no JS now-days! And sad that it is all still just Chrome… :-/

More CSS fun, this time with Temani Afif and The Complex But Awesome CSS border-image Property.

Paul Lewis walks us through a browser’s render process and how we can optimize each step toward a better Interaction to Next Paint (INP).

Toward that same end, Behrouz Pooladrak introduces us to the Long Animation Frames API.

And a bit more detailed, the good folks at DebugBear provide the detailed How To Improve INP With Chrome DevTools. Time to roll up your sleeves!

Something I have been harping on since the very first client-side rendering model came out: Sending HTML is Always Faster.

I did not know this…

<ol> element has `start` and `reversed` attributes!
Where it can be useful:
`start` → paginated results
`reversed` → “top 10 best … ” lists

– Stackblitz, Twitter

Continuing to prove one of the most powerful CSS selectors, did you know that the :has() selector can select elements based on meta and script tags and their attributes? So powerful, using something like these examples:

head:has(meta[property="article:tag"][content="DuckTales"]) ~ body article {
  border-left: 3rem dotted #b0d;
}
head:has(meta[name="viewport"][content="width=device-width, initial-scale=1"]) article {
  border-right: 3rem dotted #b0d;
}
head:has(script[src="https://example.com/analytics.js"]) article {
  border-top: 3rem dotted #b0d;
}

Thanks for pointing this out so clearly, Gaute Hvoslef Kvalnes! (And for the code samples above! ;-)

Next Jecelyn Yeen points our quite clearly how we can manually load and view source maps in Chrome DevTools. Super helpful, considering source maps often do not get pushed to prod…

And finally, for a couple of trips down Memory Lane…

1. First The Web Design Museum (which is apparently a thing) offers a timeline for the history of the web… By title, focusing on “Web Design History”, but incorporates more than just design, and quite thoroughly fascinating.
2. Then Pier-Luc Brault takes us all on a trip down Memory Lane as he uses Netscape Composer in 2024 to create a simple webpage. The screenshots are pure gold… Although I didn’t use that tool often (I was a Notepad man, m’self), but I did occasionally bounce between the two, as some things were simply easier in Composer, but then I could tidy them up in Notepad…

Anyhow, enjoy the trips! :-)

Happy reading,
Atg

PS: I am always looking for new RSS feeds to follow, so please feel free to contribute URLs in the comments! And thanks in advance! :-)

Top⇪