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!

More

Recent additions

(explore all)
  • Project

    Pocket calculator

    Scrapes your unread and archived Pocket content and provides basic stats.

  • Patch

    Gravity delay

    This is a creative MIDI delay that physically models incoming notes based on their velocity... read the full description on Patchstorage

    • audio
    • reusable
    • tool
  • 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

    • audio
    • reusable
    • tool
  • 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:

    Read the full description on YouTube

  • Commit blog post

    Feature: add a dark theme

    • From repository rileyjshaw/rileyjshaw.github.io

    Dark 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.

    Continue reading

    • meta
    • readable
  • 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.

    • online
    • pretty
  • Commit blog post

    The responsive edit

    • From repository rileyjshaw/font-comparison-tool

    Another 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 simpler useSize hook
    • Added yarn update-fonts to automatically download, measure, and update fonts
    • Improved the placeholder text behaviour, and added some variety
    • Updated Google Fonts
    • readable
    • tools
  • 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-window made 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.

    Continue reading

    • readable
    • reusable
    • tool
    • tools
    • visual

Sort through hundreds of projects and posts in the lab.

The thundering machines sputtered and stopped.

Feral Kid, Mad Max 2: The Road Warrior