Archive for February, 2008

In recent weeks I have come to love jQuery. jQuery is this lightweight, elegant and so-much-fun-to-code-with JavaScript library. You may already have it in your source code if you're using either the latest version of WordPress or Drupal.

jQuery is so easy to get to grips with, the documentation is simple to follow and complete with loads of code samples.

jQuery's elegance comes in the form of its ability to select DOM nodes through CSS-like syntax (i.e., CSS queries) in a compact way—brilliant for those who are already very familiar with CSS!

Most or even all actions start with a CSS query, which in a sense promotes the use of unobtrusive JavaScript as it's simply easier to use the $() syntax than add a function directly into HTML.

jQuery is also very much down to earth in a practical way providing a few neat toggle functions:

• toggle — show/hide selected elements
• slideToggle — show/hide selected elements with slide Up/Down effects
• toggleClass — add/remove a class from selected elements

There are also some handy plugins such as the Flash plugin and the ifixpng plugin, which fixes PNG transparency for img elements and CSS backgrounds in IE.5 and IE6.

If something isn't built-in, extending jQuery is ridiculously easy via custom plugins. Here's one way you could define a custom plugin:

 
jQuery.fn.myPlugin = function() {
    // Your plugin code goes in here
}

To take advantage of jQuery's chainability you need only add a single line returning the current context object—this:

 
jQuery.fn.myPlugin = function() {
    // Your plugin code goes in here
    return this;
}

To demonstrate how easy jQuery is to extend I created a simple one line plugin to toggle fadeIn and fadeOut effects, see below.

jQuery fadeToggle plugin:

jQuery.fn.fadeToggle = function(s, fn){
    return (this.is(":visible"))
        ? this.fadeOut(s, fn)
        : this.fadeIn(s, fn);
};

Example usage:

jQuery(function($){
    $(".toggler").click(function(){
        $(".content").fadeToggle();
    });
});

A demo of jQuery fadeToggle plugin in action

SharePoint is a strange beast. It's not a particularly inspiring piece of software, neither has it been built with usability in mind. Microsoft being Microsoft put much hype into it promising world domination for CEO's whilst neglecting the web professionals cry for better usability! At dConstruct 2007, Jared Spool in his talk on "The Dawning of the Age of Experience" used SharePoint as a negative example:

SharePoint is this amazing way to kill a business... Being a SharePoint developer is sort of like telling your best friend you're building a house and having them take you to the nearest lumber yard and say, "OK everything you need is here" and they just leave you.

I found myself in that exact position back in May 2007 when Steve and I took up a project to deliver a website for The Belvedere Academy girls school in Liverpool, England.

Despite our initial dismay and myriads of what, whys and hows we managed to hack our way through it like those treasure hunt games we used to play as kids. Clue after clue we eventually found our way towards the goal! This is living proof of our prize.

I sympathize with those seeking SharePoint answers. I'm afraid I don't have much to give. The best way to begin understanding SharePoint is by tackling its Templating system. A good article to get started with is Skinning MS SharePoint with standards and a Guide to making SharePoint XHTML Compliant. Yes, you guessed it. SharePoint is not built to web standards and has accessibility issues.

Finally, a word of advice. Avoid SharePoint like the plague and seek to educate your bosses or organisation so they realise there are better options. No doubt SharePoint's offering is very impressive and in some cases could be a prudent choice, such as a company Intranet that needn't be customised nor heavily branded. But for public facing websites large or small SharePoint is a no go area unless you enjoy constantly banging your head at the wall.

Julien Lecomte, author of the YUI Compressor gave a talk on High Performance Ajax Applications. He refers to some of the tricks we learnt from Steve Souders' research on the 14 rules for faster-loading web sites but also gives us more insight specifically on fine tuning JavaScript to perform up a gear. I hope you learn a few neat tricks from this video, I know I did.

[source: YUIBlog]

If this is the first you've heard of Microsoft's proposed version targeting feature for IE8 I highly recommend doing some read up on it as this is destined to affect every internet professional in some way or another. Go read Microsoft's announcement, then these two ALA articles, Beyond DOCTYPE and it's companion "From Switches to Targets: A Standardista's Journey".

Setting aside the controversy and heated debates of good vs evil, I think the benefit of the X-UA-COMPATIBLE meta tag could come in the form of browser testing. Freelance developers (like me) who do not have access to big testing budgets or a room full of computers with different versions of IE on every machine might find this a life saver. I currently have many standalone versions of IE on a single laptop for testing purposes. However these standalones are very buggy and do not always display exactly as a proper IE installation, let alone the initial pain of finding and installing each individual standalone. The possibility of using one IE installation, which updates itself on every new release, to test all versions of IE (from IE7 onwards that is) is very appealing. Even though the footprint of each new version will increase due to this backwards compatibility mode Microsoft will in time stop supporting older versions when they reach their life's end, for software that's typically 8 years.

Good as it were I have to agree with Jeremy Keith that it's a broken feature simply because you cannot opt-out from it due to the renderer defaulting to IE7. Not including the meta tag means your site is sentenced to death on the IE7 renderer, which isn't all that great in terms of standards compliance. It also goes against progressive enhancement which has become somewhat standard best practice now.

I do think this version targeting meta tag is a handy addition but Microsoft should also give us the ability to opt-out and not penalize us for not using this proprietary feature.