Touchy-feely development

Slides online @ bit.ly/touchydev

Dave DeSandro

• @desandro
• Front-end developer
• Day job nclud
• Masonry

nclud.com v3

• Lots of awesome HTML5 features
• But everyone loves the logo spinner

Delightful interactions

• Nick Kwiatek
• Matrix sequencer
• Fancy scrollers like Nike Better World by Ian Coyle and Duane King

Why are these compelling?

• Unique to the interactive medium
• Could not be achieved in a book, movie, song
• Require a user
• Reward participation
• Immediate

What is the web?

• Humanity’s greatest library
• Our best tool
• The web should be a playground too
• A place for imagination

Drawing on the Right Side of the Brain

• by Betty Edwards
• 
• On surface level, a drawing tutorial
• Why can’t everybody draw?

Your two brains

• L-mode dominates
• R-mode must be nutured

The web, land of the L-mode

• ordered lists
• grids
• everything has rationale

Front-end development

• Capital city of L-mode
• a.k.a Squaresville

Developer’s dilemma

• Stuck in L-mode
• Work all day with code
• order
• process
• Visual designers do ‘creative thinking’
• How can we escape?
• How can we be more?

Growing

• Re-imagine the role of the front-end developer
• Being expressive
• Getting in touch with your inner artist

The front-end artist

• What would a front-end artist do?
• Engaging users on another level
• More than making brochures
• More than rote presentation
• Make people feel something
• Get an emotional reaction

But today…

• Technology isn’t just there yet
• Tools we have weren’t designed for artists
• They were designed for computers

By hook or by crook

By any means necessary, get it done

• Build a library of hooks

The front-end artist’s touchy-feely toolkit

• Tools and techniques we’ll need to make evocative interactions

JavaScript

• All about behavoir

Animation

• Nothing in nature instantly appears
• Everything has motion
• Carries a lot of implicit information
• Tells a (small) story
• Stories are how we understand our world
• Best (cheapest) way to get a whoa
• 
• 
• 
• 
• 

Understanding frame-based JS animation

• Perform an operation
• Wait
• Perform another operation
• Repeat

var t = 0;

function move() {
  // increment
  t++;
  // apply changes
  element.style.left = t + 'px';
  // do it again in a lil bit
  setTimeout( move, 16 );
}

See example move.html

• Same concept used throughout every JavaScript animation library
• jQuery .animate()
• requestAnimationFrame
• Fundamental component of all the other techniques

Non-JS animation

• CSS transitions
• CSS @keyframes animations
• SVG path animation
• Animated GIF
• bottom-of-the-ninth.com by Ryan Woodward
• House Industries Photo Lettering - How to

Reverse Transformation

• Remember that Jamiroquai - Virtual Insanity video from a while back?

• Applying a transformation on a child
• then apply the reverse transformation on its parent
• Zoomooz by Janne Aukia
• nclud.com/contact map

See example corner-hide.html

Image manipulation

• <canvas>
• Rally Interactive
• Server-side solutions like PHP GD, ImageMagick
• CSS filters

Particles

• A collection of items
• Each item has same behavoir, but different properties

See example jsfiddle.net/desandro/mNtrc/

See example desandro.com/demo/2011/undulate-graphene/

• Perceived complexity, simple execution
• This is what computers accel at
• Parallax

Expertise

• Knowing your tools
• Confronting new problems makes you reach for new tools

Coloring outside the lines

• Scrollability by Joe Hewitt. See details
• Morf.js by Joe Lambert
• Dynamically generate and inject custom @keyframes styles into pages

Interactive

How will you get the user involved?

• click / touch
• mousemove / touchmove
• hover
• scroll
• keyboard
• multi-touch gesture
• device orientation & gyroscope

Selling it

• Take initiative
• It’s not a line-item on the proposal
• Make prototypes, experiment

A final touchy-feely note

• We work on machines
• …in the language of machines
• …to be intepreted and displayed by other machines
• But in the end, it’s for people

Build for people