Bram.us

Screenshot of the Scroll-Triggered Animations Debugger Extension fopen in DevTools.

Code example showing the CSS Typed OM, with the css-typed-om polyfill loaded on the first line.

https://www.bram.us/wordpress/wp-content/uploads/2026/10/calc-input.mp4 Recording of the <calc-input> demo.

caniname CLI output preview Whenever I build a new tool or custom element (like <show-keystrokes> or <rich-input>), I always end up doing the same manual dance: checking if the package name is still free on NPM and if the matching <name>.netlify.app subdo…

https://www.bram.us/wordpress/wp-content/uploads/2026/10/ie-page-transitions.mp4 Recording of the demo showcasing all 23 RevealTrans effects. ~ Back in late 2024, I started working on a fun end-of-year side project named ie-page-transitions.

https://www.bram.us/wordpress/wp-content/uploads/2026/09/show-keystrokes.mp4 Recording of the <show-keystrokes> Demo & Playground. ~ When recording screen casts or doing live demos, I typically rely on a native macOS app to visualize my keystrokes on scre…

~ Chrome 154 adds support for responsively-sized iframes, letting an <iframe> size itself based on the intrinsic size of its embedded document.

Visual of the build steps to take.

Screenshot of <rich-input> in action ~ While working on a side-project to better navigate and search through my record collection, I found myself in need of a rich search input: one that accepts free-form text alongside structured filters like artist:“Aph…

About a month ago, WebKit gained support for interactive-widget.

~ Today I learned that CodePen supports Mermaid diagrams — Chris Coyier has a a whole collection with examples here — and I also learned that there is no custom element to easily include these in your markup … so I built one. ~ Looking at Chris’s demos, I…

https://www.bram.us/wordpress/wp-content/uploads/2026/09/animated-css-grid-2.mp4 Recording of the high-fidelity demo.

https://www.bram.us/wordpress/wp-content/uploads/2026/09/hic-pageflip.mp4 Recording of the demo. ~ Way back in 2005, I used a Flash PageFlip component to display a book on a website.

In CSS you can feature detect support for things like selectors, properties + values, and at-rules using @supports.

To target multiple classes that share the same prefix, you’d typically have to resort to adding an extra base classes to your markup or to using badly performing attribute selectors.

Adding a Dark Mode toggle to your website is a nice touch that many users appreciate.

https://www.bram.us/wordpress/wp-content/uploads/2026/08/scroll-axis-lock-comparison.mp4 Recording of the demo comparing what the browser does with and without scroll railing.

Screenshot of the visualizer, as deployed onto CodePen TIL: MDN exposes up-to-date page view data through https://popularities.mdn.mozilla.net/current.csv.

One of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS.

Photo of my laptop in Chrome tent before we opened.