Skip to content
What are you looking for?. Open searchSR
brands and shortcuts
Webmedium signalverified

NoLoJS: a catalog of patterns HTML and CSS now handle

Aaron T. Grogg assembled a survey of common JavaScript patterns that today are solved with plain HTML and CSS, with no script at all, or the smallest one possible. The collection pairs well with the Baseline piece: first check what the platform already does, then drop the dependency. The result is a lighter page and better Core Web Vitals numbers.

By Redakcija WebAiRadarPublished 1 min readwritten by a model
Image: aarontgrogg.github.io/NoLoJS

Source

aarontgrogg/NoLoJS: Reduce the JS Workload with NoLoJS

NoLoJS · Original published August 12, 2026

Aaron T. Grogg assembled a collection of common JavaScript patterns and showed, for each one, how it is done in plain HTML and CSS. This is not a manifesto against scripts but a shift of the load onto a platform that has since learned to do the same job on its own.

What the collection covers

  • Accordions and expanding panels
  • Navigation menus
  • Carousels, in eight variations
  • Deferred loading
  • Other common interface patterns

How it is organized

Top-level folders are named after the purpose — after what is being built, not after the HTML element that builds it. That is how you find what you actually need.

Each folder has a readme surveying the variations, and each variation the smallest possible set of files: a description, an HTML snippet, a stylesheet, and a script only if one is needed at all. There is also a static site with working examples and one CodePen per pattern.

Why it pairs with the Baseline piece

Baseline tells you what is safe to use; NoLoJS shows what that looks like in code. First you check the state of a feature, then you take a ready pattern.

„I have nothing against JS, but it has better things to do“
Aaron T. Grogg, NoLoJS
TagsJavaScriptCSSperformanceno-JS

Related

The prefix selector, a hyphen followed by an asterisk, set between two oversized curly braces.
Webmedium signal

A class prefix selector is now spec text in Selectors Level 5

The draft of August 18 adds section 2.1, Class Prefix Selectors, defining .foo-* to match any class beginning with that prefix. It replaces the attribute-selector workarounds every design system carries. Nothing implements it yet, and the matching rule has an edge that will catch people: .foo-* does not match foo--bar.

CSS Working Groupverified

The Baseline wordmark beside its double check mark, on a pale green field.
Webmedium signal

Put Baseline in CI so the browser stops deciding for you

Three packages and about 20 minutes. One config tells your build which browsers you target, a linter warns when a stylesheet reaches past that line, and CI says it on the pull request instead of a user saying it in a bug report six weeks later.

web.dev, npmverified

SVGSMILa timing chart before the markup
Webweak signal

A timing chart as the blueprint for SMIL animation in SVG

On August 20 at Smashing Magazine, Johan Grobler described a method in which a complex SMIL animation is first drawn as a timing chart and only then written in markup. Every bar on the chart corresponds to one animate element, and its length and position become the values of the dur and begin attributes. Because a single animate changes exactly one property of one element, the count climbs fast: a three-dot loader takes six of them. The piece also covers synchronizing to another animation's start or end through the begin attribute, and honoring prefers-reduced-motion through the picture element.

Smashing Magazineverified