In these demos, SVG noise is used as a filter to distort geometric canvas animations.

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.

Inhale for 4 seconds, hold for 7 seconds, exhale for 9 seconds.

It’s a different icon than the one I created for this site.

Used as an initial test for this site’s theme picker icon.

• 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

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.

Some improvements since 2018:

• Moved this out of the rileyjshaw.github.io repo into its own project
• Improved UX around color-editing to something much quicker
• Updated UI to show all colors and blend variants on screen at once
• Added a toggle to show / hide secondary colors
• Added saving / export tools
• Added a toggle for dark mode, and separate state for the two palettes
• Added a toggle to test different blend modes on the fly
• Added a button to test live on rileyjshaw.com
• Simplified code structure, added some dependencies, broke files out
• Improved tooling

A bespoke developer tool that I created to choose the additive (dark theme) and subtractive (light theme) color palettes for this website.

It’s scrolling way better now, and changing font size with Google Fonts over no-longer causes an explosion.

Next up: react-window, keep the @font-face declarations to woff2? only

This wasn’t designed for public consumption, but the code is open-source if you want to remix it with your own fonts. I recorded a quick session of myself using it if you’re curious.

It’s the end of the year again. Though there are still design problems and omissions, the site is much further along than it was on initial release. Some highlights:

• /lab no-longer crashes Webkit based browsers (lol)
• I added bunch of new scrapers. Most recently: SoundCloud, Vimeo, and YouTube.
• The design is still uh… getting there… but it’s at least simpler and more consistent now.
• I test-drove the blog and added some new features (like MDX!)
• I put a ton of meat on last year’s skelly bones. From /about to /lab to adding about 3x more quotes, this site is more substantial and chaotic than ever before.

I made this demo UI to show how a mixer might help keep your levels in check. Does this exist yet?

DELETION, PERMANENCE, AND CONSISTENCY=====================================

Silicon Valley likes to store data because it entrenches people in their past behaviors. Corporate culture’s emphasis on consistency is ableist, colonizing, transphobic, and represents a growing discomfort with people’s fluidity.

I hope someday to have an International Day of Deletion. How can we live more presently?

I am excited to say that after a few years of privately practicing Deletion Day on April 4th, we’ve got a public website.

Deletion Day 2020 is less straightforward than it’s been in past years. With the isolation of social distancing, I’ve found comfort in social and digital media. And my gripes about data security and privacy seem tiny next to the health crisis we’re dealing with globally. But – this is still something that matters to me. Privacy and agency remain important components of the rapid changes we’re witnessing in government and society.

There are currently two valid control commands:

• ArrowLeft: nudge text alignment left for the active editor
• ArrowRight: nudge text alignment right for the active editor

Works with touch, touchpad, mouse, and arrow keys.

This commit also upgrades project dependencies, and adds a whole bunch of commit linters and hooks to keep commits consistent. Specifically, I added

• Husky
• commitlint
• Commitizen, and
• Conventional Commits

to keep commits easy and consistent. I'm writing this description through a CLI – it feels like the future. Get used to that feat: tag in the commit header!

Eventually I'd like to add an automated Changelog with Semantic Release, but I'll save that for another day. For now, enjoy my new, faster, shinier, live on the internet, totally rad new site!

• "Your Undivided Attention" (podcast)
• "Breach" (podcast)
• "IRL" (podcast)
• "New Ways of Seeing" (podcast)
• "Steal This Show" (podcast)
• "Technically Wrong" (book)
• "Protocol" (book)
• "How to Do Nothing" (book)

Scriptable text expansion microtool.

Status: pre-alpha / prototype / I thought of this an hour ago

Usage:

# Only works on MacOS for now.
git clone https://github.com/rileyjshaw/plop
cd plop
npm i
npm start

While going about your business, hit Cmd + Shift + Space. Write some valid JavaScript. The result will be typed into whatever program you have open.

Note:

\n triggers a simulated Enter press. Please be kind, don't spam your group chat.

In the past, my blog has always seemed stale and outdated. By allowing it to gobble content from across the web, I can point it to whatever platform I'm currently publishing on!

This commit is going to show up as a post on my blog, which feels rather meta.

The projects on my site are automatically scraped and formatted at publish time using the scripts in this directory. Read more about my reasoning below, or skip to the directory structure.

Why?

Gatsby's source and transformer plugins are powerful, and I used them in the initial development of this site. I eventually decided that separating my collection process would be good for flexibility, control, and offline work.

Flexibility

GraphQL's filters and transforms are powerful, and Gatsby's APIs add more options for how data is fetched, cached, and transformed. However, complicated or non-standard data transforms and sanitization are much easier outside of Gatsby's ecosystem. For instance, the API starts to feel clunky for one-off treatment of specific content nodes,

## timeline
2015: first bingo! [eli](https://twitter.com/veryeli) and i used the attendee
directory to generate a unique card for everyone (twitter login kept it private
🔒). squares on your card were other attendees - if you met someone on your
card you got to check it off. we made it cuz we’re shy. most of it is in the
`pre-2019` folder!

2016: we made the cards prettier by pulling in people’s twitter photos and
doing imgmagick to them 🔮

2017: no xoxo, no bingo… missed u all

2018: xoxo was in the midst of changing their infrastructure, so i lost access
to the attendee directory. [hannah](https://twitter.com/herlifeinpixels),
[jason](https://twitter.com/justsomeguy) and i met in a cafe before the kickoff
ceremony and designed a static version with input from the community. hannah
and jason made 25 icons in like two minutes, it was incredible!!!

2019: i've been too cheap to get https://xoxo.bingo in previous years, but
[andy](https://twitter.com/andymcmillan) noticed a thread on slack and hooked
us up! thx andy.

This is the initial commit, completed quickly as a proof of concept. There's nothing much to show, but I want to deploy ASAP so I can test the full pipeline.

So far, everything has worked! Data from a variety of sources is already appearing on my local server. To reproduce:

• Run gatsby develop.
• Open http://localhost:8000/page-2 in a browser.

So far, I'm surfacing data from:

• A hand-curated JSON list of projects I use for https://rileyjshaw.com/lab.
• Dwitter's API.
• My commit--blog's Atom feed.

Setting this up was EASY, which makes me excited for the future of this experiment :)

For that reason, I didn't need nice features like routing or pages. :) if I wanted to see an old sketch, I'd change the root component and re-render. It worked for me!

But I planned to eventually make an easier way to browse existing experiments. It would benefit me a bit, and casual viewers a lot.

I haven't updated this repository in nearly two years, and I honestly never expect to again. I'm doing less browser-based creative coding these days, and trying to stretch my work in other directions.

I'm okay with manual curation for the most part, but for websites like Dwitter where contributions are inherently unpolished / untitled, it doesn't make sense for me to hand-pick and manually update a giant list.

Also: I'm not sure how long Dwitter will be around for. Periodically saving the underlying code / images / etc. gives me more ownership over the presentation and preservation of my data. It changes my relationship with these sites from content hosts to publishing platforms. That makes me feel more secure with my zillion links.

The CA post is an example of filler content.

Used as part of an online treasure hunt I made.

• Minimum pulse width must be between [32, 1052].
• Maximum pulse width must be between [1888, 2908].

Many popular servos have min/max pulse widths that fall in that unavailable range between (1052, 1888). For instance, the Parallax Feedback 360° High-Speed Servo operates between [1280, 1720].

Before this commit, each instance of Servo stored their min and max values as int8_t. Since that only leaves room for values in the range [-128, 127], it can't store meaningful servo pulse widths, which are typically in the ~[1000, 2000]µs range. To compensate, min and max store the distance from the default values, divided by 4…

• #define MIN_PULSE_WIDTH 544
• #define MAX_PULSE_WIDTH 2400
• #define DEFAULT_PULSE_WIDTH 1500

This causes a lot of confusion², especially since [the docs say write(90) should correspond to the mid-point] (https://www.arduino.cc/en/Reference/ServoWrite); in actuality, it results in a call to writeMicroseconds(1472)³.

This change adjusts the defaults to align with R/C standards. Specifically,

• write(0) now corresponds to the standard min pulse width of 1000µs.
• write(90) now corresponds to the standard zero point pulse width, and aligns with the library's DEFAULT_PULSE_WIDTH variable.
• write(180) now corresponds to the standard max pulse width of 2000µs.

Firefox started rounding to 1 millisecond in Firefox 60.

This commit updates the performance.now() compatibility table to match the rest of the article.

This was a proof-of-concept for a keyboard glove, which was implemented in hardware by mapping the trie to a directory tree.

When I made this website, I decided against adding an /about page. The site was a sandbox to dump anything I happened to build / write / imagine while attending Hacker School, and an /about page seemed limiting. As the site grew, it grew weirder. I decided that its lack of context was an asset. I have some free usertesting.com recordings from 2015 that prove the site made no sense. I loved them.

But the real reason I never had an /about page is that I didn't want to talk about myself.

Exactly a year ago, I retired my portfolio page. I've recently begun applying for grants, and having some context on who is behind this site is important.

The real problem is that this site is old; an /about page is an easy stopgap. This site does not represent me well anymore; I don't know why I still have links to my blog, for example. I would like to strip the site down, and think about the intended audience. But that sort of thing takes time, and I'm making the conscious decision to not prioritize my personal site for now.

Adapted from Virtuoso.

“how can i help?”

a solitary dial reflects the machine’s physical clock speed, acting as display rather than control. despite appearances, your presence is appreciated.

depression is a personal reflection of my past few years, struggling with depression in an environment that couldn’t help or support me the way i needed. depression initially existed as part of a larger criticism of capitalism and the work ethic. i stripped down the larger piece until one exposed dial remained.

the dial represents the machine’s energy level. turned all the way down, it represents depression; the machine’s clock speed drops, and it becomes so sluggish it’s nearly inoperational. when the dial is turned all the way up, the machine works “as intended”.

geometries that reveal contradictory images / messages from different perspectives (to be printed, then origami’d). i tested a few geometries for this one; here’s a prototype i built to test “print” images to a pyramidal lattice:

self-destructive art piece that wants privacy:

wiping away digital residue:

a printer that ran through a scanner that ran through another printer and then into a paper shredder because idk state surveillance or something:

https://www.eventbrite.com/e/sfpc-spring-2018-student-showcase-tickets-45020562715

this evening (less than two days before the showcase) i finally had an idea that stuck. i’m writing from the subway home after building the enclosure and v1 of the software:

the project is called depression. i’m excited to write more about it soon!

turns out marvin minsky beat me to it. for context: minsky, who said “i don’t think there is any such thing” regarding human consciousness, co-founded MIT’s AI laboratory. MIT has a long history of military research; in recent years, its public focus has shifted to military robots, drones, and battle suits.

his manifesto creeps me out. i changed “hands” to “drones” to emphasize why. Edits left as strikethroughs; emphasis my own.

Claude Lévi-Strauss, “Tristes Tropiques”

one of my major goals during this program is to not make things.

* silence. the sfpc showcase curators back away slowly to discuss what a mistake they’ve made. *

it’s okay, i’ll do the assignments and make a showcase project and all that. i’m still going to make things. it’s hard not to; i’ve already made a lot of Things since arriving, more than i’m comfortable with. but i’m celebrating all the things i think of that i don’t make.

during the binary numbers assignment, i came up with an idea to:

• map binary digits (bits) to piano keys
• find binary numbers that resolve to nice chords
• create a simple matching app that prompts players with a decimal number and celebrates when the correct chord is played

week 1

week 2

week 3

week 4

week 5

…i can’t believe we’re halfway through! final showcase prep is starting and i still have no idea what i’ll build. yikes! gonna go ponder that, bye for now :)

with this week’s readings on “security” + surveillance for our crit theory course (“the radical outside”) fresh on my mind, the customs experience was heightened. last time reached an ABSURD level of invasiveness with questions about my family. this time was just lots of silence as i pondered what the neural nets were cooking up.

lil thought: upon saying i quit my job just over a month ago, the agent said “oh - that’s a really long time”. Work is a weed we’re feeding 🌱 neoliberal capitalism, “we eat for you”, soapbox, etc.

Before I start any application process I try to learn as much as I can about the place. That involves learning about the folx involved. I hope this post helps a future SFPC attendee get started on their application.

If you’ve landed here from a search and are considering applying, I recommend doing so! It’s fun here and the people are nice.

A disclaimer before we get into it: everyone who goes through SFPC comes from different backgrounds. If you see something on my application that you haven’t experienced, please don’t take it as a requirement. Batches are carefully selected to include different perspectives and skillsets. And you’re awesome 💕

there can be no understanding between the hands and the brain unless the heart acts as mediator.

but we couldn’t reach consensus about what this meant re: the worker struggles depicted in the film.

anyway, it’s late so instead of getting getting into heady things like that, i’ll share something that made me laugh during the movie. this scene reminded me of my lacking estimation skills at various points in my corporate tech career:

^ me, hand waving

^ my manager

^ my current progress

create a few distinct sounds, for example:

• cup/table tap
• cup/table scrape
• ball/table tap
• ball/table scrape
• cup/ball tap

these examples are unambiguous and easy to perform rapidly by someone keeping the cup in one hand & ball in the other. i’ll refer to each performed sound as a “bit” from here on out.

for n bits, you have (number of sounds)^n options. with the examples above that’s 5^n, which is plenty.

so what’s important to convey?

the shapes are curvy and strange, so it’s easier to share a limited reference table of basic + advanced shapes instead of deriving each part of the bear from scratch. three bits could cover 125 shapes, which is ample for bear and bear-like drawings.

v2 uses some trig functions that are slower than the v1 algorithm. For super fast averaging, v1 is still your best bet.

Each experiment was built using a web tool I created in the spirit of OpenFrameworks and TouchDesigner. I wanted libraries close at hand with a simple API for drawing to <canvas>, SVG, etc.

Each row is placed to line up visually with the row above it, which causes a subtle shearing effect.

It's a bit slow. I'd like to speed it up if this works out.

(Subtle effect on mousemove)

Test Plan:

• npm run lint
• npm run test

Abandoned UI experiment; seeing a large list is useful for large sets. Also, quicksort would work better here.

I was interviewed for this work by NPR, the CBC, and PCMag.

:facepalm:

Works best with MIDI keyboards, but you can use your computer keyboard too.

Hard press = UPPERCASE, soft press = lowercase.

Though the line’s formula stays consistent as it spirals out, the tile grid doesn’t increase in size.

Changing the timing function on this one is extremely satisfying.

n͖͙͍͔o̴̰̤͈͙̘̥w͉̮ ̩w̺̘i̠̲͉̘̪t̟̜͉͓͈͞h̩͚̺̕ ̧͉̹̮̠ͅm̻̰͔̜͚o̲̥̘r̶͕̟͇͇̟̭e̠ ̩̺̖̟g̪̬̰̺̟̪͈͜l͇͉͚̬͞i̡ṭ̠̲̰̦ͅc̨̣ͅh̰̲̯̺͕̼͈͜e̷͕̜͎̱s̢̩

I’m sure someone else discovered this effect long before I did.

Could be done far more efficiently by scaling / translating a fixed amount of concentric circles, but math-ing it was more fun :)

This layout was rather difficult before flexbox came along.

Super quick demo trying (failing, mostly) to capture the perspective effect.

Includes a few variations.

Drag your mouse over it, and click for something special.

Screenshot:

It's responsive, too!

From the project page: “there is confusion in the mixed layers of metaphors. This is not an obfuscated code repository; not really. In some ways, it is the opposite.”

1. Text content could be easy processed and manipulated (admittedly, I wasn't using this for anything).
2. Toggling styles was as easy as adding and removing a <style> element from <body>.
3. In theory, this strategy would beat out almost every other style rule (some inline styles excepted). User !important rules used to override author !important rules, but Chrome no-longer does user stylesheets. I figured an aggressively !important author stylesheet added at the very bottom of the page was pretty solid.

After some testing, I realized that !important styles from content_scripts injection (along with chrome.tabs.insertCSS) actually do take precedence over author stylesheets. Since 3) was the key consideration for my original decision, I re-wrote the extension to inject a stylesheet from content_scripts.

I was hoping for a more convincing gradient; the weight calculation could use some work.

Written originally as a bookmarklet in 2013.

An excuse to write git push it to-the-limit into the console.

Built hastily between speakers on the last day of the festival; requires login with Twitter to protect attendees’ identity.

Requires a bit of JS on page load. Just CSS and SVG after that.

Used to live at the epic phone numbers +1.480.360.MATH (US) and +1.647.360.MATH (Canada).

Creates a shadow based on mouse position.

Includes an audio visualizer built with the Web Audio API.

Implemented with the Web Audio API using custom oscillators.

Probably doesn’t work cross-browser.

Created as a proof of concept for TextSecure’s browser extension layout.

Type “help” for command list.

Never used.

Demo involved patching Adobe Web Platform’s balance-text polyfill.

Inspired by Kung-Fu Chess.

*This is a proof-of-concept and won’t actually steal anything.

Built with a custom raycaster / collision engine.

Currently doesn’t work on iOS < 8 since they mess with scroll events. If you use this in production, look into iScroll.

Bad interaction tbh.

Supports my blog post of the same name.

Part of “Stealing history with CSS binary trees”.

Created with friends at Hacker School. I was in charge of the mobile + WebSocket controller framework and the server.

This used to be on Chrome Experiments but it’s offline now :(

Lowercase alphanumeric, length [1, 198).

Cross-device, cross-browser.

Fun with gradients and background-clip: text.

A follow-up article has since been written to show more robust techniques.

There’s actually some cool stuff going on in here, so I’ve commented it thoroughly.

This was my first CodePen to hit the front page :)

Features a terrible mash-up of Watermelon Man and Mos Def’s Beef freestyle that I threw together in Audacity…

The perspective effect can be added to anything; a site where each content block was extruded could look interesting.

Chrome only as of 2018.

Demo built for web browsers and Wacom tablets. Installation involved creating a large infrared plane behind a flexible display and sensing deformations using Community Core Vision.