BLOG // 10

Blog

dispatches from the editor $ cat posts.log

CSS @scope: the end of BEM (for real this time)

A practical comparison of BEM, CSS Modules, and the new @scope at-rule. Refactor a real component three ways and see which one ships least code.

View Transitions API: animate between states like it's 2026

Build a tabs component with morphing underline and crossfading panels using the View Transitions API. One JavaScript call, zero animation libraries.

Scroll-driven animations: the reading-progress bar in 10 lines of CSS

Build a reading-progress bar, a parallax hero, and a section-reveal effect using only CSS scroll-driven animations. Zero IntersectionObserver, zero requestAnimationFrame.

Build a tooltip with zero JavaScript using CSS Anchor Positioning

Replace Popper.js, Floating UI, and 11KB of runtime with three CSS properties. A complete, accessible tooltip in pure CSS using anchor-name, position-anchor, and position-try.

CSS if() is here. Build your first conditional style in 5 minutes.

A practical, copy-pasteable tour of the new CSS if() function. Replace a theme-switcher, a responsive padding rule, and a variant prop without writing a single line of JavaScript.

Introducing the Web Maker Blog

Welcome to the official Web Maker blog. Follow along for updates, tutorials, and behind-the-scenes looks at building Web Maker.

Web Maker 4.0

Announcing Web Maker 4.0 — a new home, Files Mode, Command Palette, improved Console, Monaco Editor, Prettier integration and more.

Making Asteroids with Kontra.js and Web Maker

A step-by-step tutorial on building a simplified Asteroids arcade game using the Kontra.js game library and Web Maker.

Web Maker is now in Preact

After 93 commits and 17913 new lines, Web Maker has been completely migrated from plain JavaScript to Preact.

Web Maker 3.0 is here!

Web Maker 3.0 brings a cross-browser web app, user accounts with cloud sync, a new layout mode, dedicated documentation and more.