Don’t Abuse $(this)
Without knowing about the various DOM properties and functions, it can be easy to abuse the jQuery object needlessly. For instance:

$('#someAnchor').click(function() {
    alert( $(this).attr('id') );
});

If our only need of the jQuery object is to access the anchor tag’s id attribute, this is wasteful. Better to stick with “raw” JavaScript.

$('#someAnchor').click(function() {
    alert( this.id );
});

Please note that there are three attributes that should always be accessed, via jQuery: “src,” “href,” and “style.” These attributes require the use of getAttribute in older versions of IE.

// jQuery Source
var rspecialurl = /href|src|style/;
// ...
var special = rspecialurl.test( name );
// ...
var attr = !jQuery.support.hrefNormalized && notxml && special ?
    // Some attributes require a special call on IE
    elem.getAttribute( name, 2 ) :
    elem.getAttribute( name );

Multiple jQuery Objects
Even worse is the process of repeatedly querying the DOM and creating multiple jQuery objects.

$('#elem').hide();
$('#elem').html('bla');
$('#elem').otherStuff();

Hopefully, you’re already aware of how inefficient this code is. If not, that’s okay; we’re all learning. The answer is to either implement chaining, or to “cache” the location of #elem.

// This works better
$('#elem')
  .hide()
  .html('bla')
  .otherStuff();  

// Or this, if you prefer for some reason.
var elem = $('#elem');
elem.hide();
elem.html('bla');
elem.otherStuff();

jQuery’s Shorthand Ready Method
Listening for when the document is ready to be manipulated is laughably simple with jQuery.

$(document).ready(function() {
    // let's get up in heeya
});

Though, it’s very possible that you might have come across a different, more confusing wrapping function.

$(function() {
    // let's get up in heeya
});

Though the latter is somewhat less readable, the two snippets above are identical. Don’t believe me? Just check the jQuery source.

// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

rootjQuery is simply a reference to the root jQuery(document). When you pass a selector to the jQuery function, it’ll determine what type of selector you passed: string, tag, id, function, etc. If a function was passed, jQuery will then call its ready() method, and pass your anonymous function as the selector.

Keep your Code Safe
If developing code for distribution, it’s always important to compensate for any possible name clashing. What would happen if some script, imported after yours, also had a $ function? Bad juju!

The answer is to either call jQuery’s noConflict(), or to store your code within a self-invoking anonymous function, and then pass jQuery to it.

Method 1: NoConflict

var j = jQuery.noConflict();
// Now, instead of $, we use j.
j('#someDiv').hide();  

// The line below will reference some other library's $ function.
$('someDiv').style.display = 'none';

Be careful with this method, and try not to use it when distributing your code. It would really confuse the user of your script! :)

Method 2: Passing jQuery

(function($) {
    // Within this function, $ will always refer to jQuery
})(jQuery);

The final parens at the bottom call the function automatically — function(){}(). However, when we call the function, we also pass jQuery, which is then represented by $.

Method 3: Passing $ via the Ready Method

jQuery(document).ready(function($) {
 // $ refers to jQuery
});  

// $ is either undefined, or refers to some other library's function.

Be Smart

Remember — jQuery is just JavaScript. Don’t assume that it has the capacity to compensate for your bad coding. :)

This means that, just as we must optimize things such as JavaScript for statements, the same is true for jQuery’s each() method. And why wouldn’t we? It’s just a helper method, which then creates a for statement behind the scenes.

// jQuery's each method source
    each: function( object, callback, args ) {
        var name, i = 0,
            length = object.length,
            isObj = length === undefined || jQuery.isFunction(object);  

        if ( args ) {
            if ( isObj ) {
                for ( name in object ) {
                    if ( callback.apply( object[ name ], args ) === false ) {
                        break;
                    }
                }
            } else {
                for ( ; i < length; ) {
                    if ( callback.apply( object[ i++ ], args ) === false ) {
                        break;
                    }
                }
            }  

        // A special, fast, case for the most common use of each
        } else {
            if ( isObj ) {
                for ( name in object ) {
                    if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
                        break;
                    }
                }
            } else {
                for ( var value = object[0];
                    i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {}
            }
        }  

        return object;
    }

Awful

someDivs.each(function() {
    $('#anotherDiv')[0].innerHTML += $(this).text();
});

The above:

1. Searches for anotherDiv for each iteration
2. Grabs the innerHTML property twice
3. Creates a new jQuery object, all to access the text of the element.

Better

var someDivs = $('#container').find('.someDivs'),
      contents = [];  

someDivs.each(function() {
    contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

This way, within the each (for) method, the only task we’re performing is adding a new key to an array…as opposed to querying the DOM, grabbing the innerHTML property of the element twice, etc.

This next tip is more JavaScript-based in general, rather than jQuery specific… The point is to remember that jQuery doesn’t compensate for poor coding.

Document Fragments

While we’re at it, another option for these sorts of situations is to use document fragments.

var someUls = $('#container').find('.someUls'),
    frag = document.createDocumentFragment(),
    li;  

someUls.each(function() {
    li = document.createElement('li');
    li.appendChild( document.createTextNode(this.innerHTML) );
    frag.appendChild(li);
});  

$('#anotherUl')[0].appendChild( frag );

The key here is that there are multiple ways to accomplish simple tasks like this, and each have their own performance benefits from browser to browser. The more you stick with jQuery and learn JavaScript, you also might find that you refer to JavaScript’s native properties and methods more often. And, if so, that’s fantastic!

jQuery provides an amazing level of abstraction that you should take advantage of, but this doesn’t mean that you’re forced into using its methods. For example, in the fragment example above, we use jQuery’s each method. If you prefer to use a for or while statement instead, that’s okay too!

With all that said, keep in mind that the jQuery team have heavily optimized this library. The debates about jQuery’s each() vs. the native for statement are silly and trivial. If you are using jQuery in your project, save time and use their helper methods. That’s what they’re there for! :)

Methods Return the jQuery Object
It’s important to remember that most methods will return the jQuery object. This is extremely helpful, and allows for the chaining functionality that we use so often.

$someDiv
.attr('class', 'someClass')
.hide()
.html('new stuff');

Knowing that the jQuery object is always returned, we can use this to remove superfluous code at times. For example, consider the following code:

var someDiv = $('#someDiv');
someDiv.hide();

The reason why we “cache” the location of the someDiv element is to limit the number of times that we have to traverse the DOM for this element to once. The code above is perfectly fine; however, you could just as easily combine the two lines into one, while achieving the same outcome.

var someDiv = $('#someDiv').hide();

This way, we still hide the someDiv element, but the method also, as we learned, returns the jQuery object — which is then referenced via the someDiv variable.

The Find Selector
As long as your selectors aren’t ridiculously poor, jQuery does a fantastic job of optimizing them as best as possible, and you generally don’t need to worry too much about them. However, with that said, there are a handful of improvements you can make that will slightly improve your script’s performance. One such solution is to use the find() method, when possible.

// Fine in modern browsers, though Sizzle does begin "running"
$('#someDiv p.someClass').hide();

// Better for all browsers, and Sizzle never inits.
$('#someDiv').find('p.someClass').hide();

The latest modern browsers have support for QuerySelectorAll, which allows you to pass CSS-like selectors, without the need for jQuery. jQuery itself checks for this function as well. However, older browsers, namely IE6/IE7, understandably don’t provide support. What this means is that these more complicated selectors trigger jQuery’s full Sizzle engine, which, though brilliant, does come along with a bit more overhead. Sizzle is a brilliant mass of code that I may never understand. However, in a sentence, it first takes your selector and turns it into an “array” composed of each component of your selector.

// Rough idea of how it works
['#someDiv, 'p'];

It then, from right to left, begins deciphering each item with regular expressions. What this also means is that the right-most part of your selector should be as specific as possible – for instance, an id or tag name.

Bottom line, when possible:

• Keep your selectors simple
• Utilize the find() method. This way, rather than using Sizzle, we can continue using the browser’s native functions.
• When using Sizzle, optimize the right-most part of your selector as much as possible.

Context instead?
It’s also possible to add a context to your selectors, such as:

$('.someElements', '#someContainer').hide();

This code directs jQuery to wrap a collection of all the elements with a class of someElements – that are children of someContainer – within jQuery. Using a context is a helpful way to limit DOM traversal, though, behind the scenes, jQuery is using the find method instead.

$('#someContainer')
.find('.someElements')
.hide();

I hope this first installment has been useful to someone out there in the interweb, and if not, maybe my next few will be!

Luke, Future of Web Typography
For years typography on the web has been very limited when compared to what can be in the print world. Over the last few years though we have been given more and more tools to help us accomplish good typography on the web. As time goes on these tools will get better and will become more widely supported. There was an article on Smashing Magazine this week that talked about a lot of these tools that are available to web designers. I really enjoyed reading up, refreshing my memory of code I haven’t used in a while, and also learning some new ways of styling type. Read it over, the text on your website will be very happy you did.

Benjam, 20 Helpful jQuery Methods You Should Be Using
While developing a website, I use a lot of tools, both in the creation of the website files (my text editor of choice, file manager, etc.), and within the website itself (CakePHP, jQuery, CSS, etc.), and I’m always interested in finding features of those tools that I might not be very familiar with.  While I have a deep familiarity with the features I use regularly, and a passing familiarity with most of the features of these tools, it’s always good to get a refresher on what I could be using more.  Here is a post highlighting 20 jQuery methods/features (actually 33 methods in 20 groups) that should be in everybody’s familiarity tool box.

Mac, April Fools – PHP Style
This discusses a topic that we often only think about once or twice a year, but it is still worthy of our attention and deserves some practice to improve our skills. Also, while you are there, subscribe to the PHP Developers feed. The main guy, Chris Cornutt, does an excellent job of filtering the best PHP articles.

Mike, Get your form on with Uniform
We’ve all been there. You finish an amazing design using some sweet custom form elements that perfectly match the theme of your design. Then after a few frustrating attempts, you realize that some form elements just can’t be styled. Or if they can, not consistently. So you throw on a border, maybe a background image, and hope for the best as dreams of your custom UI vanish into nothingness. But fear not! Using the clever jQuery script Uniform and some CSS sprites, your form designs can once more be glorious! Works beautifully in all major browsers (degrades gracefully in IE6).

Benjam, The Problem with Passwords
Being in the Web Development industry for a while now, and having had a few third-party scripts that were on my site hacked, I have become more and more interested in web security.  Passwords are on the front lines to that.  Being a user of Web technologies, I’m also interested in usability and choice, and when it comes to showing or hiding passwords (what? you can do that?) I’m in the boat of give the user the choice.  This article nicely explains a few examples that offer people the choice to show or hide their passwords, both of which are very useful.

Mark, Microsoft to Double Down on HTML5 in Internet Explorer 9
Doubling down seems like the wrong approach to me. If I were the CEO at Microsoft I would instead of thinking of trying to put their foot down harder, they should instead learn to bend in the winds of the market and work on compliance with the other browsers. Though I hate to say it even forced upgrades like Firefox does would be good, to keep people current and reduce the amount of cross browsers compatibility problems Microsoft gives developers. I don’t think Microsoft realizes that by making developers lives bad by trying to be different they are actually building up a mass market of developers who hate them because it is so difficult to make cross compatibility easy and affordable.