Lab
Web technology experiments I made:
-
CSS alignment in block layouts
Testing the
align-*andjustify-*CSS properties in a block layout. View the source code of that page to learn more.
-
Navigating the web platform
A cheatsheet of sorts, to help you navigate the intricacies of the web platform. How to keep track of what's new? How to influence what's coming next?
-
execCommand sample
A sample page for the execCommand() method.
-
Local Fonts API
A sample page for the Local Fonts API.
-
Framesets!
Got nostalgic and wanted to see if the
<frameset>element still worked in browsers. And it does! At least for now, I'll have to check this page every once in a while to see if browsers end up removing their implementation of the element. If you don't know about this element, it's a way to include multiple frames in a webpage, in columns and rows, like a grid, where each frame is an embedded webpage. This made it possible to load content in parts of a webpage, without reload the entire page, which was useful before the Ajax era.
-
Notifications API's support for
iconandtagTesting support for the
iconandtagproperties of the Notifications API across browsers.
-
CSS
object-view-boxproperty sample pageTesting the
object-view-boxCSS property across browsers. -
BCD impl_url data visualization
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.
-
W3C badges custom element demo
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.
-
CSS color-mix demo
A page that illustrates the use of the CSS
color-mix()function.
-
CSS background-image painter
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.
-
Looper
A multi-track audio looper that uses the Web Audio API to let you create ephemeral soundscapes and short songs.
-
Puzzle
A simple puzzle game, which I made with CSS grid and CSS masking. I made it to learn about CSS masking and SVG.
-
Browser versions
The list of browser (and server runtime) versions, according to BCD.
-
Kaleidoscope
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.
-
Mix Tapes
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.
-
debug.css - The simple CSS debugging utility
Type
outline:1px solid redmuch? I'm sure you do. This little utility makes it easier to debug your CSS rules, by just adding `debug` to any selector.
-
CSS eye
A simple pair of eyes, using CSS, just to teach myself how to use the
radial-gradientCSS function.
-
What's That Tool?
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.
-
Selectmenu tests
A few real use cases that normally require a custom select component, made with the beta
selectmenucomponent available in Chromium.
-
Eye Dropper browser extension
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.
-
Yahtzee PWA
A progressive web app sample to play Yahtzee. The source code is available on github.
-
My Tracks PWA
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.
-
DevTools highlighter
A Firefox DevTools addon that lets you find elements that match arbitrary CSS style queries. Useful to list all
position:absoluteelements for example.
-
CSS Alignment Cheatsheet
Quickly visualize and remember the different alignment properties in various CSS layout types.
Read the full article about CSS alignment.
-
Flexbox outline
Visualize the effect of justify-content, align-content and align-items in various flex directions and wrapping modes
-
Inline elements baseline visualizer
WIP of a baseline, text-top/bottom and line-height visualizer for inline elements (works mostly in Firefox Nightly)
-
CSS Filter Editor
Concept for a CSS Filter editor user interface
-
In-between
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.
-
CSS linear-gradient overlay
This is a visualizer tool for CSS linear-gradients.
You can also read my article about linear-gradients.
-
CSS gradient editor tool
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.
-
Sampler
Assign sound URLs to the sampler buttons, and start remixing the web.
-
CSS timing function previewer
See how a given timing function influences a simple animation.
-
Box-shadow editor
Visualize how box-shadow applies to an element in css.
-
Border radius inspector
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.
-
CSS transformer
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.
-
CSS transform previewer
Play with CSS transforms and see a live preview of the transformation.
-
little engines
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.
