HTML first

Make the interaction a navigation#

In Out With the JS, In With the HTML (May 2026) the original was a web component, <icon-list size="md">, whose size took sm | md | lg | xl, mapped to dimensions such as 64×64 or 512×512, and whose JavaScript rewrote the child img elements on click. On a pre-rendered static site that duplicated templating logic over the wire, with bugs like “I updated this one small part of how my icon list renders on the server, but forgot to tweak it on the client.”

The fix: instead of one page at /colors/red/ with JavaScript, four pages at /colors/red/{sm|md|lg|xl}. Once he supported CSS view transitions, he got “a cool effect amongst the icons for free,” by removing code. His question: “Could I remove some client-side JS and get a better overall experience?”

Lots of little HTML pages#

In Building Websites With LLMS (March 2025) the acronym is “(L)ots of (L)ittle ht(M)l page(S).” A filter he expected to be list items toggled by JavaScript grew data attributes and sorting logic; each filter became its own page. He calls this the grain of the web. The post-mortem a year later, Reminder: You Can Stitch Together Lots of Little HTML Pages With Navigations For Interactions, still likes it: multi-page navigations enhanced with view transitions, plus a dash of JS where prudent.

His menu navigates to a page of options. Newer browsers get the effect; older ones still work, because “If you can follow a link … it will work.” Closing is a link to / that runs history.back() when document.referrer is set, so the menu adds no history entries. It took thinking about what was essential and keeping page size small: “the approach shaped the design.”

<!-- Normal page --><nav>  <a href="/menu/">    <svg>...</svg>  </a></nav><!-- Menu page --><nav>  <a href="/" onclick="document.referrer ? history.back() : window.location.href = '/'; return false;">    <svg>...</svg>  </a></nav>

View transition gotchas#

In Gotchas in Naming CSS View Transitions (January 2025), a view-transition-name must be a <custom-ident>: no quotes (quoted, it is a string), no forward slash, no leading number. His working value was title-2024i-love-kitkats. Bramus later pointed him to attr() in Chrome 133 and up, and to auto, Safari-only at the time.

.card[id] {  view-transition-name: attr(id type(<custom-ident>), none);  view-transition-class: card;}

In Aspect Ratio Changes With CSS View Transitions (February 2025), an active-tab outline grew in width but not height between pages. “It’s small. Many people might not even notice it. But I do and it’s bugging me.” He slowed ::view-transition-old() right down to see it, found an AI answer that looked right and was wrong, and landed on Jake Archibald’s View transitions: Handling aspect ratio changes, a one-line fix with the visuals to explain why.

Fault tolerance and the quality bar#

HTML and CSS suit this because of their fault tolerance, from A Subtle Nicety of Fault Tolerance in HTML & CSS (January 2024). Browsers ignore CSS they do not understand, so to try a layout without a rule Jim adds a z in front and toggles one character. A very little thing, but it is also why progressive enhancement is easy here.

<li style="  color: red;  font-weight: bold;  zdisplay: inline;">    My content here</li>

The bar comes from As Good as HTML (November 2023), quoting Jan Miksovsky: “Adopting a quality bar of being as good as HTML is pretty hard.” In Jan’s work a listbox shares roughly 85% of its code with a carousel, HTML’s composability showing through. Robin Rendle asks “what would html do?”, with select reusing hr for dividers.

Quality Means The Flexibility to Change (October 2024) adds Dave Farley’s test, via Ben Nadel: easy to change is high quality. “Whatever you do, make it easy to change.” Four static pages are easier to change than a component that re-renders one.