Style Observer ( )
A library to observe CSS property changes on an element.
I have launched dozens of open source projects over the years, many used on millions of websites.
I design software that makes simple things easy, complex things possible, and keeps the transition between the two smooth. This short talk summarizes my API design philosophy well.
I want everyone who would benefit from these projects to have access to them, so my work is nearly always distributed under permissive licenses (typically MIT).
However, designing, building, and maintaining software is highly skilled, specialized work. If you are using my work in a for-profit project, there is a social expectation that you help fund its maintenance. Sponsor me on GitHub and be the reason we can have nice things. This is also in your best interest, as it makes me more likely to prioritize it.
33 projects
Rety ( )
Rety is a library that allows you to record the edits you make on one or more pieces of text (usually code) and replay them later to recreate the same typing flow.
This is particularly useful for orchestrating live demos that run without your presence.
Innovation(s)
The same progressive development, which is the primary benefit of live coding, but without the fumbling, delays, or mistakes that often come with it.
Color.js ( )
Color conversion and manipulation library, developed jointly with Chris Lilley.
Innovation(s)
Possibly the first entirely color space agnostic JS library, pioneered several API innovations.
Impact
Used to generate figures and examples for several CSS specifications and influenced the Color API
LCH Color Picker ( )
A color picker to explore LCH colors that are now being added to CSS. Made with Mavo.
Issue closing stats ( )
An app to display issue closing stats for any repo. Made with Mavo.
Mavo ( )
Mavo is a programming language for non-programmers, empowering them to create full stack data-driven web applications by simply writing HTML.
This was the flagship project of my PhD, in the Haystack Group at MIT CSAIL. I also supervised 3 Master’s students and 10 undergraduates and led them to meaningful contributions.
Innovation(s)
- Hassle-free remote storage, simply by providing a URL, the rest is taken care for you.
- A formula language with several features that make it easier for novices.
- Removes the need to think about data modeling: novices generate their data schemas by simply designing their UI and annotating it
- Editing interface that is largely automatically generated to follow the UI
Impact
Mavo’s innovations led to the publication of several peer-reviewed research papers and 3 Masters theses.
Conic gradient polyfill ( )
A polyfill for CSS conical gradients.
Impact
Encouraged browsers to implement CSS conic gradients. Because the polyfill also implemented the double color stop position syntax, browsers implemented that alongside, just so the examples in the polyfill page work correctly.
Multirange ( )
A tiny polyfill for HTML5 multi-handle sliders.
Impact
Was apparently used so much that its custom properties appeared in Web Almanac’s analysis of the top 1000 custom property names
Awesomplete ( )
Ultra lightweight, customizable, simple autocomplete widget with zero dependencies.
Impact
Featured on Github’s weekly Github Explore newsletter when it launched.
corner-shape preview ( )
Preview the corner-shape property before it’s implemented in browsers, through SVG.
Contrast Ratio ( )
An app for testing whether a combination of CSS colors passes accessibility standards. Exited to Siege Media in 2023.
Innovation(s)
Unlike other tools at the time that only accepted hex codes it supported any CSS color the browser supported, even semi-transparent colors (by displaying a range of contrasts), which required original research.
Impact
Became one of the most popular contrast checkers on the Web for years, and was featured in several books and conference talks.
Prism ( )
A lightweight, extensible syntax highlighter, built with modern web standards in mind.
Innovation(s)
- Low floor: Entirely frictionless to get started, simply drop it in your page
- Very high ceiling: Pioneered an extensibility mechanism allowing plugins to completely change how it works
- Pioneered a declarative, hierarchical syntax for defining language grammars that made it easy for anyone who understood regular expressions to add support for a new language, which helped getting it to 300 languages very quickly.
Impact
Used in a number of high profile websites like Mozilla Developer Network, Google’s web.dev, Sitepoint, Smashing Magazine, A List Apart, CSS Tricks and many others. Over 8M downloads weekly on npm and over 1bn cumulative downloads since its launch.
The CSS3 Test ( )
High coverage testsuite for the most stable CSS modules. 50,000 unique visitors on its launch.
Impact
Dabblet ( )
An interactive CSS playground.
Innovation(s)
- Pioneered a distributed serverless architecture using almost entirely client-side code, with Github Gists as a storage backend.
- Its inline previewers for various value types predate similar features in today’s editors.
Impact
Was quite successful for a few years, with thousands of visitors every day. Several popular industry media like Wired.com’s WebMonkey, CSS-Tricks, Smashing Magazine and others wrote about Dabblet’s release. During its first month, it received more than 65Κ unique visitors, 15Κ of which during its first two days.
Animatable ( )
A CSS transitions gallery that shows what’s possible with even the most basic of transitions: one property, two values.
-prefix-free ( )
-prefix-free was a library that allowed authors to write standard, prefix-less CSS and have the necessary prefixes added on runtime. Was gradually abandoned as browsers moved away from vendor prefixes, so the problem it was solving practically disappeared.
Innovation(s)
Used feature detection for almost everything instead of hardcoded lists, allowing it to remain extremely lightweight and always up-to-date regardless of its version.
cubic-bezier.com ( )
A tool that helps you work with the easing functions of CSS3 transitions & animations and share them with others.
Impact
Featured on several books and talks. Its code was at some point even included in the Firefox browser and Adobe’s Brackets editor
CSS Colors ( )
A tool that helps you convert between the different CSS-accepted color formats (including name keywords) as well as share them with others.
CSS3 patterns gallery ( )
An interactive gallery that demonstrated what’s possible with just CSS gradients. It also allows you to edit the code, to experiment with gradients yourself.
Innovation(s)
The gallery and the corresponding blog posts started the — now widespread — practice of using hard stops in CSS gradients to easily create background patterns and other graphics.
Impact
It has been featured in a number of books, talks, workshops. It was used by Opera Software to fine-tune their CSS gradients implementation.
Chainvas ( )
Chainvas is a tiny generic chaining library that can make any API’s methods chainable (like jQuery). Official plugins for the DOM and the Canvas API included.
Innovation(s)
Uses reflection to read what methods are available and wrap them, making it generic enough that it can work with any API, no need to know anything about it in advance.
CSS gradients please! ( )
A tool that converts the standard gradient syntax to -webkit-gradient and adds the rest of the prefixes
CSS3 structural pseudo-class selector tester ( )
A tool that helps you learn how the :nth-whatever() CSS3 pseudo-classes work.
HTML5 <progress> polyfill ( )
A very thorough polyfill for the HTML5 <progress> element.
StronglyTyped ( )
A library for constants and strongly typed variables in JavaScript.
Incrementable ( )
A script that enables incrementing/decrementing multiple numeric values in textfields with the keyboard arrow keys.
Inspire.js ( )
My slide deck framework, built exclusively with open web technologies. Includes plugins for editable CSS regions, syntax hightlighting and more. Originally released under the name CSSS in 2010, rewritten in 2018 and renamed to Inspire.js
