We start this issue with Addy Osmani showing off a new DevTools feature: Breadcrumbs in the Performance panel! So convenient…

Speaking of performance, Yottaa has published their 2024 Ecommerce Tech Buyers’ Guide Evaluates The Impact Of 650 Third-Party Apps On Ecommerce Sites. You have to register to get the full report, but they do offer a few key points and, big shocker: 3rd party scripts slow pages, some scripts worse than others, and faster load times = more conversions. Some things never change… 😞

Next up, Marc van Neerven shares “an Ultra-Lean, Web Components enhanced, no-build, no-dependencies boilerplate for PWAs, using only the Modern Web.” Me likey!

You might notice that Marc uses Web Components in his Pure PWA project (above). If that doesn’t quite feel pure to you (as it didn’t to me), you might want to slip into Brecht De Ruyte‘s Getting into web components series. I still prefer my HTML straight, no chaser, but we do need JS for the modern web, right? Right???

Sticking with Brecht for another minute, here he describes relative length units based on the viewport. That means vw/vh, vi/vb, vmin/vmax, and more.

The great Chris Coyier, in all his easy-to-grok glory, shows off highlighting a portion of text as the user scrolls to it, but without JS.

Sticking with Chris for another moment as he discusses the Basic Dialog Usage and Gotchas To Watch For.

And now that we’re all intrigued about the dialog element, Mark Conroy builds an off-canvas menu using a dialog element, complete with ARIA attributes, CSS for positioning and open/close animations, and just a smidge of JS for functionality, then turns it all into a web component.

Next up, Brandon Wu offers up a JavaScript Security Vulnerabilities Tutorial – With Code Examples. Yikes! (The preamble ends, and the actual course begins, at right around 1:14.)

Zoran Jambor shows us how to create/delete custom folding ranges in VS Code. Super helpful for managing large code bases!

And now that we know all about custom folding ranges, Zoran also wants to make sure we know about leveraging the outline view in VS Code.

Michelle Barker walks us through an issue she found with her font headers in iOS: they were blurry, looking almost “faux-bold”. She fixed the issue by adding a couple of bits to her @font-face declaration.

And Manuel Matuzović walks us through a totally simple change we can all make when unstyling list elements so they don’t lose semantic meaning:
list-style: none → list-style-type: "".

Somewhat inevitable, and in my opinion totally justified and helpful, Tero Piirainen conducts a smackdown of Tailwind vs. Semantic CSS, comparing two websites with identical design, one using Tailwind and the other using “vanilla” CSS. Just the source HTML is enough for me.

Our good friends at DebugBear demonstrate How To Watch Your Website Load Step By Step And Pause Loading. The first method might seem obvious, but they quickly move beyond the obvious and into very useful options!

And finally, David Pierce gives a well-deserved nod to the-little-file-that-could, robots.txt, “The text file that runs the internet”.

Happy reading,
Atg

Top⇪