1

and You!

Paul Irish and Boris Smus
Google Chrome, Developer Programs Engineers

Canvas
  • Basic <canvas> in action 
    var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
  • three.js voxel mario.
WebGL
  • Mozilla's Remixing Reality demo 
  • uniform float time;
uniform vec2 resolution;

void main( void ) {

  vec2 position = - 1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
  float red = abs( sin( position.x * position.y + time / 5.0 ) );
  float green = abs( sin( position.x * position.y + time / 4.0 ) );
  float blue = abs( sin( position.x * position.y + time / 3.0 ) );
  gl_FragColor = vec4( red, green, blue, 1.0 );

}
  • use three.js or PhiloGL
CSS Transforms
Local Storage
  • localStorage: per-domain key-value store
  • Demo: disqus comments 
    saveButton.addEventListener('click', function () {
  localStorage.setItem('value', area.value);
  localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = localStorage.getItem('value');
  • Check out Lawnchair.js
  • Others: Web SQL, IndexedDB, ...
Speech input
  • Text to speech - speak into any input box
  • Demo: voice-enabled twitter
  • Use Chrome-dev and: 
    x-webkit-speech attribute, onspeechchange event
Device orientation
  • Demo: Jules Verne Google doodle
  • Demo: Fight or Flight?
  • Access the accelerometer of the device: 
    addEventListener('deviceorientation', function(event) {
  var a = event.alpha;
  var b = event.beta;
  var g = event.gamma;
}, false);
Geolocation
  • Demo: Google Maps!
  • Determine the user's current location: 
    navigator.geolocation.getCurrentPosition(function(position) {
  startPos = position;
  document.getElementById('startLat').innerHTML = startPos.coords.latitude;
  document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
  • Can also track location changes with 
    navigator.geolocation.watchPosition
Web Sockets
  • Demo: video playback sync
  • Lightweight push notifications: 
    var socket = new WebSocket('ws://html5rocks.websocket.org/echo');

socket.onopen = function(event) {
  socket.send('Hello, WebSocket');
};

socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }
HTML5: Where are we now?

Bbbbbbut, how??!?

what about IE? :/

You feature detect, right?

Modernizr does that.
caniuse.com

polyfill:

(n) 1. A shim that mimics a future API, providing fallback functionality to older browsers.

e.g. geolocation polyfill

BAM! Cross-browser HTML5 polyfills

mothereffinghsl.com polyfill demo

Chrome Web Store

HTML5 Boilerplate

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

Wrap up
  • Canvas, WebGL, CSS Transforms
  • Local Storage, Speech input, Device orientation, Geolocation, Web Sockets
  • Feature detection via Modernizr
  • Polyfills plus yepnope to fill in the gaps
  • The Chrome Web Store is your playground
  • This list has six bullets
Thank you, kindly.