html5 - awesome apis

Few HTML5 APIs You Didn’t Know ExistedFew HTML5 APIs You Didn’t Know Existed

Few HTML5 APIs You Didn’t Know Existed

Fullscreen API

getUserMedia API

Battery APILink Prefetch MathML element

WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API

The contentEditable Attribute

Pointer Lock API

Online and offline events

Using geolocation

New background styling

Detecting device orientation

The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval:

// Find the right method, call on correct elementfunction launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }}

// Launch fullscreen for browsers that support it!launchFullScreen(document.documentElement); // the whole pagelaunchFullScreen(document.getElementById("videoElement")); // any individual element


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



The getUserMedia API is incredibly interesting; this API provides access to device media, like your MacBook's camera! Using this API, the <video> tag, and canvas, you can take beautiful photos within your browser!

var video = document.getElementById("video"); // Put video listeners into place if(navigator.getUserMedia) { // Standard navigator.getUserMedia({video: “true”}, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); }


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



This simple API provides you information about the battery's current charge level, its charging status, and allows you to be notified of changes via a few events. Let's check it out!

navigator.getBattery().then(function(result) { console.log(result);// result:BatteryManagery {

charging: false,chargingTime: Infinity,dischargingTime: 8940,level: 0.59,onchargingchange: null,onchargingtimechange: null,ondischargingtimechange: null,onlevelchange: null

}});

Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



Firefox introduces a new strategy for website optimization: link prefetching.

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache

<link rel="prefetch" href="http://burnigroads.ro/race.php" />

<link rel="prefetch" href="http://burningroads.ro/imagenec/cars/logan.png" />


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



Mathematical Markup Language (MathML) is an dialect of XML for describing mathematical notation and capturing both its structure and content. Here you'll find links to documentation, examples, and tools to help you work with this powerful technology

Use:<math><msub><msup>...


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

WebSocket WebSocket( in DOMString url, in optional DOMString protocols);

void close(in optional unsigned long code, in optional DOMString reason);void send(in DOMString data);


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



WebRTC (where RTC stands for Real-Time Communications) is a technology that enables audio/video streaming and data sharing between browser clients (peers). As a set of standards, WebRTC provides any browser with the ability to share application data and perform teleconferencing peer to peer, without the need to install plug-ins or third-party software


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data. While DOM Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

// Let us open our databasevar request = window.indexedDB.open("MyTestDatabase", 3);

request.onsuccess = function(event) { db = event.target.result;

// Create an objectStore for this database var objectStore = db.createObjectStore("name", { keyPath: "myKey" });};


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

var gl; // A global variable for the WebGL contextfunction start() { var canvas = document.getElementById("glcanvas"); // Initialize the GL context gl = initWebGL(canvas); if (gl) { // Set clear color to black, fully opaque gl.clearColor(0.0, 0.0, 0.0, 1.0); // Enable depth testing gl.enable(gl.DEPTH_TEST); // Near things obscure far things gl.depthFunc(gl.LEQUAL); // Clear the color as well as the depth buffer. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); }}


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



In HTML5 any element can be editable. Using some JavaScript event handlers you can transform your web page into a full and fast rich-text editor. This article provides some information about this functionality.

<!DOCTYPE html><html> <body> <div contentEditable="true"> This text can be edited by the user. </div> </body></html>


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always null). Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa.)

var myWorker = new Worker("worker.js");x.onchange = function() { myWorker.postMessage([first.value,second.value]); console.log('Message posted to worker');}

myWorker.onmessage = function(e) { result.textContent = e.data; console.log('Message received from worker');}


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.

window.history.back();

window.history.forward();

var stateObj = { foo: "bar" };history.pushState(stateObj, "page 2", "bar.html");


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an 'online' status again.

You need to know when the user comes back online, so that you can re-synchronize with the server.You need to know when the user is offline, so that you can be sure to queue your server requests for a later time.

function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline"; status.className = condition; status.innerHTML = condition.toUpperCase();

log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); }

window.addEventListener('online', updateOnlineStatus);


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



The Pointer Lock API (formerly called Mouse Lock API) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view.

canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;

canvas.requestPointerLock()

if(document.pointerLockElement === canvas || document.mozPointerLockElement === canvas) { console.log('The pointer lock status is now locked');} else { console.log('The pointer lock status is now unlocked'); }


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

if ("geolocation" in navigator) { /* geolocation is available */} else { /* geolocation IS NOT available */}

navigator.geolocation.getCurrentPosition(function(position) { do_something(position.coords.latitude, position.coords.longitude);});

var watchID = navigator.geolocation.watchPosition(function(position) { do_something(position.coords.latitude, position.coords.longitude);});


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



It is now possible to put a shadow to a box, using box-shadow and multiple backgrounds can be set.

.multi_bg_example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));}


Fullscreen API

getUserMedia API


WebSockets

WebRTC

IndexedDB

WebGL

Web Workers

History API


Pointer Lock API


Using geolocation



Increasingly, web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. In particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.

window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(event) { var absolute = event.absolute; var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma;

// Do stuff with the new orientation data}

Few HTML5 APIs You Didn’t Know ExistedFew HTML5 APIs You Didn’t Know Existed

Dragos IonitaSoftware Engineerhttps://ro.linkedin.com/in/dragos-ionita-8ab20756

Thanks for watching!Thanks for watching!