Category Archives: Web

Cache manifests and Firefox

I’ve been playing with offline web applications this afternoon. Generally, it’s pretty straightforward:

  1. Reference your manifest file in the <html> tag of each page.
  2. Fill out your .manifest file with the relevant resources you want to be cached and available offline.
  3. Configure your server to serve .manifest files at text/cache-manifest.

Most browsers picked this up fine (tested: Opera 11, Chrome 7, Mobile Safari iOS 4.3), but unfortunately I ran into…

Firefox issues

Firefox (tested: 3.6.13 and 4.0b11) refused to pull resources back from appCache—even though it reported successfully caching 175kB of data—or request any resources that weren’t cached. Firefox just presented the plain HTML for each pages without loading images, stylesheets, scripts or any other assets.

After much searching and trial and error, I came across a recommendation on stackoverflow to use http://* within the NETWORK section of the manifest for the sake of Firefox, and sure enough…

It works!

Final code samples as follows…

HTML (/index.html)

<!DOCTYPE HTML>
<html manifest="/path/to/my.manifest">
<body>
...
</body>
</html>

Manifest (/path/to/my.manifest)

CACHE MANIFEST
#ver0.08

CACHE:
images/bg-noise-tile.png
images/site-name-bg.png
images/menu-bar-divide.png
# etc ...

NETWORK:

http://*

*

Apache configuration (/.htaccess)

# Ensure manifests are served using the correct mime type
AddType text/cache-manifest .manifest

Thank you

Thanks to dalibor for pointing out that http://* is required for Firefox.

One other handy resource is Mark Pilgrim‘s Let’s take this offline, and if it had mentioned http://* it would have been perfect!

Posted in

unrecognized expression: #

I’ve tried to use one of my own jQuery plugins—that I know works—only to receive the following console messages without any reference to a code line number, hence no way to track down the culprit:

uncaught exception: Syntax error, unrecognized expression: #

I’m sure this has caught me out a number of times. Each time is far enough apart that I have forgotten how I debugged the issue previously. And each time I search the interwebs in vain. No one seems to have clearly explained what causes this exception!

Next time I encounter this problem, hopefully I remember—or find—this post, solution follows…

Solution

This exception is thrown by jQuery when you ask it to resolve the selector '#' without an id following. In my case it is often caused by my plugin code assuming an element has an id. If the element doesn’t have an id, the exception is thrown, for example:

...
var storedID = $(this).attr('id');
...
$('#'+storedID).doSomething();
...

When this doesn’t have an id, I’ve essentially asked jQuery to resolve the following:

...
$('#').doSomething();
...

Which jQuery doesn’t like to do, hence the exception.

HTH

Posted in

Zippitydoodah

Finally got around to fixing my corrupt zip file issues. Fresh and flawless zip files are now available for the latest versions of all widgets and plugins.

BTW the compact content plugins have been updated with a bunch of small fixes (IE6 benefits the most from this release). See new examples, downloads and changelog for version 3.5.

Posted in

Test support for short URL auto-discovery

Short URL autodiscovery sounds like a good idea to me. The easiest way for a developer to integrate this mechanism is to use the link element in your document’s <head>, e.g:

<link rel="shorturl" href="http://irama.org/673" />

Or if you are using WordPress there are few handy plugins that do this automatically (for example: Short link maker and Shorter links).

So what?

But who’s going to know you’ve gone to all this trouble? How far has support for auto-discovery penetrated? I think it would be great if social media client applications would offer my short URL to users when they choose to shorten URLs within their posts, but I can’t find much documentation about which if any apps will pick up and use short URLs exposed in this way.

Go forth and test

This post can serve as a test, and a collection point for data, leave a comment if you have tested a new client application (include the version if known), and I’ll do the same.

Posted in

ARIA keyboard navigation best practice

I finished updating the ARIA keyboard navigation plugin tonight.

As of this version the plugin manages focus using tabindex alone, which means it functions in browsers old and new (whether they support ARIA explicitly or not). Browser support has been tested with Firefox 3.6.3, Chrome 4, Safari 4, Opera 10.51 and the Trident Trio (IE 6, 7 and 8).

During the refactoring I also managed to shave ~170 lines from total code weight — and this version has more comments!

Posted in