johnmccollum.co.uk

I’ve just finished reading Pro JavaScript Techniques by John Resig, and I thought I’d post some thoughts about it.

The author, John Resig, is the creator of the popular jQuery library. He also works as a Javascript evangelist for Mozilla, so there’s no doubt that he’s one of the best known proponents of the language.

Although I use the jQuery library on a daily basis, I was keen to brush up on some of the finer points of Javascript; my knowledge of the jQuery library probably exceeds my knowledge of Javascript! For this reason, I thought the book sounded good.

The first half of the book certainly doesn’t disappoint. Covering the nitty-gritty of DOM traversal, OO Javascript, and unobtrusive scripting, the book does a great job of covering a lot of ground in a concise, clear manner. The key concepts are illustrated with plenty of code snippets which do a great job of illuminating the subject matter.

The second part of the book was less useful for me, illustrating some examples of AJAX functionality, image galleries, autocomplete, that sort of thing. These topics might have been considered intermediate to advanced in 2006, when the book was released, but the plethora of options around today means that developing stuff like that now is re-inventing the wheel. (Of course you might be interested in learning more about wheels!)

You can almost see the snippets of code in this book forming the nuts and bolts of the jQuery library, and it’s interesting to take a look at the hoops we developers would have to jump through to otherwise gain cross-browser compliance.

I’m just glad I’m not the one having to negotiate those hoops myself!

To sum up, this book is still worth reading for the first half alone, and the stuff on OO javascript, scoping, closures etc is really useful. But some might consider the book a little out of date, so be warned.

One of the things I missed when switching from Prototype to jQuery was the former’s Ajax.PeriodicalUpdater function. It is used to provide a ‘decay’ mechanism for ajax calls, making them less and less frequent if the retrieved content doesn’t change inbetween calls.

It can be a seriously useful piece of functionality. I took a chatroom that was polling every second and using an entire CPU core (50% usage!) and reduced it to 2-3% using this method. There were also errors retrieving content because sometimes the responses would take longer than a second to come back!

The problem is, there really isn’t a similar piece of functionality in jQuery.

So here it is! The script checks the returned data against previously received data, and increases the time between calls if it hasn’t changed.

I’d be interested in your comments. Would it be useful to turn this into a plugin?

View the demonstration here.

Steve Reynolds recently wrote a blog post showing how to access the twitter search API using PHP, cURL, and JQuery.

Steve used JQuery to post to a page on his server, which then cURLed in search results for a given term. This approach is often necessary to get avoid the issue of cross domain ajax calls.

While this approach works well, there’s an even easier way to go about it – $.getJSON!

There are two main advantages to this approach:

• Server side technology isn’t an issue. You don’t have to rely on PHP, cURL, firewalls, anything like that. It will even work on a static HTML page!
• All the work is done on the client’s browser – saving precious bandwidth! This could be important on busy sites.

I’ve knocked up a quick-and-dirty demonstration of this concept. If a name doesn’t already exist for this methodology, my vote goes for JAJA (Javascript and JSON, asynchronous!)

View the demonstration here!

Just a quick post – spent a few hours the other night trying to get Zeus Rewrite to play ball so that this:

http://www.example.com/index.php/controller

turned into this:

http://www.example.com/controller

There’s a distinct lack of examples for Zeus rewrite, but here’s what worked for me:

map path into SCRATCH:DOCROOT from /

set SCRATCH:REQUEST_URI = %{URL}

look for file at %{SCRATCH:DOCROOT}%{SCRATCH:REQUEST_URI}
if not exists then look for dir at %{SCRATCH:REQUEST_URI}%{SCRATCH:REQUEST_URI}
if not exists then set URL = /index.php%{SCRATCH:REQUEST_URI}

Your mileage may vary; some tweaking may be required for your particular set up. Hopefully this post saves someone some work!

I was recently involved in a project where there were two multi-select lists involved, with a big number of options – around 300 in each.

These things are a usability nightmare:

• The user has to ctrl-click to select multiple options (’where’s the central key?’)
• A stray click will unselect everything already selected (Critically important on a site sign-up form)
• They are just plain ugly

So the workarounds I’ve been trialling?

Jquery multiselect plugin – Very nice plugin that solves all three of the problems above. One problem however – it was taking over a minute for my page to load in Firefox!

Interestingly, Chrome displayed the page in under 5 seconds. Guess that new javascript engine is a fast as they say…

Half-assed Jquery solution I cobbled together for fun – This lets the user use a single click instead of a control click on multi-select lists. Solves problem one and two, problem three would still need someone with more artistic leanings working on it. Oh, and it doesn’t work in IE. Told you it was half-assed.

Current favourite option – A div with overflow hidden, full of checkboxes. Sort of solves the main problems, but still not ideal.

How would you deal with this interface problem? I’d love to hear your suggestions.