Using the new Page visibility API in your apps

January 19, 2012January 19, 2012 sameer 3 Comments

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…)

The HTML5 keygen element

August 15, 2011August 16, 2011 sameer 1 Comment

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…)

Sharing data across windows using localStorage

June 13, 2011June 13, 2011 sameer 1 Comment

One of a common requirement in some web applications is that of sending messages and data across windows (of the same origin). Doing this is not easy and requires the help of cookies and a bit of JavaScript. Now with HTML5 and its localStorage feature we can accomplish this quite easily.
(more…)

Adding HTML5 Geolocation to your web applications

May 12, 2011June 2, 2011 sameer 11 Comments

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…)

Drawing Trees in Canvas

January 23, 2011January 23, 2011 sameer 4 Comments

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…)

HTML 5 logo announced

January 19, 2011January 19, 2011 sameer 1 Comment

Now that people have slowly started implementing HTML 5 features in their sites they would like the world to know the same. W3C have released a set of logos you can stick on your site and announce the world of your HTML 5 accomplishments. Besides the primary logo it also include logos for other main features of HTML 5 – CSS, semantics, offline storage etc.
(more…)

Introducing HTML5 Web Workers

January 15, 2011January 19, 2011 sameer 5 Comments

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…)

Export Illustrator art to HTML5 canvas

October 13, 2010November 10, 2010 sameer 1 Comment

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.

HTML 5: Learning the new standard

August 29, 2010October 11, 2010 sameer

With HTML5 quickly making inroads in the web world, information relating to the workings of the same are on the increase. One resource I find quite useful and thorough is the one by Google – html5rocks. Filled with various tutorials and a playground to work with HTML5 code, the site makes a quite useful destination for those learning the new HTML 5 standard.