Book Image

Mastering jQuery

By : Alex Libby
Book Image

Mastering jQuery

By: Alex Libby

Overview of this book

<p>Mastering jQuery has been written not only to help maximize your skills with core functionality in the library, but also to explore some of the more intriguing ways of using the library to achieve real-world solutions that could feature on any website or online environment.</p> <p>You'll start with a look at some of the more advanced ways to incorporate the library into your pages, followed by working with forms and advanced form validation using regular expressions. Next you'll move on to animating in jQuery, advanced event handling, and using jQuery effects.</p> <p>Finally, you will develop practical examples of using jQuery with external functionality such as node-webkit, before finishing with a session on optimizing your version of the library for maximum efficiency and exploring best practices for using QUnit.</p>

Related Content you might be interested in

Current Title:

Small book image
Mastering jQuery
Alex Libby
May, 2015 | 400 pages
No titles found
Table of Contents (21 chapters)
Mastering jQuery
Mastering jQuery
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Installing jQuery
Installing jQuery
Downloading and installing jQuery
Using other sources to install jQuery
Customizing the downloads of jQuery from Git
Adding source map support
Working with Modernizr as a fallback
Best practices for loading jQuery
Summary
2
Customizing jQuery
Customizing jQuery
Getting prepared
Patching the library on the run
Replacing or modifying existing behaviors
Creating a basic monkey patch
Considering the benefits of monkey patching
Updating animation support in jQuery
Adding WebP support to jQuery
Considering the pitfalls of monkey patching
Distributing or applying patches
Summary
3
Organizing Your Code
Organizing Your Code
Introducing design patterns
Defining design patterns
Dissecting the structure of a design pattern
Categorizing patterns
Exploring the use of patterns within the jQuery library
Summary
4
Working with Forms
Working with Forms
Exploring the need for form validation
Creating a basic form
Starting with simple HTML5 validation
Using jQuery to validate our forms
Validating forms using regex statements
Building a simple validation plugin
Developing a plugin architecture for validation
Creating an advanced contact form using AJAX
Developing an advanced file upload form using jQuery
Summary
5
Integrating AJAX
Integrating AJAX
Revisiting AJAX
Improving the speed of loading data with static sites
Using localStorage to cache AJAX content
Using callbacks to handle multiple AJAX requests
Enhancing your code with jQuery Deferreds and Promises
Working with Deferreds and Promises
Modifying our advance contact form
Detailing AJAX best practices
Summary
6
Animating in jQuery
Animating in jQuery
Choosing CSS or jQuery
Controlling the jQuery animation queue
Improving jQuery animations
Introducing easing functions
Designing custom animations
Implementing some custom animations
Animating in a responsive website
Handling animation requests on a responsive site
Animating content for mobile devices
Implementing responsive parallax scrolling
Summary
7
Advanced Event Handling
Advanced Event Handling
Introducing event handling
Delegating events
Using the $.proxy function
Creating and decoupling custom event types
Namespacing events
Summary
8
Using jQuery Effects
Using jQuery Effects
Revisiting effects
Creating custom effects
Applying custom easing functions to effects
Adding callbacks to our effects
Controlling content with jQuery's Promises
Creating and managing the effect queue
Summary
9
Using the Web Performance APIs
Using the Web Performance APIs
An introduction to the Page Visibility API
Supporting the API
Implementing the Page Visibility API
Detecting support for the Page Visibility API
Using the API in a practical context
Introducing the requestAnimationFrame API
Some examples of using requestAnimationFrame
Summary
10
Manipulating Images
Manipulating Images
Manipulating colors in images
Adding filters using CSS3
Blending images using CSS3
Applying filters with CamanJS
Creating simple filters manually
Animating images with filters
Creating a signature pad and exporting the image
Capturing and manipulating webcam images
Finishing up
Summary
11
Authoring Advanced Plugins
Authoring Advanced Plugins
Detecting signs of a poorly developed plugin
Introducing design patterns
Designing an advanced plugin
Converting animations to use CSS3 automatically
Extending our plugin
Packaging our plugin using Bower
Automating the provision of documentation
Returning values from our plugin
Exploring best practices and principles
Summary
12
Using jQuery with the Node-WebKit Project
Using jQuery with the Node-WebKit Project
Setting the scene
Introducing Node-WebKit
Preparing our development environment
Installing and building our first application
Building our simple application
Packaging and deploying your app
Taking things further
Summary
13
Enhancing Performance in jQuery
Enhancing Performance in jQuery
Understanding why performance is critical
Monitoring the speed of jQuery using Firebug
Automating performance monitoring
Linting jQuery code automatically
Minifying code using NodeJS
Working out unused JavaScript
Implementing best practices
Staying with the use of jQuery
Summary
14
Testing jQuery
Testing jQuery
Revisiting QUnit
Automating tests with QUnit
Exploring best practices when using QUnit
Summary
Index
Index

Linting jQuery code automatically

Linting code, or checking it for errors, is an essential part of jQuery development. Not only does it help get rid of the errors, it also helps identify the code that isn't being used within the script.

Don't forget – optimizing isn't just about adjusting selectors or even replacing jQuery code with CSS equivalent (as we saw in Chapter 6, Animating with jQuery). We need to first ensure that we have a solid base to work from – we can always do this manually, but the smarter option is to automate the process using a task runner such as Grunt.

Let's take a moment to see how this works in action – note that this assumes you still have NodeJS installed from previous exercises. This time around, we will use it to install the grunt-contrib-jshint package, available from https://github.com/gruntjs/grunt-contrib-jshint:

  1. Setting up the automatic check is very easy. To start, we need to download and install grunt-contrib-jshint. Open up a NodeJS command prompt, and enter...

Previous Section
End of Section 5
Next Section