Ultimate JavaScript Stuff
Feeds
Thursday, 19th June 2008
I'm going to be gushing about some JavaScript related bits and pieces that I find really useful. I've been using JavaScript for years and years and I've gone through all of the phases that you tend to go through with this technology.
You tend to start out like a crazed zealot. You start using it for everything and you can't wait to add the next bit of animated rubbish to your web page. Great... bubbles follow my mouse around the page - how annoying!
Very soon, you realise that...
- If you use it in the wrong way, JavaScript can become very, very annoying.
- Nothing on your website works because JavaScript is disabled / not available / stopped working after an error on line 65,445 / insert your reason here!
The next phase is that you don't use it at all. You've been put off by the nightmarish experience you caused yourself by using it far too much and you throw it all away and use static web pages. It's the "toys out of the pram" moment!
As with all technologies though, there is a good way to use them and a bad way, so you spend your next phase tentatively using it to enhance some pages - like adding form validation that supplied non-post-back validation (even though it's being validated server-side too) .
In the end though, you end up in the right place. Using it where it adds value and where it doesn't break the user interface. For an example, take a look at the Gallery on this site. If you have JavaScript, it will gently animate the thumbnails and open the images inside the same browser window. it also supplies some navigation to look at different images and close the image to see the thumbnails. If you don't have JavaScript for whatever reason, it still works. You see some images, you click on them and you see the large version. The JavaScript doesn't power the whole thing, it just makes it a lot better.
So what should you use to create a useful, graceful and life-enhancing bit of JavaScript... well - the tools that have helped me the most are listed below and I'll be talking more about them in the next few weeks to say why I think they're useful!
- Framework: JQuery (at jquery.com)
- Debugging: Firefox with the FireBug extension (at www.mozilla.com)
- Checking: JSLint (at www.jslint.com)
- Packing: Dean Edwards' Packer (at dean.edwards.name/packer/)