secondsToTimeString(123.456789) // “02:03:45″

 secondsToTimeString = function (seconds) {

    var ms = Math.floor((seconds*1000) % 1000);
    var s = Math.floor(seconds%60);
    var m = Math.floor((seconds*1000/(1000*60))%60);
    var strFormat = "MM:SS:XX";

    if(s < 10) s = "0" + s;
    if(m < 10) m = "0" + m;
    if(ms < 10) ms = "0" + ms;

    strFormat = strFormat.replace(/MM/, m);
    strFormat = strFormat.replace(/SS/, s);
    strFormat = strFormat.replace(/XX/, ms.toString().slice(0,2));

    return strFormat;
}

#overlay {
 width:480px;
 height:320px;
 position:absolute;
 -webkit-box-align: center;
 -webkit-box-pack: center;
 display: -webkit-box;
}

#overlay .centred-content {
 position:relative;
}

–show-composited-layer-borders shows a red border around elements that are being manipulated at the GPU level. Good for confirming your manipulations occur within the GPU layer.
–show-paint-rects all non-GPU changes are painted and this throws a light border around all areas that are repainted. You can see the browser optimizing paint areas in action.

From : http://www.html5rocks.com/en/tutorials/speed/html5/

Here I’m extending MediaControls view to MovieControls
and adding a settings button.

events: _.extend(aura.view.MediaControls.prototype.events , {
	"click #settings-button" : "settingsHandler"
}),

swipeLeft : function(e) {
	var d = e.data.x2 - e.data.x1; //distance
	var s = this.nav[0].style.WebkitTransform;
	var x = s.match(/[^()\s]+(?=,|\))/g); //Npx
	var c = parseInt(x[0]); //N
	var t = c + d * 3; //current + distance * multiplier

	//calculate bounds
	if(t > 200) t = 200;
	if(t < this.maxLeft) t = this.maxLeft - 200;

	this.nav.anim({translateX : t + "px"}, 2, 0, "ease-out");

},

Setup

The Quividi software is designed to run on a Windows Atom Netbook above an advert and gathers data on passers-by which is posted to an analytics suite.

Spotting a chance for a engaging experience we used Quividi TCP stream to interface Javascript with the events sent from the Quividi sofware

We had to use a Flash Shim to get the data from the Quividi TCP steam to JavaScript. Web-sockets were of course our first choice but the QuiVidi system wasn’t compatible with this emerging spec. Lot’s of binary math and SWITCH statements soon had Flash broadcasting the relevant webcam events. We broke this down to the two events – watcher start and watcher end.

Experience

The graphics are an old Europcar campaign by the talented people at Fortune Cookie

When a new “watcher” is detected an event containing the Watcher ID, Gender and Age Group are sent to Javascript, the advert then begins to play. The content of the advert is customised to the demographic recognised by the camera & software.

The animations are powered by CSS3 and use the -webkit-transition: property to good effect creating the smooth fade-ins and rotation effects.

var i = 10;

for(i; i; i--) {
 console.log(i);
}

They need a lot of work but smaller and more accessible than images and SVG I guess.

Webkit Only

View source on this.nextSibling for the CSS

Colours from http://www.colourlovers.com/palette/1659760/sliced_tongue : I want to eat korean bbq all of sudden ;)

Spine.guid = function(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8);
return v.toString(16);
}).toUpperCase();
};

And my minor edit with comments

//replace each occurance of "x" with value returned from passed function
'uxxx-sxxx'.replace(/x/g, function(c) {
      //Bit value of char 0 of a random number (0-15) and convert that to an ASCII value (0-9, a-f)
      return (Math.random()*16|0).toString(16);
}).toUpperCase(); //capitals please

var x = {};$(".google-visualization-table-table").eq(0).find("tr:gt(0) td:first-child").each(function(){var y = $(this).text(); var z = parseInt($(this).next().text()); x[y] ? x[y] += z : x[y] = z});JSON.stringify(x);

Same shizzle, puts the data into arrays for http://g.raphaeljs.com

var a = [];
var b = [];
$(".google-visualization-table-table").eq(0).find("tr:gt(0) td:first-child").each(function(){
	a.push($(this).text());
	b.push(parseInt($(this).next().text()));
});
console.log(a);
console.log(b);