+

• Floats stack horizontally to allow simple placement.
• Tables lack repeatability and semantic meaning.
• Using absolute positioning is difficult. Makes adaptive display hard.
• CSS3 specifications address layout cases with regions, exclusions, grid and flexible box.

• CSS Regions Module Level 3
• CSS Flexible Box Layout Module ( da new one )
• CSS Grid Layout
• CSS Hierarchies
• CSS Filter Effects 1.0
• Web Animations 1.0
• CSS Variables Module Level 1

• Box model optimized for user interface design
• Children can "flex" their sizes: fill unused space / shrink to avoid overflow
• Source-ordering independence: children can be laid out in any direction
• Enabled by display: and display:
• Note: Replacing old flex box display:

That's all great...

Example: distribute toolbar icons evenly as device width changes:

cross-fade()

background-image: (url(first.png), url(second.png), 50%);
@-webkit-keyframes fading {
  0% { background-image: (url(first.png), url(second.png), 0%); }
  100% { background-image: (url(first.png), url(second.png), 100%); }
}

Demo

Apply filter effects to any DOM element:

video, img {
  : grayscale(0.5) blur(10px);
}

• Chrome needs --enable-accelerated flag for hardware accelerated content.
• Good blog post.

Demo Demo2

• Model: data attribute
• Use attr() to get the value(s)
• View: render generated content to :before/:after pseudo elements
• Hook listeners that watch for changes.

<style>
input::after {
  content: attr(data-value) '/' attr(max);
  position: relative;
  left: 135px; top: -20px;
}
</style>
<input type="range" min="0" max="100" value="25">
<script>
var input = document.querySelector('input');
input.dataset.value = input.value; // Set an initial value.

input.addEventListener('change', function(e) {
  this.dataset.value = this.value;
});
</script>

Browsers: <input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

• Specifies a list of pre-defined options for an <input> element.
• list attribute "binds" data list to an <input>
• Useful for "autocomplete" on <input> elements.

Browsers:

Opening a filesystem:

window.(
  TEMPORARY,        // persistent vs. temporary storage
  1024 * 1024,      // size (bytes) of needed space
  initFs,           // success callback
  opt_errorHandler  // opt. error callback, denial of access
);

• Security: sandboxed per origin
• Power: native apps can do files/folders,...web apps should too!
• Benefit: dynamically cache and manage assets.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {











};

xhr.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {









  }, onError);
};

xhr.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {

 





    }, onError);
  }, onError);
};

xhr.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {

      fileEntry.createWriter(function(writer) {
        writer.onwriteend = function(e) { ... };
        writer.onerror = function(e) { ... };
        writer.write(new Blob([xhr.response], {type: 'image/png'}));
      }, onError);

    }, onError);
  }, onError);
};

xhr.send();

• Stored files/folders get their own ( filesystem: ) URL:

filesystem:http://example.com/temporary/image.png

• Use for a src/href value:

var img = document.createElement('img');
img.src = fileEntry.toURL();
document.body.appendChild(img);

• Get back to a FileEntry from its filesystem: URL:

window.(img.src, function(fileEntry) { ... });

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {

      fileEntry.createWriter(function(writer) {
        writer.onwriteend = function(e) { ... };
        writer.onerror = function(e) { ... };
        writer.write(new Blob([xhr.response], {type: 'image/png'}));
      }, onError);

    }, onError);
  }, onError);
};

xhr.send();

Wrapper lib that implements common UNIX cmds (ls, cp, mv)

var filer = new Filer();

filer.init({persistent: false, size: 1024 * 1024}, function(fs) {...}, onError);

filer.ls('path/to/some/dir/', function(entries) { ... }, onError);

filer.cp('file.txt', '/path/to/folder', 'newname.txt', function(entry) {
  // entry.fullPath == '/path/to/folder/newname.txt'
}, onError);

var b = new Blob(['body { color: red; }'], {type: 'text/css'});
filer.write('styles.css', {data: b, type: b.type}, function(entry, writer) {
    ...
}, onError);

function downloadLink(name, content, mimetype) {
  var a = document.createElement('a');
  a.href = window.(new Blob([content], {type: mimetype}));
  a.download = name;
  a.textContent = 'Download ready';

  document.body.appendChild(a);
}

downloadLink('MyNovel.txt', document.querySelector('textarea').textContent, 'text/plain');

3. Complex types (File, Blob, ArrayBuffer) via structured cloning

var data = [1, 2, 3, 4];

// Blob() in Chrome 20, FF 13
worker.postMessage(new Blob(data.toString(), {type: 'text/plain'}));

var uint8Array = new Uint8Array(data);
worker.postMessage(uint8Array);
worker.postMessage(uint8Array.buffer);

• Problem: all of these methods are copies. Not efficient!
• We can do better...

Same old friend, different semantics (note the vendor prefix):

worker.(arrayBuffer, [arrayBuffer]);
window.(arrayBuffer, targetOrigin, [arrayBuffer]);

• Zero-copy
  • Ownership of data (ArrayBuffer) is transferred to new context (e.g. worker/window). Source buffer becomes unavailable.
  • ~50x faster than structured cloning (Chrome 13/FF).
• 2nd argument is list of what to transfer.

var uint8Array = new Uint8Array(1024 * 1024 * 32); // 32MB

// Fill'r up!
for (var i = 0, len = uint8Array.length; i < len; ++i) {
  uint8Array[i] = i;
}

worker.(uint8Array, [uint8Array.buffer]);

Pass multiple buffers at once and/or additional data:

worker.({
  view1: uInt8Array,
  buffer2: anotherBuffer,
  username: 'johndoe'
}, [uInt8Array.buffer, anotherBuffer]);

• Feature detecting is a PITA b/c of false positives.
• If transferred, buffer's .byteLength goes to zero.

var ab = new ArrayBuffer(1);
worker.(ab, [ab]);
if (ab.byteLength) {
  alert('Transferables are not supported in your browser!');
} else {
  // Transferables are supported.
}

Plugin-free access to camera/microphone.

navigator.({audio: true, video: true}, function(stream) {
  var video = document.querySelector('video');
  video.src = window.(stream);
}, function(e) {
  console.log(e);
});

<video autoplay controls></video>

• Photo booth
• Live Effects
• Augmented Reality
• WebGL Live TV
• Instant Camera
• Explode Video

<input type="button" value="⚫" onclick="record(this)">
<input type="button" value="◼" onclick="stop(this)">

var localMediaStream, recorder;

var record = function(button) {
  recorder = localMediaStream.record();
};

var stop = function(button) {
  localMediaStream.stop();
  recorder.getRecordedData(function(blob) {
    // Upload blob using XHR2.
  });
};

Use an HTMLMediaElement as the source to the API:

var ctx = new window.();
var audioElement = new Audio();
audioElement.src = 'sounds/dope_beats.mp3';
audioElement.controls = true;
audioElement.autoplay = true;

var source = ctx.createMediaElementSource(audioElement);
var analyser = ctx.createAnalyser();

source.connect(analyser);
analyser.connect(ctx.destination);

Note: There's no source.noteOn(0). Play/pause is controlled by the <audio> element.

• WebSockets suffered the same limitations as Workers.
• Now send File, Blob, or ArrayBuffer types.

var socket = new WebSocket('ws://example.com/sock', ['dumby-protocol']);
socket.binaryType = 'blob'; // or 'arraybuffer'
socket.onopen = function(e) {
  window.setInterval(function() {
    if (socket.bufferedAmount == 0) {
      socket.send(new Blob([blob1, blob2]));
    }
  }, 50); // rate limit us.
};
socket.onmessage = function(e) {
  document.querySelector('img').src = (e.data);
};