For the June meeting of the HTML5 & CSS3 LA User Group, I spoke about XMLHttpRequest, Level 2 and Cross-Origin Resource Sharing headers. It’s always tough to present code. That goes double when you are sleep deprived, yet caffeinated and tongue-tied.
In any case, the slides — which is really just one really long, really heavy HTML file with inline CSS, JS, and images (thanks, data URIs!) — are now available.
Data URIs have been available for quite a while now, though Internet Explorer versions 5-7 don’t support them. They are string representations of file data, typically base-64 encoded. When used as an img or url() source, they reduce the number of HTTP requests. And as we know, making fewer HTTP requests is the number 1 rule of web site optimization … except y’know when it creates a 1.8MB HTML file 
.
It’s simple enough to convert files to a base64 encoded string with a few lines of code. Let’s assume we want to convert a file named “cars.png.” In PHP it might looks like this:
$filename = 'cars.png';
$ext = pathinfo($filename,PATHINFO_EXTENSION);
switch($ext){
case 'gif':
$type = 'image/gif';
break;
case 'png':
$type = 'image/png';
break;
case 'jpeg':
$type = 'image/jpeg';
break;
}
$fileHandler = fopen($filename,"r");
$data = fread($fileHandler, filesize($filename));
print 'data:'.$type.';base64,'.base64_encode($data);
Despite the ginormous HTML file, I still think it’s useful for it to be a single-file package. After all, you only have to save and keep track of that one HTML file.
Application Cache
Bonus: you can view it offline because I took advantage of Application Cache.
Application Cache is an awesome technique that can speed up load times by caching data locally. But it also ensures that if connectivity is lost or unavailable, you can still visit that URL and have access to the content. This assumes, of course, that you’re using a browser that supports AppCache. The latest versions of most major browsers, including Opera 11+, do.
Application Cache is also quite simple — at least the basics of it are. First, add a manifest attribute to your <html> element.
<html manifest="/path/to/manifest.appcache">
Then create a manifest file. It’s a simple, plain text file that must be sent with a Content-type: text/cache-manifest header. Typically the file name should have an .appcache extension, though it will work (for now, at least) if it’s named foo.manifest provided you send the correct content type header.
A basic manifest — the one I’ve used for the slides in fact — looks like this:
CACHE MANIFEST CACHE: index.html
That’s it. We have told our browser to cache this page. You can also specify which files the browser should always retrieve from the server with NETWORK, or which files to use if you need to fall back. It’s fascinating stuff. For more, check out HTML5 Doctor’s post, Go offline with application cache.
I’ll be at Open Web Camp!
I’ll be speaking more about AppCache and other things at Open Web Camp July 16 at Stanford University in Palo Alto. Come say hi.
Opera news, in case you missed it:
- Opera 11.50 was released Tuesday
- Opera Mini 6.1 and Opera Mobile 11.1 were released yesterday (6/29)
I’m most excited that the Opera Mobile rendering engine is now running Presto 2.8 which means it now supports multi-layouts (we run on tablets too!), session history and navigation, and the File API (among other things).