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

After the design, Tim coded each site. The main corporate site, leavittpartners.com, is built using WordPress and features three Custom Post Types: the slideshow on the homepage, the homepage content and the Team page.

The main Team page is broken up into staff levels but each worker is entered into the system the same way. A checkbox is used to differentiate their level. Also, another checkbox is used to flag if the worker is part of one of the several different sub-teams in the Leavitt Partners corporation. The individual team page highlights the workers accomplishments and also calls in their author RSS feed from the blog as well as any news highlights.

The blog is a straight forward WordPress install that functions like a typical blog. The newsroom, powered by NewsCactus, is a custom theme built around the NewsCactus framework.

We are very pleased with the result and hope these three sites will help Leavitt Partners continue to grow.

Leavitt Partners Homepage

Leavitt Partners Team Page

Leavitt Partners Team Single Page

Leavitt Partners Newsroom

Leavitt Partners Blog

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!

Luke, Tuesday Total Textures

Tim, Magento Project Guidelines for Designers
Magento is a beast and we all know it, however, TutsPlus comes through again with a great walk through of the basic Magento views. I have been guilty of overlooking the seldom used views, but this guide will walk you through all of them to be sure your design elements are consistent throughout the site. The part I like most about the article though is the FREE PDF download that I highly recommend sending to a client as soon as you can to help educate them about the ins and outs of Magento.

Benjam, New to PHP 5.4: Traits
PHP 5.4 is right around the corner, and one of the new features added to this version are class traits.  I won’t go into too much detail, you can read the blog post for that, but it makes reusable OO code even more reusable by allowing multiple unrelated classes to pull in the same traits from a master trait object.  Like built-in mixins.

Keeping your site secure or safe from hackers is not always easy but is something you need to be aware of. One thing I encourage you to do just in case your site is compromised is to always have a back up of your files and database. As a start, one plugin that can help with this is named BackWPup ( www.backwpup.com ). You can set this plugin to backup your files and database daily, weekly, monthly, or if you feel even hourly. But you can have it email it to you, save it to another server via FTP, or even save it to your DropBox account.

There are a few steps that you can take from the beginning when you first setup your WordPress site. The first thing to do is do not use the default table alias. WordPress by default will suggest that it use “wp_”. If you are only going to use the database for your site and not add any other tables I would suggest you take it off all together, but to make it even more secure use a different alias.

If you already have a site up and running and just want to take what you have now and make it secure here are the list of plugins and what they do:

• Change the login URL
  By default WordPress uses your URL / wp-login. To make it more secure  you can change the URL to be used to login. Sometimes people want /manger, /login, or /admin. Whatever it is that you choose you can use one of these plugins to change it from the default
  - Ozh’ Simpler Login URL – Link
  - Peter’s Login Redirect – Link
  - Custom Login and Admin URL’s – Link
• Limit Login Attempts
  By default WordPress does not limit that amount of tries to log into the Admin. It will instead inform the user instantly that it is not correct and allow them to try again. So using one or even both of these plugins will help you limit this and track what is going on
  - Limit Login Attempts – Link
  - Login LockDown – Link
• Find Out What Security Holes Your Site Is Susceptible To
  Run tests on your site to see what security holes may appear in your site. It is a full time job to stay on top of what the latest security risks are out there. So to help know what your problems are run one, or both plugins to evaluate your sites holes and close them up as you can
  - Ultimate Security Checker – Link
  - Secure WordPress – Link

These are just a few ways you can secure your WordPress site just using plugins. There are other ways that I may expound on at a later time but it requires editing code, editing configuration settings on the server, and even updating the .htaccess on the server.

Bonus Thought:
Another thing that I would encourage all to do that does not make your site a little more secure is in your robots.txt file that you have available to the search engines is to have them ignore your wp-content directory. There is no reason they need to go through these files. To do that you can add the following to your robots.txt file:
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Disallow: /wp-login.php
Disallow: /*wp-login.php*
Allow: /wp-content/uploads

What plugins are you using to secure your WordPress site?

Here’s what happened. Every Saturday morning for a month the site shut down. When we called the hosting company, we were put on hold to talk with someone, like that credit card commercial where the man says “This is Peggy.” We were told there was an out of control script running. After multiple weekends we finally got them to tell us what the script was. It was the index.php file which is their homepage. So apparently the hosting company promised unlimited hosting, but had a cap on CPU usage and when people came in droves to the site on the weekend to get information on their product, it shut the site down. We’ve seen this over and over with only slight variations to the story.

What I think is interesting here is to look at the economics. In order to host a bare bones cheap price, the formula is always the same: huge mass marketing, customers are one of thousands or millions, outsource the call center out, and limit access to control the hosting. Though these methods are great for lowering the cost of hosting, they make it nearly impossible for your developers to do much if the site comes down.

What I think people seem to be missing is another calculation, what is the cost of your site coming down? As I mentioned earlier, we saw this again recently but with another company. It was exactly the same kind of thing, the marketing firm said use our cheap hosting, client does, site goes down during their peak traffic of nearly 4,000 visits to the site. My guess is, in this client’s case and the other one I mentioned, literally thousands to tens of thousands of dollars may have been lost in sales in order to save a few hundred dollars a year in hosting.

My point? This is business 101: Don’t step over a dollar to save a penny. Hosting often falls into this category and people think they can go cheap on it. We disagree. If you own a premium website and you are deciding on hosting, ask yourself, if it shuts down how much do I lose an hour? If that number is high or even more than a few hundred dollars an hour, here is what you should do:

1. Find a hosting company that your developers can work with, including support from people who’s true native tongue is American English, or at least the language you speak.
2. Make sure the developers (if they are smart) can fully access the server so that when it is down they can do something about it. If they are not smart, your problems may be greater than just hosting.
3. Monitor the server to make sure it stays up and have the monitoring service text them if it is down, so they can jump in to fix it.
4. Pay your developers or System Administrators to keep the server up to date with patches and other scripts to help prevent malicious attacks on the server.

Unfortunately all of these things do require a small premium, but for most of our clients, the value far exceeds their cost and buys peace of mind that their internet presence is better protected and monitored. If you are really short on cash I think a better idea rather than going cheap on your hosting might be to cut your scope down. If you are interested in our hosting and/or other services let us know. We’d be happy to get you a free quote or consult with you what you should be doing.

The site is built using a custom WordPress theme with 3 Custom Post Types. The client can easily update the About, Plans & Pricing and Home page. The Custom Post Types allow the client to update their FAQs easily, manage their Testimonials and Expertise sections.

A visitor can easily get their Trademark in the works on the Start Application page that collects the information needed to get quick access to a Trademark.

Luke
Rodrigo y Gabriela – 11:11
It is pretty fast guitar flamenco type stuff and I really enjoying designing / coding to it. I’m a fan of no lyrics when working and these guys are perfect for that.

Chad
Adele – 21
I know it is popular at the moment on the radio stations but I have been listening to it because it is a little different then the normal for me.

Chronic Future – Lines in My Face
This is the only album of thiers I like. It always reminds me of the time when I was paintballing more frequently.

DMX – The Best of DMX
Old school rapping at its best. I like his style but not something you can play in the work place without headphone

Tim
Mumford & Sons -  Sigh No More
I love their style. The lyrics and banjo really help me get in a good groove.

Coldplay – Mylo Xyloto
I think Coldplay keeps getting better and better. This album is great and the catchy beats help me get through monotonous div tags.

What are you listening to?