> Markdown version of [/videos/1806-nolojs-avoiding-javascript-cruft-with-html-and-css-aaron-t-grogg?t=2354](https://www.wearedevelopers.com/videos/1806-nolojs-avoiding-javascript-cruft-with-html-and-css-aaron-t-grogg?t=2354). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # NoLoJS - Avoiding JavaScript Cruft with HTML and CSS - Aaron T. Grogg Aaron T. Grogg challenges UI engineers to drop bloated NPM packages for basic components. Learn how native HTML and CSS can vastly shrink payloads and boost frontend resilience. - **Speakers:** Aaron T. Grogg - **Event:** Coffee With Developers - **Published:** February 9, 2026 - **Duration:** 1:00:41 - **URL:** https://www.wearedevelopers.com/videos/1806-nolojs-avoiding-javascript-cruft-with-html-and-css-aaron-t-grogg ## Summary Aaron T. Grogg discusses the philosophy behind NoLoJS, a pattern library advocating for "no or low JavaScript" approaches to user interface design. While JavaScript is essential for complex client-side interactions, developers often over-rely on bulky NPM packages and rendering frameworks for simple components like accordions, carousels, and tabs. By initially leaning into native HTML elements and modern CSS features, engineering teams can drastically reduce network payloads, shrink the browser's processing overhead, and build simpler, more resilient user experiences without sacrificing functionality. The conversation explores the utility of progressive enhancement and native browser capabilities, highlighting tools like CSS feature queries (`@supports`) for reliable fallback strategies and semantic HTML tags like `<details>` and `<summary>`. Grogg emphasizes that providing unstyled, pure markup allows components to seamlessly inherit the natural CSS cascade of a project, unlike heavy component libraries that require extensive structural overrides. He encapsulates the mindset by noting, "I have nothing against JavaScript, but it has better things to do than to manage your accordions and NAV menus," demonstrating how native features not only improve web performance optimization but also eliminate the fragility of JavaScript-only rendering. Implicit takeaways for development teams involve reassessing the standard procedure of instantly searching for an external package and looking past overly complex React integrations when lightweight web standards suffice. The discussion highlights the importance of accessibility and semantic HTML, reminding UI engineers that native DOM elements provide vital hooks for assistive technologies without the need for excessive ARIA overrides. Pushing for NoLoJS strategies forces organizations to think critically about code maintainability and the risk of bloated DOM trees—like massive HTML payloads commonly found on e-commerce platforms—ultimately leading to a faster, more robust frontend architecture. **Keywords:** nolojs design patterns, web performance optimization, javascript dependency bloat, native html components, progressive enhancement, css feature detection, semantic html markup, client-side rendering, pure css components, dom node reduction, screen reader accessibility, css scroll animations, html details element, frontend architecture resilience, npm package overhead ## Chapters 1. **Navigating developer job tenure and employer expectations** (00:02) — How staying at a company for multiple years can be perceived differently by hiring managers in software engineering. 1. **Reducing JavaScript dependencies with native HTML and CSS** (04:31) — How the NoLoJS project advocates for utilizing built-in browser features to create interactive UI components without external logic. 1. **The developer bias towards complex abstractions and frameworks** (09:30) — Why engineers often default to heavy JavaScript packages and NPM installs instead of learning modern platform capabilities. 1. **Creating customizable and unstyled web component patterns** (12:59) — Providing minimalist, unopinionated markup that developers can easily integrate into their own cascaded CSS systems. 1. **Avoiding bloated dependencies in third-party JavaScript libraries** (18:28) — The historical challenges of utilizing massive utility libraries that ship unnecessary features beyond what a project requires. 1. **Demonstrating pure CSS components within the NoLoJS repository** (24:26) — Exploring repository examples of accordions and carousels built entirely without JavaScript for quick developer adoption. 1. **Feature detection and resilience in modern CSS architecture** (32:47) — Using feature queries to create progressive component fallbacks instead of relying on JavaScript to calculate browser support. 1. **Evaluating performance impacts of advanced CSS animations** (39:14) — How complex view transitions and massive DOM selectors can unintentionally degrade page speed metrics on large-scale applications. 1. **Navigating accessibility standards and screen reader support limitations** (44:06) — The friction between using semantic tags correctly and the reality of outdated assistive technology failing to interpret modern features. 1. **Minimizing HTML payload sizes and cleaning up data attributes** (50:56) — The performance cost of injecting data structures into DOM elements through the extreme overuse of custom properties and generated markup. 1. **Identifying scenarios where JavaScript remains an essential tool** (55:34) — The specific client-side data mutations and interactive interfaces that still demand robust JavaScript solutions for acceptable rendering speeds. ## Related Moments - [Adopting progressive enhancement workflows to prevent frontend bloat](https://www.wearedevelopers.com/videos/1761-wearedevelopers-live-frontend-inspirations-web-standards-and-more) (from "WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more") - [Navigating CSS complexity and embracing core frontend technologies](https://www.wearedevelopers.com/videos/1788-wearedevelopers-live-you-don-t-need-javascript-modern-css-and-more) (from "WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More") - [Reevaluating the default reliance on JavaScript for interactions](https://www.wearedevelopers.com/videos/1788-wearedevelopers-live-you-don-t-need-javascript-modern-css-and-more) (from "WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More") - [Modern JavaScript loop optimization and CSS innovations](https://www.wearedevelopers.com/videos/1786-wearedevelopers-live-ai-freelancing-keeping-up-with-tech-and-more) (from "WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More") - [Audience questions on accessibility and framework tradeoffs](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components") - [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo") ## Related Articles - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) - [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering) - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine) ## Related Jobs - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**