Joshua Comeau

This talk is all about performance after the initial page load. Learn cool tips about animations, accordions, and more.

When we talk about performance, we generally focus on the initial load experience - the ephemeral period between entering a URL in the address bar and being able to see/interact with the page. That stuff's important, but there's more to this enchilada!

This talk focuses on animation performance. We'll dig into why accordions are almost always implemented wrong, dust off some long-forgotten tricks to run just about any animation at 60fps, and explore the bleeding-edge APIs that can help us in this mission.

2019

React Boston

Saving the Web 16 Milliseconds at a Time

Creating rich animations that run at a buttery 60fps is a deceptively complex task. Yet, it's so important.

Creating rich animations that run at a buttery 60fps is a deceptively complex task. And yet, it's so important: mobile apps have rich, sophisticated animations, and the web is falling behind.

In this talk, we'll break down how to convert a janky animation into a smooth one. We'll unearth rarely-seen techniques, like using spritesheets with CSS, and discover bleeding-edge web APIs like OffscreenCanvas that unlock a world of possibilities.

React Rally

Saving the Web, 16ms at a Time

Most developers agree that performance is super important, but it is a broad topic, and discussion tends to focus on the initial load experience. 

Most developers agree that performance is super important, but performance is a broad topic, and discussion tends to focus on the initial load experience. But what about everything that comes after that? Once the product is fully-interactive, what’s the experience like?

This talk is a deep-dive into building smooth, jank-free web experiences with React. We’ll look at how we can use Hooks and modern browser APIs to build incredible, delightful products that run great across devices.

ReactEurope

I wish the internet was more fun. The web is an incredible platform, and can do incredible things. This talk looks at novel, quirky, whimsical animations and interactions that make our products better and more enjoyable to use. For example, at Khan Academy, we fill the user’s screen with confetti rain when they get 100% correct on an exercise. 

I’ll talk about how we drew on 2D physics to make the confetti feel real. Make no mistake; while this talk straddles the line between engineering and UX design, this is very much a React talk. We'll look at how to abstract motion and whimsical behavior into reusable components, how to fold up the DOM like origami, and how to do SVG/canvas animation in a React-friendly way.

2018

The Case for Whimsy

Explorable explanations are dynamic, interactive, visual tools created to teach systems and concepts, the unlikely pairing of a video game and a data visualization. They’re an exciting new form of media that lets the learner develop an intuitive understanding of the subject.

In this talk, we’ll reconstruct an existing explorable explanation on waveforms and sound. We’ll start from the bottom up, using small, bite-sized components that encapsulate specific UI or behavioural concerns, working our way up to a dynamic, interactive, animated tool.

Explorable Explanations with React

This talk explores various ways that we, as front-end developers, can make our products more delightful to use. While it’s design’s job to give us static mock-ups, it’s our job to bring those designs to life.

Slides: https://github.com/joshwcomeau/react-europe-talk-2018

Mail demo: https://github.com/joshwcomeau/whimsical-mail-client