Exterminate Common jQuery Bugs Video

I recently gave a presentation at aspConf: The Virtual ASP.NET Conference on `Exterminating Common jQuery Bugs`. I recorded the session locally and the aspConf guys graciously processed it and hosted it on the Channel 9 website.

The video above is the full 1 hour session with all of the points from my blog series plus a couple more that I haven't blogged yet. You can view the slides from the presentation from my GitHub account.

If you enjoy the talk please consider rating it on Channel 9 and SpeakerRate.

I presented this same talk at the jQuery San Fransisco 2012 Conference about a month ago, but I was limited to 30 minutes so I had to trim down what sections I covered.

The session is not referring to bugs in jQuery core itself, but rather bugs that tend to crop up in your application code the more you use jQuery.

Each point focuses on Examining a code sample with a bug, Explaining what is going on, Exterminating the bug by solving it one or more ways, and then dive into some Extra tidbits of knowledge that might be interesting about that topic.

The bugs vary from synchronous/asynchronous code, looking into the $.each method, looking at some confusing jQuery methods, digging into event delegation, unpacking strange animation behavior, and much more.

I hope you enjoy the session and pick up at least one thing you didn't know and can start using right away.

I want to thank all the staff and volunteers that put together and ran the jQuery and aspConf conferences. I had a blast participating in the events and enjoyed interacting with the audience in person and virtually. Thanks!

QUnit Composite Addon: Running Multiple jQuery Test Files

Introduction

When you start Unit Testing your application with QUnit you'll notice that you'll have lots of different QUnit files that thoroughly test one feature or component of your system.

Instead of opening each one of those test files and running them separately, wouldn't it be nice if you could launch one file that would run all the tests?

Thankfully, there is a addon for that and it's called the Composite addon!

Composite is a QUnit addon that, when handed an array of files, will open each of those files inside of an iframe, run the tests and display the results as a single suite of QUnit tests. -- https://github.com/jquery/qunit/.../addons/composite

Setup

Setting up the Composite addon is pretty easy. All you really need to do is to get the qunit-composite.js and qunit-composite.css files from the Composite Addon Repository in GitHub and then tell QUnit what test files are a part of your Test Suite! See the following for an example setup.

Running Example

I've taken the Unit Tests from a couple of blog posts I've done recently (filterByData jQuery Plugin: Select by HTML5 Data Attr Value & jQuery :dataAttr Pseudo Selector) and have decided to bundle them together using the QUnit Composite Addon.

NOTE: Normally your URLs will look much cleaner than these in this example. Since I'm running these tests in jsFiddle the resources are pointed to their jsFiddle hash appended with /show so that they will render only the result.

Running from the file:// Protocol

In order for this to work you must host your files in a web server because the Composite addon relies on making AJAX calls to pull in the other QUnit files. If you are trying to run the test from the file:// protocol then you will get an error and the tests will not run. If you want to run the tests from Google Chrome you can enable the allow-file-access-from-files command line parameters.

• Mac: open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
• Windows: C:\path\to\chrome.exe --allow-file-access-from-files
• Linux: /usr/bin/google-chrome --allow-file-access-from-files

Conclusion

Using the QUnit Composite addon is very handy to get a quick high level view of the health of your web application. There is some overhead when running all of the tests at one time, but by making it easier to run all of your tests makes the likelihood of you running them much higher than otherwise.

jQuery HTML5 :dataAttr Pseudo Selector

Problem

A while back someone on twitter was asking me how they might find a set of DOM elements by using doing a partial search on their HTML5 data attribute.

I'm not actually sure what type of use case you would need for such problem, but I thought it was an interesting issue to work on, so I went ahead and took a stab at solving it.

Desired Solution

In order to solve the above example of finding elements that start with a certain HTML5 data attribute, I wanted to follow a similar API to that of jQuery Attribute Selectors with the ^=, $=, etc... syntax. The following is an example of how I thought the solution should look like.

Custom Pseudo Selector

In order to create an API like the above I needed to create a custom pseudo selector, much like what you've seen when using :last, :odd, :eq( number ), and numerous other common selectors.

Unit Tests

I didn't want to just have some code laying around that wasn't thoroughly tested, so I went ahead and created a set of unit tests to cover various scenarios. I could have kept going, but I thought the following was a decent set of tests to start with.