The Case for Whimsy
React Boston 2018 talk by Josh Comeau
This repository contains the slides and related code for my React Boston 2018 talk.
Sadly, it's a bit disorganized. This README aims to help you navigate, to explore all the ideas I shared in my talk.
At React Europe earlier in 2018, I gave a condensed version of this talk. Watch on Youtube
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.
Internet Explorer Downloader
The talk features a globe-and-folder interactive animation, inspired by Internet Explorer.
For the demo, play with it here.
For the code, it lives in this repo. Here are some links:
- WhimsicalInstaller - The stateful, top-level component.
- Projectile (File) - In the talk, a generic Projectile component is shown, to point its children based on its movement. In the code, it's a
Filecomponent, which also includes the child image, but it's otherwise identical
- RotateAfterMouse - This utility component allows clouds and continents to rotate around the planet.
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
Transportto 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.
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.
- w3 guide