Thread

First, here’s the demo page: http://demos.nickol.us/filesize/

Over the last few days, while waiting for new tasks to trickle in or for code to compile, I’ve been messing around with a bit of javascript that figures out the file size of linked resources. I stumbled over this script written for jQuery and thought that it was an excellent idea, but failed a little bit at presentation. I also wanted to try to reimplement the same features in YUI.

It works by scanning the page for links (you can restrict the links to a particular class), then using an ajax method (YUI’s Get utility), it queries a Google App Engine application written by a guy named Simon Willison called json-head. Json-head takes as a parameter a URI to some resource on the web and returns the HTTP header response for that resource in JSON format. One of the properties in an HTTP header is the Content-Length attribute, which gives (in bytes) the length of the resource being requested. A little data management and math, and I can calculate the size of any resource that responds with a Content-Length.

Of course, that just gets me as far as Ms. Downe (linked above), and I wanted to go a little further. I remembered that a few months ago, I found this site on how to “iconize” text links in a page. It uses CSS 2.1 selectors not available to IE6 (which made it of limited use to me), but it also has a set of delicious icons. I decided to replace the ugly little extension string with one of those delicious icons. The end result is a fire-and-forget script that adds icons to text links.

Of course, it’s not polished, but a few hours of free time and it could be.

That is pretty amazing. Also now I understand how Wikipedia puts the images on its links, like HTTPS urls always have a lock on them for example. They must be using the iconize CSS.

Thanks for sharing. 😊

I decided to play around with this some more and generalize the functionality more completely. I also wrote the necessary styles to display most of the file formats supported by the iconize CSS icons.

Now, the script checks to see if the file is a real file or just a link to an in-page anchor (example.com/#someAnchor). If it is, it doesn’t bother to query the HTTP header because it clearly doesn’t exist. If it’s a URI to an external file, it queries the App Engine service for the HTTP headers. It handles 404 errors by displaying a simple (404) next to broken links. There are a bunch of settings that allow you to show/hide the content-type, the file size, the file extension, what metric to use (KB, MB, GB, or Auto), how many decimal places to use, and whether or not certain elements should be capitalized.

AJAX File Sizes