My ReactBoston 2018 talk, The Case for Whimsy (Extended mix)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook
.vscode
config
public
scripts
src
stories
.flowconfig
.gitignore
.prettierignore
README.md
email-masks
package.json
todo.md
yarn.lock

README.md

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.

Previous Version

At React Europe earlier in 2018, I gave a condensed version of this talk. Watch on Youtube

Slides

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 File component, 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 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:

Other Cool Things

My talk mentions Houdini Paint, an upcoming CSS feature. View the demos, or learn more about it