25 Ways To Build Better jQuery Web Applications

Google have been hosting several JavaScript libraries for a while now on Google Code and there areseveral advantages to loading it from them instead of from your server. It saves on bandwidth, it'll load veryquickly from Google's CDN and most importantly it'll already be cached if the user has visited a site whichdelivers it from Google Code.This makes a lot of sense. How many sites out there are serving up identical copies of jQuery that aren'tgetting cached? It's easy to do too...

1.

<script src=

"http://www.google.com/jsapi"></script>

2.

<script type=

"text/javascript">3.

4.

// Load jQuery

5.

google.load("jquery","1.2.6"); 6.

7.

google.setOnLoadCallback(

function

() {

8.

// Your code goes here. 9. });10.11.</script>

Or, you can just include a direct reference like this...

1.

<script

src=

"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/j avascript"

></script>

Full instructions here

2. Use a cheat sheet

Not just a jQuery tip, there are some great cheat sheets out there for most languages. It's handy havingevery function on a printable A4 sheet for reference and luckily these guys have produced a couple of niceones..

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

http://colorcharge.com/jquery/

3. Combine all your scripts and minify them

OK, a general JavaScript tip here. But any big project that uses lots of jQuery probably uses lots of plugins(this site uses easing, localScroll, lightbox and preload) so it's usually applicable.Browsers can't load scripts concurrently (well, most can't, yet), which means that if you've got severalscripts downloading one at a time then you're really slowing down the loading of your page. So, assumingthe scrips are being loaded on every page then you should consider combining them into one long script before deploying.Some of the plugins will already be minified, but you should consider packing your scripts and any thataren't already. It only takes a few seconds. I'm personally a fan of

Packer by Dean Edwards

4. Use Firebug's excellent console logging facilities

If you haven't already installed Firebug then you really should. Aside from many other useful features suchas allowing you to inspect http traffic and find problems with your CSS it has excellent logging commandsthat allow you to easily debug your scripts.

Here's a full explanation of all of it's features

My favourite features are "console.info", which you can use to just dump messages and variables to thescreen without having to use alert boxes and "console.time" which allows you to easily set up a timer towrap a bunch of code and see how long it takes. They're all really easy to use too...

1.

console.time('create list');2.

3.

for

(i = 0; i < 1000; i++) {

4.

var

myList = $(

'.myList');