Khan Academy is an education-tech nonprofit on a mission to provide a free, world-class education to anyone, anywhere.
Khan Academy's core product is a library of exercises, articles, and videos. Learners can use Khan Academy to master a variety of elementary, high-school, and college-level subjects.
So far at Khan Academy, I've worked on a number of different initiatives and features. Some of the work I'm most proud of includes:
- Helped build a new "progress" mechanic. Involved a major visual overhaul of the core content-library pages. Exceeded our engagement metrics goal by 300%, and work continues to improve the user experience!
- With two other teammates, switched to using React Router 4 in the library, replacing the traditional server-rendered approach, and speeding up page load time by ~2x.
- Worked on the Growth team to investigate, prototype, build, and ship smaller-scale, metrics-focused changes. Many tweaks to our signup flow yielded 4 times as many signups from under-13 learners.
- Created a physics-based confetti-rendering engine that rains confetti across the screen when the learner gets 100% on an exercise. This sounds silly, but I'm delighted by the effect it's had on the user experience 😃.
Unsplash is a photography site that curates beautiful photos that are all released for free, under Creative Commons Zero.
Some highlights from my time at Unsplash:
- Led development on a Twitter-like "Follow" system, which aggregates activity from those you follow in a feed.
- Overhauled state management with Redux, rearchitecting it to normalize data from the API to preserve a single source of truth.
- During a make-day (AKA hackathon), a back-end engineer and I built Unsplash on a Map, a realtime view of downloads, likes, and add-to-collection events from around the world.
- During another make-day, built React Trend, a minimal charting library for rendering spark lines, used on the Unsplash analytics page for photographers
Breather is a service to book short-term commercial space. Similar to AirBnb, but for offices. It offers spaces in 10 cities across North America and Europe, including several hundred in New York City.
Some of the things I built at Breather:
- Led development on Backstage, our internal admin tool for Operations and Customer Support. Designed and developed several neat things, including Bird's Eye View, a window into the activity across all spaces in a given city. Built for Operations Managers to be able to dispatch cleaning staff efficiently.
- Advocated for and led a rearchitecture from Backbone to React/Redux. We started testing it in our internal admin tool and found it beneficial, so we expanded the re-architecture to include the Breather.com web app.
- Built an internal component library to be used across Breather products, and integrated it into several Breather products.
The neat thing about being a software developer person is you can solve all the niche problems you have.
I was sick of trying to figure out what to watch on TV when I got home from work, so I made a product to track and manage the stuff I watch. Built with React and Redux on the front-end, and Node and MongoDB on the back-end.
During this project, I experimented with the idea of using components, not functions, as the default method of encapsulation. If I had some desired behaviour like animating something, or disabling scrollbars, I created a new component to tackle it.
Overall, this experiment went pretty well! Some of the components are detailed on the project's README.
React Flip Move is an open-source React library that solves the surprisingly-tricky problem of animating DOM-tree changes, such as list re-ordering.
It's a tough thing to solve because the DOM doesn't give you any native way of transitioning when its structure changes; you can only animate superficial on-screen changes with CSS transitions, whereas I needed to animate the change of an item's position in the DOM.
Since its initial release in January 2016, React Flip Move has grown into a fairly-widely-used project; at the time of writing, it averages between 40,000 and 50,000 monthly downloads on NPM, has almost reached 2000 stars on Github, and has 8 other collaborators.
Key&Pad is a WebAudio-driven synthesizer and X/Y pad.
The keyboard controls the notes (effectively treating a typing keyboard as a musical keyboard). The mouse controls the effects applied to those notes. As you play notes with your left hand, your right hand tweaks the noise, often to really-interesting effect.
This was a fun project for me; with a background in audio engineering, it was fun to implement many of the things I had learned about, using the relatively low-level Web Audio API.
It was also really interesting to build, as I experimented with a few neat ideas:
- The WebAudio API is very imperative, which wasn't working well with React's declarative nature. So I built a React-inspired reconciler that diffs the current audio state and makes the necessary imperative tweaks to the existing oscillators, gains, and effects.
- Because this app can be a little unintuitive, especially for folks without an audio background, I knew onboarding would be important. So I built a multi-step onboarding flow that introduces the elements one-at-a-time. I used Redux Saga for the orchestration, which wound up working really well.
Panther is a tool to help you discover new bands and musicians by exploring an infinite graph, one node at a time. Start with an artist you like, and it presents you with 3 related artists. Each time you click on a connected node, it shifts to the center, and the graph continues to expand, providing you with 3 artists related to the new center.
The recommendations themselves come from the Spotify API. This project is essentially just a pretty UI over a core Spotify feature, but I think it's interesting to take a side-feature and create an experience out of it. The goal of this project was to take a mundane feature and make it feel charming and whimsical.
While freelancing in 2014, I became interested in searching by colour. Specifically, I wanted to see if I could find photos that had "accent" colours. When searching for blue photos, I didn't just want sky and water photos; I wanted photos of cats with piercing blue eyes.
This project wound up teaching me a ton about color theory, quantization, K-means clustering, and database performance. In the end, I was able to find "significant" colours in addition to plentiful ones. Well, some of the time, at least.
Built with Ruby, Rails, and PostgresQL on the backend, Angular on the front-end.
Simple React Development in 2018
Jan 1st, 2018
Hi, aspiring React developer! 👋
Maybe you’re a jQuery developer looking to experiment with a modern framework. Or, maybe you’re an Angular developer wanting to see what all the hype is about. Maybe you’re a seasoned back-end or systems programmer looking to make the jump to front-end. Maybe you’re new to programming in general, but want to learn how to build dynamic web applications.
Regardless of your background, you’ve likely had a similar experience: React itself seems pretty straightforward, but the tooling and ecosystem is overwhelming.…
Performance-tuning a React Application
Nov 11th, 2017
In recent weeks, I’ve been working on Tello, a web app to track and manage television shows.
As web apps go, it’s relatively small — about 10,000 lines of code. It’s a React/Redux app, bundled by Webpack, served by a thin Node backend (using Express and MongoDB). 90% of the code is on the front-end. Source code is available on Github.
There are a lot of aspects to web performance. Historically, I’ve focused more on the post-load front-end side of things: stuff like making sure scrolling is jank-free, and animations are smooth.
In contrast, I don’t often pay much attention to page-load time, at least not on small pet-projects. After all, there isn’t that much code being shipped; it has to be pretty fast out-of-the-box, right?…
Randomness in React Props
Oct 10th, 2017
I’m working on a side-project that involves these cute little animated critters
While they’re all pretty similar from one another, they do vary in a few ways:
- Shape (rectangle, pentagon)
- Walk speed
I wanted the ability to control these props when needed, but also to have randomized values used by default, so that I could easily generate a crowd like this without worrying about having to come up with values for them.…
May 5th, 2017
Many people think of React as a fancy templating system, but really, components are capable tools that can do much more.
Say you have some behaviour, like using the Web Speech API, or handling window events. Traditionally you'd put this in a function and call it from your UI-rendering components... but it might actually be nicer to put that behaviour in a component of its own!
This talk looks at some renderless components (components that `return null` in the render body), to see what kinds of nifty things you can do!