Link tags: markup

Open UI and implicit parent/child relationships in HTML – Eric Bailey

I remember discussing this with Tantek years ago:

There are a few elements who need to be placed inside of another specific element in order to function properly.

If I recall, he was considering writing “HTML: The Good Parts”.

Anyway, I can relate to what Eric is saying here about web components. My take is that web components give developers a power that previous only browser makers had. That’s very liberating, but it should come with a commensurate weight of responsibility. I fear that we will see this power wielded without sufficient responsibility.

30 Days of HTML

Receive one email a day for 30 days, each featuring at least one HTML element.

Right up my alley!

Show/Hide password accessibility and password hints tutorial | Part of a Whole

A good tutorial on making password fields accessible when you’ve got the option to show and hide the input.

Good, Better, Best: Untangling The Complex World Of Accessible Patterns — Smashing Magazine

I really like the approach that Carie takes here. Instead of pointing to specific patterns to use, she provides a framework for evaluating technology. Solutions come and go but this kind of critical thinking is a long-lasting skill.

New feature proposal: add support for `media` attribute to `meta name=”theme-color”` · Issue #6495 · whatwg/html

This makes sense to me.

Imagining native skip links | Kitty Giraudel

I like this proposal, and I like that it’s polyfillable (which is a perfectly cromulent word).

HTML test cases

This is handy—an up-to-date list of tests run on form fields with different combinations of screen readers and browsers.

The unreasonable effectiveness of simple HTML – Terence Eden’s Blog

I love the story that Terence relates here. It reminds me of all the fantastic work that Anna did documenting game console browsers.

Are you developing public services? Or a system that people might access when they’re in desperate need of help? Plain HTML works. A small bit of simple CSS will make look decent. JavaScript is probably unnecessary – but can be used to progressively enhance stuff.

Loading and replacing HTML parts with HTML

I like this proposal for a declarative Ajax pattern. It’s relatively straightforward to polyfill, although backward-compatibility is an issue because of existing browser behaviour with the target attribute.

HTML Over The Wire | Hotwire

This is great! The folks at Basecamp are releasing the front-end frameworks they use to build Hey. There’s Turbo—the successor to Turbolinks:

It offers a simpler alternative to the prevailing client-side frameworks which put all the logic in the front-end and confine the server side of your app to being little more than a JSON API.

With Turbo, you let the server deliver HTML directly, which means all the logic for checking permissions, interacting directly with your domain model, and everything else that goes into programming an application can happen more or less exclusively within your favorite programming language. You’re no longer mirroring logic on both sides of a JSON divide. All the logic lives on the server, and the browser deals just with the final HTML.

Yes, this is basically Hijax (which is itself simply a name for progressive enhancement applied to Ajax) and I’m totally fine with that. I don’t care what it’s called when the end result is faster, more resilient websites.

Compare and contrast the simplicity of the Hotwire/Turbo approach to the knots that React is tying itself up in to try to get the same performance benefits.

Ignore AMP · Jens Oliver Meiert

It started using the magic spell of prominent results page display to get authors to use it. Nothing is left of the original lure of raising awareness for web performance, and nothing convincing is there to confirm it was, indeed, a usable “web component framework.”

Are your Anchor Links Accessible? | Amber Wilson

I really like the way that Amber doesn’t go straight to the end solution but instead talks through her thought process when adding a feature to her site.

The Importance of HTML – Jerry Jones

You’re not going to get a Webby Award or thousands of views on Codepen for how amazingly crafted your HTML is. You’ll need to be OK going unrecognized for your work. But know that every time I use a screen reader or keyboard on a site and it works correctly, I have a little spark of joy.

Not so short note on aria-label usage – Big Table Edition – HTML Accessibility

This is a very handy table of elements from Steve of where aria-label can be applied.

Like, for example, not on a div element.

HTML Forms: How (and Why) to Prevent Double Form Submissions – Bram.us

I can see how this would be good to have fixed at the browser level.

This page is a truly naked, brutalist html quine.

I think this is quite beautiful—no need to view source; the style sheet is already in the document.

world smallest office suite

I like this idea for a minimum viable note-taking app:

data:text/html,<body contenteditable style="line-height:1.5;font-size:20px;">

I have added this to bookmarks and now my zero-weight text editor is one keypress away from me. You might also use it as a temporary clipboard to paste text or even pictures.

See also: a minimum viable code editor.

share-button-type/explainer.md

If you’ve been following my recent blog posts about a declarative option for the Web Share API, you might be interested in this explainer document I’ve put together. It outlines the use case for button type="share".

The failed promise of Web Components – Lea Verou

A spot-on summary of where we’ve ended up with web components.

Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmers.

But then…

Somewhere along the way, the space got flooded by JS frameworks aficionados, who revel in complex APIs, overengineered build processes and dependency graphs that look like the roots of a banyan tree.

Alas, that’s true. Lea wonders how this can be fixed:

I’m not sure if this is a design issue, or a documentation issue.

I worry that is a cultural issue.

Using a custom element from the directory often needs to be preceded by a ritual of npm flugelhorn, import clownshoes, build quux, all completely unapologetically because “here is my truckload of dependencies, yeah, what”.

Blacklight – The Markup

This is an excellent new tool for showing exactly what kind of tracking a site is doing:

Who is peeking over your shoulder while you work, watch videos, learn, explore, and shop on the internet? Enter the address of any website, and Blacklight will scan it and reveal the specific user-tracking technologies on the site—and who’s getting your data. You may be surprised at what you learn.

Best of all, you can inspect the raw data and analyse the methodology.

There are some accompanying explainers:

• I Scanned the Websites I Visit with Blacklight, and It’s Horrifying. Now What?
• How We Built a Real-time Privacy Inspector
• The High Privacy Cost of a “Free” Website