Helping or Hurting?

Helping or hurting?

braille door warning

Let's take a trip back in time

Flux capacitor

Visual state of the art

table layout code

Abstractimation

Table-o-matic

Processimation

WAP-o-matic

Delivery

etoys animation

!Dubstep

Dialup sound explained

No Zip for you!

Broken zipper Photo by Nancy Sims

Progressive rendering

converting one table into many

Source order importance

google 2000

Begone, outdated tool!

        RedirectMatch 301 table-o-matic(.*) frolicking-hedgehogs/$1
      

Old practices die hard…

stackoverflow discussion about layout tables

Question everything?

muddy pig Arguing with an engineer is a lot like wrestling in the mud with a pig. After a few hours, you realize that he likes it.
Photo by Mats Lindh

Helper tools need to evolve with the market

False promises for newcomers

Magic

Learning to deal with the pain

Kid with bandaged finger Photo by Cynthia Closkey

A matter of equipment?

runner on starter block Photo by "tableatny"

If we use Grunt, SASS, CoffeeScript, jQuery, Node.js, and Phantom.js… …this thing will fly!

submarine

Choose what to evolve: tools or browsers and the web platform?

Times change…

smartphones

One size fits all?

lots of devices

My old code is ugly, but still works

Nokia Zombie hammer

DHTML days are here again?

Webkit monoculture

One engine to rule them all?

jQuery Core has more lines of fixes and patches for WebKit than any other browser. In general these are not recent regressions, but long-standing problems that have yet to be addressed. It’s starting to feel like oldIE all over again, but with a different set of excuses for why nothing can be fixed.

Dave Methvin, jQuery core team; President of the jQuery Foundation.

JavaScript dependency…

chrome download broken

Got <script>?

All your users have JavaScript turned off until the first script is loaded and runs

Jake Archibald

Saving keystrokes and adding dependencies?

Adding levels of complexity…

putting laptop into production

@oising on Twitter

Helpers getting stale…

colorbox

Colorbox on Github

Web obesity…

  • 388 requests
  • 24.29MB
grolsch

Grolsch.com

We're in a pickle…

people reading on their phones

A simple plan

We kill the pac-man

We have the audience

Future-proofing our helpers

  • Stop building for the past
  • Let browsers do what they do best
  • Componentise libraries
  • Build solid bases with optional add-ons
  • Fix and apply fixes
  • Know the impact, don't focus on the outcome

We have the tools

Performance is the #1 priority

rolling and waitin

CSS animations and transitions

/* CSS: */
.item { transition: .5s;
        max-height: 200px;
        overflow: hidden;}
.item.hidden { max-height: 0; }
/* JS: *
results.addEventListener('transitionend', function(ev) {
  results.removeChild(ev.target);
}, false);
      

RequestAnimationFrame

Requestanimationframe

Transform/Translate

Transformers

Leave the DOM alone!

leave britney alone

Less, but more immediate events

keypad with code smudges

Fastclick

Web components(X-tag)/shadow DOM

x-tags

Web Components - X-Tag

The mobile web run

Temple run 2

You are the builders

Temple run with patched bridge

Thanks

safe to turn off computer