avatar

Josh Comeau

Software Engineer

Why hello there! My name is Josh.

I'm a software engineer at Khan Academy.
I work remotely from frigid Montréal, Canada.

I've worked across the stack, but my primary passion is building great user interfaces and experiences.

I'm gay, and my pronouns are he/him.

Work

Current and recent jobs.

Khan Academy

Software Engineer
2017–present

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

Senior Front-End Engineer
2016-2017

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

Full-Stack Software Engineer
2015-2016

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.

Projects

A selection of some of my favourite side-projects.

Tello

TV-tracking web app

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

Open-Source Animation Helper

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

WebAudio Synthesizer and X/Y Pad

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

Discover New Artists

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.

ColourMatch

Search Photos by Colour

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.

Blog

Some thoughts. Published on Medium.

Talks

Recordings and slides for talks I've given at conferences. Hopefully more coming up in 2018!

return null;

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!

Contact

Alternatively, feel free to hit me up on Twitter. My DMs are open.