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! :)

Chad, 22 Tools for Testing Your Websites Usability

Luke, Analytiks iPhone App
A little while ago I stumbled upon this little app for my iPhone. For those of us that don’t sign in to our Google Analytics often but know we should this app will be very valuable. Analytiks shows me just the important information I’d like to know about my websites on my phone. I can check it quick and get back to whatever else is going on that day. The interface is quite nice. I would ditch the rusted sign look myself but other than that it is fantastic. It is 99 cents in the app store.

Benjam, impress.js
It’s not much in the way of content, but the way that content is displayed. It’s simple… yet eye catching and very intriguing. Makes me very excited about where the web is heading.

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!

Mark, Art and The Web Texture
I thought this was a nice article and analysis of Textures by Nick Petite. Though to many people texture may seem like a subtle thing we feel it is an important part of a website for creating the right mood. The thing that Nick points out is how much more dynamic a website can seem once a more interesting texture is added. In web design, I personally really like the layered texture strategies because it helps to neutralize an otherwise potentially overbearing texture, Nick covers the gambit of options and provides some examples, check it out.

Brian, JavaScript Powers Linux In A Browser
I get asked all the time ‘Why Linux?’ and ‘How lightweight it is?’. My usual reply references how Ive seen a Linux web server run off a 2GB thumb drive, but this article trumps even that. With all the overhead the operating systems of today require, people usually assume a servers absolute minimum is even higher. Running Linux in a client-side script like this just blows my mind!

CSS3 PIE makes some CSS3 features work in IE6 – 9. It supports border-radius, box-shadow, and linear-gradient. It works great and is super easy to set up. Unless you use it in WordPress. After some Google searching, a fair amount of testing, and a lot of grumbling I got it working in a WordPress site. It is really simple. I hope that this will save others from some headache.

1. Put the PIE.htc file in the WP Root directory and then reference it in your css as – behavior: url(“PIE.htc”);
2. All the elements that use CSS3 features will need either position: relative or position: block on them

Although not technically a piece of the HTML5 spec, it is commonly used in conjunction with HTML5 and easy to use.

The geolocation API exposes three methods on the navigator object in javascript, two for getting location information about your user getCurrentPosition and watchPosition, and the other is a paired method for watchPosition, it is clearWatch.

The first, getCurrentPosition, returns a one time shot of where the user is. This is good for pinning a map or giving static directions. The second, watchPosition, continues polling at regular intervals to keep tabs on where the user is. This is perfect for giving dynamic directions, or tracking a movement. The two calls are mirrors of one another in that they both accept three arguments (success handler, error handler, geolocation options). The two calls are also both asynchronous, with a caveat that if this is a user’s first visit to your site they may be prompted to allow their position to be shared, this could cause the browser to stop loading.

The odd ball function here is clearWatch, which simply clears any watches you have assigned, in other words it stops tracking your user.

Now that we know the basics let’s dig in!

if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(function (position){
         var lat = position.coords.latitude;
         var lon = position.coords.longitude;

         alert('Lat: '+ lat +' \nLon: '+ lon);
     }
}

The example above is about as simple as it gets, a simple one shot to get the users coordinates and then output them to the browser.

That is all there is to Geolocation in the browser, pair it up with Google Maps API and you have an award winning geolocation application ready to please the world.

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.

Coding to me is like creating art, and there’s a great quote that backs me up on this:

Programming is an art form that fights back. —Unknown

Because code is like art, I get very attached to my code, as well as my style of coding. My code is like my baby, my something from nothing that wouldn’t be there if it weren’t for me. It’s just a bunch of characters on the screen that, from somewhere in the blue smoke, creates a function, or a game, or a website. I have received criticism on my code (as everyone has), as well as given criticism on other’s code (as everyone has), and those times when I’ve received criticism on my code, depending on how it was delivered, or what was said, it was almost like a personal attack on me. And I’ve noticed a few other coders react the same way to criticisms on their code. It’s like the person who called your code ugly or inelegant was saying that your child was ugly (and those of you who have kids know… that’s a huge no-no, punishable by any means available).

It may be because I think that my coding style is the best, it’s what I’m used to, and it’s the format I use because it’s the easiest for me to get at the information I need as fast as possible. I know this because I’ve tried other styles (sometimes flipping back and forth in the same day), and looking at someone else’s code that uses a different style from me, is often times hard to peruse easily. It’s what I like, and sometimes I have to hold myself back from reformatting code I come across into my own style.

So maybe we should stop thinking of code and coding styles as being “right” or “wrong”, and think of them more like the tool that they are, a means to an end. And the way you react to someone else’s means should be a little more like a suggestion for a different method of painting. Not a matter of fact, but just another tool for the tool box.

To continue the art analogy, it’s like everybody is given all the art supplies in the world, and told to make/paint/draw/create a box. Everyone will come up with a different way of doing it, some will be huge and bright red; others will be small and drawn in pencil; others still might be made of clay or brick. No matter what, it’s the way you chose to do it, and it’s no better or worse than the person’s next to you. You might think so because yours was faster, fancier, more elegant, or more “boxy”; but they might think the opposite. In the end, you still have a box, and so do they.

Chad, Creating an Admin Section with CakePHP
I have come across James blog just recently (about 2 months). The guys blog is great. He does so much with CakePHP that it is great to see what he is doing and what he can do. But the reason I suggest this specific post is because it seems to be the first stumbling block that every developer comes across while using CakePHP. This article specifically will explain how to get an Admin section set up and working. I consider this one of the must needed to know things to develop correctly in CakePHP.

Benjam, Don’t let Document Ready slow you down
Everybody wants to have a faster loading website, and I am certainly guilty of putting every DOM related jQuery snippet into the $(document).ready( ) function.  This post showed me that this wasn’t absolutely necessary and gives good examples of when and how to break out of the document ready mentality.

Mac, The Dark Side of CakePHP’s Automagic
I’m not sure I like the title of this article so much as I like the article itself, but it does point out some useful information about the “automagic” things that CakePHP does for you. Some of the things they discuss are definitely features that were designed very wisely, even though the article seems to disagree with me on that. There are definitely some automagic things in Cake that they mention that drive me crazy too though, and I don’t really see the necessity for the seemingly poor decision made by Cake’s developers. My biggest peeve they mention are the behavior it has (or had, this may have been fixed/changed now) for many-to-many relationships (a.k.a. HABTM). It is really a pain in the neck when your relationship table has other data in it, like the date/time when the relationship was added, or by whom, or a quantity, etc.