Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
config
public
scripts
src
.flowconfig
.gitignore
.prettierignore
README.md
package.json
todo.md
yarn.lock

README.md

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

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:

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:

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.

You can’t perform that action at this time.