Using the new Page visibility API in your apps

One of the features lacking in the current browser api is that of determining whether the web page is currently visible to the user or is hidden (either in another tab or window).

The new Page Visibility API allows you to do just that – determine whether your web page is visible to the user, is hidden in a background tab or window, or is prerendering. It allows the developer to use the page visibility state in JavaScript logic to make the user experience more friendly; for example, by stopping video, animation or slideshow playback whenever the user switches to another browser tab or window, and resuming whenever the user switches back. Also if your page is doing some ajax processing periodically, which consumes precious system resources, we can pause it when the page is not in focus. Other use can be in analytics, checking how long the page had been in actual user focus, rather then as a hidden tab or window.

Check the below demo page to see how this works. The demo was tested in Safari, Opera 11.10, Chrome and Firefox.
(more…)

Read More

The HTML5 keygen element

There is some confusion among users regarding the new HTML5 keygen element. The keygen element generates a public/private key pair and then creates a certificate request. Many users want to know the exact use of the element when SSL is available. This is my take on the subject. Correct me if I’m wrong.

<form action="process.cgi" method="post" enctype="multipart/form-data">
 <p><keygen name="key"></keygen></p>
 <p><input type=submit value="Submit key..."/></p>
</form>

(more…)

Read More

Adding HTML5 Geolocation to your web applications

One of the interesting and useful addition to the HTML5 specification is the Geolocation API. The Geolocation API allows users to share their location with web applications so that they can enjoy the benefits of various location-aware services.

Geolocation enables you as a developer or website owner to figure out where a particular user is located on the planet. This can be helpful in various web applications; for example in social networking, where you can find out where your various friends are currently located or in advertising where you can display targeted ads based on the users location.
(more…)

Read More

Drawing Trees in Canvas

Lately I’ve been experimenting with the new HTML5 Canvas element, and the best way to learn some new technology is to create something in it. For some time I’ve been dabbling in Processing and thought of porting some algorithms there in Canvas.
Rather than jumping into animation it was better to play around with static structures. I’ve a soft spot for visualizations so I decided to port some algorithms for creating recursive tree structures.
(more…)

Read More

Introducing HTML5 Web Workers

One of the interesting and useful additions to the HTML5 standards is the support for Web Workers. Web Workers will help you design more responsive web applications then otherwise possible in the past.

What are Web Workers

Web Workers are basically a API specification that lets you create background JavaScript threads to process CPU intensive tasks. Normally in browsers a single thread is created to handle all the JavaScript code. So whatever JavaScript code is run in the browser is executed in that single thread; whether you are doing some calculation or updating page elements. The downside of this is that some CPU intensive piece of JavaScript can render the page unresponsive or slow it to a crawl.

Web Workers alleviate this problem by letting you create multiple JavaScript threads that will run independent of each other, this will prevent one CPU intensive piece of JavaScript from interfering with the UI code.
(more…)

Read More

Export Illustrator art to HTML5 canvas

AI-Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork to an HTML5 canvas element, which can then be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps. This is a wonderful tool if you are just starting with HTML5 canvas, helping to decrease the learning curve. This can really come in handy for people like myself who are not really into graphics programming.

Read More