That HTML Blog

Vanilla has never tasted so hot. Join a fabulous community of web developers learning how to use “vanilla” web specs like HTTP, HTML, CSS, JavaScript, & Web Components.

Published by Jared White (ResistanceNet ✊) (npub15z3…0xrp)

Discord Chat: https://discord.gg/CUuYVH7Qa9
That HTML Blog: https://thathtml.blog
Forum on Human Web Collective: https://humansare.social/c/indie_web_dev

Public Key

npub1a2rppvw4uq5s4gqn6rgfw5en4p946qt2asxs6a4yt9f0szde3vlqfm6tz3

NIP-05 Address

vanillaweb_at_intuitivefuture.com@momostr.pink

Profile Code

nprofile1qqsw4pssk827q2g25qfap5yh2ve6sj6aq94wcrgdw6j9j5hcpxuck0spz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0dszqyr52

Publishing to

relay.damus.io

nos.lol

Author Public Key

npub1a2rppvw4uq5s4gqn6rgfw5en4p946qt2asxs6a4yt9f0szde3vlqfm6tz3

Show more details

Last Notes

2026-05-01 17:43:54 UTC

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 @npub1haa…h420 so eloquently puts it in her fantastic article SVG from Scratch… #WebDev
https://thathtml.blog/2026/05/best-svg-intro-guide/

2026-04-28 15:05:33 UTC

For *two years* now we’ve been covering the circuitous path wending its way towards getting a Pinterest-style layout mode into #CSS (often called “masonry” layout). 😅
Thankfully our long #WebDev nightmare is finally over, and masonry layout has been solved! 🎉 Now called CSS Grid Lanes, it’s available today in WebKit-based browsers such as Safari 26.4 as well as the latest GNOME Web:
https://thathtml.blog/2026/04/masonry-now-css-grid-lanes/

2026-04-24 20:50:17 UTC

Let’s say you have an #HTML element (like <form>) which has been instantiated as an object in your DOM.
At that exact moment, you want to enhance the form by adding new behavior via #JavaScript.
How does a wad of code get spun up in a 1:1 relationship with the element to be enhanced?
Herein is explained a "bad" way, and two good vanilla #WebDev ways this can be accomplished:
https://thathtml.blog/2026/04/two-paradigms-for-enhancing-html-tags/

2026-04-23 15:19:43 UTC

An announcement from our older sibling site, The Spicy Web:
https://www.spicyweb.dev/sunsetting-the-spicy-web/
TL;DR: That HTML Blog will continue on just as before! But past #WebDev educational materials published on The Spicy Web will remain archived, frozen in time (that's the nice thing about static sites…).
Meanwhile, the rebranded Human Web Collective Discord is alive and well, popping even! Join us if you want to talk about all things vanilla web, fediverse, anti-slop, and indie publishing.

2026-04-08 14:06:44 UTC

This conceptual framework may not be perfect or may be missing a lot of details, but it seems like a good starting point for discussion on what is a "user agent" and what safety protections are afforded to users and the resources being consumed.
Remember, the web has always been "agentic". The concept of a "user agent" is as old as browsers. The question is: whose authority is the agent acting on? The issues at stake are trust, honesty, safety, privacy, and many others.
https://www.w3.org/TR/web-user-agents/

2026-03-18 16:52:24 UTC

ICYMI (I did):
@npub1sf7…gl68 2.0 is now in Public Beta!
Probably the biggest feature by far:
> Pens now have their own file system! Want more than basic HTML, CSS and JS? Add, rename and organize files and folders to sculpt your Pen exactly how you want it.
Sounds pretty epic!
https://codepen.io/beta

2026-01-05 22:01:13 UTC

It's 2026! Time to set some non-negotiables as work on the Web platform ramps up again.
First one up, a two-parter:
a) the Web is for human users and their user agents (aka browsers). Any network activities not directed and vetted by humans and their designated user agents or backend API calls necessary to facilitate those activities should be seen as malware and subject to blocking/banning.
b) This includes any crawlers which are not acting in service to human agency & information retrieval.

2025-12-18 19:03:28 UTC

Don’t let anyone tell you otherwise.
The Web is the most successful computing platform in history, and it’s all thanks to OOP.
Herein lies a philosophical look at why it’s crucial to become an expert on the many object-oriented APIs in #WebDev and how understanding class hierarchies and instance efficiency allows you to build user-considerate, high-quality applications. Also: monkey patching is NOT a dirty word! 😄
Enlighten yourself:
https://thathtml.blog/2025/12/the-dom-is-a-triumph-of-object-oriented-programming/

2025-12-16 21:01:58 UTC

RE: https://mastodon.social/@firefoxwebdevs/115730171895808634
A quick rundown on Invoker Commands by @npub1dpj…e0jl
We've written about this a lot on the blog and will no doubt have more to say now that the need to polyfill this is quickly starting to fade. It's truly exciting to have a web-native API which can solve the “wire up a click to perform a task” problem. #WebDev #HTML #JavaScript
#note1a7f…sa0p

2025-12-15 20:34:36 UTC

This entire thread is *fantastic.* If you're a history buff *and* a markup nerd, doesn't get any better than this! @npub1478…y4ag https://mastodon.online/@mwichary/114713601903171155

2025-12-11 19:43:32 UTC

By Russ Weakley:
How does the Shadow DOM appear in the accessibility tree?
Browsers flatten the shadow tree when building the accessibility tree. Flattening removes the accessibility boundary of the shadow root and exposes the internal nodes as if they were normal children in the accessibility tree, not the DOM tree.
#HTML #WebDev #Accessibility
https://www.maxdesign.com.au/articles/the-shadow-dom.html

2025-12-03 06:19:00 UTC

Perhaps it’s time to embrace real web open standard .js files which don’t require any build steps or tooling to execute properly, all while utilizing the power combo of JSDoc + tsc to gain all of the benefits of type hints in IDEs and type checking in CI.
Let’s dive into some examples!
#WebDev #JavaScript
https://thathtml.blog/2025/12/nuances-of-typing-with-jsdoc/

2025-11-04 20:11:39 UTC

*whispers* HTML is also a markup language where you can define your own tags designed specifically for your needs 🤓
https://front-end.social/@randomMDN/115492970041613285

2025-10-30 21:55:22 UTC

Did you know Node.js has a Rocket Turtle mascot?
TIL!!
https://cdn.masto.host/intuitivefuturecom/media_attachments/files/115/465/343/308/741/153/original/06f1d23e88290168.png

2025-10-27 18:27:19 UTC

If you haven't yet tried out cross-document view transitions, you are missing out on one of the absolute coolest things to hit the world of #WebDev this decade.
To say it's a “game changer” is putting it mildly! 🤯

2025-10-17 04:43:26 UTC

Previously we wrote about Reciprocate, a library for adding signal-based reactivity to server-rendered #HTML #WebComponents.
Pretty cool problems to have solved, but what if you wanted more dynamic client-side smarts and the ability to write declarative templates with a trusty html`` function?
Tada! 🎉 Thanks to Joe Pea @npub1fjm…jz47 that #WebDev problem has also been solved. Wire up these two solutions together, and you'll be authoring new UI components using familiar DX. 🙌
https://thathtml.blog/2025/10/nimble-html-adds-great-dx-to-ui-components/

2025-10-14 22:13:36 UTC

This is fantastic news! 🎉
Lit remains the gold standard in “I want to author #WebComponents but I must have DX I'm already familiar with”. It's truly an incredible project. It powers the best UI framework (imo) in the biz, @npub1s7s…047y. It was used to build Adobe Photoshop for the web. It was used in Reddit's latest redesign.
Wonderful to see it's been gifted to the community and is no longer a “Google” project. Here's to many more years of being Lit! 🔥
https://lit.dev/blog/2025-10-14-openjs/

2025-10-02 19:37:23 UTC

- reply

What would you say about the common refrain that the Tailwind CSS output is "optimized" because it's just a bunch of utilities to support all the class names in HTML? “Regular" CSS is too heavy, so the claim goes.

2025-10-02 00:00:27 UTC

The path to enlightenment is inspecting the assets which get shipped to the browser on a regular basis.
https://toot.cafe/@slightlyoff/115301580245100653

2025-09-18 17:38:23 UTC

I cannot sing the praises of fetch loudly enough. As a #JavaScript #WebDev, having ready access to this native web API where you can pull down #HTML fragments or #JSON data with a line or two of code is simply brilliant.
But when shipping robust production code, how do you handle unpredictable network scenarios gracefully and provide a good user experience?
One solution: a tiny 2.3KB wrapper around “fetch” called “ffetch”. Here are some of its features:
https://thathtml.blog/2025/09/give-fetch-a-bit-more-oomph/

2025-09-08 18:40:52 UTC

Announcing Reciprocate, a Sweet Solution for Making Your HTML Web Components Reactive
Have you ever been chipping away on vanilla #WebComponents when you began to wonder “hey waitaminute…how do I make it so when I set this #JavaScript property, the equivalent #HTML attribute is updated? And if I set this attribute, the equivalent property is updated? Or when either is updated, my component will re-render?! Where are the APIs for this stuff??”
Worry no longer! 🤓 #WebDev
https://thathtml.blog/2025/09/reciprocate-reactivity-for-html-web-components/

2025-09-05 17:35:05 UTC

This is still one of the coolest #WebComponents patterns ever. 🥰
#WebDev #JavaScript
https://cdn.masto.host/intuitivefuturecom/media_attachments/files/115/152/892/751/808/364/original/cc8dee847dd65076.png

2025-08-20 16:21:38 UTC

Hey y'all, a new #fediverse social web forum is in da house!! 🎉
Talk learning #WebDev from base principles and help fellow newbies experience the joys of vanilla #HTML #CSS #JavaScript and #WebComponents! (with a sprinkle of lightweight tools to smooth out the bumps in the road ☺️)
Check it out:
https://humansare.social/c/indie_web_dev

2025-08-08 20:43:07 UTC

Signals, a reactive primitive popularized by many #JavaScript frameworks and libraries, makes it much easier to add declarative binding to your #HTML using basic vanilla DOM techniques + signal effects.
I haven’t had a concrete example to show off just how simple yet powerful this can be…until now! 😎
Here's the ubiquitous counter demo, todo list with a completion count, and typewriter printing out a message—all with a binding solution in only 20 lines of code! #WebDev
https://thathtml.blog/2025/08/declarative-html-binding-with-signals/

2025-08-07 16:20:09 UTC

And here we are.
https://cdn.masto.host/intuitivefuturecom/media_attachments/files/114/988/391/100/703/231/original/3d7f8f54ae1d51df.jpeg

2025-08-04 17:13:53 UTC

And now, the post you've all been waiting for…
(probably not, but you get it anyway!) 😂
The #CSS Framework Wars™ have come to an end. And we can thank…#Tailwind v4 for that! 🤯
Freely compose UI using native CSS variables & syntax, Tailwind design tokens in CSS (configured with CSS!), and Tailwind utility classes only where it makes sense. Hallelujah! 🙌
As historically one of Tailwind's biggest critics it is *weird* to sing its praises. 2025's biggest #WebDev surprise?
https://thathtml.blog/2025/08/tailwind-and-css-friends-at-last/

2025-07-25 17:38:50 UTC

The Invoker Commands API is the new hotness for a declarative #HTML solution to the problem “click and see something happen!!”
However…
If we’re inside shadow DOM and the button being clicked is supposed to do a thing via its host component, then uh, nope. 🤨
Thankfully there’s always a workaround in the Wide World of the Web, so I’ve written it up and here it is!
😁 Yay for building directly on top of platform mechanics. 👏 #JavaScript #WebComponents #WebDev
https://thathtml.blog/2025/07/more-fun-with-invoker-commands-web-components/

2025-07-18 16:09:34 UTC

Ever since #CSS backdrop-filter became a thing, combined with careful usage of gradients and shadowing it’s allowed #WebDev designers to make objects appear glassy to varying degrees.
No doubt we’ll now see more attention paid to bringing elements of “glassmorphism” to web-based design systems. While I don’t recommend trying to recreate Apple’s Liquid Glass effects verbatim, we can use it as a point of inspiration for designing our own uniquely delightful interfaces:
https://thathtml.blog/2025/07/clever-backdrop-filtering-for-eyecatching-glass-effects/

2025-07-16 16:17:27 UTC

Just a reminder that MCP is the new Google AMP.
Avoid it like the plague. Don't use it, don't implement it, and by the love of all that is holy *don't allow Big AI to dominate the open web like this.*
Your future self will thank you.

2025-07-16 02:44:51 UTC

I almost titled this “Yo dawg, I herd you like windows so I put windows in yo windows so you can use windows while ur using windows” 😂
Here's the deal:
I’ve been mulling over some interface concepts for a new app I’m designing, and it occurred to me it might make sense to use an old-school desktop metaphor for organizing the “documents”.
All of a sudden I wondered: maybe there’s already a good #JS library which can do the heavy lifting for me? Answer: there is! #WebDev
https://thathtml.blog/2025/07/put-windows-in-your-web-app-with-winbox/

2025-07-11 20:10:24 UTC

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:
https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/

2025-07-01 22:21:51 UTC

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! ☺️)
https://buttondown.com/thathtmlblog/archive/26-hello-again-and-why-youre-here/

2025-06-17 17:55:56 UTC

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

2025-04-29 17:50:53 UTC

How do you typically mount some #JavaScript behavior to an #HTML page? #WebDev

2025-04-22 21:02:09 UTC

🚨🚨🚨🚨🚨 ❗❗
https://www.theverge.com/news/653882/openai-chrome-google-us-judge

2025-04-15 04:17:02 UTC

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.
https://thathtml.blog/2025/04/unified-layout-system-could-happen/

2025-03-27 03:07:06 UTC

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, @npub1w9t…a2ap (who recently moved on to join the Polaris team at Shopify), recently joined the dynamic duo of Dave & Chris on @npub1f77…twck to talk all about the Nord design system:
https://thathtml.blog/2025/03/nord-health-design-system-david-darnes/

2025-02-27 00:33:51 UTC

All the Deets on the Mighty Details Tag 🙌
@npub1ncs…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!
https://thathtml.blog/2025/02/all-the-deets-on-details/

2025-02-21 18:01:45 UTC

Is it possible to write advanced theming #CSS with context-aware conditional code? As if()! 😉
@npub1940…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??
https://thathtml.blog/2025/02/hot-off-the-press-examples-of-css-if/

2025-02-14 19:30:02 UTC

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.
@npub1fs6…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
https://thathtml.blog/2025/02/we-need-to-talk-about-anti-web-coding-assistants/

2025-02-13 20:09:16 UTC

Happy #Interop2025 day to all who celebrate!
#WebDev #OpenStandards

2025-02-12 22:33:58 UTC

Every time I see utility classes sprayed all over basic tags like <p> and <a>… 😂
#CSS #WebDev #Humor
https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/993/294/423/351/624/original/c70d844d914bb8f0.jpeg

2025-02-05 04:22:01 UTC

One of the most exciting #WebDev-elopments in Modern™ #CSS is the ability to generate new colors programmatically based on variables or the currentColor keyword.
However, there are two separate ways to modify colors, each with its own set of goals and syntax, and the confusing thing is they have rolled out at different paces.
Exciting news though! The day will soon be here when all you’ll need for defining a fantastic color palette is a mere handful of base colors:
https://thathtml.blog/2025/02/live-colors-what-you-can-safely-use/

2025-01-30 22:00:47 UTC

Y'all, I'm not done with squircles! 😅
A few days ago I demonstrated utilizing #CSS clip-path and SVG data to round the corners of an element in a more attractive manner.
That #WebComponents demo turned out well, but it got me thinking I might attempt to “squirclize” a grid of thumbnail images, which eventually led me to the html-squircle #JS library for generating refined curve paths.
Now this looks pretty fun! 🥳 #WebDev
https://thathtml.blog/2025/01/squircle-images-on-the-loose/
https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/919/553/889/267/421/original/fa41f96f5e537597.png

2025-01-26 19:33:02 UTC

I Made a Squircle!
Button.
It's a squircle button. 🥰
And that’s harder than you might think, due to the limitations of what typical #CSS provides. But here we break down a neat #WebDev technique for building one as well as some of the other fun aspects of this demo (@ property to the rescue!):
https://www.spicyweb.dev/i-built-a-squricle-button/
https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/896/323/653/916/416/original/5dc35ef982fd0d1e.png

2025-01-13 22:16:40 UTC

“War must be, while we defend our lives against a destroyer who would devour all; but I do not love the bright sword for its sharpness, nor the arrow for its swiftness, nor the warrior for his glory. I love only that which they defend.” –J. R. R. Tolkein
The AI *is* coming for your job. The Zuckerbergs of the world will make sure of it.
But hope is not lost. We, the workers, still have real power.
Here are a few ideas on how to weather the coming #WebDev storm:
https://www.spicyweb.dev/surviving-the-ai-pocalypse/

2025-01-13 00:16:17 UTC

A few months back, I’d reported on <selectmenu> turning back into a regular <select> tag—but with awesome new #CSS-based smarts for completely customized styling. #WebDev
Since then, there have been some revisions to the proposed spec, and helpfully we have a thorough rundown of what’s changed courtesy of @npub1v48…csx2:
https://thathtml.blog/2025/01/revised-select-styling-whats-new/

2025-01-03 01:42:51 UTC

One of the oldest and cruftiest APIs in #JavaScript involves cookies. In fact, can you really even say there's an "API" for cookies when it's literally just a string property on `document`?
Wouldn't it be nice if we had a more modern #WebDev API to use for setting, reading, and deleting cookies?
Introducing the Cookie Store API:
https://thathtml.blog/2025/01/cookie-store-api/

2024-12-19 19:37:01 UTC

If it sounds like I'm a sore winner, that's because I am. But OK. Here we are. *Finally.*
Tailwind 4 now comes with a theming system based on—wait for it, wait for it—CSS.
#CSS. What a concept! 😅
Yes, the ships have turned around in #WebDev. React 19 can now play in a world where not all of your components are built with React, and Tailwind 4 can now play in a world where not all of your #HTML markup is riddled with utility classes:
https://thathtml.blog/2024/12/tailwind-4-a-mea-culpa-moment/

2024-12-18 20:40:25 UTC

React: functional components which aren't very functional.
TypeScript: types for JavaScript which aren't real types.
Great ecosystem! 😄
https://mastodon.social/@erlang_discussions/113675453562732716

2024-12-16 16:52:57 UTC

Our 25th issue on #WebDev is published, talking about Baseline and the awesome features dashboard for the Web Platform, as well as React 19 and a new way to author custom elements.
But wait, there's more! We'll be sending out a bonus issue in just a few days exclusively to Intuitive+ members. Have you signed up yet? You won't want to miss it! 😅
(Or just subscribe to the free newsletter. That's fine too… 😊)
https://buttondown.com/thathtmlblog/archive/25-baseline-2024-at-a-glance-react-19-new-web/

2024-12-09 18:00:13 UTC

Well this is a headline for the ages.
#React #WebDev #WebComponents
https://thathtml.blog/2024/12/oh-happy-day-react-finally-speaks-web-component/
https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/624/167/818/271/490/original/2d1c3ec281b36935.jpeg

2024-12-06 07:45:28 UTC

Since we’re on a new server, we’ll be pulling some toots from the archive from time to time. Here’s one:
---
Vanilla #HTML / #CSS / #JavaScript is the "universal language" of modern networked computing. Know that, and know it deeply, and you can speak "internet" in nearly any context, in nearly any job.
That's the power of international standards and open protocols. They'll never go out of style.

2024-12-04 17:51:02 UTC

Reactive Mastro: a tiny reactive GUI library for your existing MPA
Our latest #WebDev #WebComponents writeup!
Mastro is very small (2.6kB) and provides a clear path to writing custom elements which are primarily driven by server-rendered markup but need some additional interactivity after the fact. Powered by the maverick-js signals library, with an elegant syntax which works well with HTML web components:
https://thathtml.blog/2024/12/new-custom-element-superclass-on-the-block/

2024-12-02 18:16:37 UTC

- reply

Oh and guess what? Our Mastodon presence is two years old as of yesterday! Happy 2nd Anniversary to us! 🎉
Thanks y'all for the good times. May they long continue…

2024-12-02 18:08:39 UTC

Since we’re on a new server, we’ll be pulling some toots from the archive from time to time. Here’s one:
---
The idea that #CSS should support conditionals within style rules has been around since time immemorial. #WebDev
It’s looking likely that we’ll soon see the day when we can if() the night away, now that the CSSWG has come to a consensus around adding if() to an upcoming spec.
When this eventually lands in browsers, behold the increase of your property values! 😜
https://thathtml.blog/2024/07/if-only-css-could-if/