5 HTML5 Javascript APIs to keep an eye on — Adnane Belmadiaf's Blog In my last post, i have talked about HTML5 APIs, so thought it will also interesting to write about some new old JavaScript APIs. Since CSS has been improving over the time and today you can achieve what was only done with Javascript with CSS only, on the other side Javascript have to improve and follow the evolution, so today Javascript can do a lot of things, like accessing hardware(camera, microphone, gamepad, GPU), accessing the filesystem and websocket. Battery Status API The Battery Status API allows any webpage to inspect the state of the device's (Laptop, phone or tablet) battery through javascript : var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery console.log("Battery charging: ", battery.charging); console.log("Battery level: ", battery.level); console.log("Battery discharging time: ", battery.dischargingTime); Gamepad API Gamepad API allows you to connect your console gamepad into your computer and use it for browser based games. Geolocation API
Using CORS Introduction APIs are the threads that let you stitch together a rich web experience. But this experience has a hard time translating to the browser, where the options for cross-domain requests are limited to techniques like JSON-P (which has limited use due to security concerns) or setting up a custom proxy (which can be a pain to set up and maintain). Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. The use-case for CORS is simple. As you can see from this example, CORS support requires coordination between both the server and client. Making a CORS Request This section shows how to make a cross-domain request in JavaScript. Creating the XMLHttpRequest object CORS is supported in the following browsers: Chrome, Firefox, Opera and Safari all use the XMLHttpRequest2 object. Event handlers withCredentials Resources
Avoiding Unnecessary Paints Introduction Painting the elements for a site or application can get really expensive, and it can have a negative knock-on effect on our runtime performance. In this article we take a quick look at what can trigger painting in the browser, and how you can prevent unnecessary paints from taking place. Painting: A super-quick tour One of the major tasks a browser has to perform is converting your DOM and CSS into pixels on the screen, and it does this through a fairly complex process. The painting process itself is interesting. The thing to take away is that Skia's workload is directly affected by the styles you apply to your elements. With all that said, paint work takes time to perform, and if we don’t reduce it we will run over our frame budget of ~16ms. Whenever you scroll up or down in the browser it needs to repaint content before it appears onscreen. Interactions Interactions are another cause of paint work: hovers, clicks, touches, drags. An unfortunate combination Here's the code:
HTTP access control (CORS) - HTTP A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which the first resource itself serves. For example, an HTML page served from makes an <img> src request for Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains. For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers. This article is for web administrators, server developers, and front-end developers. This cross-origin sharing standard is used to enable cross-site HTTP requests for: Invocations of the XMLHttpRequest or Fetch APIs in a cross-site manner, as discussed above. Overview Subsequent sections discuss scenarios, as well as provide a breakdown of the HTTP headers used. Simple requests
js Documentation These docs are for the developer preview of Mobify.js 2.0. Looking for the 1.1 documentation? It's right here! What is Mobify.js? Mobify.js is an open source library for improving responsive sites by providing responsive images, JS/CSS optimization, Adaptive Templating and more. Mobify.js also provides a “Capturing” API for manipulating the DOM before any resources have loaded, giving developers the ability to enable the listed features above without changing any backend markup. Getting started Let’s get started by using the Image API (one of many APIs available in mobify.js) to automatically resize and optimize images in your page. Note: If you’re using this API locally and your images aren’t publicly available, the original images will load. If you don’t want to have to worry about changing src attributes, you can let Capturing take care of that for you. Without Capturing Then, paste the following tag before </head>, or top of <body>: Where to next?
Cross-Origin Resource Sharing Abstract This document defines a mechanism to enable client-side cross-origin requests. Specifications that enable an API to make cross-origin requests to resources can use the algorithms defined by this specification. If such an API is used on resources, a resource on can opt in using the mechanism described by this specification (e.g., specifying Access-Control-Allow-Origin: as response header), which would allow that resource to be fetched cross-origin from Status of this Document This section describes the status of this document at the time of its publication. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. If you wish to make comments regarding this document, please send them to public-webappsec@w3.org (subscribe, archives). Table of Contents 1 Introduction 2 Conformance The .
WebVTT and captioning on the web | Access iQ The HTML5 <video> and <track> elements have brought native captions to the web. Interoperable captions between browsers are enabled through the new file format WebVTT (Web Video Text Tracks). Since the introduction of the <video> element into HTML around 2007, accessibility advocates have asked for a means to include captioning natively into the web platform. Successively, browsers have implemented these features and by now, all but Firefox — who is not far behind — have released at least the minimum support necessary to display captions on web video. Let's look at how we can make use of it. Authoring WebVTT A WebVTT file is a line-based text format that provides a sequence of timed text cues for a media element. Here is an example WebVTT file: 0:00:03.040 --> 0:00:06.920 So, I just wanted to introduce you to W3C, 0:00:06.920 --> 0:00:09.680 and to do so, I have some exciting information: 0:00:10.000 --> 0:00:13.800 W3C has been acquired by Twitter. Using WebVTT in the <video> element NB.
Cross-Domain Requests with CORS Cross-Origin Resource Sharing (CORS) is a powerful technology for static web apps. To understand what it is and why it's important, you first need to understand a bit about how browsers work. The Same-Origin Policy The Same-Origin Policy restricts the browser from performing certain actions by scripts or documents based on the origin. A parent document can't access the contents of an <iframe> that comes from a different origin. The Same-Origin Policy is a vital piece of web security architecture, but it also poses a problem. Enter Cross-Origin Resource Sharing CORS allows you to more cleanly separate your front-end from your back-end. If you are building an application using a third-party data provider or an API that already supports CORS, there isn't much else you need to know! Implementing CORS CORS is a group of special response headers sent from the server that tell a browser whether or not to allow the request to go through. Access-Control-Allow-Origin:
Demos - JavaScript InfoVis Toolkit JavaScript InfoVis Toolkit Create Interactive Data Visualizations for the Web Home ● Download ● Builder ● Donate Area, Bar and Pie Charts Sunburst Icicle ForceDirected TreeMap SpaceTree RGraph HyperTree Advanced/Other copyright © 2013 SenchaLabs - Author: Nicolas Garcia Belmonte CORS Enabled - W3C Wiki What is CORS about? CORS is a specification that enables truly open access across domain boundaries. Why is CORS important? Currently, client-side scripts (e.g., JavaScript) are prevented from accessing much of the Web of Linked Data due to "same origin" restrictions implemented in all major Web browsers. While enabling such access is important for all data, it is especially important for Linked Open Data and related services; without this, our data simply is not open to all clients. If you have public data which doesn't use require cookie or session based authentication to see, then please consider opening it up for universal JavaScript/browser access. For CORS access to anything other than simple, non auth protected resources please see this full write up on Cross Origin Request Security. How can I participate? Granting JavaScript clients basic access to your resources simply requires adding one HTTP Response Header, namely: At the HTTP Server level... For Apache a2enmod headers For nginx In PHP
WebSockets in Tomcat 7 posted by fhanik on April 23, 2012 10:22 PM With the 7.0.27 release the Apache Tomcat team introduced a WebSocket implementation. WebSocket has received a lot of hype, and has been much anticipated by Tomcat users. Let’s take a quick look at what web sockets are, what benefits and limitations they have and how they are implemented in Apache Tomcat 7. What is a WebSocket? WebSocket is considered the next step in evolution of web communication. Entire page reloads Component reloads using AJAX Processing Comet communication Long poll– similar to AJAX, but not holding a thread on the server Bi directional- two way communication over the same TCP Each of these steps had their benefits and challenges. Given that HTTP was intended to be request/response protocol rather than a bi directional protocol, proxies and other intermediaries may not work properly, and only forward packets in one direction at any given time. So let’s summarize what a WebSocket implementation gives us: Summary
Making Cross-Domain Requests with CORS One thing I ask interview candidates is how to make cross-domain requests with Javascript. All too often, interviewees only come up with JSON-P and proxying as a solution. This is insufficient for JS devs in 2012. Libraries like jQuery will handle all of the complexities of this and gracefully degrade to other technologies as much as possible, but it is important for JSers to know what is going on under the covers. Background HTTP requests from Javascript are traditionally bound by the Same Origin Policy, which means that your ajax requests must have the same domain and port. CORS stands for Cross-Origin Resource Sharing. Why you should use CORS Compared to proxying, the significant advantage of CORS is not having another system component, possibly complicating the app. It has a few big advantages over JSON-P as well: It supports HTTP verbs other than GETError handling with JSON-P is tricky or impossible. How CORS works To show you how it works, I’ve come up with the following scenario.