G+: peter.sh/+
Twitter: @beverloo
Blog: peter.sh
Twitter: @paul_kinlan
Blog: paul.kinlan.me
What can I do?
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Demo: goo.gl/j9KLT
@viewport { width: device-width; orientation: portrait; }
@media screen and (min-width: 800px) { @viewport { width: device-width; user-zoom: fixed; zoom: 1.0; } }
@media screen and (min-width: 800px) { ... }
@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (resolution: 2dppx) { ... }
@media screen and (orientation: portrait) {}
@media screen and (orientation: landscape) {}
Demo: goo.gl/SgMEo
#visible-square { width: 20vmin; height: 20vmin; }
1vw = 1% of the viewport width 1vh = 1% of viewport height
Demo: goo.gl/J5tna
element { display: flex; flex-direction: row | row-reverse | column | column-reverse; }
Spec: dev.w3.org/csswg/css-flexbox/
Demo: goo.gl/lCRr6
.sticky-element { position: sticky; top: 10px; }
Demo: goo.gl/AYZhw
What can I do?
var success = function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; }; navigator.geolocation.getCurrentPosition(success);
var watchId = navigator.geolocation.watchPosition( function (position) { ... }); // Stop watching when you're done. clearWatch(watchId);
window.onorientationchange = function(event) { var yaw = event.alpha; var pitch = event.beta; var roll = event.gamma; // You could make a compass! };
Demo: goo.gl/zNvp3
window.navigator.onLine
wwindow.addEventListener("online", function() { console.log("Visitor might be online."); }); window.addEventListener("offline", function() { console.log("Visitor is definitely offline."); });
Demo: goo.gl/Bgmcp
<html manifest="website.manifest">
CACHE MANIFEST #version 1.2013.5.16 css/bootstrap.min.css #Images img/paul.png
Demo: goo.gl/3fO2I
Intuitive API | Powerful Querying | Asynchronous | Widely supported | |
---|---|---|---|---|
localStorage | Yes | No | No | |
WebSQL | Yes | Yes | Yes | |
IndexedDB | No | Yes | Yes |
What can I do?
<input type="email" /> <input type="search" /> <input type="url" /> <input type="tel" /> <input type="number" /> <input type="date" /> <input type="week" /> <input type="month" /> <input type="datetime-local" />
Demo: goo.gl/CNMp6
[element].ontouchstart = function(event) {}; [element].ontouchmove = function(event) {}; [element].ontouchend = function(event) {};
Docs: goo.gl/8ybb5
Demo: goo.gl/ZwOzk
onpointerdown, onpointerup, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave.
touch-action: none | auto | pan-x | pan-y;
@media (pointer: coarse) { } @media (pointer: fine) { }
Demo: goo.gl/00WGG
What can I do?
<input type="file" capture accepts="image/*" id="cam">
var cam = document.getElementById("cam"); cam.onchange = function(event) { // An image has been captured. if(event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) { // We have an image, most likely from a camera } }
Demo: goo.gl/Ofs5z
navigator.getUserMedia({audio:true, video: true}, function(stream) { // An image has been captured. video.src = URL.createObjectURL(stream); video.play(); });
Demo: goo.gl/0JrXM
intent: HOST/URI-path // Optional host #Intent; package=[string]; action=[string]; category=[string]; component=[string]; scheme=[string]; end;
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"> Take a QR code </a>
More information: developers.google.com/chrome/mobile/docs/intents
Demo: goo.gl/Kpk0C
window.scrollTo(0,1);
[element].requestFullscreen(); [element].currentFullScreenElement(); document.cancelFullscreen(); document.fullscreenEnabled(); document.isFullScreen();
Demo: goo.gl/QrYRz
What can I do?
var perfEntries = performance.getEntriesByType('resource'); for (var i = 0; i < perfEntries.length; i++) { console.log('Name: ' + perfEntries[i].name + ' Entry Type: ' + perfEntries[i].entryType + ' Start Time: ' + perfEntries[i].startTime + ' Duration: ' + perfEntries[i].duration + '\n'); }
Demo: goo.gl/BYUe3
Use a library:
var source = context.createBufferSource(); // Create a gain node. var gainNode = context.createGain(); source.buffer = buffer; // Connect source to gain. source.connect(gainNode); // Connect gain to destination. gainNode.connect(context.destination);
Demo: goo.gl/Mr70x