Eight Tips That Makes You a Better jQuery Coder

jQuery is a javascript framework that is becomming insanely popular. It is fast, easy to use and creating custom plugins and components is done in a breeze. These days, everyone is a jQuery developer and the plugin repository over at jquery is virtually exploding with new plugins being added every day.

In light of all this, here are my eight best tips for becomming a better jQuery coder that you might consider before taking on your next project.

1. Stay accessible and maintain degradability

With jQuery being as popular as it is, more and more people are writing plugins and creating component packages that are ready to use as-is. But few developers bare in mind that it should also work without javascript turned on. Well, thats one of the main reasons to go unobtrusive, right? So as an example, this code:

CSS:
.animate{color:red;display:none};

jQuery:
$('.animate').fadeIn();

…would use jQuery to fade in the elements that has the class name ‘animate’. But if javascript is turned off, the browser still parses the CSS and will naturally hide the elements without ever showing them!

Instead, always make a habit of separating “javascript CSS” and “pure CSS”. Try this:

CSS:
.animate{color:red}
.animate_js{display:none};

jQuery:
$('.animate').addClass('animate_js').fadeIn();

This way, you can style the elements for each scenario and maintain degradability in a sensible way. As always, test your code without javascript turned on before deployment.

2. Move visual effects to the presentational layer

When writing javascript, always focus on behaviour. jQuery is not CSS, and be aware of the core differences between presentation and behaviour. For example, it is often a good idea to add classes instead of pure CSS properties. Avoid fades and glamour inside the functions. Save the effects for a juicy demo but stay low key in the javascript functions - everyone doesn’t share your visual taste!

3. Use firebug and the console.log

Firebug is your friend when developing with jQuery. And so is the console.log command that gracefully replaces the annoying alert(). Simply type console.log() to debug whenever you need to in your code. But remember to remove them before production since many browsers will choke on them, including IE (of course).

4. Define sensible defaults and use a limited amounts of parameters

When you get bitten by the jQuery bug and start to create plugins, you are often tempted to maximize the number of parameters to make it as flexible as possible. This is all very noble, but stay clear and try not to confuse the web developer with tiny parameters that hardly make any difference (like fade speeds etc). Instead, pass on a parameter object and define sensible defaults. Your code is not meant to be everything under the sky!

5. Encapsulate your custom alias

jQuery is not the only framework that uses the $ dollar shorthand. Many jQuery plugins and code snippets uses the $ exclusively for defining onDomReady callbacks and CSS selector functions, but you might end up with cross-framework conflicts by doing so.

Instead you can use a custom alias, (which can still be $) like this:

jQuery(function($) {
   // your code using $ alias here
 });

The example above uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias. You can and should also encapsulate the $ when authoring plugins, like this:

(function($) {
  // plugin code here, use $ as much as you like
})(jQuery);

6. Define custom callbacks

When authoring jQuery plugins, it’s a good idea to let the developer assign custom callbacks as parameter functions, thus making it possible to customize the plugin even more. So instead of forcing callback effects inside the plugin, trigger event functions and set the effects free.

Here is an example where we pass on the onFade function to the plugin, written as a simple fadeIn plugin:

/*
This plugin fades an element and triggers the onFade when completed

EXAMPLE USAGE:
  $('.fademe').customFade({
    fadeSpeed: 50,
    onFade: function(elem) {
      console.log(elem+' has faded!')
    }
  });
*/

jQuery.fn.customFade($params) {
  var $defaults = {
    fadeSpeed: 1000,
    onFade: function(element){}
  };
  var $p = $.extend($defaults, $params);
  $(this).fadeIn($p.fadeSpeed,$p.onFade($(this)));
}

–

7. Be aware of browser differences

jQuery is very cross-browser friendly. But there are still glitches, especially with browsers like Safari who has a different onLoad trigger, and of course MSIE. Always test in several browsers once in a while and pay close attention to when and where the glitches occur.

8. Don’t overuse it and define your purpose

Make sure you are not using jQuery just because you can. Always analyze your needs and have a clear idea of what you want to achieve and why before even writing the first line. Sketch your code visually and discuss your ideas with fellow peers before coding. Don’t re-invent the wheel unless you are doing it to educate yourself, have a look around for high quality plugins (cough, DevKick, cough) for inspiration and to see what has alreay been done.

Happy coding!