devLink: Extend your jQuery Application with AmplifyJS

Last week I attended the devLink conference in Chattanooga, TN. On Thursday I gave a presentation entitled Extend your jQuery Application with AmplifyJS.

Thank you for everyone who was able to attend the session. Unfortunately the session was not recorded, but you can access my slides and play around with the interactive jsFiddles that I demonstrated. You can launch the associated jsFiddles by clicking the "pencil" icon when you see one in the slide's title.

The session was a combination of the Script Junkie article I wrote, by the same name, and also some of the prototyping and unit testing concepts that I presented at the San Francisco jQuery Conference earlier this year.

Resources mentioned in the session...

• AmplifyJS
• AmplifyJS Test Swarm
• mockJSON

Find the jQuery Bug #1: Chicken or the Egg

Introduction

In this open-ended series I'll be showcasing a snippet of buggy jQuery code that you might encounter, explain what the problem is, and then identify how you can easily resolve the issue.

As this series progresses my example code may not use all the best practices that I would normally use in my everyday development. This is partly due to me wanting to show code you might encounter in the wild, but also because I want these code snippets to be easily understood so that the main concept can be revealed. In order to do that a healthy balance will need to be maintained, which is tricky ;)

The Desired Feature

You have a list of individuals in a table. Each row has an alternating background color (zebra). You can delete them by clicking an icon to the right of each row.

When the trash icon is clicked, a request goes to the server to delete that individual by it's ID. If the action was successful then the row should fade out and then be removed from the DOM. After all is said and done, the rows should be zebra'ed again.

The following code was inspired by an issue a friend of mine, Casey Picker from LamplightMedia.net, had last week and I helped him isolate the problem. If you don't spot the error right away I have a simplified version of the same underlying issue at the end of the post.

The Buggy Code

The Unexpected Result

When you execute the above code you'll notice that when you delete one of the rows the alternating background colors get all out of sync.

The Underlying Problem

Since the row that is being deleted is happening in the success callback function It seemed logical to put the zebraTable call in the complete callback function. That seems right, right? Based on the jQuery documentation the complete callback is only fired after the success function. But why am I having this problem?

Well, the problem is the classic case of treating asynchronous code as synchronous. You might think to yourself, "I know AJAX is asynchronous, but the problem is happening after we've received a response, right?" The answer to that is "Yes", but you the act of animating the fading of the row is also asynchronous.

Once the program starts the hide animation the control of execution moves on to trigger the complete callback function (where the zebraTable call is taking place). After 500 milliseconds, when the row has completed fading out, control is given back to the hide callback which finally removes the row. The bug is that the code is zebra-fying the table before the row is deleted, which isn't what you intended.

The Solution

The solution to fix this problem is really simple and straightforward. All you really need to do is to move the zebraTable function call out of the complete callback and immediately after you remove the row from the hide callback.


If you test out the code again below you'll notice that now we have the desired behavior that we were wanting all along. If you delete a row the rows will re-zebra-fy themselves as expected.

Simple Example of the Same Problem

The above example was slightly complex, but the underlying problem of treating asynchronous code as synchronous is common. Here is another example, but this time dramatically simplified.


The above code snippet ( jsFiddle ) declares a contact variable and then makes an AJAX call to retrieve contact information from the server. On the next statement the code is assuming that the contact is already available to display in the console. Unfortunately, since the AJAX is asynchronous the result will not be what you expected.

The most simple fix to the above code snippet is to move the console.log statement to after the AJAX call has successfully returned the server with your contact data as show in the below code snippet ( jsFiddle ).

Technically this fixes your error, but you might additionally refactor this code to make a callback, trigger an event, or publish a message that the data was retrieved. This would help separate the data access code from your user interface code.

Conclusion

The key concept to remember here is to not treat asynchronous code as synchronous. Most of us are aware that AJAX calls are asynchronous, but we also need to remember that animations are asynchronous as well. In addition setTimeout and setInterval are also asynchronous.

Until next time...

Top JavaScript Developers You Should Follow on Google+

Like many of you, I've hopped on the Google+ bangwagon and the 1st thing you do on most social networks is to find those individuals that you want to follow.

As many of you are aware I work for appendTo and most of my work these days involves front-end web development ( JavaScript, jQuery, HTML5, etc ).

So, I created the following list of 60+ JavaScript Developers on the Google+ Counter website that you might consider circling ( a.k.a. following ).

Unfortunately since the Google+ API is not yet released you'll have to click each developer and circle them one at a time. Once the API is released hopefully this will be much less painful.

The top 5 individuals that are circled are listed in the image to the right. Hopefully these names are not a surprise to you as they are all highly influential in the JavaScript space.

Google+ is technically still invite only so I image these numbers will increase dramatically over time. I find Google+ already to be a much more conversational way to share knowledge.

Are you on Google+? If not I have some invites left over.

Also if you circle me ( http://gplus.to/elijahmanor ) I'll put you in my Developer circle and share with you the latest in web development links throughout the week.

Am I missing your favorite JavaScript developer? If so, leave a comment and I'll see about adding them to the list.

7 Chrome Tips Developers & Designers May Not Know

I'm not sure about you, but Google Chrome has been my primary browser for quite some time. At first the simplicity and speed of Chrome initially drew me in. I do admit I went back to Firefox every so often for Firebug's rich set of debugging tools.

However,  over the past year or so the amount of tooling for developers and designers in Chrome has grown immensely.

Here are some fairly recent features of Google Chrome that you may not be aware of...

1. The ability to modify the source JavaScript and execute it

How many times have you been tinkering around JavaScript and wished you could tweak it out temporarily just to test something out? Well, if you are using IE or Firefox then you are out of luck, however in Chrome you can just double-click inside a JavaScript file, make changes, and then proceed to run the web application like normal ( see line 33 ).

Usages for this could be as simple as adding a console.log or modifying a piece of code that you think is broken. Of course, you should note that if you refresh the page you will lose all of your changes, so this technique is only meant as a quick and temporary debugging solution.

2. The ability to Pretty Print ( a.k.a. unminify ) JavaScript source

Sometimes I'm trying to figure out a bug and unfortunately the JavaScript that was included has been minified. As you are aware trying to debug a minified file is nearly impossible. How do you set a break point on a line that is a bazillion characters long?

Thankfully Chrome has a Pretty Print feature that will take a minified JavaScript file and format it property. All you need to do is to click the "{ }" icon on the bottom toolbar to activate this feature. Of course the names will still be obfuscated ( depending on what program minfied the JavaScript in the first place ), but you will at least be able to set break points and debug the code.

3. The ability to break in JavaScript when an element has changed in the DOM

Let's say that you are tasked with finding the code that manipulates a particular DOM element. It can become quite difficult to track down code for a certain behavior especially if your codebase has grown quite large or if you are diving into a slightly unfamiliar project.

Chrome thankfully saves the day again by providing the following unique features

• Break on subtree modifications
• Break on attributes modifications
• Break on node removal

This way you can find the DOM element in question and then right-click on it to select one of the above options. Then, when one of the above criteria happens a break point will occur where the JavaScript is performing that action. Brilliant!

Note: The breakpoint you end up on might be way down in the heart of a minified library (such as jQuery), but fortunately you can use the call stack on the right to find your way back up to where your code lies.

4. The ability to change a CSS stylesheet file as if it were an editor

You are probably familiar with changing the styles on the Elements tab either by manipulating the HTML or by changing values individually on the right in the matched CSS rules section. This concept is very similar to your experiences in Firefox up till today.

Instead of modifying the CSS like above you can switch to the Resources tab and find the CSS file you are interested in, double click inside of it, and make changes to your heart's content ( see line 11 ). A quicker way I do this is by clicking the file & line number link in the Matched CSS Rules pane which jumps me directly to the correct location in the Resources tab where I can start modifying rules.

5. The ability to inspect CSS pseudo-class selectors

Trying to find the pseudo-class rule that matches an element has been considerably painful. How can you hover over an element and at the same time be interacting with the developer tools?

Well, you can now with the Google Chrome. You can access it from the styles pane by clicking the little arrow inside a dashed box ( see the following image ). Then you just check the pseudo-classes that you want to examine.

Note: This is one of the newer features in Google Chrome and as a result you will need either the dev branch or the canary build for this to work.

6. The ability to access most features via keyboard shortcuts

I love myself some keyboard shortcuts! I've recently picked up MacVim and the Vico App and have really been enjoying it. The great news is that the Chrome Dev Tools also have keyboard shortcuts. When you are in the Elements tab type "?" and the following screen will pop up with a whole bunch of useful keyboard shortcuts.

7. The ability to configure settings your way

The Dev Tools have a set of options that you may not be aware of. The two options that I find most useful are "Log XMLHttpRequests" ( a feature I missed from Firebug for a long time ) and "Preserve log upon navigation".

& Many, many, more...

Chrome has been adding a lot of great new features recently. Paul Irish has put together several screencasts and videos describing some of these new features. I've highlighted some of these above, but there are many others.

• Google Chrome Developer Tools: 12 Tricks to Develop Quicker
• A Re-introduction to the Chrome Developer Tools
• Quick color manipulation with the Chrome DevTools & more
• Google I/O 2011: Chrome Dev Tools Reloaded

There is also a cheatsheet you might be interested in created by Boris Smus.