Chris Coyier shares an awesome-looking CSS scroll effect, using animation-timeline: scroll(...), animation-composition and random(...). Two of those are Baseline: Widely Available, while the other two are still Baseline: Newly Available, so maybe not 100% ready-for-primetime, but damned-near! So very cool. :-)

Sticking with Baseline, Patrick Brosset addresses some concerns with the project, and would like to help rectify! After describing what the Project Baseline is, Patrick gets into what it is lacking, including Accessibility concerns, polyfill suggestions, extending the browser matrix, etc. And the good news is, you can help! Hop over to the Web Developer Experience (WebDX) Community Group to signup and help improve the project!

Richard MacManus writes about an interview he conducted with Jason Mayes on How Google Is Shifting AI From the Cloud to Your Browser. Discussing the transition from TensorFlow.js to LiteRT.js, switching from the term “Web ML” to “Web AI, Google ceding their preferred training language from JS to Python (though he expects that to switch back, as another shift takes place, from the original MCP to WebMCP, as championed by Google and Microsoft).

Richard and Jason also discuss ONNX, an open-source tool to provide language-agnostic interoperability, including their Runtime Web flavor, which is designed to run models in the browser, via JavaScript.

Sticking with AI for just one more, Remy Sharp forwarded David Gérouville-Farrell‘s Building an AI Sandbox with Docker, where he discusses [h]ow to set up a persistent Docker environment for AI coding tools without losing your authentication every time you restart the container. Sounds like a great way to isolate your AI.

Okay, seriously, last one, this time about GitHub Copilot: Angie Jones tells us How [She] Taught GitHub Copilot Code Review to Think Like a Maintainer. By building a robust custom instructions file, she was able to tell Copilot exactly what it should pay attention to, how it should review, how it should critique, etc. Powerful, powerful stuff!!

Can’t remember where now, but I tripped across MapSVG, the (self-proclaimed) “best map plugin for WordPress with infinite possibilities”. But seriously, scroll down that home page and look at all the things you can do with it… Not quite infinite, but respect… ;-)

Marko Denic highlights the SpeechSynthesis API. Which led me immediately down a very deep rabbit hole, with minimal worthwhile results… Namely because, of the 177 voices available via my MacBook, all were pretty darned horrible… Some to the point where the audio was garbled beyond recognition… But still, somehow… fun… :-) And if you can find a useful/acceptable voice, this could also be useful. (Daniel and Samantha were the only two that I found that were even close to be acceptable.)

Utsav Meena shares a cool, simple CSS snippet to create shapes around images. You’ve probably seen it before, I know I have, but it is still such a simple trick, that wouldn’t work for every project, but could work really well on the right project…

Sticking with Utsav, another great tip for creating HTML/CSS-only tooltips. Utsav uses an HTML data-tooltip attribute and content: attr(data-tooltip);, but one could just as easily use a title attribute and content: attr(title);, which might even have added semantic value?

Paul Calvano recently announced an update to his Font Analyzer and Third Party Analyzer so that both now work with the new Catchpoint WPT URLs, as well as any results URL from a WPT Private, or Speedcurve, test. Great news, related articles:

• Identifying Font Subsetting Opportunities with Web Font Analyzer
• Discovering Third Party Performance Risks

Valerii Kryvonis shares a quick tip for using the JS .at(n) method rather than [n] to reference an array item. With the following array:

const fruits = ['apple', 'banana', 'cherry'];

Positive references work identically:

console.log(fruits[0]); // apple
console.log(fruits.at(0)); // apple
console.log(fruits[1]); // banana
console.log(fruits.at(1)); // banana

But .at() also allows you to “wrap around backwards”:

console.log(fruits[-1]); // undefined
console.log(fruits.at(-1)); // cherry

And while this does work, it is certainly more verbose, and less intuitive…

console.log(fruits[fruits.length -1]); // undefined

And in case you were also wondering, .at() is Baseline Widely Available.

Elvin Sarkarov shared Frontend Case Studies, a website of “real-world frontend challenges” and how they were tackled. Inspiring collection of articles, but the next challenge I would recommend would be adding a search feature to the site… :-?

Deepak Sharma writes of an interesting ServiceWorker encounter “in the wild”, where they listen for real-time network data, including download speed and connection type, to “adapt UI on the fly [to] serve lighter images, delay analytics calls, or prefetch more when you’re on fast Wi-Fi”. Love it!

And finally, for something a little lighter in life, Zuhal Didem Aytac offers a series of online apps, some to challenge you, others to inform you. The World Map of Human Ideas is particularly interesting, as are Which invention came first? and Which event happened first?. The Guess the World game is especially challenging…

Happy reading,
Atg

Top⇪