Richard MacManus‘ latest Web Technology News (if you’re not subscribed, you should be!) starts off with a consistent concern related to AI-assisted coding, which is the tight feedback loop it will likely create: If AI code mostly focuses on a small subset of code, then that is what AI-based engineers will push, which is what AI will base future learnings on… Is that bad? Not if you want the same food for breakfast, lunch and dinner. Every night. For the rest of your life. :-/
The topic above is followed by lamentations from such luminaries as John Allsbasopp, Jeremy Keith and Jim Nielsen. These comments are related to the negative effect that frameworks are having on the web. Specifically, the slow adoption rate of new web platform features into the popular frameworks…
Speaking of slow adoption, Patrick Brosset shares a fantastic filter/view for features that are just one browser away from being considered Baseline! A great way to look at these, and perhaps a nice way to help guide future Interop voting???
Jumping back to JS frameworks for a second… Digging into React performance recommendations, I found a page titled “Optimizing Performance” on React’s own site, which sounded very promising! Only to find this message at the top of the page:
That handy “react.dev” link, however, links to the home page, not to any updated performance-related page… So I searched that site for “optimizing performance”; the top result deep-linked to an “Optimizing Performance” section within the Render and Commit page:
Care to guess where that handy “Performance” link takes you? Yup, right back to the “old and won’t be updated” Optimizing Performance page above… Speaking of tight feedback loops! :-/
But now to give JS some love, Manoj Vivek walks us through exactly how JS Source Maps work. I had always wondered in the back of my mind. Not sure I fully understand it now, honestly, but that’s on me, not Manoj… ;-P
Jumping back to performance for a sec, let’s take a look at what Matt Perry has to say about Web Animation Performance. Matt begins with some techy stuff, like the render pipeline, threads, tiers, etc., before getting into how to avoid recalculations and much, much more! He gets into some really heady stuff. In all the good ways!
Next Adam Rackis works his way through The Weird Parts of position: sticky;. Anyone that has tried this, has most likely been tripped-up by overflow: hidden; being set on some parent element… But Adam tackles lots of other situations as well!
Steve Faulkner offers-up a lookup table for Screen Reader HTML Support. Notably a work in progress, but what a great way to find what works where, and report what doesn’t!
Sticking with Accessibility, the A11Y Collective Team teaches us all about the Essential Visually Hidden CSS Techniques for Web Accessibility. It’s such an easy thing to miss…
Thanks to Stefan Judis, who himself thanks Will Boyd, I learned that we can very easily localize our quotation marks! Using open-quote and close-quote like below:
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
Our quotes come out like one of these, depending the browser’s language!
And finally, sticking with Stefan, today I also learned two more things from him: 1) What a Sankey Diagram is called, and 2) How to easily create one online! Both answers can be found at SankeyDiagram.net. Thanks once again, Stefan!
Happy reading,
Atg