Testing support for the icon and tag properties of the Notifications API across browsers.

Testing the object-view-box CSS property across browsers.

The browser-compat-data project contains some links to browser bugs for features that aren't implemented. This webpage displays this data: a list of unimplemented web features, along with the browser where they're missing, and a link to the browser's bug tracking system about the feature.

Having fun with web components with this simple custom element that can be used to render old-school-looking W3C badges at the bottom of web pages.

A page that illustrates the use of the CSS color-mix() function.

An experiment to see how far we can go with "drawing" inside a single div element by using multiple background gradient image components. Just click and hold to start drawing. The page becomes really slow really quickly, but the element seems to have no problem with thousands of gradients.

A multi-track audio looper that uses the Web Audio API to let you create ephemeral soundscapes and short songs.

A simple puzzle game, which I made with CSS grid and CSS masking. I made it to learn about CSS masking and SVG.

The list of browser (and server runtime) versions, according to BCD.

A fun CSS demo of a kaleidoscope image, rendered in CSS, which uses tan(), clip-path, and a few other cool CSS techniques. Drag an image onto the page to generate other images, and use the controls in the top-right corner to change the rendering.

A little demo showing my recent Spotify playlists just for me to learn new CSS tricks. Caution: not tested across browsers. Likely to break for you.

Type outline:1px solid red much? I'm sure you do. This little utility makes it easier to debug your CSS rules, by just adding `debug` to any selector.

A simple pair of eyes, using CSS, just to teach myself how to use the radial-gradient CSS function.

A game where you try to name as many DevTools panels as you can in 60 seconds! Even if you've been a web developer for a long time, you might be surprised by how few tools you know.

A few real use cases that normally require a custom select component, made with the beta selectmenu component available in Chromium.

A browser extension that lets you pick colors from anywhere on your screen. The source code is available on github. You can read more about the technical details in this article.

A progressive web app sample to play Yahtzee. The source code is available on github.

A progressive web app sample that lets you import and visualize GPS track files (*.gpx). Uses several PWA features such as Window Controls Overlay, File Handling, and Protocol Handling. The source code is available on github.

A Firefox DevTools addon that lets you find elements that match arbitrary CSS style queries. Useful to list all position:absolute elements for example.

Quickly visualize and remember the different alignment properties in various CSS layout types.
Read the full article about CSS alignment.

Visualize the effect of justify-content, align-content and align-items in various flex directions and wrapping modes

WIP of a baseline, text-top/bottom and line-height visualizer for inline elements (works mostly in Firefox Nightly)

Concept for a CSS Filter editor user interface

This is a tool that provides the in-between values as computed by a browser when animating CSS properties.
Just enter a property name and to and from values, and then drag the slider to see the interpolated values.

This is a visualizer tool for CSS linear-gradients.
You can also read my article about linear-gradients.

Click and drag anywhere in the screen to create a linear-gradient background. Enter CSS color names/codes in the inputs to change the colors.

Assign sound URLs to the sampler buttons, and start remixing the web.

See how a given timing function influences a simple animation.

Visualize how box-shadow applies to an element in css.

Understand how css border-radius works with this interactive demo that lets you control the horizontal and vertical radii of all 4 corners of a box.

This tool allows you to experiment with CSS transforms by entering any transform expression and visualizing the result of that transform on an element.
The tool shows both the un-transformed and transformed elements and let's you move and resize the element as well as the transform origin.

Play with CSS transforms and see a live preview of the transformation.

Littleengines is a small canvas-based drawing library that let's you add "engines" that, once tied together, will produce spyrographic-like drawings.
You can check out this demo, and this one.