Continuing with jQuery

Tips, tricks, and useful plugins for the JavaScript ninja

Created by Brian Duffey

Who am I?

Brian Duffey
4 years consultant at michaels, ross, and cole
15 years of JavaScript experience
4+ years jQuery developer
What have I used jQuery for?

As I mentioned, my name is Brian Duffey and I am a consultant at mrc located in Chicago
I have many years of JavaScript-only experience, as well as over four years with the amazing jQuery library
Initially, I self-taught myself JavaScript and began implementing JavaScript plugins on web pages I created
Later, as I continued learning, I began adapting existing code into custom plugins
I never totally got into JavaScript development, however, until I began working with jQuery, and saw how powerful it was and how simple it made existing JavaScript
I later used this library to create custom projects and now use it on a daily-basis for my web development needs
Some of the projects I have created include customer portals, shopping carts, and company intranets

What are we here for?

Introduction

Junior, Senior, Ninja

Tips

Variables
Comparisons
Functions
DOM
Errors
Customize

Tricks

Common Tasks
Arrays

Plugins

Quick show of hands, how many of you have seen my Intro to jQuery presentation, either yesterday or previously?
Awesome, well thank you for coming back for more -OR- Great, lot of new faces in the crowd
Well, as I mentioned yesterday, if that presentation is jQuery 101, this isn't really a jQuery 102, but rather a 201 where we discuss some more advanced topics like performance, plugins, and other more advanced topics
To that point, this is a session designed for people who have used jQuery or JavaScript a bit, from newcomers to seasoned vets, as we are not here to learn about jQuery, but rather some useful tips and tricks
Additionally, we will cover some best practices, some performance considerations, as well as a handful of what I consider to be the most useful plugins
The class has been designed not as one cohesive lesson, but rather as individual snippets you can begin using immediately in your code, so there are some assumptions I will make regarding what each of your individual background knowledge and experiences are
If there is something I bring up or show that you have no experience with, please feel free to let me know
What we will cover today starts with some tips and little known things about jQuery/JavaScript, followed by some useful tricks regarding common tasks, and will end with a demonstration of how to implement plugins as well as what I think are some plugins you may find useful

What are we here for?

Introduction

Junior, Senior, Ninja

Tips

Variables
Comparisons
Functions
DOM
Errors
Customize

Tricks

Common Tasks
Arrays

Plugins

Junior, Senior, & Ninja Programmers

- 10 minutes	- 1 day	- 10-15 minutes

- 2 days	- 1 day	- 10 minutes

I recently read a story on Quora from Glyn Williams that answered a question about the difference between Junior, Senior, and Ninja programmers
I'd like to share it with you as I think the moral is good regardless of the coding you do
Three different programmers, a novice programmer, a senior programmer, and a ninja programmer, were asked to cross a field and go to the house at the other side.
The novice programmer looks at the short distance and says, "That's not far!. That will take me ten minutes"
The senior programmer looks at the field, thinks for a while and says, "I should be able to get there in a day". The novice looks surprised.
The ninja programmer looks at the field and says. "Looks like ten minutes, but I think fifteen should be enough". The senior programmer sneers.
The novice programmer sets off, but within a few moments, explosive land mines go off, blasting huge holes. Taking him off course, and requiring him to double back and attempt the crossing many times. It takes him two days to reach the goal. Although he is shaking and injured when he arrives.
The senior programmer sets off on all fours. He carefully taps the ground searching for mines, proceeding only when it is safe. Slowly and meticulously he crosses the field over the course of the day. Only setting-off a couple of mines.
The ninja programmer sets off, and walks directly across the field, purposefully and directly. He arrives at the other side in just ten minutes.
"How did you do it?", the others ask. "How come the mines didn't get you?" "Easy" he replies. "I didn't plant any mines in the first place".
Ultimately, we should all get to the ninja level where everything you do in your code is for a specific purpose
However, when beginning, we need to be shown the right path to walk to avoid planting or triggering land mines
This is part of what we are discussing here today, in the sense that these are some of the best practices or things you might not know that will help you "get to the other side of the field" unharmed
As we discuss, we will take a look at things that will be useful for the novice programmer who is just starting, the senior programmer who thinks they have seen it all, and even the ninja programmer that has a few tricks up their sleeve.

What are we here for?

Introduction

Junior, Senior, Ninja

Tips

Variables
Comparisons
Functions
DOM
Errors
Customize

Tricks

JavaScript
jQuery

Plugins

Tips

Variables

            
x = 3;

            
function myFunc() {
  x = 3;
  y = 4;
  // More code below here that uses x and y
}

Tips

Variables - Scope

Def.:
the set of variables,
objects, and functions
you have access to

                  
var x = 3; // Global
function myFunc(z) {
  var y = 4; // Function level
}

function otherFunc() {
  var z = 5; // Local
  myFunc(z);
}

                  
function myFunc() {
  var x = 3;
}

                  
// All 3 are global
var x = 3;
function myFunc() {
  window.x = 3;
  x = 3;
}

                  
function myFunc() {
  var x = 3,
      y = 4,
      z = 5;
}

Scope is a very important concept to learn when it comes to variable declaration in JavaScript. It refers to where the variable is stored in the environment, whether that is locally, globally, or somewhere in between. W3Schools defines scope as shown
Not only does it matter for ensuring you are storing and retrieving the proper values, however it also has performance considerations
Something like x=3, which we just saw, is actually creating or overwriting the global variable x with the value 3
This might not be a big deal, however if you use generic variable names a lot, such as x, you can end up with incorrect values in your code
Instead, you can make a variable local, so it doesn't affect the global arena, by using the var keyword
When you don't indicate the var keyword, or when you directly attach the variable to the window like in this code sample, the variable is in the global scope
This can be useful, such as when needing to have some variable accessible everywhere in your code, however it is also very easy to confuse various values or even accidentally overwrite something you didn't mean to
Something like this is a better example of how to properly declare multiple local variables
Additionally, performance will increase when you use locally scoped variables vs. global ones, as JavaScript first looks in the current scope, which is local, before gradually working its way up to the top level (global)
The more levels you have, the further the browser will need to go to find your variable, the longer your code will take to complete
Global variables have their place, however they should be used sparingly and purposefully, as similar to our minefield analogy, they usually don't cause immediate issues, however they are like landmines, waiting to trip you up in the future and make debugging much more difficult, or slowing down performance

Tips

Variables - Complex

                  
var counter = 1, // number
    aName = 'John', // string
    isAlive = true; // boolean

                  
var anArray = [1, 'John', true];
var anArray = new Array();

                  
var Person = {
  name:'',
  age:0,
  isAlive:true,
  createPerson:function(nm,ag,ia) {
    this.name = nm;
    this.age = ag;
    this.isAlive = ia;
    return this;
  }
};

                  
var steve = new Person.createPerson('Steve', 33, true);

                  
var names = ['John', 'Fred', 'Bill'];

                  
var steve = new Person.createPerson('Steve', 33, true),
    susan = new Person.createPerson('Susan', 21, true),
    betty = new Person.createPerson('Betty', 96, false),
    people = [steve, susan, betty];

Most commonly used variable types in JavaScript are strings, numbers, and booleans, which you might be familiar with and have used yourself
For instance, we have a counter, a name, or an indicator on screen there
However, there are more complex types available, and the loose typing in JavaScript means there are also some other types you can create that could be very useful
Loose typing means that variable type is not strictly enforced like in other programming languages such as Java
For instance, arrays are useful in any language to store more than one value, however you normally would have to create an array of only one type of variable, be it strings, numbers, etc. In JavaScript, you can easily store multiple types of values in one array as well as easily add or remove elements from your array
In this case, we are storing a string, a number, and a boolean in my array without issue
Arrays can be created one of two ways in JavaScript, either with the Array constructor as in new Array() or with literal notation, as in our second example. Based upon how the JavaScript language works, the literal notation is always better performing than constructors
Now, arrays are most useful when storing list type data sets, such as a list of names, like in this example
For storing more complex data types, you might want to consider an object
Objects can store any information you want, including functions as well as values
Similar to arrays, you can create an object via constructor or with literal notation. Again, choose literal notation over constructors when possible
In this example, we are creating a person object, to store name, age, and whether the person is alive
Similar to other languages, we could also set up an instantiator, to create the object
And of course, you can combine these two types to have a list of people, as we have done here

Tips

Variables - Objects for Scope

                  
var chimp = {
      name:'Bobo',
      type:'chimpanzee'
    },
    giraffe = {
      name:'Jeffrey',
      type:'giraffe'
    },
    otter = {
      name:'Ollie',
      type:'otter'
    },
    zoo = [chimp, giraffe, otter];

                  
var Zoo = {
      animals:[],
      addAnimal:function(nm, tp) {
        this.animals.push(new Animal.createAnimal(nm, tp));
      }
    },
    Animal = {
      name:'',
      type:'',
      createAnimal:function(nm, tp) {
        this.name = nm;
        this.type = tp;
        return this;
      }
    };
Zoo.addAnimal('Bobo', 'chimpanzee');
Zoo.addAnimal('Jeffrey', 'giraffe');
Zoo.addAnimal('Ollie', 'otter');

Now that we've talked about both scope as well as complex variables, a common practice would be to combine the two in order to make code more readable, prevent scope issues, and avoid polluting the global scope
For instance, instead of creating many variables and functions to create a zoo that holds animals, like on the left, we can create an object, assign it the necessary variables and functions, which will then allow us to access this in the future without polluting the global namespace
In this example, this is what has been done. We have created a scope object for a zoo, which in turn calls an object for an animal
Despite having many values and functions associated with it, this will only create one value in the global namespace as everything else is local to the zoo object
Even if the code is the same length or longer, this is also potentially easier to read and understand, which should not be overlooked. Instead of having variables all over the place, we have one central object to maintain for everything zoo related

Tips

Variables - String Concatenation

jsPerf.com

            
str = str + i;

str += i;

str = str.concat(i);

str = [str, i].join('');

If performance is important to you, consider using a site like jsPerf.com
This site allows you to easily do side-by-side comparisons on two or more code blocks, and run a bunch of tests to show you the best performing code block
In this example, we are looking at the many ways you can do string concatenation
All of the listed ways on this slide will create the same string, however if we look at the results, we can see the differences in performance
Additionally, we can see how increasing the number of concatenations affects our results
In this specific case of concatenating strings, the third option is clearly the best as it performs better than everything else. The fourth option is the worst as it performs the slowest
Not that you would necessarily ever need to concatenate hundreds of characters together, however if you always choose the best performing function in JavaScript, your code as a whole will run better as well

Tips

Comparisons

            
// Booleans
x = true;  // true
y = !x; // false
z = 1 < 0; // false

// Comparisons
if (x) {
  // success
} else {
  // failure
}

result = (x) ? success : failure; // results in success

Tips

Comparisons - Type Coercion

            
var x = 1, // number
    y = '1'; // string
x == y; // true

            
x === y; // false
x !== y; // true

We previously talked about how JavaScript is loosely typed when we talked about complex variables. This not only allows for flexibility in using variables, but also in comparisons
When you do something like comparing x and y, first JavaScript attempts to convert them to the same type for comparing using something called type coercion
This is how you can compare something like 1 and '1' in JavaScript without an error being thrown
However, this type of loose comparison, is slower than a strict one
As you can imagine, if JavaScript has to try comparing against different types using conversions, this will perform much slower than doing a simple comparison against the actual values within each variable
In order to force this strict comparison, you can use three equal signs instead of two, like I show here
For not equal to, use an exclamation point and two equal signs instead of one

Tips

Comparisons - Falsy Values

0
''
null
undefined

                  
var age = prompt('What is your age?');
if (age) {
  // do something
} else {
  // print error
}

                  
var donation = prompt('How much would you like to donate?');
if (donation) {
  // do something
} else {
  // print error
}

Something else to be aware of when writing code, is that JavaScript also considers non-boolean values to be true or false, using the loose typing we talked about
This can be a great benefit to you, as long as you are aware of this ahead of time
All values are considered truthy, other than the 4 listed below
0, an empty string, null, and undefined are all considered to be falsy values in JavaScript
Therefore, you can choose to use this behavior in your code as it could make some things easier, however it can also cause errors if you are not careful
Here we have two code blocks, one that is using this behavior correctly and one that is incorrect, or at least will cause issues in the context of the code
Specifically, in the first one, if the age is not given, or if it is given as 0, we will print the error message, otherwise we will print the age
In the second example, while not filling out the value will cause the error, 0 is also a perfectly valid response that will trigger the error in this case
Be careful when using comparisons to avoid accidentally triggering something true or false that you did not mean

Tips

Comparisons - Conditions

                  
if (someCondition) {
  // do something
} else {
  // do something else
}

x = (anotherCondition) ? someResult : someOtherResult;

                  
switch(someValue) {
  case 1:
    // do something
  default:
    // do something else
}

                  
var state = prompt('What state are you from?');
switch(state) {
  case 'California':
  case 'Florida':
  case 'Hawaii':
    alert('Nice weather there!');
    break;
  case 'Alaska':
    alert('Sounds cold!');
    break;
  default:
    alert('Never heard of it!');
}

Switches - 3-10 cases
If/Else - 1, 2, 10+

Most people who have programmed are familiar with if/else statements to control the programs flow using some logic
We have seen this a little already, when we saw the if/else statements of the last slide, or the shorthand of a previous slide
In case you don't remember, here is the if/else and shorthand syntax
One thing that might not be as familiar to you is switch statements
This also controls program flow, however it behaves a little bit differently than if/else statements
First, it exhibits fall-through, which means that as soon as one condition matches, all conditions match until you explicitly tell it to stop
Additionally, you can have a default match for when none of the other conditions match
In our example here, we are simply printing messages based upon the user's state. We are using the fall through to group several states together, the break command to avoid falling through further, and then the default case in case they live in a state we haven't programmed in
Both this and if/else statements can be used to the same effect, however performance-wise, switches are always best when you have between three and ten cases to check for, while if/else statements will perform better for you outside of that range

Tips

Comparisons - jQuery Objects

                  
var rightButton = jQuery('#rightButton');
jQuery('button').click(function() {
  if (jQuery(this) == rightButton) {
    // do something
  }
});

                  
var rightButton = jQuery('#rightButton');
jQuery('button').click(function() {
  if (jQuery(this).is(rightButton)) {
    // do something
  }
});

                  
jQuery('#myID') == jQuery('#myID'); // false

                  
jQuery('#myID').is('#myID'); // true

You may run into cases in your code where you need to compare elements against one another to see if they match or not
For instance, maybe you are trying to react to a click event on a button on your page and need to know if the button matches some criteria
You cannot do a simple comparison here as every time you select something, a new object is created
For instance, selecting one object with an id selector and then comparing them results in a false since they are two separate objects
Instead, there is the little known jQuery function called .is()
This function compares jQuery related properties together and returns true or false if they match
Back to our initial code, we can do something like this to check for jQuery object equality
Aside from using .is() like this, we can also use it to compare attributes of objects with selectors, like an id or class

Tips

Functions

JavaScript	jQuery
Math.random	jQuery.trim
isNaN	hide
parseInt	show
toFixed	toggle
indexOf	is
substring	click

Tips

Functions - Creating

                  
function yourAge() {
  var age = prompt('What is your age?');
  if (age) {
    alert('Your age is ' + age);
  } else {
    alert('Fine, don\'t tell me');
  }
}

                  
function func1() {
  // do some stuff
}
function func2() {
  // do some more stuff
}

// the rest of your code

                  
function getAge() {
  var age = prompt('What is your age?');
  return age;
}

function yourAge(age) {
  if (age) {
    alert('Your age is ' + age);
  } else {
    alert('Fine, don\'t tell me');
  }
}

                  
var func3 = function() {
  // do yet more stuff
}

Creating functions in JavaScript is pretty straight-forward and easy as long as you remember a couple of things
First, good general programming says to put all related code into its own function for reusability in the future
For instance, in the first function, we are asking for the user's age and printing a message based on the age
This is useful, however if we break that into two functions, one to get the number and one to print the message, we could theoretically use these parts in the future
Additionally, while you can create the functions anywhere in your code block, some browsers handle this differently than others so to avoid any issues or errors, you should declare all of your functions at the top of your code prior to calling them
This may seem like common sense, however since the majority of browsers won't throw an error when you declare the function after you call it, its something to be aware of
Finally, you can create the function one of two ways. The first way is the way I have been doing it thus far in these slides, called function declaration. The second way is called function expression and is similar to declaring a variable, as seen here
They will behave similarly in your code, so one is not necessarily better than another, however they are loaded into the browser differently as all declarations are loaded before all expressions are evaluated

Tips

Functions - Files

Create external files

Code minification

One important topic we will cover at the end of this presentation is how to use plugins in your code so you can save time, avoid errors, and gain some pretty cool functionality
Plugins are essentially just JavaScript code put into external files and then called from your web pages
You can either create your own plugins, or at least put your most commonly used functions into an external file as well
As I talked about in the Intro to jQuery presentation, putting JavaScript into external files does carry some performance benefits with it
One, is that browsers can cache external files on a webpage, so your file will only need to be loaded once as it will be retrieved from the cache in future making future runs much quicker, which will only increase as the size of the file increases
Additionally, external code can be put through an optimization process called minification, which makes JavaScript files a fraction of their original size
This process accomplishes this by removing all unnecessary whitespace and line breaks, as well as shortening variable names
The result is code that is virtually unreadable by humans, but is much smaller and loads much quicker in browsers
Functionality-wise there is no difference between inline and external JavaScript code, however for performance, you can see how it is beneficial

Tips

Functions - IIFE

Immediately Invoked Function Expression

                  
(function() {
  // immediately invoked code here
}());

                  
(function(j) {
  // my jQuery plugin code here
}(jQuery));

Most functions are declared in the code and then used one or many times as needed
However, there may be times when you need to declare a function and then immediately run it
Most commonly, this is how plugins are written in order to load the plugin logic onto the page and associate it with jQuery
There are some performance benefits to this, including better minification as well as reduced scope lookups as everything is local
This concept of a function declaration that is immediately run is an IIFE, which stands for an Immediately Invoked Function Expression
You can see the general format of this in the code block on the page. Notice how it is an anonymous function, meaning it has no name, wrapped in parentheses. These parentheses are used to let the browser know this is a function expression. If you think back to our discussion on function expressions vs. declarations, function expressions can be created and called immediately, whereas function declarations cannot be
Additionally, you can pass in any parameters that you need to at the end in the closing set of parentheses, such as the jQuery library
This is how most jQuery plugins are written, as can be seen in this code block. By doing this, it not only prevents polluting the global namespace, but also allows for using a custom reference to jQuery, or the letter j in this case

Tips

Functions - Logicals

AND - &&
OR - ||

                  
x = true;
y = false;
x && y; // false
x || y; // true

                  
if (item.weight < 301) {
  loadTruck(item);
}

(item.weight > 300) || loadTruck(item);

                  
if (person.age > 20) {
  person.serveBeer();
}

(person.age > 20) && person.serveBeer();

                  
function canVote(age) {
  age = age || 17;
  return (age > 17);
}

Prior to functions, we talked about the use of booleans in variables and comparisons. Based upon how comparisons work in JavaScript, you can also use this to your advantage to write shorter, more readable code
To do so, you can use logical ANDs and ORs. ANDs are written with two ampersands to signify both sides must be true to evaluate to true and ORs are written with pipes to signify one of the two sides must be true in order to evaluate to true. These can be seen here on the slide
The way the browser evaluates these is that in an AND, if the first expression is false, all processing stops. Likewise if the first expression is true in an OR
Therefore, you can use this to your advantage in calling functions where you are checking first if something is true or false
In the first example, we need to check if someone is over 21 before calling the serving function. Instead of writing an if/else, we can use logicals to confirm they are old enough prior to calling the function
In the second example, we are making sure a package is not too heavy to ride on the truck. Again, using logicals, we can confirm this and then run or not run the function all in one line of code
This same exact concept can be applied to variables in order to give them default values. Here we are asking for an age and if none is given, we assign a default value to age
These are all shorter code snippets and potentially more readable, however performance isn't really affected as no matter what, the first expression is always evaluated, regardless of if you use logicals, if/else, etc.

Tips

DOM

Document Object Model

Tips

DOM - Simplify

Limit elements

                      
      jQuery('*').length;

Keep selectors simple

                      
      jQuery('#someID')... // fast
      jQuery('body div.someClass input[value=""]')... // slow

Know how selectors are parsed

                      
jQuery('#someID p')... // slow
jQuery('#someID').find('p')... // fast
jQuery('p', '#someID')... // fast

Know performance of selectors

                      
jQuery('#someID')... // fastest
jQuery('p')... // fast
jQuery('.someClass')... // slow
jQuery(':visible')... // slowest

One of the best things you can do is limit the number of elements on your web page
You cannot always control this, however keep in mind that any time your browser is rendering the page, load time goes up the more elements you have
Additionally, whenever selecting elements, the more you have, the longer that will take you
If you want to get a quick count of elements on your page, you can run this code snippet which will print the full count of elements on the page
Speaking of selecting elements, the best performance will also always be from the simpler selectors
For instance, selecting an element based on ID will always be quicker than selecting based upon multiple factors
Additionally, since jQuery runs from last selector to first, something like this will load every p element on the page, and then run through each one to see if it is contained by the ID specified
In this case, we can use this knowledge to first select the ID and then look inside of it. We can do this by either using the jQuery find function, or by using a context
A context is a little known second parameter of jQuery object selectors. If you pass in this optional parameter, it filters the page. Both these code snippets are quicker than the first as they do the same thing, which is select the element by ID, and then look inside of it for p tags
Finally, ID selector is always best performing, followed by tag selector, followed by class, followed by pseudo selectors. Not that you can always select by ID, however it is important to know the performance of each of these to improve the performance of your jQuery scripts

Tips

DOM - Cache

Chaining

                  
// Without chaining
jQuery('div').css('color', 'red');
jQuery('div').css('backgroundColor', 'blue');

// With chaining
jQuery('div').css('color', 'red')
  .css('backgroundColor', 'blue');

                  
jQuery('input').each(function() {
  if (this.value === jQuery('p').text()) {
    // do something
  }
});

                  
var p = jQuery('p');
jQuery('input').each(function() {
  if (this.value === p.text()) {
    // do something
  }
});

                  
var myText = jQuery('p').text();
jQuery('input').each(function() {
  if (this.value === myText) {
    // do something
  }
});

Speaking of your jQuery scripts, selecting the same element over and over requires the page to go out and run the same selection process every single time
You might recall that this is one reason why chaining is a good idea, where you select an element or set of elements and then run more than one function on it
While that is a good idea and makes the code easier to read and better performing, there are times you cannot do that
Consider the following code, where we are running a loop over every text input on the page, to see if the value matches another elements text
Every time the loop is run, the page has to go out and select the paragraph tag, and then get the text for comparison
Instead, we can make this run much quicker by selecting the paragraph ahead of time and caching it for future use, like we are doing here
Of course, we could make this even faster by caching the text of the paragraph prior to the loop so we are just comparing to a variable, so keep caching in mind for both element selection as well as attributes of your elements

Tips

DOM - Propagation

                  
jQuery('button').click(function() {
  // do something
});

                  
jQuery('.menu').click(function(e) {
  // do something here
});
jQuery('.menuItem').click(function(e) {
  // do the same thing here
  e.stopPropagation();
});

                  
jQuery('.menu').click(function() {
  // do something here
});
jQuery('.menuItem').click(function() {
  // do the same thing here
});

                  
jQuery('.menu').click(function() {
  if (this.id === 'menuItem1') {
    // do something here
  } else {
    // do something else
  }
});

A common use of jQuery is to listen for events on the page and respond to these events in some way. This might be to run a function when something is clicked, when an element is hovered over, or any other event you need to utilize
This is pretty easy to do with jQuery as you can attach your event listener to the element's selector and then run code on that event's occurrence, like we are doing here with the click event on a button
The idea behind propagation is that all events will "bubble up" the DOM tree from the element directly affected all the way up to the HTML document. You can either use this to your advantage or prevent it, as long as you know what it means
Consider the following, where the menu is the parent of a menu item
We could either prevent propagation with the stop propagation function, in our first example, or we can change our code to only listen on the menu
If we do neither, and leave the code as it is in the first block, the event will be fired twice, as it will fire first on menu item click and then on the menu click
If we do the first and stop the bubbling, then the menu element won't ever receive the click event, which might be the desired behavior
If we do the second, the menu is the only thing that receives the event, and then determines how to react to that. Personally, this would be my desired way as it better handles future elements being added to the menu, plus it makes the code easier to read and understand in the future as everything is centralized to one listener
As I mentioned, either of the two solutions presented here are valid choices that you might want to use in your code, just so you understand the difference between them and how to best employ them in your own code

Tips

DOM - Reflows/repaints

Repaints - Occurs when changes are made to an element's appearance that does not affect its layout
Reflows - Occurs when changes are made to the layout of a page

Minimize by

Apply changes in bulk

                    
jQuery('#someID').css('color', 'red');
jQuery('#someID').css('backgroundColor', 'white');
jQuery('#someID').css('border', '1px solid blue');

jQuery('#someID').addClass('chicagoCubs');

Operate on hidden/copied element
Avoid reflows (slow performance!) by changing layout as little as possible

When you are writing your code, you might find you are commonly changing the page structure or look by adding, editing or deleting elements, or even just changing the way they appear
This is all perfectly fine and easy enough to do with jQuery, however it also can have a big impact on your page performance
The reason has to do with two terms called repaints and reflows. Repaints come about when you change the styling of one or more objects so the browser has to update its viewport to handle this change in style. Reflows are the same idea, however this occurs when the page has an element removed or added and must update its look to accomodate this change in DOM structure
The simplest way to prevent the performance issues with this is to not cause any repaints or reflows, however this is sometimes unavoidable so there are a couple of ways you can at least minimize the performance cost of these
First, you will always want to minimize the number of reflows and repaints. This can be done by using classes instead of styling attributes as there is only one repaint needed in our second example, vs. 3 in our first. They do the same thing but since you are essentially applying all the changes at once, you cause one repaint instead of 3 of them
Second, if you cannot use a class or other attribute for your style, you can prevent multiple repaints by either creating a copy of the element, making your changes, and then replacing the original, or by setting the element to hidden, changing it and then showing it again. In both cases, you are simply operating on an element that doesn't affect the layout of the page and therefore preventing multiple repaints.
Finally, reflows don't actually occur until one of two things are true. Either the script has ended and there are no more changes to make, or if you are in the middle of your changes but query the DOM for some layout value that the page must calculate by reflowing then. For instance, if you are changing heights and widths and then try to get the height/width of an element you are changing you will cause a reflow on the page prior to the end of the script
This is all pretty advanced stuff that may never come up if your pages and scripts are not too complex, however just remember that when changing the layout or design of the page, performance can suffer

Tips

Errors

Tips

Errors - Debugging

Print values

`alert('The value of x is: ' + x);`
`console.log('The value of x is: ' + x);`

Step through code

The very first thing you should learn regarding errors, regardless of the language, is how to properly debug through them to figure out the actual cause of the error
When you encounter errors, the last thing you should do is just blindly change things in your script, hoping one will fix the error. Not only is this bad practice, but it could end up being detrimental when you fix the error you are seeing but break existing code or introduce even more errors into it
Instead, learn how to use the tools given to you to solve these issues
This can be by using some built-in JavaScript functions like alert or console.log to examine values in your script to confirm their values
You can see examples of using these in the code blocks on the page
Note that the alert just shows you an alert box, while the console.log uses the browser's console to print the message
Alternatively, you can use browser tools in order to step through your code, line by line, and inspect values that way
Certainly, that way is much quicker as you can instantly see what the state of everything is and why the code is acting the way it is
Nowadays, all browsers have this built-in to them, however you can also choose to use a third-party tool such as Firebug, which is an extension available for the Firefox browser
Using these tools, you can set breakpoints, step into or over your code, and even look at exactly what all variables are set to at any given point in your code

Tips

Errors - Try-catch

                  
try {
  // do something
} catch(err) {
  // handle error here
}

                  
try {
  // do something
} catch(err) {
  // handle error here
  console.error('Oh no!  Error occurred: ' + err);
} finally {
  // run some code regardless of errors
}

                  
try {
  // do something
} catch(err) {
  // handle error here
  console.error('Oh no!  Error occurred: ' + err);
}

                  
try {
  // do something
  throw 'x is missing a value';
} catch(err) {
  // handle error here
  console.error('Oh no!  Error occurred: ' + err);
}

There might also be times where you cannot prevent errors, or are unable to figure out why they are occurring. In these cases, you can handle the error in such a way that your code will not stop processing when the error occurs
This is known as a try-catch block. In this block, some code is "tried" and if it fails, the code in the catch block is executed. You can see a basic example of this on the slide
You could choose, for instance, to log the error using console.error or alert, which would then show the error for debugging purposes, without completely stopping the script from executing on the page
There is also an optional finally block that gets executed regardless of whether there is an error in the try block or not
Finally, you can create custom errors using the throw syntax, as seen here, where we are throwing a descriptive error message
While you shouldn't lean on try-catch, instead fixing errors you run across, they can be a very valuable part of your script to handle unexpected or incorrect occurrences

Tips

Errors - JSLint

JSLint.com
"JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool."

Unlike a lot of other programming languages, JavaScript is not compiled into a file that is then run, but rather read in and interpreted directly in the browser
While this means you can easily make changes and run your code anywhere as simple as a text editor up to a specialized IDE, it also can mean writing bug-free and syntactically correct code can be difficult at best
To that end, JSLint was created to help ensure you have written your code correctly. JSLint doesn't catch every thing wrong, however it does provide "another set of eyes", as they put it, to ensure you have no syntax errors and that your code is written well
JSLint can be used in a wide variety of places regardless of the tool you use to write and maintain your code, and you can even copy and paste your code into the JSLint website for analysis. Running an analysis on code will give you suggestions for improving your code, nothing more. This means you might get 20 different messages from running the analysis, and yet your code runs correctly as you are not doing anything wrong, just not optimized
JSLint is a tool like any other, and so while you should use it, you should also know when to listen to it and when you can ignore it

Tips

Errors - Timing

performance.now

            
var start = performance.now(),
    end, elapsed;
/* my code
 * runs in
 * this block */
end = performance.now();
elapsed = end - start;
console.log('MS elapsed: ' + elapsed);

Unlike some of the other slides in this section, this is not necessarily about errors, but rather performance
We already talked about how you can use jsperf.com to test the performance of different code blocks to see what the best performing code is
However, what if you don't want to test different code blocks, but rather your own code to see how long it takes to run, and if making a change will improve it?
Certainly, jsperf.com won't work for you if you need the full environment your code is running in (events, variables, etc.) as it runs the code in a vacuum
Instead, you can use the browser timer built-in to test the time needed for your code to complete
This is done by using the performance.now function
As you can see in this code sample, we call performance.now both before and after our code, then subtract it to get the result
This is much more flexible than jsperf.com as you can insert this in any location, or even more than two locations, and then print the results wherever. Performance.now grabs the time in ms, so you can see the exact amount of ms between the start of your code and the end
Run it in multiple browsers and after code changes to ensure you are running performant code

Tips

Customize

Tips

Customize - jQuery

Know what jQuery offers you as a developer
Know what it does not

The first thing to do, if you are not already, is become familiar with exactly what jQuery is and what it has to offer you as a developer
The official jQuery website is the best resource for this with its documentation and change logs
For instance, if you need to loop over a set of elements in your code, you might try to manually do it with JavaScript (which is actually not a bad idea, but we'll get to that later) requiring you to get the elements and then write custom code to manually iterate over them
This is fine if you understand why you are doing this, however if you are only doing it because you don't know of a better way, you are wasting time and potentially missing out on other things in jQuery as well that can make your life as a developer easier
You don't have to learn everything at once, but start by familiarizing yourself with jQuery and what it offers, and then learn what JavaScript offers so you know what is built-in and what requires you to code manually

Tips

Customize - Add to jQuery

                  
jQuery('tr').each(function() {
  if (jQuery(this).find('th').length === 0) {
    // do something with this row
  }
});

                  
jQuery.extend(jQuery.expr[':'], {
    nonHead: function(a) {
        return jQuery(a).find('th').length === 0;
    }
});

                  
jQuery('tr:nonHead')... // do something with each row

                  
jQuery('input[type="checkbox"]').each(function() {
  jQuery(this).prop('checked', true);
});

                  
jQuery.fn.check = function() {
  this.prop('checked', true);
}

                  
jQuery('input[type="checkbox"]').check();

Once you are familiar with what it does and does not offer, you can began making the library your own by adding to it
While nearly limitless in its application, this is usually done by adding selectors or adding functions
You might choose to add a selector to make our example here simpler, where we are selecting every row that does not have a th, or a header cell
Instead, we can create a custom selector, called nonHead, like this
These selectors can be difficult, however the most basic premise boils down to we return true if the current element matches, and false if it does not
Re-written, our initial code looks much simpler and is easier to understand
Additionally, we can add to jQuery's functions as well, using the extend function. In this case, our code is meant to check the selected checkbox on the page. Instead, we can add a function to jQuery to handle this for us, meaning the resulting code could look like this
As you can see, jQuery is infinitely customizable so you can use it to do whatever you need

Tips

Customize - Plugins

Create your own
Share with other developers
Custom plugins use IIFE form
Use official jQuery Repository

Eventually, you will add to jQuery enough that it becomes something you don't want to live without
Before or after this occurs, you might want to share your custom code with other developers, in the same way that you are using other's code in your projects
When this happens, you can choose to create and publish a plugin. Even if you choose not to share it with others, if you plugin-ize your code, it will make it as easy to implement in your multiple projects as it is to use other's plugins
This slide is more of "something to consider" slide, as we have already talked about how to create a plugin when we spoke about IIFE
The jQuery community is a great one and has constant development in large part to developers sharing with one another
If you find other's work useful, consider sharing your own

Tips

Customize - Exists

Does not work to check if falsy

                
if (jQuery('#someID')) {...} // will always be true

This does work

                
if (jQuery('#someID').length) {...} // will only be true if at least one is found

You can add to jQuery to use

                
jQuery.fn.exists = function() {
  return this.length > 0;
}

if (jQuery('#someID').exists()) {...} // easier to understand what you are doing

What are we here for?

Introduction

Junior, Senior, Ninja

Tips

Variables
Comparisons
Functions
DOM
Errors
Customize

Tricks

JavaScript
jQuery

Plugins

Tricks

JavaScript vs. jQuery

          
// using attr function
var theID = jQuery('p').attr('id');

// converting jQuery object to JS with get
var theID = jQuery('p').get(0).id;

          
jQuery('button').click(function() {
  // common way in jQuery
  var theID = jQuery(this).attr('id');
});

          
jQuery('button').click(function() {
  // better way using vanilla JS
  var theID = this.id;
});

As we talked about, jQuery and JavaScript each have their own set of functions for you to use in your code
Since jQuery is just a JavaScript library, any JavaScript can be used along with your jQuery code
However, for performance, there will be times when it is better to use vanilla JavaScript than jQuery in your code
One of the most common examples of this is when needing to get the ID of an element
In jQuery, there is no easy way to do it, as you either need to use the attribute function in order to do so, like shown here, or convert the jQuery object to JavaScript first to then do it as seen here
In certain cases, you can avoid this by not turning an element into a jQuery object. In some jQuery functions, like a click event, you are given a this keyword which is a direct reference to the current DOM element being affected. If you use it as a jQuery object, like this, you are wasting performance power on grabbing the ID. Instead, we can just do this, which gets us the ID from the built-in vanilla JS
Let's look more at some useful code snippets that are in vanilla JS

Tricks

JavaScript - Loops

jsperf.com

            
for (var i = 0; i < els.length; i++) {
    // do something with each item of els
}

            
for (var i = 0, iLen = els.length; i < iLen; i++) {
    // do something with each item of els
}

            
for (var i = els.length; i--;) {
    // do something with each item of els
}

Tricks

JavaScript - Arrays

            
var arr = new Array();
var arr = [];

            
var max = Math.max.apply(Math, arr); // max has max value from arr
var min = Math.min.apply(Math, arr); // min has min value from arr

            
arr.length = 0; // empty array
arr.length = 4; // truncate array to 4 values

            
delete arr[3]; // item 4 in arr will now be undefined
arr.splice(3, 1); // item 4 is now completely gone from arr

            
var arr2 = arr.map(function(val) {
  return val * val;
});
// arr2 now holds all the original values of arr, but squared

Arrays are something we already talked about earlier, however they are certainly worth revisiting as they can be very useful to your code
To refresh, you can create an array with a constructor or literal notation, with the latter being better performing
We can spend all of our time here just talking about all the cool, useful things you can do with arrays, however let's look at just a couple of examples
The first code block shows how to get the maximum or minimum value of an array
The next block shows how to empty an array, or to truncate it
The next shows two ways to remove an item from an array, with the second example being the better idea as the first replaces the array item with undefined
Finally, consider using the map function to loop through an array's items, as seen here where we create a second array that is simply the first array's items squared

Tricks

jQuery - Events

            
jQuery('button').click(function() {
  alert('Button was clicked!');
});

            
jQuery('body').on('click', 'button', function() {
  alert('Button was clicked!');
});

            
jQuery('button').on('click', function() {
  alert('Button was clicked!');
});

We've already talked briefly about handling events in jQuery, such as using the click function
However, a potentially better way to handle events is to use delegation
Outside of some performance benefits, if you select a group of elements and then apply the click function, any elements added to that initial set later won't trigger the event as the event will always operate only on the initial set of selected elements
Instead, with delegation, you can attach the listener to a higher level element that is always present and that will watch for new elements as well
You can see in our first code block, we are simply displaying an alert on the page when a button is clicked
However, if we add any new buttons to the page, they will not display an alert
So, instead, we can use the on function and tie it to some element on the page, or even to the entire body, which listens for any clicks on that element that match the selector
You can also choose to directly tie the click event to the element, the button in this case, however this won't work for newly added elements either

Tricks

jQuery - End

            
jQuery('div').find('p').css('backgroundColor', 'red');
jQuery('div').find('span').css('backgroundColor', 'blue');

            
jQuery('div').find('p').css('backgroundColor', 'red')
  .end().find('span').css('backgroundColor', 'blue');

There may be times where you are performing a lot of chaining and/or walking of the DOM
For instance, in our code here, we are selecting a div, and then finding paragraph tags inside of it
If we wanted to go back to the initial div and then begin searching again, we could either select it again, or if we had cached it, we could use that cached item to get back to the initial selector
However, a better way is to use the end function, which ends the current filter and returns to the one immediately before it
That is what is happening here, where we select the div, then the paragraph tags to turn red, then we select the spans in the div to turn blue
End can make things much easier to operate on as we can now move around in the DOM much smoother, ducking in and out of the structures as we go

Tricks

Types

JavaScript

          
typeof ''; // string
typeof 0; // number
typeof null; // object
typeof new Date(); // object
typeof []; // object
typeof {}; // object

jQuery

          
jQuery.type(''); // string
jQuery.type(0); // number
jQuery.type(null); // null
jQuery.type(new Date()); // date
jQuery.type([]); // array
jQuery.type({}); // object

What are we here for?

Introduction

Junior, Senior, Ninja

Tips

Variables
Comparisons
Functions
DOM
Errors
Customize

Tricks

JavaScript
jQuery

Plugins

Plugins

Before Plugins | After Plugins

Plugins

Date Selection

jQuery UI Datepicker
Part of the jQuery UI library
Offers such things as:
- Dragging and/or dropping
- Resizing
- Selecting
- Sorting
- Sliders and spinners
- Tabs, menu, accordions
- Etc.
Datepicker very useful to handle date-related selections

Plugins

Dates

Moment.js

Easily read in strings to get dates
Manipulate dates easily:
- Add/subtract
- Get difference between two dates
- Get first of/end of easily
- Etc.

Any time you deal with dates, you could choose to use the JavaScript built-in date object
However, this is not super straight-forward, doesn't handle a variety of dates, nor does it do things like calculate time in between dates, subtract or add time to a date, etc.
For all of that and more, we have moment.js. Any time I deal with dates in my code, I use moment as it is crazy useful for anything even remotely date-related
On our page here, we can use moment to calculate both the age of the user as well as how long they have worked at their current position
Note how I wrote this code to read in the birth date on change, get the number of years between today and their birthday, and then print this value to the age input

Plugins

Numbers

Numeral.js

Numeral.js was built upon the same foundation as moment.js
Very similarly used, but for numbers instead of dates
Great for any situation you need to either read in a string as a number or print a formatted number

Plugins

Validating

jQuery Validation

Great for validating user input
One of the oldest ones (since July 2006)
Has many useful methods for validating built-in
You can fully customize this plugin including writing your own validation

So far, we have talked about a couple of the inputs using numbers and dates, and how to both help the user enter the desired info as well as validate that the info is correct
However, we could also validate the entire form against some specific criteria we set up
There are many validation plugins out there, however the one I keep coming back to is jQuery validate. This has many built-in validations against common inputs like phone numbers, dates, etc.
Additionally, you can write your own validation methods to handle any sort of form input you can possibly imagine
The documentation for this plugin is not amazing, and will require some trial and error, however once you figure it out, you will never use another plugin to handle validating input
In this case, we are validating the form using several different rules, so you can see what has been done

Plugins

Storing Data

jQuery Cookie

Cookies are great for storing non-sensitive information
Key-value pairs, can also have a path and an expiration date
Very easy to set, retrieve, or remove cookies for your site

There may be times in your apps where you need some way to remember info about a user, whether it is the state they left the page in or something about them like their name
HTML5 brings with it some offline features such as localstorage and offline apps. While those are very useful, they are not currently supported across all browsers, so instead, we can use an old fallback, the cookie
A cookie is a simple piece of info, with a name and a value. Cookies are something built right into the browser and accessible through vanilla JS, however that is not all that easy to accomplish. Instead, we can use this plugin to read in and store information
Using this, we can save all user info on the page that wasn't submitted
Notice how the page retains my entered info after I uncomment this code and refresh the page

Plugins

Alerts

Alertify.js

Browsers provide built in ways to call alerts, confirmations, or prompts
However, these are kind of ugly and differ across browsers
Alertify pretties up alerts and even allows growl-like notifications
This can be used anywhere you would normally use an alert, confirm, or prompt

Plugins

Formatting

Masked Input

There are many inputs that might be amibiguous to users
Some examples include:
- Phone Numbers
- Dates
- SSN
- Etc.
In these cases, you can force the input into a specified format

Plugins

Head.js

Plugins are useful an great, but can make your page slow/bloated
File managers help you keep your code clean
Head.js loads only what you need, when you need it
The more JS files you bring in to your page, the more useful this is

We are barely scratching the surface of everything JS and jQuery can do, however you can probably see how your pages will soon become plugin heavy from including all these nice, but potentially bloated plugins on every page
Certainly, caching could help, however again JS comes to the rescue with file managers, which only include files that you need on each page
Again, there is no shortage of plugins for this, however one nice one I have used in the past is head.js
This allows us to specify which plugins come in on which page to ensure we're not overly bloating pages that don't need it but that we do bring in all the required files on the pages that do need it
As I uncomment this code, you can see how it works

That's it!

Questions? Comments?

Credits

http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/
http://developer.blackberry.com/html5/documentation/v2_2/javascript_best_practices.html
https://github.com/jed/140bytes/wiki/Byte-saving-techniques
http://gregfranko.com/blog/i-love-my-iife/
http://tutorialzine.com/2011/06/15-powerful-jquery-tips-and-tricks-for-developers/
jQuery Trickshots -100 Advanced Techniques (2015 Edition) from tutorialzine.com
Images from https://openclipart.org