The most difficult part was blessing my application with fades. When I clicked on a year, I wanted to see a short (~1 second) transition in which the current year faded out, and when it was gone, the next year faded in. I chose not to use scriptaculous, which is built on prototype, because the combination is well over 200KB and would dwarf my 15-20KB application. Scriptaculous was overkill (an in my opinion, is overkill for almost anything). As usual, the complete code is displayed at the bottom.

The key was the style.opacity element of HTML elements in Javascript. This does exactly what it should do – set element.style.opacity to be 1.0 for 100% opacity, set it to be 0.0 for a transparent element. Anything else is, according to my science teacher, ‘translucent’. Now the only things remaining are getting the elements to be on top of each other (with absolute positioning, this is pretty easy), and making the fades gradual using setTimeout.

The setTimeout() is actually pretty tricky. The problem is that a function like this:

Will totally screw up, since ‘element’ is not of global scope. So, you need to make a global variable _in_element that will store the element during the transition.

And now the code. I don’t vouch that this actually works on any browser except Firefox (I know, for example, that it does not work on Internet Explorer). You’ll note that I did something very ugly – I set the ’showElement’ to delay its action for 500 milliseconds. This was a cheap hack, and should have been done in the ‘displayYear’ function.

Cross-browser update: it now works on everything except Internet Explorer. Apparently IE uses the ‘filter’ CSS property instead of ‘opacity’.

The solution to this is twofold. First, install gzipping on the server – I’ll discuss this in a later entry. Second, use a minification program, such as the one Yahoo provides. These programs take the JS or CSS files and remove unnecessary whitespace and comments to decrease the file size. The end result – the load time is often cut in half or better.

Yahoo’s compressor must be called from the command line and told to actually compress the file. Naturally, most people will want to automate this process, so that they don’t have to remember to call the compressor everytime they install a new version of scriptaculous or prototype, or make a change.

One possibility is to set up a serving script that first calls the compressor and then serves the page. This can be done in the htaccess like so:

Options +FollowSymlinks
RewriteEngine on

RewriteRule ^js/(.*)$ jserve.php/$1 [L]
RewriteRule ^style/(.*)$ cserve.php/$1 [L]

This is grossly inefficient. For a medium or high-traffic website, it will completely kill your server. The better solution (and the one we used at the Blair Robot Project) is to have the compressor be called in your crontab, and then have the serving script serve the minified file. The crontab entry would then look like:

*/30 * * * * /var/www/robot/scripts/manage-roboweb.sh

The above entry runs manage-roboweb.sh every 30 minutes. In manage-roboweb.sh, we have a call to a c minification program that automatically finds every file in a specified directory (in this case /var/www/robot/js) that has a specified extension, and processes that file with a call to YUI (the Yahoo compression application).

This can be improved by having the serving script first check to see if the minified file is up-to-date, by checking the last modified times of each. You can also have the managing script do the same, so that the files are only re-minified if they were modified. I’ve placed the code we used for both serving scripts below.

cserve.php

jserve.php