Barry Pollard highlights that Webkit TP 178 includes:
- Enabled Fetch Priority by default
- Enabled
requestIdleCallback - Enabled responsive images in
<link rel="preload">
All absolute slammers, bravo!
We in tech live in a world of acronyms and special terms. From HTML, CSS and JS, to API to NPM, if you want to become an SME ASAP, checkout this SPA: WebGlossary.info.
And if you want to get to know CSS selectors better, Sébastien Noël offers a visual guide to how CSS selectors work and can chain together.
And if you want to get to know JS async/await better, Akash Hamirwasia shares both a video and written version of Internals of async / await in JavaScript. A great explainer starting from “what are we trying to achieve” and going right through several examples.
curl is a tool most of us use quite often, and probably most often by either copying from a previous project or just Googling how to do something. Well, if you ever want to get to know the library well, Anton Zhiyanov shares Mastering curl: interactive text guide, which covers everything from the humble beginnings, to all the options, and all the basics, including interactive demos!
alt text is something I try to include for every graphic I include on the web. But alt text for code samples is something I never really thought about before… Well, Ben Myers explains how he approached alt text for code snippets. Thanks, Ben!
Next up, Kushagra Gour shares how to create scroll-based 3D cards. Note that, although Kushagra does not mention it, at the time of this writing, I think Chrome is required (it doesn’t work in my Firefox, anyhow).
I am really looking forward to View Transitions coming to prime time on the web, but Eric Portis cautions about possible perceived-performance woes (and possible work-arounds?).
Another performance concern, and possible solution, Mike Herchel talks about the LCP issues found in Drupal’s “demo” profile, which I imagine a lot of people use to get started with new sites / fresh installs. Basically, the hero section uses a background-image, which is a notoriously slow method for rendering images. Mike walks through several ways to fix that.
Any GitHub users out there? Yeah, thought so. Well check out this list of undocumented features that let you open repos in online VSCode, add experimental features, regex code search, and more!
Adrian Roselli shares a high-level accessibility check that compares the video element implementation in all modern browsers. I love his video element code sample! Including a track, fallback download link, and even a fallback download link for the transcript!
<video preload="metadata" controls="" poster="JAWS-aria-errors_poster.jpg"> <source src="JAWS-aria-errors.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en-us" src="JAWS-aria-errors.vtt" default=""> Sorry, your browser doesn’t support embedded videos, but don’t worry, you can <a href="JAWS-aria-errors.mp4">download it</a>. The <a href="JAWS-aria-errors.vtt">caption file</a> is also available in case your video player can import it. </video>
Above, Adrian’s video code sample also includes a poster attribute. And to create that poster image, you can use thumbnail.video, which is a free, open-source, browser-or-API tool for creating thumbnails from any public URL video, from any time within that video. Pretty sweet…
Speaking of video (sort of), what-in-the-what am I looking at here???
And finally, ever wonder what the sun sounds like? What about a black hole?? Or two black holes merging??? And no, I am not going to ask what Uranus sounds like… But The Sounds of Space will! :-)
And finally, finally, ever wanted to talk to whales? Well, maybe someday soon we will at least be able to understand them, and that would be a pretty great first step…
Happy reading,
Atg