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!

These are definitely the rules I follow. I still not reach for <menu> yet.

in HTML5 they realized it was kinda annoying that the spec didn’t allow us to clump the terms and definitions together. So now a

is permitted as a non-semantic wrapper to help us clump those terms and definitions together:

Action list should be put inside <menu>. The nav element is a sectioning element whereas the `menu element is a list element.

Validate the wrapped HTML

A trend emerges for specialized specification file (such as LICENSE or README). The author proposes one for HTML.md:

* Use the elements most appropriate semantically.
* Use as little HTML as possible.
* Validate all HTML output against an HTML validator (preferably the W3C one), and fix any errors.

About the <picture> syntax which the author finds great.

On the contrary, the srcset and sizes attributes on one image are hard to use. "So, we are left describing the all of the sizes that an element will be, across every breakpoint and container query, as a single string, in an HTML attribute. How disgusting."

A tool is neede to write media queries in the sizes attribute.

How is a tool supposed to generate (min-width: 1340px) 257px, (min-width: 1040px) calc(24.64vw - 68px), (min-width: 360px) calc(28.64vw - 17px), 80px though?

The author proposes to bury this attribute and use sizes="auto". The developer can rely on loading="lazy" to load the images after the layout is computed, thus the browser know the size in advance.
sizes values remain a must have for images displayed way up at the top of the page... well sizes="100vw" is a good fit for it, isn't it?
All other images? loading="lazy" sizes="auto"

Sounds logic :)

Render #html where the data lives.
If its stored on the backend in a database or cache, render HTML there and avoid sending potentially sensitive data to the client.
If state lives only on the client, render it there with plain old JS or your library of choice.