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 API Link 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 element function 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 page launchFullScreen(document.getElementById("videoE lement")); // any individual element

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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); }

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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 } });

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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 " />

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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>...

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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);

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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 database var 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" }); };

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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 context function 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); } }

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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>

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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'); }

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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");

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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);

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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'); }

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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(po sition) { do_something(position.coords.latitude, position.coords.longitude); }); var watchID = navigator.geolocation.watchPosition(function(position ) { do_something(position.coords.latitude, position.coords.longitude); });

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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.p ng), 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)); }

Few HTML5 APIs You Didn’t Know Existed Fullscreen API getUserMedia API Battery API Link 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 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 Ionita Software Engineer https://ro.linkedin.com/in/dragos-ionita-8ab20756 Thanks for watching!Thanks for watching!

Html5 - Awesome APIs

More Related Content

What's hot

Similar to Html5 - Awesome APIs

More from Dragos Ionita

Recently uploaded

Html5 - Awesome APIs