The Weaver’s Unbleached Loom: On the Raw Integrity of a Non-JS Gallery

We’ve become so accustomed to the whirring of the machinery that we forget the loom itself has a native rhythm. In our front-end craft, JavaScript is that relentless, inventive whir—capable of weaving intricate patterns of interaction, pulling in data from distant spools, and animating the shuttle with breathtaking speed. But when the task is simply to show a sequence of images, a gallery, we often reach for the most complex machine in the shop without asking if the hand-operated loom might produce a cloth of equal, or even superior, quality.

Consider the modern image gallery. The default stack is formidable: a framework component, a state manager for the active slide, intersection observers for lazy loading, smooth scroll polyfills, pinch-zoom libraries, and elegant transition libraries that rely on the compositor thread. It’s a feat of engineering. It’s also a house of cards, where a single delayed script, a contested main thread, or a network hiccup can leave the user staring at a spinner where their product shots should be. The page may be fast in a lab, but its stability is conditional, its interactivity a promise that can be broken.

What if, instead, we returned to the loom’s raw mechanics? HTML and CSS possess a deep, inherent capability for presentation. A simple grid of images, linked to their full-size counterparts, is immediately functional. It’s there on the screen the moment the last byte of HTML arrives. With native scrolling and the browser’s own image loading, it’s stable. No cumulative layout shift because the dimensions are declared. No jank because there is no script fighting for milliseconds during a touch event. The user’s intuition—click, see a bigger picture; swipe, scroll the page—maps directly to the platform’s most basic, and therefore most robust, interactions.

This is not a Luddite’s retreat. It is the application of a weaver’s wisdom: the right tool for the cloth. By embracing the <dialog> element, we can create a lightbox with a few lines of JS, leaning on the browser’s built-in focus management and accessibility. With the loading="lazy" attribute, we get lazy loading for free. CSS Scroll Snap gives us the satisfying, performant ‘slide’ feel without a single event listener. The result is not a ‘fallback’ but a first-class experience, built on a foundation that cannot collapse.

The craft, then, shifts. Our ingenuity is no longer spent on building the machine, but on mastering the material. We focus on serving the perfectly sized image, on writing semantic markup that tells a story to assistive tech, on using CSS to create subtle, jank-free enhancements. The performance is not an added feature; it is the fabric of the thing. The gallery is fast because it is simple. It is stable because it is native. And in a world saturated with clever, fragile constructs, there is a profound integrity in something that just works, immediately, on the unbleached loom of the web.

Notes & further reading

A few pages I came back to while writing this: