The vanilla web diet - Anglebrackets 2013

The vanilla web diet


Hello, I am Chris…

Before and after
  • Online mythbuster (HTML5 guy) at Mozilla
  • @codepo8
  • Battle hardened browser wars veteran

The web has an obesity problem

rolling and waitin

Web obesity…

  • 388 requests
  • 24.29MB

That Moore…

Moore's Law

Moore's Law

Built for a different market…

people reading on their phones

Let's do the math…

connection caps

Let's compare…

beer bottles Photo by Sailor Coruscant

This should not happen any more…

Yahoo exceptional performance

Yahoo exceptional performance (archive)

We have incredible tooling…


Developer tools

Firefox devtools

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


Problems during delivery…

Delivery hidden - or not

Problems during maintenance…

barbecue pit - picture and reality

A basic misunderstanding of the web

lots of different devices

We have no control…

This is for everyone

Consumers and creators

Mozilla webmaker

Wanted: unobtrusive performance enhancement

Bigger photo on Google+

Cleanup on aisle WTF…

Terrible mobile login interface

Everything benefits from HTML5

HTML5 is more than the iphone

Everything is read and write

Zoom and pick

Creating web code with web code

Zoom and pick

But, but browser differences…

Pouting dog

HTML5 comes from browsers

Browser ponies

Doing things wrong

Remotes are hard

Pestering the elderly


Browser favouritism

        .button {
          color: white;
          background: -webkit-linear-gradient(green,yellow);

Browser favouritism (fixed)

        .button {
          color: white;
          background: green;
          background: -webkit-linear-gradient(green, yellow);
          background: linear-gradient(green, yellow);

JavaScript dependency…

chrome download broken

Got <script>?

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

Jake Archibald

Leave the DOM alone!

leave britney alone

Know your arsenal

Remotes are hard

Fun with pseudo selectors

  • :link
  • :visited
  • :hover
  • :active
  • :focus
  • :target
  • :root
  • :only-child
  • :empty
  • :nth-child(n)
  • :nth-last-child(n)
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :first-child
  • :last-child

Accessing child nodes

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Styling sensible HTML

        <button>Make me pretty</button>

Form validation

      <input type="text" required>

Forms and selectors

Please enter your search term and hit the button



3D Transforms

Optimus Prime


        element {
          transition: property, property time delay;


Play slots here!

CSS animations and transitions

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

The vanilla web diet

  • Build on what works
  • Lack of support = opportunity
  • Browser-specific code can't be trusted
  • Use a mix of technologies
  • Ask questions
  • Write as much as needed
  • Use what can't be taken away, don't add
  • Usefulness > consistency across browsers
  • Load only what is needed
  • Be aware of the effects
  • A strong foundation is key

Jump right in!

Jumping into a puddle

So many fun things…

  • WebRTC
  • GetUserMedia
  • WebActivities
  • WebAPIs
  • ShadowDOM
  • WebGL
  • Flexbox
  • @supports
Jumping into a puddle


that's all firefox