Move over Bootstrap. Web Awesome is an awesome successor to what in my opinion was already the best open source #WebComponents library (Shoelace) on the market. Now we have the best #CSS framework on the market. All of the CSS is…um…just CSS and all of the components are…um…just web components. Native #WebDev APIs across the board. 🙌 Take a first look at the brand new public beta:
Oh wow, do mine eyes deceive me? No, it's true! That HTML Blog's newsletter is back online! Get ready for regular updates once again on all things vanilla #WebDev #HTML #CSS #JavaScript and the paradigms, protocols, & people who make the magic happen. (Now's a good time to subscribe, if you haven't already! ☺️)
I hate saying things which seem blindingly obvious, but when Famous People™ such as Theo on YouTube make these basic mistakes, I wonder. 🧐 So here you go: `document.querySelector("# my-dumb-button").addEventListener(...)` is completely obsolete in the year 2025. Never do that again please. You don't need to! If you're wondering “well, what should I do instead?”, leave a comment and we'll talk about what to do instead. Apparently it will BLOW YOUR MIND! 😂 #HTML #JavaScript #WebComponents
How do you typically mount some #JavaScript behavior to an #HTML page? #WebDev
🚨🚨🚨🚨🚨 ❗❗
Since we last reported on the back & forth regarding defining a "masonry layout" #CSS syntax, an intriguing development has transpired! Jen Simmons et al. over at the WebKit Blog have written about a third possible path forward, and it has implications beyond merely implementing masonry layout. It is the initial steps towards formulating a unified layout system that blurs the lines between flexbox and grid. This new #WebDev concept is tentatively being called Item Flow.
What can I say? I’m a nerd for Nord. But seriously, you should most def give the Nord design system a look-see because the docs are seriously impressive—my go-to whenever I’m tasked to provide examples of how to build great design system documentation. One of its principal developers, @npub1w9ta...a2ap (who recently moved on to join the Polaris team at Shopify), recently joined the dynamic duo of Dave & Chris on @npub1f774...twck to talk all about the Nord design system:
All the Deets on the Mighty Details Tag 🙌 @npub1ncs6...a6v8 over at #CSS Tricks has written a definitive guide on using <details>, a number of possible use cases, and some of the trickier aspects of styling it and even animating the opening and closing states. I’ll be sure to refer to this the next time I do #WebDev on a <details>-based feature!
Is it possible to write advanced theming #CSS with context-aware conditional code? As if()! 😉 @npub19405...zhyh shows us a glimpse of what's possible—just in Chrome Canary right now behind a flag, but here's hoping it gains ground soon. On a related note, us #WebDev folks are eagerly awaiting container style queries in Firefox! Can it happen please pretty please with sugar on top??
We Need to Talk About Anti-Web Coding Assistants It's time. We can't ignore this massive threat to the continuing health of this platform we all love. @npub1fs69...tlr3 has done a deep dive into what the bots think is the state-of-the-art of #WebDev and…uh, it's alarming. 😬 We can, *and we must*, expect better of the tools being thrust in our faces as the future of “whatever”. #ProCraft