apply core styles to performance section, site-wide tweaks

Author: bobholt

page/about-jquery/how-jquery-works.md

@@ -57,7 +57,7 @@ $( document ).ready( function() {
 Inside the ready event, add a click handler to the link:
 
 ```
-$( document ).ready(function(){
+$( document ).ready(function() {
 
   $("a").click(function( event ) {
 
@@ -106,7 +106,7 @@ element's src attribute
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
 
-    $(document).ready(function() {
+    $( document ).ready(function() {
 
       $("a").click(function( event ) {
 

page/code-organization/concepts.md

@@ -19,7 +19,7 @@ some concepts that are common to all good code organization patterns.
 
 - Your code should be divided into units of functionality — modules, services,
   etc. Avoid the temptation to have all of your code in one huge
-  `$(document).ready()` block. This concept, loosely, is known as
+  `$( document ).ready()` block. This concept, loosely, is known as
   encapsulation.
 - Don't repeat yourself. Identify similarities among pieces of functionality,
   and use inheritance techniques to avoid repetitive code.

page/code-organization/feature-browser-detection.md

@@ -58,7 +58,7 @@ There are several ways to go about feature detection:
 
 Let's take a look at how to check whether or not a `<canvas>` element exists in a specific browser, without using a helper library. We do this by specifically querying whether the method or property exists:
 
-```js
+```
 // We want to show a graph in browsers that support canvas, but a data table in browsers that don't.
 var elem = document.createElement("canvas");
 
@@ -93,7 +93,7 @@ Thankfully, there are some great helper libraries (like [Modernizr](http://moder
 
 For example, utilizing Modernizr, we are able to do the same canvas detection test with this code:
 
-```js
+```
 if ( Modernizr.canvas ) {
 
   showGraphWithCanvas();
@@ -113,7 +113,7 @@ So, while the Modernizr syntax is great, it can end up being quite cumbersome to
 
 The Modernizr object exposes a `load()` method that many prefer over the syntax mentioned previously. This is due to the another library that Modernizr now uses internally:  [yepnope](http://yepnopejs.com/). Testing for canvas can now become something like this:
 
-```js
+```
 Modernizr.load({
   test: Modernizr.canvas,
   yep : 'canvas.js',

page/effects/queue_and_dequeue_explained.md

@@ -56,7 +56,7 @@ $.fn.pause = function( n ) {
 
     var el = this;
 
-    setTimeout( function () {
+    setTimeout( function() {
 
       return $( el ).dequeue();
 

page/effects/uses_of_queue_and_dequeue.md

@@ -41,7 +41,7 @@ $.fn.delay = function( time, type ) {
 The default queue in jQuery is fx. The default queue has some special
 properties that are not shared with other queues.
 
-- Auto Start: When calling `$(elem).queue(function(){});` the fx queue will
+- Auto Start: When calling `$(elem).queue(function() {});` the fx queue will
   automatically dequeue the next function and run it if the queue hasn’t
   started.
 - ‘inprogress’ sentinel: Whenever you `dequeue()` a function from the fx queue,

page/events/event-delegation.md

@@ -40,7 +40,7 @@ $("#list a").on( "click", function(event) {
 
   event.preventDefault();
 
-  console.log( $(this).text() );
+  console.log( $( this ).text() );
 
 });
 ```
@@ -72,7 +72,7 @@ $("#list").on("click", "a", function(event) {
 
   event.preventDefault();
 
-  console.log( $(this).text() );
+  console.log( $( this ).text() );
 
 });
 ```

page/events/inside-event-handling-function.md

@@ -42,7 +42,7 @@ Stop the event from bubbling up to other elements.
 In addition to the event object, the event handling function also has access to
 the DOM element that the handler was bound to via the keyword this.  To turn
 the DOM element into a jQuery object that we can use jQuery methods on, we
-simply do $(this), often following this idiom:
+simply do $( this ), often following this idiom:
 
 ```
 var $this = $( this );

page/events/introduction-to-custom-events.md

@@ -165,7 +165,7 @@ the behavior of a lightbulb belongs to the lightbulbs.
 If you're accustomed to object-oriented programming, you may find it useful to
 think of custom events as methods of objects. Loosely speaking, the object to
 which the method belongs is created via the jQuery selector. Binding the
-changeState custom event to all `$('.light')` elements is akin to having a
+changeState custom event to all `$(".light")` elements is akin to having a
 class called `Light` with a method of `changeState`, and then instantiating new
 `Light` objects for each element with a classname of light.
 

page/events/introduction-to-events.md

@@ -65,7 +65,7 @@ $("#helloBtn").click(function(event) {
 });
 ```
 
-The `$('#helloBtn')` code selects the button element using the `$` (aka `jQuery`) function and returns a jQuery object. The jQuery object has a bunch of methods (functions) available to it, one of them named `click`, which resides in the jQuery object's prototype. We call the `click` method on the jQuery object and pass along an anonymous function event handler that's going to be executed when a user clicks the button, alerting "Hello." to the user.
+The `$("#helloBtn")` code selects the button element using the `$` (aka `jQuery`) function and returns a jQuery object. The jQuery object has a bunch of methods (functions) available to it, one of them named `click`, which resides in the jQuery object's prototype. We call the `click` method on the jQuery object and pass along an anonymous function event handler that's going to be executed when a user clicks the button, alerting "Hello." to the user.
 
 There are a number of ways that events can be listened for using jQuery:
 
@@ -169,7 +169,7 @@ Finally, to inspect the event itself and see all of the data it contains, you sh
 
 ```
 //Logging an event's information
-$('form').on( 'submit', function(event) {
+$("form").on( "submit", function(event) {
 
   event.preventDefault(); // Prevent the form's default submission.
 

page/events/working_with_events_part_1.md

@@ -124,7 +124,7 @@ The general idea of event delegation is to bind the event handler to a
 containing element and then have an action take place based on which specific
 element within that containing element is targeted. Let's say we have another
 unordered list: `<ul id="list2"> ... </ul>`. Instead of attaching the .click()
-method to a button — $('#list2 li.special button').click(...) — we can attach
+method to a button — $("#list2 li.special button").click(...) — we can attach
 it to the entire surrounding `<ul>`. Through the magic of "bubbling," any click
 on the button is also a click on the button's surrounding list item, the list
 as a whole, the containing div, and all the way up to the window object. Since

page/faq/add_keyboard_navigation.md

@@ -170,7 +170,7 @@ In Mathieu’s code, he had the following:
 	});
 ```
 
-Note that $().ready is the same as $(document).ready (though it’s not a style I would personally use). *Directly* after the plugin (i.e. before the });) results in the following code:
+Note that $().ready is the same as $( document ).ready (though it’s not a style I would personally use). *Directly* after the plugin (i.e. before the });) results in the following code:
 
 ```
 $().ready(function() {

page/faq/enable_the_back_button.md

@@ -22,7 +22,7 @@ Now armed with Ben’s plugin, we’re going to refactor the tab code so that th
 
 The way the existing tabs work is as follows:
 
-- Collect all the tab panels using $('div.tabs > div') and initialise to show the first tab1
+- Collect all the tab panels using $("div.tabs > div") and initialise to show the first tab1
 - Listen for clicks on the links that form the actual tabs
 - When a tab is clicked, hide all the tab panels, filter down to the one we wanted to see and show it, then update the classes on the tabs so the current link appears to be focused
 - Finally, initialise by finding the first tab and triggering a click
@@ -34,7 +34,7 @@ This process was our original code, and most of it needs to stay in place. The c
 So we listen for the hashchange event, just like we might listen for a click event:
 
 ```
-$( window ).bind("hashchange", function(){
+$( window ).bind("hashchange", function() {
 
   //do some magic
 
@@ -44,7 +44,7 @@ $( window ).bind("hashchange", function(){
 Now we move all of the original code from the click handler in to this new event listener. I’ve copied this code in, and marked in bold which lines we’ll need to change:
 
 ```
-$( window ).bind( "hashchange", function(){
+$( window ).bind( "hashchange", function() {
 
   tabContainers.hide();
 
@@ -88,7 +88,7 @@ $(function() {
 
   tabContainers.hide().filter(":first").show();
 
-  $( window ).bind( "hashchange", function(){
+  $( window ).bind( "hashchange", function() {
 
     var hash = window.location.hash || "#first";
 

page/faq/how_do_i_test_whether_an_element_has_a_particular_class.md

@@ -6,9 +6,9 @@ source:       http://docs.jquery.com/Frequently_Asked_Questions
 [hasClass](http://api.jquery.com/hasClass/) (added in version 1.2) handles this common use case:
 
 ```
-$("div").click(function(){
+$("div").click(function() {
 
-  if ( $(this).hasClass("protected") ) {
+  if ( $( this ).hasClass("protected") ) {
 
     $( this )
       .animate({ left: -10 })

page/javascript-101/closures.md

@@ -148,7 +148,7 @@ by creating a bound function using the original object as demonstrated below.
 var user = "johnsmith";
 var module = {
 
-  getUser: function(){
+  getUser: function() {
 
       return this.user;
 

page/javascript-101/syntax-basics.md

@@ -49,7 +49,7 @@ var foo = function() {
 foo();
 
 // not so much!
-var foo=function(){for(var i=0;i<10;++){alert(i);}};foo();
+var foo=function() {for(var i=0;i<10;++){alert(i);}};foo();
 ```
 
 ### Reserved Words

page/javascript-101/this-keyword.md

@@ -49,7 +49,7 @@ myObject.sayHello.call( secondObject ); // logs "Hi! My name is Colin"
 // A function created using Function.bind
 var myName = "the global object",
 
-  sayHello = function () {
+  sayHello = function() {
 
     console.log( "Hi! My name is " + this.myName );
 

page/performance/append-outside-loop.md

@@ -10,9 +10,12 @@ Touching the DOM comes at a cost; if you're appending a lot of elements to the
 DOM, you will want to append them all at once, rather then one at a time. This is common problem when appending elements within a loop.
 
 ```
-$.each(myArray, function(i, item) {
-  var newListItem = '<li>' + item + '</li>';
-  $('#ballers').append(newListItem);
+$.each( myArray, function( i, item ) {
+
+  var newListItem = "<li>" + item + "</li>";
+
+  $("#ballers").append( newListItem );
+
 });
 ```
 
@@ -23,26 +26,32 @@ element. After the loop, just append the fragment to the DOM element.
 ```
 var frag = document.createDocumentFragment();
 
-$.each(myArray, function (i, item) {
+$.each( myArray, function( i, item ) {
+
   var newListItem = document.createElement("li");
-  var itemText = document.createTextNode(item);
-  newListItem.appendChild(itemText);
-  frag.appendChild(newListItem);
+  var itemText = document.createTextNode( item );
+
+  newListItem.appendChild( itemText );
+
+  frag.appendChild( newListItem );
+
 });
 
-$('#ballers')[0].appendChild(frag);
+$("#ballers")[ 0 ].appendChild( frag );
 ```
 
 Another technique, which is quite simple, is to build up a string during each iteration of the loop. After the loop, just set the html of the DOM element to that string.
 
 ```
-var myHtml = '';
+var myHtml = "";
+
+$.each( myArray, function( i, item ) {
+
+  myHtml += "<li>" + item + "</li>";
 
-$.each(myArray, function(i, item) {
-  myHtml += '<li>' + item + '</li>';
 });
 
-$('#ballers').html(myHtml);
+$("#ballers").html( myHtml );
 ```
 
 There are of course other techniques you could certainly test out; a great way to test the performance of these is through a site called [jsperf](http://jsperf.com). This site allows you to benchmark each technique and visually see how it performs across all the browsers.

page/performance/cache-loop-length.md

@@ -12,7 +12,9 @@ it beforehand.
 ```
 var myLength = myArray.length;
 
-for (var i = 0; i < myLength; i++) {
+for ( var i = 0; i < myLength; i++ ) {
+
   // do stuff
+
 }
 ```

page/performance/clever-conditionals.md

@@ -8,11 +8,11 @@ attribution:
 
 ```
 // old way
-if (type == 'foo' || type == 'bar') { ... }
+if ( type == "foo" || type == "bar" ) { ... }
 
 // better
-if (/^(foo|bar)$/.test(type)) { ... }
+if ( /^(foo|bar)$/.test(type) ) { ... }
 
 // object literal lookup
-if (({ foo : 1, bar : 1 })[type]) { ... }
+if ( ({ foo : 1, bar : 1 })[ type ] ) { ... }
 ```

page/performance/detach-elements-before-work-with-them.md

@@ -11,10 +11,11 @@ introduced `$.fn.detach` in version 1.4 to help address this issue, allowing you
 to remove an element from the DOM while you work with it.
 
 ```
-var $table = $('#myTable');
+var $table = $("#myTable");
 var $parent = $table.parent();
 
 $table.detach();
+
 // ... add lots and lots of rows to table
-$parent.append(table);
+$parent.append( table );
 ```

page/performance/dont-act-on-absent-elements.md

@@ -14,20 +14,30 @@ that your selection contains some elements.
 // BAD: this runs three functions
 // before it realizes there's nothing
 // in the selection
-$('#nosuchthing').slideUp();
+$("#nosuchthing").slideUp();
 
 // Better
-var $mySelection = $('#nosuchthing');
-if ($mySelection.length) { $mySelection.slideUp(); }
+var $mySelection = $("#nosuchthing");
+
+if ( $mySelection.length ) {
+
+  $mySelection.slideUp();
+
+}
 
 // BEST: add a doOnce plugin
-jQuery.fn.doOnce = function(func){
-    this.length && func.apply(this);
-    return this;
-
}
+jQuery.fn.doOnce = function( func ){
+
+  this.length && func.apply( this );
+
+  return this;
+
+}
+
+$("li.cartitems").doOnce(function() {

+
+  // make it ajax! \o/

 
-
$('li.cartitems').doOnce(function(){

-    // make it ajax! \o/

 });
 ```