First, IE8 will drop the use of hasLayout, meaning there should be a bit more consistency in renderings between browsers and less need to resort to conditional comments with IE-specific CSS. (It doesn’t help with current versions however.)

Second, WebKit now includes an implementation of getElementsByClassName, joining Firefox 3 and the next Opera version for support for this highly desired function. Benchmarks are given which show the staggering speed increase on this common operation. You can get some for Firefox 3 as well.

The WebKit guys especially seem to be keen to start pushing the limitations of current browsers so I think 2008 will be an exciting year.

First of all, getting Ext running is slightly more complicated than getting jQuery running. jQuery is a simple matter of including jquery.js in your HTML and then writing your script. Ext requires first it’s own CSS file, then an adapter which uses another library (jQuery, YUI or Prototype) but can also use the newish ext-base.js which doesn’t depend on external libraries, and finally you include ext.js itself. I went with the pure Ext solution but tried out the jQuery adapter and found it didn’t work for me – I’m sure I was doing something wrong but didn’t care enough to fix it and went back to Ext.

Secondly, Ext is rather huge. Not surprising considering what it can do but the whole thing (ext.js, ext-base.js and stylesheet) still comes in uncompressed at just over 512KB. Sorry, I should mention that that’s with Ext’s default minification – the debug versions are a bit over 1MB! In comparison, jQuery is roughly 70KB before any minification is applied. So what do you get for all this size? Quite a bit actually.

The customer info area of my application is designed with a list of customers on the left and an area for details on the right. With pure HTML and CSS a nice-looking layout here, similar to a desktop app, is really difficult to achieve. With Ext it’s almost trivial and you can use a logical declarative style of recursive JavaScript objects to define the layout – similar to how it would be done in Java Swing, for example. With Ext you can also easily get “bonus” features like resizable panes, content areas that adjust to the size of the viewport and a default style that looks pretty damned good (and you have to option of using different themes). Without any trouble I was able to get a simple list working which allows clicking on customer names to load their details asynchronously in the details panel, as well as allowing dynamic updates and the like.

The standard things that I use with jQuery – selectors and AJAX support – are also well supported in Ext, even if they are slightly more verbose. Ext also includes a nifty feature in it’s simplistic load() method that allows you to set a loading message, something that I believe you have ot do manually in jQuery.

Ext also supports a wide range of widgets and the like out of the box. Data grids are all the rage now and Ext makes it simple to get them up and running. Tree views, buttons, colour pickers, date selectors and a bunch of others are provided as well. If there’s something missing you might be able to find a plugin for it.

Overall, I’m really enjoying working with Ext. It makes some fundamental yet complex things ridiculously easy and provides enough of a framework to get almost anything working with a bit of lateral thinking and liberal application of nested layouts and the like.

So I guess the obvious question now is if I prefer Ext or jQuery? Honestly, the two are just aimed at completely different areas. If you’re making a web site that needs some fancy JavaScript effects, a bit of AJAX and you want it to be light and accessible, then I’d say jQuery is the way to go. If you want a RIA with lots of advanced functionality and don’t care about those plebs who don’t have JavaScript then I’d say Ext is definitely the preferred option. If I had to pick I’d say I like jQuery a bit more since I prefer writing enhanced web sites rather than desktop application wannabes but this is really just a personal choice. Both libraries offer the same basic functionality and jQuery can certainly be extended to do pretty much what Ext does so choosing either will probably let you do what you want.

I have also started work on a completely revised theme for the site which I hope to get finished in the next week or so. I’m using The Morning After as a base and making some pretty heavy customisations as well as a bunch of cosmetic changes. The interesting thing is that many aspects of the theme are a step backwards for me in some ways, such as the CSS being far more complex than it needs to be and the semantics of the markup being all out of wack. Still, it’s a good base visually and structurally.

Just create a file called style.css.php (or whatever you prefer) in the same directory as your style file. Then add this code to it:


<?php
ob_start("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

ob_end_flush();
?>


The main parts are the ob_start and require calls. ob_start starts output buffering and tells the buffer to use gzip compression on the output of the script. require will load the contents of the file specified. If you want to use this for JavaScript, make sure you change the “text/css” on line 3 to “text/javascript”.

Now you just need to change the contents of any relevant <link> or <script> tags in your HTML to point to style.css.php instead of style.css and you’re set! Feel free to play around with the expires offset – you might want to set it to 10 years in the future for long-term caching but make sure you change the name of the file whenever it’s updated, otherwise the browser might not load the newer version.

If you have multiple CSS or JavaScript files that you want to load then you might like to check out Ed Eliot’s automatic merging and versioning script.