All comes down to good HTML, CSS and JS

Change the name, but not the state, of play/pause buttons. Use state for all other toggle buttons.

As a final note, never change both the name and aria-pressed state in tandem. That way, confusion lies. Just imagine trying to parse the meaning of "play button, on" vs. "pause button, off".

Graceful degradation is the opposite to progressive enhancement because a pre-determined “perfect experience” is authored then broken down with support testing strategies instead. The problem with that approach is everything can and will go wrong in the browser, so support testing strategies will unlikely never be reached in a lot of cases, which results in a broken, unresponsive user interface.

The final deliverable of a web-based design is on the web, just like the final deliverable of a print design is print. Instead of handing off, designers and developers need to work in collaboration with each other in design implementation with a culture of flexibility.

Head, Heading, Header, Headline

Someone is getting a broader idea that the rules of the web are powerful

The project built without JS is https://textlog.cc/hot

textlog is a simple social text log: write short notes, follow people and hashtags, and join conversations without turning every thought into a performance.
Notes are limited to 500 characters. The constraint keeps them quick to write and read, making room for one thought at a time.

textlog is built around words: notes, people, hashtags, and conversations. It is intentionally small, straightforward, and easy to follow. There are no engagement tricks or pressure to build an audience.

I missed it! Maybe next year.

The related website collection is available at https://e2e.html.energy/

• <details>
• popover
• grouped <details>
• command & commandfor
• native input pickers
• <datalist>
• loading="lazy"
• hidden until-found

The entire element such as a card is interactive as a button for visual users. The button or link remains correct for the rest of the users.

Recreating a button from scratch is hard. Here is why.

Semantic HTML tags improves the UX, so let's use the UX of HTML

<div> is chaotic neutral and many HTML tags fall back to a generic HTML tag.

<section>, <header>, <footer> and <div> containing texts are exposed as <p>

A 16KB alternative to Prism and highlight.js: https://github.com/j9t/syntaxp

How It Works

• Finds all <code> elements with a class=language-* attribute
• Tokenizes the text content using regex-based per-language tokenizers
• Creates StaticRange objects for each token
• Registers them as Highlight objects in CSS.highlights
• Styles them via ::highlight() CSS rules

headingoffset is a new HTML attribute to increase the upcoming heading levels. It's definitely not there yet https://caniuse.com/?search=headingoffset

How can I style an H3 when there's no H3 tag?
With the selector :heading(3).
But be aware of the browser support: inexistant (https://caniuse.com/mdn-css_selectors_heading)

That's a way

Meet hihtml, a convenient abstraction that allows you to validate HTML pages using HTML-validate, that checks on deprecated markup using ObsoHTML, that comes with a built-in link checker, and that minifies the respective web pages using HTML Minifier Next!