# HTML first · Craft

<!-- https://learn-ui.com/chapters/craft/html-first -->

Jim Nielsen runs two icon gallery sites, and until recently each list of icons shipped a widget to resize them.

### Make the interaction a navigation

In [Out With the JS, In With the HTML](https://blog.jim-nielsen.com/2026/out-with-js-in-with-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** (A browser feature that animates between two document states, including between two separate HTML pages, so a navigation can look like an in-page transition.), 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](https://blog.jim-nielsen.com/2025/lots-of-little-html-pages/) (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** (Jim Nielsen's phrase for building with, rather than against, what the web does natively: treating on-page interactivity as HTML page navigations enhanced by cross-document CSS transitions.). The post-mortem a year later, [Reminder: You Can Stitch Together Lots of Little HTML Pages With Navigations For Interactions](https://blog.jim-nielsen.com/2026/small-html-pages/), 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.”

> Figure. HTMLJim Nielsen, Reminder: You Can Stitch Together Lots of Little HTML Pages

Source

Jim Nielsen, Out With the JS, In With the HTML (May 2026); Building Websites With LLMS (March 2025); and the May 2026 post-mortem.

### View transition gotchas

In [Gotchas in Naming CSS View Transitions](https://blog.jim-nielsen.com/2025/view-transition-name-gotchas/) (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.

> Figure. CSSBramus, via Jim Nielsen, Gotchas in Naming CSS View Transitions

In [Aspect Ratio Changes With CSS View Transitions](https://blog.jim-nielsen.com/2025/aspect-ratio-in-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](https://jakearchibald.com/2024/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** (The property of HTML and CSS that browsers keep parsing as best they can when they meet syntax they do not understand, instead of failing outright the way JavaScript does on a SyntaxError.), from [A Subtle Nicety of Fault Tolerance in HTML & CSS](https://blog.jim-nielsen.com/2024/fault-tolerance-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.

> Figure. HTMLJim Nielsen, A Subtle Nicety of Fault Tolerance in HTML & CSS

The bar comes from [As Good as HTML](https://blog.jim-nielsen.com/2023/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](https://blog.jim-nielsen.com/2024/easy-changes/) (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.