Hi there! This is a collection of my publicly-available coding projects and presentations. Most of the code is open source on GitHub. I also write things in blog form at shoehornwithteeth.com.
This page doubles as an experiment in how much styling can be done with just CSS gradients. Every bit of theming on this page is pure CSS – the only image files are project screenshots.
Not every project should be Serious Business™. Here are some things I’ve done as a creative outlet – a mixture of experiments, learning exercises, and silly things to make people laugh.
Some interactive experiments and visual code art.
Drone Versioning made easy, but not more sensible.
Censor out any emoji characters in a piece of text, either visually or audibly.
Turn every web page into an interactive game of Numberwang!
A command-line utility to help you stack your yaks.
A library for creating ventriloquist dummy effects in canvas — because that’s what everyone needs, right?
Fun’s over! This is where the “proper” projects start, I guess.
A webpack plugin for moment-timezone to reduce how much data is loaded in the browser.
A PostCSS plugin to fix gradient transparency for certain browsers (looking at you, Safari).
Parse an element’s CSS background properties to get a list of individual backgrounds.
A simple list of which CSS properties can be animated and how.
A simple list of CSS shorthand properties and which longhand properties they expand to.
A Sublime Text package that adds syntax highlighting for IANA time zone database files.
A Visual Studio Code extension that adds syntax highlighting for IANA time zone database files.
jQuery plugin to find the elements in a page that are closest to (or furthest away from) a particular point or element, based on pixel dimensions.
jQuery plugin to get the real dimensions of an element’s children, which don’t always match the parent’s width and height.
A simple way to speed up and repeat an easing function multiple times over the course of a single animation call.
A cricket analysis investigating whether an old maxim holds up to statistical scrutiny.
An overview of all the different times of the year when countries and regions use daylight saving time.
Open a new tab next to the one you’re viewing, via a button or a keyboard shortcut.
Explain any IATA airport codes in a web page to avoid having to look them up. Especially useful when using Twitter.
Redacts all emoji characters on a page, replacing them with black boxes.
Like “Can I Use” but for CSS animations. Find out which CSS properties can be animated and get details of how they animate.
Interactive breakdown of how browsers render multiple CSS backgrounds on a single element.
A brief overview of the Intl APIs built in to browsers to help with internationalisation.
Slides and transcript (Web Directions Summit 2019) | Video (requires login)
An overview of what CSS gradients can be used for, as well as the mathematics of how they work.
Take a journey into the weird and wonderful (horrible) world of dealing with time zones in software, and learn how I screwed it up.
Videos: JSConf EU 2015 | JSConf AU 2014
A primer on how easing works in animations and how it’s coded in various JS frameworks.