10 Things you didn't know your browser could do
Jan Krutisch

Preface

This presentation was first shown (in this form) at Eurucamp 2013.

Whereever features are prefixed, I use the webkit prefix. I haven't done this to bash Firefox or any other browser but to keep the demo source readable. Which features are available in which prefixed or unprefixed form should be clear from the included caniuse.com embeds.

I'm currently running Chrome 28. To enable CSS regions (#9), you need to enable "Experimental Webkit Features" at chrome://flags

Additionally, showing off SSE (#2) needs a running SSE event source. As I didn't have the time to properly set this up on a server, You'd have to run it yourself on localhost:8080. The source for my demo project written in node.js is available at github.com/halfbyte/mini-sse.

Last but not least, to use the (stupid) LEAP Motion demo included as a bonus, you obviously need a LEAP Motion controller and the driver needs to have Web Apps enabled.

Now

#1 Viewport Units

Viewport Units

100vh == Height of Viewport

100vw == Width of Viewport

100vmin == Smaller of Both

100vmax == Larger of Both

Viewport Units

width: 50vw; font-size: 2vh;

height: 25vh;

Viewport Units

#2 Server Sent DOM events

SSE

var es = new EventSource('http://localhost:8080/sse');
es.addEventListener('tick', function(e) {
  $('#sse-target-tick').html(
    "" + e.lastEventId + ":" + e.data
  );
});
es.addEventListener('test', function(e) {
  $('#sse-target-random').html(
    "" + e.lastEventId + ":" + e.data
  );
});

SSE Server Response

text/event-stream

event: tick
id: 8
data: Tick 1376489698882

event: test
id: 211
data: Random Message 0.9020805666223168

event: tick
id: 9 
data: Tick 1376489699884

SSE

#3 FileReader/ TypedArrays

FileReader

$('#file').change(function(event) {
  if(event.target.files[0]) {
    var fr = new FileReader();
    fr.onload = function(event) {
      var ab = event.target.result;
      console.log(ab);
      var bytes = new Uint8Array(ab, 0, 4);
      $('#file-reader-output').html(
        String.fromCharCode.apply(this, bytes)
      );
      console.log(bytes);
    };
    fr.readAsArrayBuffer(event.target.files[0]);
  }
});

FileReader

github.com/halfbyte/ilbm-decoder

FileReader

Typed Arrays

#4 Emscripten

Emscripten

LLVM to JavaScript/asm.js

Mid range

#5 Page Visibility API

Page Visibility

console.log(document.webkitVisibilityState);
document.addEventListener(
  'webkitvisibilitychange', 
  function(e) {
    console.log(document.webkitVisibilityState);
  }
);

Page Visibility API

#6 Web Audio API

Web Audio API

var ac = new webkitAudioContext();
var osc = ac.createOscillator();
osc.connect(ac.destination);
osc.start(0);
osc.stop(ac.currentTime + 0.2);

Web Audio API

liv3c0der.com

Web Audio API

#7 Fullscreen API

Fullscreen API

    document.getElementById(
      'fullscreen-video'
    ).webkitRequestFullscreen();

Fullscreen API

Futare

#8 CSS Filters

CSS Filters

@-webkit-keyframes fader {
  from { -webkit-filter: blur(0); } 
  to { -webkit-filter: blur(3px); }
}
.filter-example-blur {
  -webkit-animation-name: fader;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;      
  -webkit-transform: translateZ(0); /* !!!!! */
  -webkit-animation-play-state: running;
}

CSS Filters

CSS Filters

#9 CSS Regions

CSS Regions

article#flow-article {
  -webkit-flow-into: demo-flow;
}
.leftie, .rightie, .bottom {
  -webkit-flow-from: demo-flow;
}

Oh freddled gruntbuggly, Thy micturitions are to me, As plurdled gabbleblotchits, On a lurgid bee, That mordiously hath bitled out, Its earted jurtles, Into a rancid festering confectious inner-sphincter. [drowned out by moaning and screaming] Now the jurpling slayjid agrocrustles, Are slurping hagrilly up the axlegrurts, And living glupules frart and slipulate, Like jowling meated liverslime, Groop, I implore thee, my foonting turling dromes, And hooptiously drangle me, With crinkly bindlewurdles, Or else I shall rend thee in the gobberwarts with my blurglecruncheon, See if I don't.

CSS Regions

#10 getUserMedia

getUserMedia

$('#start-stream-button').click(function() {  
  var video = $('#stream')[0];
  var successCallback = function(stream) {
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
  };
  var errorCallback = function(e) {
    console.log(e);
  };      
  navigator.webkitGetUserMedia({
    video: true, toString: function(){return 'video';}
  }, successCallback, errorCallback);
});

getUserMedia

One More Thing

#11 LEAP Motion

LEAP Motion

<script src="//js.leapmotion.com/0.2.0/leap.min.js"></script>

    function draw(obj) {
      ctx.clearRect(-canvas.width/2,-canvas.height,canvas.width,canvas.height);
      var pointablesMap = obj.pointablesMap;
      for (var i in pointablesMap) {
        var pointable = pointablesMap[i];
        var pos = pointable.tipPosition;
        var radius = Math.min(600/Math.abs(pos[2]),20);
        ctx.beginPath();
        ctx.arc(pos[0]-radius/2,-pos[1]-radius/2,radius,0,2*Math.PI);
        ctx.fill();
      }
    };
    Leap.loop(draw);

10 Things you didn't know your browser could doJan Krutisch

Preface

Now

#1 Viewport Units

Viewport Units

Viewport Units

Viewport Units

#2 Server Sent DOM events

SSE

SSE Server Response

SSE

#3 FileReader/ TypedArrays

FileReader

FileReader

FileReader

Typed Arrays

#4 Emscripten

Emscripten

Emscripten

Mid range

#5 Page Visibility API

Page Visibility

Page Visibility API

#6 Web Audio API

Web Audio API

Web Audio API

Web Audio API

#7 Fullscreen API

Fullscreen API

Fullscreen API

Futare

#8 CSS Filters

CSS Filters

CSS Filters

CSS Filters

#9 CSS Regions

CSS Regions

CSS Regions

#10 getUserMedia

getUserMedia

getUserMedia

getUserMedia

One More Thing

#11 LEAP Motion

LEAP Motion

LEAP Motion

Thank you!

10 Things you didn't know your browser could do
Jan Krutisch