The Case for Whimsy

React Europe 2018 talk by Josh Comeau

This repository contains the slides and related code for my React Europe 2018 talk.

Sadly, it's a bit disorganized (I thought I'd have time to organize everything, but then suddenly it was the conference 😨). This README aims to help you navigate, to explore all the ideas I shared in my talk.

Recording

Watch on Youtube

Slides

• Original
• With presenter notes (there aren't many, but hopefully they help!)

This repo also holds the code for all the slides. It's super messy, but the presentation mostly lives in src/presentation.js.

You can also check out the components used for the live examples in src/components. Some highlights:

• WibblyWobblyCircle - A floating, warbly circle.
• TitleParticles - A few slides in, I introduce the talk. The intro slide has these floating self-drawing particle things, described by the components in this directory.
• FoldConcept - While the actual <Foldable /> component is described below under Whimsical Mail Client, this is the code for the concept fold. Might be easier to follow, although you almost definitely want to use the <Foldable /> code below for your own apps.

Confetti

The talk features a confetti rain.

For the demo, play with it here.

For the code, it lives in this repo. Here are some links:

• Canvas - The generic, reusable HTML canvas primitive component.
• Confetti
• ConfettiManager - This is the code for managing the demo, to tweak the parameters.

Additionally, the live-editable examples can be found here.

Whimsical Mail Client

The talk also featuers a fictitious email client.

You can play with the demo

Please note: the code is not production-ready. This is not a real application, and it hasn't been thoroughly tested. There may be bugs if you deviate from the happy-path stuff done in the talk.

As for the components, they're messier than the ones in the talk, and not very well commented. If you have any questions, please do reach out to me on Twitter.

The code for that project lives in a separate repo, and the code is split among a number of different files:

• NodeProvider - a context-driven helper to capture and use references to DOM nodes.
• Foldable - A behavioural component that lets you tri-fold its children like a letter.
• Transport - A behavioural component that moves its children between specified DOM nodes, based on a provided status.
• ComposeEmailContainer - The container for the "compose email" modal. Uses Foldable and Transport to do the neat animations.
• EtchASketchShaker - The cute shake-to-clear animation used when clicking "clear".
• Scoocher - I didn't really mention this in the talk, but there's a fun little underline for the top-left navigation tabs that "scooches" around to indicate the selected tab.
• NotificationDot - Also not mentioned, but there's a cute little indicator dot for tabs with unread messages.

I took inspiration from Tobias Ahlin's fantastic blog post on Meaningful Motion with Action-Driven Animation. Highly-recommended reading.

Accessibility

Whimsical touches are great fun, and are valuable to the user experience, but they aren't critical. Making sure your site works for folks with disabilities is a far greater priority.

For learning about accessibility, I'd recommend Google's Web Fundamentals course.

Some additional resources:

• The A11Y Project - A community-driven effort to make web accessibility easier.
• prefers-reduced-motion media query
• w3 guide

Other Cool Things

My talk mentions WebRender, Firefox's new rendering engine. Lin Clark has a wonderful intro article on the subject.

Another really exciting thing coming up is Houdini, a collection of CSS innovations. Read more about CSS Paint and CSS Layout.