+

• Fully managed NoSQL solution
• Built for scale (size and traffic)
  • 2 Trillion operations per month
• Same technology we use for our own applications
• Provisioning? Sharding? Scaling? It just works
• Automatically splits and balances data
  based on load
• Not reliant on a single datacenter
• Handles local issues and catastrophic failures

gapi.client.load('urlshortener','v1',function(){});

fromapiclient.discovery import build
service =build('urlshortener','v1')

• Write your backend code
• Decorate API methods
• Generate client libraries
• Write client apps

• iOS
• Android

• 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:

Web Workers

index.html

function startWorker(settings) {
  var myWorker = new Worker('scripts/worker.js');
  myWorker.addEventListener("message", workerListener, false);
  myWorker.postMessage(settings);
}          
       

Worker.js

self.addEventListener('message', function(e) {
  doSomeWork();
};
function doSomeWork() {
  importScripts('http://url?callBack=handleWork');
}
function handleWork() {
  postMessage(result);
}
     

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.

• 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) { ... });

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);

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.
  // PITA = pain in the...
}

Plugin-free acess 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
• WebRTC on Google App Engine Demo
• 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.
  });
};

• 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);
};

• Technitone
• Plink
• Bohemian Rhapsichord
• 3D Audio Visualizer
• GAL 9000
• HTML5Wow Visualizer
• WebGL City
• Sound Toy

• html5rocks.com
• chromestatus.com
• caniuse.com
• Google api javascript client/
• APIs Explorer https://developers.google.com/apis-explorer
• Google I/O Talk on CLE and HTML5
• Codelab endpoints-codelab-python.appspot.com
• OPEN SIGN UP for Google Cloud Endpoints: goo.gl/OJyVT