A microdata enhanced HTML Webcomponent for Leaflet | k-nut — Blog

Here’s a nice HTML web component that uses structured data in the markup to populate a Leaflet map.

Personally I’d probably use microformats rather than microdata, but the princple is the same: progressive enhancement from plain old HTML to an interactive map.

Tagged with

Related links

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

Apple Annie’s Weblog · Diving into indiewebify.me & microformats, a series

Here’s a good walkthrough of adding microformats to your site, starting with h-card and moving on to h-entry.

Tagged with

Tagged with

Related posts

button invoketarget=”share”

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

Lost in calculation

A lazy option for responsive images is at hand.

Button types

Ideas for some declarative shortcuts.

Three attributes for better web forms

Better UX through better HTML: inputmode, enterkeyhint, and autocomplete.

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.