The vanilla web diet - Anglebrackets 2013

The vanilla web diet

back

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
grolsch

Grolsch.com

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…

Requestanimationframe

Developer tools

Firefox devtools

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

submarine

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

https://webmaker.org/

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

http://thewebrocks.com/demos/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

IE6

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

https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes

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

Transforms

Bumblebee

3D Transforms

Optimus Prime

Transitions

        element {
          transition: property, property time delay;
        }
       
Transition

Animations

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) {
  results.removeChild(ev.target);
}, 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

Thanks

that's all firefox