I am an artist, engineer, and educator. My work has been featured on NPR, the CBC, HuffPost, Canadian Business, and elsewhere. I volunteer at Repair Matters and Canada Learning Code, and am slowly developing my thoughts on what digital literacy means on today’s Internet. I’m part of the Open Innovation team at Mozilla I’m taking the winter off to ski!
Recent additions
(explore all)- Patch
Gravity delay
This is a creative MIDI delay that physically models incoming notes based on their velocity... read the full description on Patchstorage
- Patch
Panning gravity delay
This is a creative MIDI delay that physically models incoming notes based on their velocity... read the full description on Patchstorage
- Video
Mozaic demos: Gravity delay, panning gravity delay, dedupe
A quick demo of three Mozaic plugins I wrote in December 2020: “Gravity delay”, “Panning gravity delay”, and “Dedupe”. Download them for free on Patchstorage:
- Commit blog post
Feature: add a dark theme
• From repository rileyjshaw/rileyjshaw.github.ioDark themes are something I’ve sought since my early days on a computer. I remember finding a way to apply a black background to Microsoft Word 2003, then being horrified when I accidentally printed the document. In uni I scripted my desktop to boot into f.lux’s darkroom mode. One of my only lasting contributions to Signal was loudly advocating for dark mode on iOS and Desktop, not just Android. I even made a browser extension in 2015 to apply a dark theme to the entire Internet.
It’s not the most pressing or exciting work, but I decided my site should have a dark theme of its own. I took a lot of inspiration from my former Khan Academy teammate Josh W. Comeau’s dark mode post, with a few differences.
- Project
Minimal SVG dark mode icon
An attempt to fit a few difficult SVG requirements (SMIL animation, resizable with fixed stroke width, fits within container bounds) into the same icon.
It’s a different icon than the one I created for this site.
- Commit blog post
The responsive edit
• From repository rileyjshaw/font-comparison-toolAnother big one:
- Wrote a Puppeteer script to render, measure, sort, and save fonts, sorted by height, width, and height x width
- Made row height fit the biggest displayed font cell, and nColumns responsive to window width
- Removed
AutoSizer; swapped it for a simpleruseSizehook - Added
yarn update-fontsto automatically download, measure, and update fonts - Improved the placeholder text behaviour, and added some variety
- Updated Google Fonts
- Commit blog post
The performance edit: part 2
• From repository rileyjshaw/font-comparison-tool(Part 1 was c9bfc97)
Wow. After these two commits, this feels like a completely different app. It’s so speedy!
Background
Last commit, I focused on eliminating unnecessary FontContainer re-renders. This wasn’t a big priority at first… until I added Google’s catalog of > 1000 fonts. Ever since, performance has crawled whenever that category is selected.
I decided to tighten up my own render code first because I knew that after enclosing the list in a virtual scroller, performance would be okay enough. And then I’d be less motivated by the sluggish, practically unusable Google Fonts viewer.
And I'm happy I did!
react-windowmade a huge difference. With the improved render tree and virtualized scrolling, this app somehow makes loading, displaying, and live-editing the preview of > 1000 webfonts pretty smooth.
Sort through hundreds of projects and posts in the lab.