#33: Intro to SVG, Enhancing HTML Tags, CSS Grid Lanes (Masonry!)
I’m pleased to report that our long web specs nightmare is finally over.
Friday, May 1, 2026
OK, so I never like saying things like this but I totally dropped the ball on the newsletter. 😅 To be honest, I’m not sure why! I posted quite a few things on That HTML Blog in November & December, but failed to send out a new issue…and then the blog lay dormant for a while.
But I’m back baby! ✌️😎
Before I get into all the latest goodies…a quick housekeeping note. For #WebDev folks who first learned about me through my work on The Spicy Web, I posted a much-belated announcement there that the site will be archived & frozen in time. It essentially had been already, I was simply dragging my heels about making that clear. I also reiterated why the Discord was renamed to Human Web Collective and that it’ll continue its focus to provide HTML-first, “vanilla” web developers a place to hang as well as offer a safe space for criticism of generative AI and other Big Tech shenanigans. (Join us!)
Alright, with that out of the way, on to today’s topics!
Hey, so you wanna keep learning about “vanilla” web tech and how to escape the hell of framework churn? Make sure you don't miss another issue of That HTML Blog:
Two Paradigms for Enhancing HTML Tags. Let’s say you have a <form> element which has been instantiated as an object in your DOM.
At the moment the form element is instantiated and connected to the document, you want to enhance the form by adding two features such as visual validation messages and autosaving.
The question then becomes, how do you set up this JavaScript? How does a wad of code get spun up in a 1:1 relationship with the element to be enhanced?
There is a bad way, and two good ways…
Two Paradigms for Enhancing HTML Tags | That HTML Blog
Adding new functionality to DOM elements by extending the markup you already have.
Masonry Layout Solved! Hello CSS Grid Lanes. I’m pleased to report that our long web specs nightmare is finally over. It’s no longer called masonry, nor is it part of some grand experimental unified CSS layout system. It is a new display type, but it otherwise inherits the layout system of CSS Grid, and it’s called Grid Lanes.
Masonry Layout Solved! Hello CSS Grid Lanes | That HTML Blog
Our long web specs nightmare is finally over.
The Best Introduction Guide to SVG You Will Read. Scalable Vector Graphics (SVG) is the image format for the web that isn’t raster (aka pixel-based) like JPEG and PNG. Something which sets SVG apart from other “image formats” however is that it’s more than an image format. It’s markup…which means it can be embedded in your HTML markup. This gives SVG superpowers, as Carmen Ansio so eloquently puts it in her fantastic article SVG from Scratch…
The Best Introduction Guide to SVG You Will Read | That HTML Blog
SVG is more than an image format. It’s markup. This gives SVG superpowers!
And that’s all I got folks. See you here next week! (or thereabouts 😉)
Cheers,
Jared
🤔🌩️ Things that make you think: 💡😃
Have you ever clicked on a result from a search engine? Unless you’re lucky enough to land on a nice personal website, you’re more than likely to be confronted with pop-ups to allow tracking, or a desparate plea to subscribe to a newsletter, or just rubbish ads all accompanied by a slow page loading somewhere in the mix.
Don’t get me wrong. I’m not saying that what Google is doing is okay. But let’s not pretend that everything indexed by Google is just fine and dandy for people to visit.
And of course the main reason why websites are so terrible is because they’ve tied their business model to heaps of behavioral advertising driven by invasive tracking courtesy of …Google.