Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 0b0e0335ad
Fetching contributors…

Cannot retrieve contributors at this time

executable file 240 lines (169 sloc) 5.16 kb
layout title
Touchy-feely development

Touchy-feely development

Dave DeSandro v3

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

Delightful interactions

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 greatest tool
  • The web should be a playground too
  • A place for imagination

Drawing on the Right Side of the Brain

  • by Betty Edwards
  • Drawing on the Right Side of the Brain
  • On surface level, a drawing tutorial
  • Why can't everybody draw?

Your two brains


  • order
  • sequence
  • rational
  • language
  • grids and tables


  • chaos
  • happenstance
  • emotional
  • imagery
  • blobs and webs
  • L-mode dominates
  • R-mode must be nutured

The web, land of the L-mode

  • ordered lists
  • grids
  • everything has rational

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
  • goal oriented
  • labeled as non-creative
  • visual designers do 'creative thinking'
  • How can we escape?
  • How can we be more?


  • Re-imagine the role of the front-end developer
  • Being expressive
  • Get 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


  • all about behavoir

The front-end artist's touchy-feely toolkit


  • Nothing in nation instantly appears
  • Everything in nature has motion
  • Carries a lot of implicit information
  • Best (cheapest) way to get a whoa <!-- + TODO add sweet Keanu -->

Understanding frame-based JS animation

  • Perform an operation
  • Wait
  • Perform another operation
  • Repeat
  • Same concept used throughout every JavaScript animation library
  • jQuery .animate()
  • Emile by Thomas Fuchs
  • Morpheus by Dustin Diaz
  • requestAnimationFrame
  • Fundamental component of all the other tools

Non-JS animation

Reverse Transformation

Linear interpolation

  • Get a value a, return value b
  • Basically how all fancy scrollers work

Image manipulation

  • Canvas
  • Server-side solutions like PHP GD, ImageMagick
  • CSS filters


  • Basically a collection of items, each item has variation
  • This is what computers accel at
  • Turns out, this is how the universe works


  • Knowing your tools
  • Confronting new problems



  • Be unobtrusive
  • Enable animation only where it looks best
  • Don't break the web
  • Maintain URLs
  • HTML should be readable by machines

Selling it

  • Take initiative
  • no one will specifically ask for this
  • no one knows what you're capable of
  • Make prototypes

Art in web development

  • The medium of web development is still very young.
  • Awkward adolencense - Johnathan Harris
  • Where are the artists?
  • Do you want to make something exciting?

Impressionist movement

  • before, how closely you could depict an event
  • a new way of expression

Why art?

The best art reveals a part of you, that you didn't know was there.

A final touchy-feely note

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

Build for people

Something went wrong with that request. Please try again.