The Latest in HTML

Eric Bidelman ( G+, @ebidel )
Developer Relations Brown Bag
July 7, 2011

There's a lot this presentation doesn't cover!

• CSS3 / WebGL / Canvas
• HTML5 Forms
• Device Orientation API
• FileSystem API
• IndexedDB
• History API
• Websockets, Server-Sent Events
• XHR2
• ...

http://www.htmlfivewow.com

OK...then what does it cover?

• Lesser known gems
• Smaller APIs for building more powerful web apps
• One new/sexy API: Web Audio API
• Things in the pipeline

<details> / <summary>

<details open="open">
  <summary>Information</summary>
  <p>If your browser supports this element, it should allow
  you to expand and collapse these details.</p>
</details>

<output>

<form oninput="result.value=a.valueAsNumber + b.valueAsNumber">
0<input type="range" name="b">100 +<input type="number" name="a"> =
<output name="result"></output>
</form>

<mark>

Semantically highlight parts of your text:

Lorem ipsum dolor, <mark>consectetur</mark> adipiscing...

Speech input

    <input type="text" x-webkit-speech>

function inputChange(e) {
  if (e.results) { // e.type == 'webkitspeechchange'
    for (var i = 0, result; result = e.results[i]; ++i) {
      console.log(result.utterance, result.confidence);
    }
    console.log('Best result: ' + this.value);
  }
}

var input = document.querySelector('[x-webkit-speech]');
input.addEventListener('change', inputChange, false);
input.addEventListener('webkitspeechchange', inputChange, false);

Element Properties

Element.classList - cut the cord ( library deps )

<div id="main" class="shadow rounded"></div>

var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');

console.log(el.contains('highlight')); // false
console.log(el.contains('shadow')); // false
console.log(el.classList.toString() == el.className); // true

Output:

<div id="main" class="rounded"></div>

Global Methods & Properties

window.crypto - pseudorandom number generator

// Fill typed array with 5 8-bit unsigned random integers.
var uInt8Arr = new Uint8Array(5);
window.crypto.getRandomValues(uInt8Arr);

• Cryptographically "strong" PRN seeded from the OS (e.g. /dev/random):
• Entropy ( "true" randomness ) is better than Math.random(), which is seeded by current time.
• NOT_SUPPORTED_ERR thrown if UA is unable to obtain "true" randomness

window.performance - know the numbers

• performance.timing
• performance.navigation
• performance.memory - via --enable-memory-info flag

Events

Page Visibility API & Prerendering- keep things transparent

Prerendering pages ( test ):

<link rel="prerender" href="http://example.org/index.html">

Determine if your app is visible or not:

document.addEventListener('visibilitychange', function(e) {
  console.log('hidden:' + document.hidden,
              'state:' + document.visibilityState)
}, false);

Demo: change tabs

navigator.onLine - know when you're all alone

if (navigator.onLine) {
  console.log('ONLINE!');
} else {
  console.log('Connection flaky');
}

window.addEventListener('online', function(e) {
  // Re-sync data with server.
}, false);

window.addEventListener('offline', function(e) {
  // Queue up events for server.
}, false);

window.onerror - let nothing go unnoticed

• Know about JS errors in your app.
• Global error handler. No need to wrap everything in try/catch blocks.

window.onerror = function(msg, url, line) {
  // Track JS errors in GA.
  _gaq.push(['_trackEvent', 'Error Log', msg, url + '_' + line]);

  // Log to your server.
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/jserror', true);
  xhr.send('Line ' + num + ': (' + url + ') - ' + msg);

  return false; // false prevents default error handling.
};

Capabilities

Pasting files

document.body.onpaste = function(e) {
  var items = e.clipboardData.items;
  for (var i = 0; i < items.length; ++i) {
    if (items[i].kind == 'file' && items[i].type == 'image/png') {
      var blob = items[i].getAsFile();

      var img = document.createElement('img');
      img.src = window.URL.createObjectURL(blob);

      document.body.appendChild(img);
    }
  }
};

Click in this window and paste and image ( Copy image from a right-click )

Custom (web-based) protocol handlers

  navigator.registerProtocolHandler(
    'web+myscheme', 'http://example.com/handler?q=%s', 'My App');

<a href="web+myscheme:some%20data%20here">send data</a>

GET http://example.com/handler?q=web+myscheme:some%20data%20here

Example - Audio Synthesis ( 1 )

var header = new Uint8Array([
    0x52,0x49,0x46,0x46, // "RIFF"
    0, 0, 0, 0,          // put total size here
    0x57,0x41,0x56,0x45, // "WAVE"
    0x66,0x6d,0x74,0x20, // "fmt "
    16,0,0,0,            // size of the following
    1, 0,                // PCM format
    1, 0,                // Mono: 1 channel
    0x44,0xAC,0,0,       // 44,100 samples per second
    0x88,0x58,0x01,0,    // byte rate: two bytes per sample
    2, 0,                // aligned on every two bytes
    16, 0,               // 16 bits per sample
    0x64,0x61,0x74,0x61, // "data"
    0, 0, 0, 0           // put number of samples here
]).buffer;  // Note: we just want the ArrayBuffer.

Original source
WAVE PCM file format

Example - Audio Synthesis ( 2 )

function makeWave(samples) {
  var bb = new WebKitBlobBuilder();
  var dv = new DataView(header);
  dv.setInt32(4, 36 + samples.length, true);
  dv.setInt32(40, samples.length, true);
  bb.append(header);
  bb.append(samples.buffer);
  return bb.getBlob('audio/wav');
}

Example - Audio Synthesis ( 3 )

// Play a note of the specifed frequency and duration
// We've hardcoded 20,000 samples per second
function playNote(frequency, duration) {
  var samplespercycle = 44100 / frequency;
  var samples = new Uint16Array(44100 * duration);
  var da = 2 * Math.PI / samplespercycle;
  for (var i = 0, a = 0; i < samples.length; i++, a += da) {
    samples[i] = Math.floor(Math.sin(a) * 32768);
  }
  var blob = makeWave(samples);
  var url = window.webkitURL.createObjectURL(blob);
  var player = new Audio(url);
  player.play();
  player.addEventListener('ended', function(e) {
    window.webkitURL.revokeObjectURL(url);
  }, false);
}

Comparison to Mozilla's Audio Data API

• Similarities:
  • Extends the <audio> element
  • Generate audio
  • Load + manipulate sound files
• Differences:
  • FF intensive audio processing operations must be done in JS (slow). Web Audio API exposes calls for common effects/operations under the covers.
  • Nodes are created + strung together to produce overall system:
    

Scheduled playback

• Prefixed window.webkitAudioContext() in Chrome 14.

var ctx = new window.AudioContext();

function playSound(arrayBuffer) { // Obtain arrayBuffer from XHR.
  ctx.decodeAudioData(arrayBuffer, function(buffer) {
    var src = ctx.createBufferSource();
    src.buffer = buffer;
    src.looping = false;
    src.connect(ctx.destination);
    src.noteOn(0); // Play immediately.
  }, function(e) {
    console.log(e);
  });
}

Audio processing

var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var jsNode = ctx.createJavaScriptNode(2048 /*samples*/,
                                        1 /*inputs*/, 1 /*outputs*/);
jsNode.onaudioprocess = function(e) {
  var byteData = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(byteData);
  // render visualization of byteData.
};

function initAudio(arrayBuffer) {
  ctx.decodeAudioData(arrayBuffer, function(buffer) {
    var src = ctx.createBufferSource();
    src.buffer = buffer;
    src.connect(analyser); // src -> analyser -> js node -> dest
    analyser.connect(jsNode);
    jsNode.connect(ctx.destination);
  }, function(e) { console.log('Error decoding audio file', e); });
};

Generating audio

• ...It can be done :)
• Demo

Spellcheck API - no more mistakes!

Supply suggestions for mispelled ← words.

void addSpellcheckRange(unsigned long start, unsigned long length,
    DOMStringList suggestions[, unsigned short options]);
void removeSpellcheckRange(SpellcheckRange range);

var input = document.querySelector('input');
input.addSpellcheckRange(
    4, 9, ['Chrome', 'Firefox', 'Opera', 'Internet Explorer']);

More info: peter.sh/experiments/spellcheck-api/

Fullscreen API

Enable fullscreen on a element. Still a work in progress.

Element.webkitRequestFullScreen();
Element.webkitRequestFullScreenWithKeys();
document.webkitCancelFullScreen(); // only on Document

• allowFullScreen attribute added for <iframes>
• new pseudo-classes:
  -webkit-full-screen
:-webkit-full-screen-doc
:-webkit-full-screen-root-with-target

Example usage - Fullscreen API

<video width="300" src="movie.webm" controls></video>
<button onclick="enterFullscreen()">Get Huge!</button>

function enterFullscreen() {
  var elem = document.getElementById("fs");
  elem.onwebkitfullscreenchange = function(e) {
    console.log("Entered fullscreen!");
    document.getElementById("exit").style.display="inline";
    elem.onwebkitfullscreenchange = onFullscreenExit;
  };
  elem.webkitRequestFullScreen();
}

WebRTC - fo realz...time

• Real time voice/video communication in the browser
• Signal processing, noise cancellation engine - Royalty free and open-source
• Builds on the PeerConnection API
• Mozilla and Opera supportive
• webrtc.org ( code.webrtc.org )

chromestatus.com

Tools

• Chrome's DevTools - invaluable
• html5rocks.com - learn by tutorial
• HTML5 Boilerplate and Modernizr - foundation
• caniuse.com - compatibility tables
• Google Chrome Frame - plugin that brings Chrome to IE6-9
• Google Swiffy - .swf -> HTML5 converter
• Adobe Edge - CSS animation tool