You don’t need JS for that

This was an internal 90-minute workshop for web developers within Atos focused on a simple idea: JavaScript is powerful, but sometimes unnecessary.

Instead of slides, the full session was live and interactive with coding examples.

The session centered on practical demos showing how modern HTML and CSS can replace many heavy JavaScript patterns. The goal was to reduce code, improve accessibility, and boost performance without adding extra libraries. Whether working on product UIs, design systems, or platform foundations, participants were encouraged to challenge assumptions, bring real questions, and test what browsers can already do natively.

Workshop Format

• No PowerPoint, only interactive coding examples
• Live demos driven by practical browser features
• Discussions around trade-offs, support, and progressive enhancement

All demos were built from my You don’t need JS for that CodePen collection, which participants could open during the session, inspect live, and adapt to their own use cases.

Audience and Prerequisites

This workshop was aimed at frontend developers, UI engineers, and design-system contributors who want to reduce unnecessary JavaScript in production interfaces.

No advanced setup was required, but familiarity with semantic HTML and modern CSS made it easier to follow the live coding pace.

Techniques Covered

To keep the workshop practical, I grouped the techniques by the problem they solve and linked each one to MDN for further reading.

Theming and Color (CSS)

• color-scheme
• light-dark()
• Relative colors

Selectors and Logic (CSS)

• :has()
• sibling-index()
• sibling-count()
• Advanced attr()
• if() function
• @function

Motion and Transitions (CSS)

• View Transitions API
• @starting-style
• allow-discrete via transition-behavior
• @property

Native Interactive Primitives (HTML + CSS)

• <dialog>
• popover
• command / commandfor
• CSS Anchor Positioning
• Customizable <select>
• <details> / <summary>
• ::details-content

Browser Support and Progressive Enhancement

Not every feature shown has identical support across all browsers yet. The workshop emphasized progressive enhancement: start with robust semantic HTML, add modern CSS capabilities where supported, and ensure the core user journey remains functional without cutting-edge APIs.

Related Content

• Live demos for View Transitions - A hands-on playground to explore cross-document and same-document transition patterns.
• Re-Imagine the Web with View Transitions - A practical deep dive into why View Transitions can reshape navigation and UI motion on the web.
• OddBird CSS Anchor Positioning polyfill - A production-friendly path to experiment with anchor positioning while browser support evolves.
• A customizable select in Chrome Developers - Overview of modern form control styling with appearance: base and the customizable select model.

Looking Ahead

Even though the workshop demos already used modern and sometimes only partially supported features, the web platform keeps moving fast. One of the most exciting upcoming shifts is a much easier and more consistent way to customize form controls. Tom Nguyen’s CSS Day 2025 talk in Amsterdam offers a great forward-looking perspective on this direction, especially around form control styling through appearance: base.

Key Takeaway

Modern browser capabilities can replace a surprising amount of JavaScript for common UI patterns. When we lean on native HTML and CSS first, we often get simpler code, better accessibility, and stronger performance by default.