Recently, I published an article on one of the new features in HTML 5 called Offline Browsing  in HTML5 with ApplicationCache.The response to that article was good, and I was asked to expand on some further points including:how to decide on what files to cachethe implications of caching those filesdebugging the ApplicationCacheSo, that’s where this article will start: where the last one finished.  If you haven’t, you should probably read the previous article before this one.Let’s dive into what resources you and should not add to the ApplicationCache.What Should ...

We've seen some neat interactive HTML5 infographics before -- but the periodic table, for example, doesn't really care that much about time.Visual representation of time introduces numerous complications. Traditional ways of representing time visually were, roughly speaking, translations of dimension-type, from temporal to spatial; the mapping selected would depend on what kind of temporal relation was meaningful for the particular application. For example, circles represent cyclical behavior; lines represent development; trees represent evolutionary history; and so forth. New media change the...

So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you ge...

As notes in the Release Notes, Firefox Aurora introduced the Fullscreen API. This means that it will appear in the release version of Firefox in about 3 months.This is one of several features that will be fantastic for games on the web. Other exciting APIs are theGamepad, Canvas, and Audio. Some of these APIs still need work to be suitable for real-time games, but it’s a great time to be involved in building games for the web.I wanted to try out the Fullscreen API so I built this demo. This should work in both Firefox and Chrome. Try it out:Go FullscreenView the sour...

The debate over whether supporting the Adobe Flash plug-in on mobile devices is a feature or not is over. Last night, ZDNet got hold of a leaked Adobe announcement: It’s abandoning its work on Flash for mobile. It’s not a huge surprise that it came to this, since Adobe had been struggling to optimize the performance, and the tide has been turning toward HTML5.From the Adobe announcement ZDNet published:Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores. We will no longer...

In Firefox 8, we’ve added support for insertAdjacentHTML(). It’s an ancient feature of Internet Explorer that has recently been formalized in HTML5 and then spun out into the DOM Parsing specification. The bad news is that Firefox is the last major browser to implement this feature. The good news is that since other major browsers implement it already, you can start using it unconditionally as soon as the Firefox 8 update has been rolled out to users.Basic UsageinsertAdjacentHTML(position, markup) is a method on HTMLElementDOM nodes. It takes tw...

Update #3: Using the techniques outlined in this article I have rolled out and initial release of imgscalr.com.Feel free to download the JS source (it is heavily commented) and take a look at how it was rolled out. Unfortunately the required File API support is only in Chrome and Firefox currently, Safari gets it in version 6, Opera possibly in version 11 and possibly IE 10 (9 has no support).IntroductionOver the last day I’ve been trying to learn how to use the new HTML5 Drag and Drop API as well as the new File API. I want to create a really nice drag-and-drop...

In my previous posts, we discovered How to Use HTML5 File Drag & Drop, and Open Files Using HTML5 and JavaScript. Now we have a valid set of files, it possible to upload each one to the server. The process occurs asynchronously in the background so the user can complete other on-page tasks while it occurs.The HTMLLet’s examine our HTML form again:view plainprint?<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">  <fieldset>  <legend>HTML File Upload</legend>  ...