HTML Web Components Are Having a Moment – Cloud Four

I suspect that in a few years’ time, we’ll look back at this month, and especially Jeremy and Eric’s articles as an inflection point. Similar to how Ethan managed to make responsive web design accessible to more people, I think we’re looking at the same thing happening right now for web components.

A great summary (with links) of all the recent buzz around HTML web components:

I don’t know about you, but I read every one of those articles, and for the first time, web components “clicked” for me. Suddenly, I understood how they could fit into our workflow, and where they’d be a good addition. I was excited about web components in a way I’d never been before.

HTML Web Components Are Having a Moment – Cloud Four

Tagged with

Related links

HTML Is Actually a Programming Language. Fight Me | WIRED

When haters deny HTML’s status as a programming language, they’re showing they don’t understand what a language really is. Language is not instructing an interlocutor what to do in a way that leaves no room for other interpretations; it is better and richer than that. Like human language, HTML is conversational. It is remarkably adept at adapting to context. It can take a different shape on any machine, from a desktop browser or an e-reader screen to a mobile app or a screen reader for the blind (so long as that device is built to present hypertext).

Hell, yeah!

Ultimately, even as HTML has become the province of professionals, it cannot be gatekept. This is what makes so many programmers so anxious about the web, and sometimes pathetically desperate to maintain the all-too-real walls they’ve erected between software engineers and web developers.

Hell, yeeeeaaaaahhh!!!

What other programmers might say dismissively is something HTML lovers embrace: Anyone can do it. Whether we’re using complex frameworks or very simple tools, HTML’s promise is that we can build, make, code, and do anything we want.

Tagged with

Hyper-responsive web components | Trys Mudford

Trys describes exactly the situation where you really do need to use the Shadow DOM in a web component—as opposed to just sticking to HTML web components—, and that’s when the component is going to be distributed and you have no idea where:

This component needed to be incredibly portable, looking great on any third-party website, in any position, at any viewport, with any amount of content. It had to be a “hyper-responsive” component.

Tagged with

Churn

This is a good description of the appeal of HTML web components:

WC lifecycles are crazy simple: you register the component with customElements.define and it’s off to the races. Just write a class and the browser will take care of elements appearing and disappearing for you, regardless of whether they came from a full reload, a fetch request, or—god forbid—a document.write. The syntax looks great in markup, too: no more having to decorate with js-something classes or data attributes, you just wrap your shit in a custom element called something-controller and everyone can see what you’re up to. Since I’m firmly in camp “progressively enhance or go home” this fits me like a glove, and I also have great hopes for Web Components improving the poor state of pulling in epic dependencies like date pickers or text editors.

Tagged with

The Web Component Success Story | jakelazaroff.com

The power of interoperability:

Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write them!

What web components will do — at least, I hope — is let us collectively build a rich ecosystem of dynamic components that work with any web stack. No more silos. That’s the web component success story.

Tagged with

WebKit Features in Safari 17.2 | WebKit

Lots of new features landing in Safari, and it’s worth paying attention to the new icon requirements now that websites can be added to the dock:

To provide the best user experience on macOS, supply at least one opaque, full-bleed maskable square icon in the web app manifest, either as SVG (any size) or high resolution bitmap (1024×1024).

Tagged with

Related posts

button invoketarget=”share”

An alternate route to a declarative version of the Web Share API.

Button types

Ideas for some declarative shortcuts.

Progressive disclosure with HTML

The `details` element is like the TL;DR of markup.

When should there be a declarative version of a JavaScript API?

If the JavaScript API requires a user gesture, maybe it’s time for a new button type.

Standards processing

Pushing for a share button type—the story so far…