Web Dev .NET

QUnit Composite Addon: Running Multiple jQuery Test Files

2012-05-22T07:44:00.001-05:00

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

2012-05-09T00:06:00.000-05:00

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.

Tweet Package for Sublime Text 2

2012-05-03T08:26:00.001-05:00

I was browsing through the list of available packages in Sublime Text 2 and noticed once entitled Sublime Tweet that caught my eye, so I thought I would try it out.

How to Install

With Package Control

The easiest way to install Sublime Tweet is using Sublime Package Control. If you don't already have Package Control installed, then I highly recommend it. It is a very easy way to find and manage packages.

Open the Command Palette... Shift-Cmd-P
Choose Package Control: Install Package
Select Sublime Tweet from the List

Without Package Control

It isn't necessary to have Package Control to install Sublime Tweet. Instead you can clone the repository from GitHub into your Sublime Text 2 package directory. For detailed instructions on what path to use for your operating system please refer to the documentation on the Sublime Tweet repository on GitHub.

How to Setup

The first time you try to use Sublime Tweet it will ask for authentication information.

Open the Command Palette... Shift-Cmd-P
Choose Tweet
A browser will open and Twitter will generate an authentication token for you
Copy the authentication token and paste it into the prompt in Sublime Text
Now you are all setup for using the package

How to Use

Sending a Tweet

Open the Command Palette... Shift-Cmd-P
Choose Tweet
Type in your tweet and press enter

Reading Your Timelime

You can also read your timelime and favorite, reply, and open embedded URLs, but I'll refer you to the documentation on the Sublime Tweet repository on GitHub.

Interviewed on The Code Project's Coder Series

2012-04-06T00:05:00.000-05:00

I was recently asked to participate in The Code Project's A Coder Interview series by Terrence Dorsey (@tpdorsey)

You can view the A Coder Interview With Elijah Manor from The Code Project website.

The questions that I answer in the interview are…

Who are you?
What do you do?
What is your development environment?
What new tools, languages or frameworks interest you?
What is your coding pet peeve?
How did you get started programming?
How has the developer community influenced your coding?
What advice would you offer to an up-and-coming programmer?

The following are some other notable interviews they have done recently...

Thank you Code Project and Terrence Dorsey for the honor of being included in your coder interview series.

How a Programmer Lost 46 Pounds and Survived

2012-04-05T07:54:00.001-05:00

So I started this journey 46 pounds ago on July 6th, 2011 weighing in at 196 pounds. That may not sound too bad, but keep in mind that I'm only 5' 6" tall!

It seems every year I've been gaining more and more weight. A combination of stress, overeating, late night snacking, and eating a bunch of unhealthy foods brought me to where I was. I used to hold back and resist getting larger pants, but it soon became ridiculous trying to fit into clothes that I really shouldn't be wearing. So, I eventually got up to a 36` waist so I could fit comfortably.

Near my heaviest weight an uncle of mine passed away from a heart attack. At the funeral I was approached by my sister and my aunt. They both showed concern for my condition. Deep down I knew I was at high risk for multiple health related problems, but having a relative die because of health issues opened my eyes.

So, what did I do to loose weight? Well, it mostly began when I started a special MetaGenics Ultraclear Detox diet in another attempt to reduce or eliminate chronic headaches. The passing of my uncle and other health problems (pain in my legs) were additional encouragement for me to continue with this detox, to start exercising, and to continue eating well.

The detox was a one month strict combination of reducing sugars, dairy, meat, carbs, and pretty much everything but vegetables, fruit, nuts, and brown rice. In addition I took a series of shakes and pills to attach and flush out any toxins that were in my body. After the month of this detox program my headaches were not any better, but physically I felt a lot better and I was loosing quite a bit of weight in the process.

I could not have stuck to this program without my wife. Having her support was vital for me completing this detox successfully. Our grocery list changed quite a bit and she helped prepare meals that we can both eat that are healthy and delicious.

The detox was not the only reason for my weight lose. I also was exercising quite regularly. I used to run outside, but that was too hard on my body. My shins would hurt, I'd get hot, and after about 15 minutes or so my arms would go numb! So, I was inspired by my 6yo daughter's swim lessons and decided to start swimming. As it turns out, swimming it is easy on my body and I stay pretty cool during the workout. About 4 times a week I go to our local YMCA and swim in the indoor lap pool. When I started swimming I could hardly swim a length of the pool without stoping to rest, but over time I worked up to swimming several laps at a time without resting. As of recent, I typically swim 1/2 mile during a workout.

Now that the detox program is over I am still being very restrictive of what foods I eat. I do eat some meat, but I try to limit it to organic beef, chicken, or turkey and wild fish. I still try not to eat sugars, dairy, or carbs. So, what do I eat and drink then? Here are some items that I enjoy...

Humus with vegetables
Guacamole with vegetables
Raw cashews and cranberries or raisins
Rice Cake with turkey and avocado
Rice Cake with almond Butter
Brown rice sushi
Black been salad and Shish Kabobs
Blueberries, almond Butter, and stevia
Lime water with stevia
Water with blueberries at the bottom
Dandy Blend with stevia in place of coffee
LÄRABAR for a snack
Apple and almond butter
Etc...

In addition to the above items a lot of what we eat these days comes from the MaximizedLiving Nutrition Plans cookbook.

As a developer who speaks regularly, I am finding it difficult to find things I can eat while I'm away from home. It seems everything is fried, has carbohydrates, or added sugar. I typically bring with me several snack baggies of nuts, dried fruit, and lara bars. I keep my pockets full of stevia packets just in case I need it while away from home.

If you know you are overweight and have been looking for a reason to change your life, I encourage you to start now. Maybe you can start by cutting out sugar drinks, cut out that late night snack, or start exercing in your home or at the gym. Whatever you do, please do something to take care of your body. Your family is counting on you to be alive.

Orlando Code Camp JavaScript Sessions

2012-04-04T07:56:00.000-05:00

I was honored to be asked by Esteban Garcia (@EstebanFGarcia) to speak at the Orlando Code Camp on March 31, 2012.

I was impressed that there were 13 simultaneous tracks that were running all day long! One of the tracks was JavaScript and that is where I stayed pretty much stayed.
I presented 2 sessions Extending Your jQuery Application with AmplifyJS and Find Common jQuery Bugs. You can find the slides for these presentations online:

Extending Your jQuery Application with AmplifyJS - This session takes an existing web application and slow enhances it with with the 3 components of AmplifyJS. I introduce the observer pattern using amplify.publish/amplify.subscribe, I show how to use the amplify.store to support HTML5 persistant storage that is cross-browser, and I show amplify.request which is a high level abstraction to $.ajax that provides ease of configuration, mocking, prototyping, and hooks to protect against future changes.
Find Common jQuery Bugs - jQuery is so easy to use and thankfully abstracts many of the cross-browser concerns we used to labor over years ago. However, as with any library there are a common set of bugs that tend to crop up the more you use it. This session aims to help equip developers with the appropriate knowledge and tools to exterminate many common bugs seen in jQuery code. For each topic that is covered we will start with a piece of code that has a jQuery bug, then identify what the bug is, explain why it is happening, and then proceed to explore various techniques to exterminate the bug.

Kevin Griffin (@1kevgriff) started the day with a beginner "Zero to Hero in jQuery" talk. Even though jQuery has been around for years, it still can pack a room! Kevin had a lot of question from the audience and engaged them well.

John Papa (@john_papa) was the keynote speaker and gave an overview on the state of the web. He gave a good high level view of the technologies that are used today in modern front-end applications. John also gave the following 2 JavaScript presentations that were standing room only:

In addition John has done an in-depth Pluralsight series on Knockout and he is currently working on a series for JsRender that should be available May 2012.

There was a large crown of attendees at the conference. I heard that over 750 people signed-up to attend. That is extremely impressive and the conference was FREE too! It takes a lot of hard work, determination, and donations from generous sponsors to have something like that succeed. I want to thank Esteban Garcia and his team for the great job that they did.

Find the jQuery Bug #8: Suspicious Selectors

2012-03-15T00:01:00.000-05:00

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.

You can view other posts in this series...

Find the jQuery Bug #1: Chicken or the Egg

Find the jQuery Bug #2: Point of No Return

Find the jQuery Bug #3: Give Me Truth

Find the jQuery Bug #4: Animations Gone Wild

Find the jQuery Bug #5: Defective Data

Find the jQuery Bug #6: Traversing Trouble

Find the jQuery Bug #7: Using a Method as an Event Handler

The Desired Feature

The following is a snippet of HTML markup that was generated by Oracle's JSF (JavaServer Faces). We want to select the first name field and add a class that will change it's border style.

The Buggy Code

The following code snippets is our first attempt at solving the problem, but there is a subtle error. Do you see it?

You can view, run, and edit the above code sample from JSBin.

The result that we expected was to see the first name textbox with a red border, but as you can see above it was not successful.

The Underlying Problem

At the root of the problem is that JSF inserts a : delimiter inside of the id attribute. jQuery abides by the W3C CSS Specification Rules when it comes to valid characters in a selector.

If your ID, name, or class contains one of the following meta-characters then you have a problem... !"#$%&'()*+,./:;<=>?@[\]^`{|}~

Here are some examples of invalid selectors in jQuery because they contain invalid characters:

A Solution

jQuery provides a solution of escaping invalid characters inside a selector. You can proceed each character with two backslashes \\ and then the selector should start working as you expect.

If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \\. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\\.bar").

-- http://api.jquery.com/category/selectors/

In order to fix our example we just need to escape the : character with \\ like the following code example demonstrates.

You can view, run, and edit the above code sample from JSBin.

If you test out the code again below you'll notice that once you've filled in the textbox and click enter then the behavior will continue as we expected.

The following examples are the corrected versions of the previous snippets shown in the previous section:

An Alternate Solution

An alternate way to look at this problem is to create a method that will automatically escape the id, name, or class name before using it as a selector.

The previous code snippet extends the String prototype and uses a regular expression to find all invalid meta-characters and escapes them with \\.

Conclusion

The key concept to remember here is that there is a set of characters that are invalid and need to be escaped before using them in a jQuery selector.

Until next time...

Find the jQuery Bug #7: Using a Method as an Event Handler

2012-03-14T00:01:00.000-05:00

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.

You can view other posts in this series...

Find the jQuery Bug #1: Chicken or the Egg

Find the jQuery Bug #2: Point of No Return

Find the jQuery Bug #3: Give Me Truth

Find the jQuery Bug #4: Animations Gone Wild

Find the jQuery Bug #5: Defective Data

Find the jQuery Bug #6: Traversing Trouble

The Desired Feature

We want to use an existing object's method to be invoked when the user clicks on a button.

The Buggy Code

The following code snippets is our first attempt at solving the problem, but there is a subtle error. Do you see it?

You can view, run, and edit the above code sample from the following embedded jsFiddle.

The result that we expected was to see was an alert box showing up when the user clicks the Register button, but instead the following error shows up in the console.

The Underlying Problem

At the root of the problem is that once the event handler is invoked jQuery makes sure the this pseudo parameter is set to the DOM element that caused the event.

Inside of the conference.register method listed above, the this parameter refers to the register button DOM element. Since this is a DOM element that is why we are getting the "Cannot call method 'push' of undefined" error.

What we need to resolve this issue is a way to control the value of the this parameter when the conference.register method is invoked. Thankfully, there is a way in jQuery to do this.

A Solution

The solution to fix this problem is really simple and straightforward. As of version 1.4, jQuery added the $.proxy() method to help solve the bug found in the previous example.

jQuery.proxy( function, context )

Returns: Function
Takes a function and returns a new one that will always have a particular context.

-- http://api.jquery.com/jQuery.proxy/

In order to fix our example we just need to wrap the conference.register method with the $.proxy() method and provide the context that we want the pseudo this parameter to represent.

You can view, run, and edit the above code sample from JSBin.

If you test out the code again below you'll notice that once you've filled in the textbox and click enter then the behavior will continue as we expected.

Alternate Solutions

The above solution shows how you can use the $.proxy() method to solve the problem, but technically you could have used a plain JavaScript technique instead. By using the .call() or .apply() methods in JavaScript you can control what the value of the this parameter will be just like we did with the $.proxy() method.

The following code snippet shows how you can use the .call() method to control the this parameter.

In a very similar way the next snippet of code shows how you can use the .apply() method as an alternate solution.

NOTE: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments. -- https://developer.mozilla.org/...

You can view, run, and edit the above code sample from jsFiddle.

Conclusion

The key concept to remember here is that if you ever need to control the value of the pseudo this paramater inside an event handlers, then you can use the $.proxy() method in jQuery. In addition, you could just use the .call() or .apply() methods in JavaScript if you would rather not use the $.proxy() method.

Until next time...

Find the jQuery Bug #6: Traversing Trouble

2012-03-12T00:09:00.000-05:00

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.

You can view other posts in this series...

Find the jQuery Bug #1: Chicken or the Egg

Find the jQuery Bug #2: Point of No Return

Find the jQuery Bug #3: Give Me Truth

Find the jQuery Bug #4: Animations Gone Wild

Find the jQuery Bug #5: Defective Data

The Desired Feature

We want to take the following list of jQuery board and team members and then hide only those that are team members, leaving only the board members showing.

The Buggy Code

The following code snippet is our first attempt at solving the problem, but there is a subtle error. Do you see it?

You can view, run, and edit the above code sample from jsFiddle.

The results that we expected was to only view a subset of the total list, but instead we ended up seeing all the items in the list!

The Underlying Problem

At the root of the problem is that the .find() method is used for finding elements that are descendants of the current jQuery collection.

.find( selector )
Returns: jQuery
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

-- http://api.jquery.com/find/

The above code snippet already starts with a jQuery collection of 22 items referenced by the $items variable. When calling the $item.find( ".team" ) method jQuery looks for all elements containing the team class that are children of it's internal collection. In this case, the list items do not have any children, so the result is an empty jQuery collection.

It is important to note that jQuery allows you to call methods off of any jQuery collection even if it is empty. The thing is that it just doesn't do anything, it silently fails. What we really need to solve this problem is to have some way to narrow down the internal jQuery collection based on a specified criteria. Thankfully, there is an easy way to do this.

A Solution

The solution to fix this problem is really simple and straightforward. The main problem is that we were using the wrong method.

We should have been using the .filter() method instead, which takes the current jQuery collection and filters them by matching against a provided selector. It doesn't traverse the children at all, but it's only purpose is to reduce the number of top level elements currently captured in the jQuery collection.

.filter( selector )
Returns: jQuery
Reduce the set of matched elements to those that match the selector or pass the function's test.

-- http://api.jquery.com/filter/

All you really need to do is to use the .filter() method instead of the .find() as we used in the previous example.

You can view, run, and edit the above code sample from JSBin.

If you test out the code again below you'll notice that the list items with class of team are targeted and hidden like we wanted!

Conclusion

The key concept to remember here is that the .find() method is for traversing into the DOM and locating descendants that match a criteria and the .filter() method is used to reduced the elements that are already selected that match a criteria.

This may seem like a trivial concept to grasp by some, but I've seen this common confusion of the two methods numerous times. I find that many developers expect that the .find() method will perform both filter and find, but it doesn't.

Until next time...

Find the jQuery Bug #5: Defective Data

2012-03-06T07:43:00.002-06:00

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.

You can view other posts in this series...

Find the jQuery Bug #1: Chicken or the Egg

Find the jQuery Bug #2: Point of No Return

Find the jQuery Bug #3: Give Me Truth

Find the jQuery Bug #4: Animations Gone Wild

The Desired Feature

We want to build a simple jQuery Plugin that will add a confirm message to a simple button or anchor.

The Buggy Code

The following code snippet is our first attempt at building the plugin, but there is a subtle error. Do you see it?

You can view, run, and edit the above code sample from jsFiddle.

The developer initialized the buttons on the page and then wanted to update the prompt for the first button. He removed all the event handlers added by the plugin, updated the attribute, and then re-initialized the button with the plugin. Unfortunately, this technique didn't work as intended.

The Underlying Problem

At the root of the problem is an issue when trying to use the .attr() method after already using the .data() method.

"Only the .data() API reads HTML5 data-* attributes, and it does so once." -- Dave Methvin http://www.learningjquery.com/...

The jQuery plugin reads the HTML5 data-* attribute first, and the developer tried to update the data-* attribute later with the .attr() method. Once the jQuery plugin is re-initialized on the DOM element it will not read the data-* attribute again, but instead use the data it retrieved the first time.

A Solution

The solution to fix this problem is really simple and straightforward. All you really need to do is to change the code where the data-* attribute was updated to use the .data() method instead of the .attr() method.

You can view, run, and edit the above code sample from jsFiddle.

If you test out the code again below you'll notice that it behaves as expected. When you click on the button it will use the updated text that was provided before the plugin was re-initialized.

You may notice that I also changed the key parameter to the .data() method to camelCase instead of the dashed version I had previously. As of jQuery 1.6 the library has changed direction in how they deal with HTML5 data-* attributes.

"The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification." -- http://api.jquery.com/data...

Now, you can still reference that HTML5 data-* attributes using their dashed keys, but jQuery will first attempt to use the key "as is" and only attempt to convert that to a camelCased version if it failed. See the following comment from the Dave's article I referenced above.

"Because many people will use .data( "camel-case" ) instead, we convert that to camelCase as well, but only if no data item named camel-case is found so it's faster to use the first form." -- Dave Methvin http://www.learningjquery.com/...

Other Things You Might Want to Know

Something that you also may not know about the $.data() method is that it will attempt to convert the contents of a HTML5 data-* attributes into the appropriate type.

"Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string. To retrieve the value's attribute as a string without any attempt to convert it, use the .attr() method." -- http://api.jquery.com/data...

The following example shows a DOM element using various types of HTML5 data-* attributes, and then shows that when you call the .data() method to retrieve a value it will parse and convert it into a boolean, number, object, array, or null.

You can view, run, and edit the above code sample from jsFiddle.

If for some reason you didn't want jQuery to convert the HTML data-* attributes when using the .data() method, you could use the .attr() method instead. The .attr() method will always return the string version of the attribute.

Conclusion

The key concept to remember here is that once you call the .data() getter method on a element then it will read the HTML5 data-* atributes only once. If you want to update the data from there on, then you'll need to use the .data() setter method. Also, it is important to know that when you read these HTML5 data-* attributes jQuery will convert those values into it's appropriate type.

I hope you found this helpful. I recommend you reading Dave Methvin's article entitled Using jQuery’s Data APIs.

Please provide any feedback in the comments below. Until next time...

TextMate-like ⌘T & ⇧⌘T in Chrome Dev Tools & Other New Features

2012-02-27T04:14:00.000-06:00

Introduction

For the past year or so I've used Google Chrome Canary as my primary web browser, however, about a month ago I temporarily switched to the stable build of Chrome because of some instability in the dev tools. I just recently switched back to Canary and was pleasantly surprised to see numerous new features in the dev tools there were very welcome indeed!

This post only covers the extreme latest in Chrome Dev Tools. There are so many more rich features that can be found. If you are interested about more helpful features you might be interested in a post I did last year entitled 7 Chrome Tips Developers & Designers May Not Know

If you are not familiar with the Canary build of Chrome, it is a extremely dev version of the browser. You should be cautious because it does update almost every day, but at the same time you get first in line to see all the new features. Unlike the dev or beta builds of Chrome you can actually install Canary side-by-side next to your Stable or Beta build of Chrome. This makes switching between versions very convenient.

The features I am about to describe are currently only available in the dev or canary builds of Chrome. If you have the Beta or Stable builds then you will not see these yet, but hopefully they'll make their way to those builds sooner than later. At least this will wet your appetite ;)

Scripts Explorer

A welcome change to the Scripts tab is a new Scripts Explorer (as seen in the below image). The previous way to navigate through the scripts of a webpage was to open a HUGE drop down containing tons of script files. Chrome kept reorganizing that huge drop-down list to make it more usable, but in the end it wasn't optimal when dealing with a site with lots of JavaScript fiels.

The new Scripts Explorer nicely separates the Scripts used on the webpage from the Content Scripts used in all of the Chrome Extensions you have installed in your browser. Historically, it was slightly annoying to see all those Content Scripts alongside your main JavaScript files in that huge drop down mentioned above. Again, over time Chrome moved those Content Scripts to the bottom of that drop down instead of intermingled, but this move to the Scripts Explorer is head over heals WAY better... YAY!

In addition, you can also choose to dock the Scripts Explorer to the left side of the dev tools (by clicking the little icon in the upper right) or have it auto-close when you are done finding what you need.

TextMate's ⌘T "Go to File" Feature

I don't know about you, but I'm one of those keyboard shortcut junkies, so I am always on the lookout on how to do my job without using the mouse. So, I was even more excited to see support for quickly finding a JavaScript file by only using the keyboard! Chrome call's this feature "Go to Script" and it is similar to what you may have experience in TextMate using ⌘T or maybe in Sublime Text 2 with ⌘P.

Since ⌘T is already reserved for creating a new tab in Chrome, they have chosen ⌘O for this feature. As soon as you type ⌘O you will see the following dialog displaying JavaScript files. As you type the list will filter to only the files that match what you are typing. You can arrow up or down to narrow the selection even more and then click "enter" to open that script file.

TextMate's ⇧⌘T "Go to Symbol" Feature

Now, if the "Go to Script" feature wasn't enough, there is also the "Go to Function", which is similar to the "Go to Symbol" feature of TextMate using ⇧⌘T or ⌘R in Sublime Text 2.

Once you are in a JavaScript file you can press ⇧⌘O to bring up the "Go to Function" dialog. This works in a very similar way as the "Go to Script" dialog as we saw previously, but this time instead of looking for files, it helps you track down functions! Navigating through your JavaScript files to find a specific function has now become a breeze!

Dock Dev Tools to the Right

The last feature that stood out to me as really cool, was the new setting to "Dock to right". Many people these days have a wide-screen monitor and having the dev tools docked at the bottom of the screen sometimes feels a little scrunched. If I have my browser maximized there is usually tons of room to the left or right of the website I am viewing.

Thankfully, with this new feature I can now choose to dock the dev tool to the right of my screen to give some breathing room for development!

Note: I undrestand some like to undock the dev tools to solve this issue, but I usually tend to like keeping them docked so this new feature is very handy for me.

In order to turn on this feature, you'll need to go into the Settings dialog. You can access this by clicking on the gear icon located at the bottom right of your dev tools. Once the dialog has been launched you should see a General section with the "Doc to right" option listed.

Conclusion

I find the the above JavaScript enhancements to the dev tools have really made navigating through scripts to be much more enjoyable. If you have noticed any other new features that I have missed please let me know. They keep cropping up all the time... which is AWESOME!

If you have Chrome Canary then you can start using the above features right way, otherwise they should make it in a Beta or Stable build in the near future.

Find the jQuery Bug #4: Animations Gone Wild

2012-02-13T00:01:00.000-06:00

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.

You can view other posts in this series...

Find the jQuery Bug #1: Chicken or the Egg

Find the jQuery Bug #2: Point of No Return

Find the jQuery Bug #3: Give Me Truth

The Desired Feature

We want to take the following HTML and build a simple jQuery menu that will reveal sub-menus when you hover over each item.

The Buggy Code

The following code snippet is our first attempt at solving the problem, but there is a subtle error. Do you see it?

If you start playing with the menu it appears that it works as intended, but as you continue to use the menu an annoying problem raises its ugly head. If you move your mouse really quick from right to left over the menu you'll see the problem :(

The Underlying Problem

If you played with the example above you'll have noticed that if you interact with the menu really quickly side-to-side then the animations continue over and over and over again, even after you've moved off the menu completely!

At the root of the problem is an animation queue that has gotten out of hand. jQuery keeps an internal queue to help it know what animation to run next. When you take an element and call one of the animation methods ( .animate(), .slideDown(), .slideUp(), .slideToggle(), etc... ) what really happens is that effect gets added to the default "fx" animation queue that is attached to the element. As each effects completes jQuery will move on to the next effect in the queue until all animations are complete.

The magic that we need is to somehow interrupt the queue system. Thankfully, there is an API just for that and in the next section we will show how to use it.

A Solution

The solution to fix this problem is really simple and straightforward. In the words of Bob Newhart, we need the animation to STOP IT!

Of course, we can tell our program to STOP IT!, but they are usually to stubborn to heed to our warnings. Thankfully there is a method we can utilize in jQuery coincidentally called .stop() which we can use to solve our animation problem!

The following is the documentation from jQuery's website about the .stop() method that we will use.

.stop( [clearQueue] [, jumpToEnd] )

version added: 1.2
clearQueue - A Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd - A Boolean indicating whether to complete the current animation immediately. Defaults to false.

.stop( [queue] [, clearQueue] [, jumpToEnd] )

version added: 1.7
queue - The name of the queue in which to stop animations.
clear - QueueA Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd - A Boolean indicating whether to complete the current animation immediately. Defaults to false.

--http://api.jquery.com/stop/

As you see above there are 2 "overloaded" methods both with optional parameters. The important parameters that we will use to fix our code snippet are the clearQueue and jumpToEnd booleans. In order to get rid of the huge queue of animations on an element and complete whatever animation that was started all we need to do is pass true as both parameters... $element.stop( true, true )!

If you test out the code again below you'll notice that it works just as before, but this time the bug we found when moving our mouse quickly back and forth across the menu is now gone!

A Fancy Solution

If we wanted to get fancy, we could choose to update the animation easing algorithm. An easing algorithm is a mathematical equation that defines the animation path of an effect. Wow, that was a mouth full. Let's try that again, but this time with something visual. The following demo, from jQuery UI, is a great visualization of the various easing algorithms. Click the image to launch the jQuery UI Easing Demo and then click on each square to view the easing in action. I think my favorite is "easeOutBounce" ;)

With these easing options in mind, let's update our example above and use "easeOutBounce" instead of the default "swing" option that is default in jQuery.

NOTE: "The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear."

-- http://api.jquery.com/slideDown

You might notice that I also added some other parameters to the .slideDown() and .slideUp() methods. All of the parameters are optional, but if we want we can provide our own values such as a duration, easing algorithm, and a callback to invoke when the animation is complete. In the code above, I trigger a custom event depending if the sub-menu was opened or closed and then I delegate to those events using the .on() method on line 19.

.slideDown( [duration] [, easing] [, callback] )
version added: 1.4.3
.slideUp( [duration] [, easing] [, callback] )
version added: 1.4.3
duration - A string or number determining how long the animation will run.
easing - A string indicating which easing function to use for the transition.
callback - A function to call once the animation is complete.

-- http://api.jquery.com/slideDown/ & http://api.jquery.com/slideUp/

Now you can test the changes we made. The effect may be too adventurous for most production business web applications, but the one I chose is just one of the many easing algorithms provided by jQuery UI that you can pick from. Also, if you are a math wizard you can come up with your algorithm!

Refactoring the Code

If you are anything like me you probably noticed a code smell. Much of the code from the previous examples looks very redundant. Let's take a stab at refactoring the code somewhat to reduce the "duplicated code" smell and made the code DRY (don't repeat yourself).

If you look through your vast code base, And notice code repeated here and there.
You might consider refactoring soon, Or you'll experience maintenance despair!

Previously we were passing two functions to the .hover() method. The 1st function parameter was to handle mouseover events and the other was to handle mouseout events. Thankfully, there is another "overloaded" version of .hover() that takes just 1 function parameter. This 1 function will be invoked on both mouseover events and mouseout events!

You may also notice that we are using a different method to actually perform the sub-menu animation. jQuery includes a .slideToggle() method that will either .slideDown() or .slideUp() depending on the state of the element.

The last thing to take into consideration is how to know which custom event to trigger. Previously I knew which event to trigger because opened was associated with .slideDown() and closed was associated with .slideUp(), but what about now? Thankfully that is easily solved by looking at the event object passed to the hover event handler. The event object has a type property which tells what type of event was originally fired. So, I can do something like this... e.type === "mouseover" ? "opened" : "closed" -- http://jsfiddle.net/ujsfH/

Conclusion

The key concept to remember here is that jQuery has an internal animation queue that you should be aware of. If you need to clear out that queue you can use the .stop() method. Also, you can modify the duration of animation, change the animation easing algorithm, and also respond to an event when the animation is complete.

Things we didn't cover in this post are how to create your own queue, how to create your own easing algorithm, how to modify the default animation duration, and several other concerns.

Until next time...

NOTE: The CSS I used as the base for the example menu above is a modified version from a blog post on @Kriesi's website. I removed the hover styles and replaced his jQuery code with mine for this Find the jQuery Bug post.

Regular Expressions in CoffeeScript are Awesome

2012-02-08T00:05:00.002-06:00

Let's face it, regular expressions aren't for everyone. It takes a special breed of developer to actually enjoy writing regular expressions. Although I enjoy them, the developer that comes after me may find that they are cryptic and hard to read. And yes, sometimes it takes me a little bit to decipher through an old regular expression that I wrote a while ago.

Take for example, the following regular expression. Can you tell what it is doing? If so... then great, but what about the developers you work with?

One of the very cool things I like about CoffeeScript is that you can annotate your regular expressions! The following snippet of CoffeeScript compiles down to the equivalent JavaScript as seen in the above code sample. Yay ;)

Which code sample would you rather maintain? And more importantly which one would your co-worker be more likely to understand?

NOTE: The above email regular expression is very naive in it's logic. I based the above snippet from a Nettuts+ post entitled, 8 Regular Expressions You Should Know. There are much more comprehensive email regular expressions available on the internet, but I used the above one to show the value of annotation.

As a side note, some tools that I find helpful are Grant Skinner's Online RegExr Tool and I sometimes get inspiration for regular expressions at RegExLib.com. What tools or resources do you use for regular expressions?

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

2012-02-06T01:00:00.002-06:00

Introduction

I've seen quite a bit of confusion from developers about what the real differences are between the jQuery .bind(), .live(), .delegate(), and .on() methods and when they should be used.

If you want, you can jump to the TL;DR section and get a high-level overview what this article is about.

Before we dive into the ins and outs of these methods, let's start with some common HTML markup that we'll be using as we write sample jQuery code.

Using the Bind Method

The .bind() method registers the type of event and an event handler directly to the DOM element in question. This method has been around the longest and in its day it was a nice abstraction around the various cross-browser issues that existed. This method is still very handy when wiring-up event handlers, but there are various performance concerns as are listed below.

The .bind() method will attach the event handler to all of the anchors that are matched! That is not good. Not only is that expensive to implicitly iterate over all of those items to attach an event handler, but it is also wasteful since it is the same event handler over and over again.

Pros

This methods works across various browser implementations.
It is pretty easy and quick to wire-up event handlers.
The shorthand methods (.click(), .hover(), etc...) make it even easier to wire-up event handlers.
For a simple ID selector, using .bind() not only wires-up quickly, but also when the event fires the event handler is invoked almost immediately.

Cons

The method attaches the same event handler to every matched element in the selection.
It doesn't work for elements added dynamically that matches the same selector.
There are performance concerns when dealing with a large selection.
The attachment is done upfront which can have performance issues on page load.

Using the Live Method

The .live() method uses the concept of event delegation to perform its so called "magic". The way you call .live() looks just like how you might call .bind(), which is very convenient. However, under the covers this method works much different. The .live method attaches the event handler to the root level document along with the associated selector and event information. By registering this information on the document it allows one event handler to be used for all events that have bubbled (a.k.a. delegated, propagated) up to it. Once an event has bubbled up to the document jQuery looks at the selector/event metadata to determine which handler it should invoke, if any. This extra work has some impact on performance at the point of user interaction, but the initial register process is fairly speedy.

The good thing about this code as compared to the .bind() example above is that it is only attaching the event handler once to the document instead of multiple times. This not only is faster, but less wasteful, however, there are many problems with using this method and they are outlined below.

Pros

There is only one event handler registered instead of the numerous event handlers that could have been registered with the .bind() method.
The upgrade path from .bind() to .live() is very small. All you have to do is replace "bind" to "live".
Elements dynamically added to the DOM that match the selector magically work because the real information was registered on the document.
You can wire-up event handlers before the document ready event helping you utilize possibly unused time.

Cons

This method is deprecated as of jQuery 1.7 and you should start phasing out its use in your code.
Chaining is not properly supported using this method.
The selection that is made is basically thrown away since it is only used to register the event handler on the document.
Using event.stopPropagation() is no longer helpful because the event has already delegated all the way up to the document.
Since all selector/event information is attached to the document once an event does occur jQuery has match through its large metadata store using the matchesSelector method to determine which event handler to invoke, if any.
Your events always delegate all the way up to the document. This can affect performance if your DOM is deep.

Using the Delegate Method

The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the selector/event information to the document, you can choose where it is anchored. Just like the .live() method, this technique uses event delegation to work correctly.

If you skipped over the explanation of the .live() method you might want to go back up and read it as I described some of the internal logic that happen.

The .delegate() method is very powerful. The above code will attach the event handler to the unordered list ("#members") along with the selector/event information. This is much more efficient than the .live() method that always attaches the information to the document. In addition a lot of other problematic issues were resolved by introducing the .delegate() method. See the following outline for a detailed list.

Pros

You have the option of choosing where to attach the selector/event information.
The selection isn't actually performed up front, but is only used to register onto the root element.
Chaining is supported correctly.
jQuery still needs to iterate over the selector/event data to determine a match, but since you can choose where the root is the amount of data to sort through can be much smaller.
Since this technique uses event delegation, it can work with dynamically added elements to the DOM where the selectors match.
As long as you delegate against the document you can also wire-up event handlers before the document ready event.

Cons

Changing from a .bind() to a .delegate() method isn't as straight forward.
There is still the concern of jQuery having to figure out, using the matchesSelector method, which event handler to invoke based on the selector/event information stored at the root element. However, the metadata stored at the root element should be considerably smaller compared to using the .live() method.

Using the On Method

Did you know that the jQuery .bind(), .live(), and .delegate() methods are just one line pass throughs to the new jQuery 1.7 .on() method? The same is true of the .unbind(), .die(), and .undelegate() methods. The following code snippet is taken from the jQuery 1.7.1 codebase in GitHub...

With that in mind, the usage of the new .on() method looks something like the following...

You'll notice that depending how I call the .on() method changes how it performs. You can consider the .on() method as being "overloaded" with different signatures, which in turn changes how the event binding is wired-up. The .on method bring a lot of consistency to the API and hopefully makes things slightly less confusing.

Pros

Brings uniformity to the various event binding methods.
Simplifies the jQuery code base and removes one level of redirection since the .bind(), .live(), and .delegate() call this method under the covers.
Still provides all the goodness of the .delegate() method, while still providing support for the .bind() method if you need it.

Cons

Brings confusion because the behavior changes based on how you call the method.

Conclusion (tl;dr)

If you have been confused about the various different types of event binding methods then don't worry, there has been a lot of history and evolvement in the API over time. There are many people that view these methods as magic, but once you uncover some of how they work it will help you understand how to better ode inside of your projects.

The biggest take aways from this article are that...

Using the .bind() method is very costly as it attaches the same event handler to every item matched in your selector.
You should stop using the .live() method as it is deprecated and has a lot of problems with it.
The .delegate() method gives a lot of "bang for your buck" when dealing with performance and reacting to dynamically added elements.
That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it.
The new direction is to use the new .on method. Get familiar with the syntax and start using it on all your jQuery 1.7+ projects.

Were there any pros or cons that you would have added to the above lists? Have you found yourself using the .delegate method more recently? What are you thoughts on the new .on method? Leave your thoughts in the comments. Thanks!

How to Access jQuery's Internal Data

2012-01-31T00:00:00.000-06:00

As you may or may not be aware as of jQuery 1.7 the whole event system was rewritten from the ground up. The codebase is much faster and with the new .on() method there is a lot of uniformity to wiring up event handlers.

One used to be able to access the internal events data and investiate what events are registered on any given element, but recently this internal information has been hidden based on the following ticket...

"Ticket #8921: jQuery Private Data Should Stay Private

It seems that the "private" data is ALWAYS stored on the .data(jQuery.expando) - For "objects" where the deletion of the object should also delete its caches this makes some sense.

In the realm of nodes however, I think we should store these "private" members in a separate (private) cache so that they don't pollute the object returned by $.fn.data()"

--http://bugs.jquery.com/ticket/8921

Although I agree with the above change to hide the internal data, I have found having access to this information can be helpful for debugging and unit testing.

What was the new way of getting the internal jquery event object in jQuery 1.7? /cc @DamianEdwards @elijahmanor
— Aaron Powell (@slace) January 30, 2012

Thankfully, if you still need access to the internal data it is still accessible, however, you need to use a method that isn't officially documented... which means that you should be cautious about using it. I would encourage you to not use the undocumented ._data() method in production code.

You can view, run, and edit the above code sample from JSBin.

On the plus side, if you access the old .data() method with "events" as a parameter that will retrieve the internal data containing events and event handlers.

As a side note, if you are looking for events attached using the .live() or .delegate() methods then you will need to look at either the document element or whatever element you delegated against.

Update: Rick Waldron informed me on twitter that the jQuery Core team plans on creating a supported plugin to access the internal data that jQuery maintains. This would be a much better solution than using the above undocumented ._data() method because undocumented methods are also unsupported methods ;) I only use the ._data() method for debugging or testing. You should try to avoid using it in any of your production code for this reason.

Find the jQuery Bug #3: Give Me Truth

2012-01-30T00:14:00.000-06:00

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.

You can view other posts in this series...

Find the jQuery Bug #1: Chicken or the Egg

Find the jQuery Bug #2: Point of No Return

The Desired Feature

We want to take the following HTML div and build a simple popover module that uses the jQuery UI Dialog widget.

The Buggy Code

The intent of the following code snippet is to verify that the div being used in the modal dialog exists in the DOM and that it has not been already initialized. We have an init method that should initialize the widget and then an open method that should launch the dialog. The code snippet has some problems. Do you see them?

You can view, run, and edit the above code sample from JSBin.

When we run the code, things seem pretty much like what we expected. The widget seems to have been initialized and then opens as expected. We don't actually see the error visually, but there is a problem hidden in the init() code. If you debug through the code you'll notice something odd when calling init() again. We put in checks to verify for the existence of the DOM element and that it hasn't been initialized yet, right? Well, that is where the problem lies. Do you see the problem now?

The Underlying Problem

At the root of the problem is how we are testing for truth! Both the ways we are checking for existence and initial state are flawed.

"jQuery( selector [, context] ) Returns: jQuery
Description: Accepts a string containing a CSS selector which is then used to match a set of elements." --http://api.jquery.com/jquery

The check for existence is incorrect, because just checking the result of $( "dialog-modal" ) doesn't get you anywhere. Where does it get you? It always evaluates as true because a call to $( selector ) returns the jQuery object and based on our truthy/falsey rules an object is always truthy! What does this mean? Well, it means the code to initialize the DOM element would execute even if it didn't exist at all!

".not( selector ) Returns: jQuery
Description: Remove elements from the set of matched elements." --http://api.jquery.com/not

In a similar fashion the check we were making for the initial state of the DOM element is incorrect. The intent was to check if the element did not have a particular class (.ui-dialog-content), which is added by jQuery UI when it initializes the dialog widget. If we take a look at the documentation for the .not() method we'll see that it too returns the jQuery object! The purpose of the method is to filter down the matches by removing elements that match the selector provided. So, we run into the same problem as above where we are always evaluating as truthy!

A Solution

The solution to fix these problems are really simple and straightforward. All you really need to do is to check how many items where matched by a jQuery selection and to use the .is() method instead of the .not() method.

You can view, run, and edit the above code sample from JSBin.

If you run the above code again you'll notice that the console.log message only shows up the first time the .init() method is called.

Conclusion

The key concept to remember here is to realize that testing against the jQuery object will always evaluate as true. As shown above it is easy to adjust your code accordingly.

There are other more advanced techniques that can be used for initialization as well. I'd encourage you to look into Doug Neiner's (@dougneiner) Contextual jQuery series (Part 1 and Part 2) that he gave at the jQuery Boston 2010 and 2011 Conferences. In particular he gave some really interesting just-in-time initialization techniques in the 2nd talk. I highly encourage you viewing these if you haven't already.

Until next time...

Having Fun with JavaScript and Skype Emoticons

2012-01-27T00:09:00.000-06:00

I was chatting with Jim Cowart (@ifandelse) on Skype today about jQuery. He pasted in a snippet of code and Skype translated part of it into one of it's emoticons. He almost immediately updated the chat message to fix the issue, but it got me starting to think... and that can be very dangerous.

I thought to myself that it would be fun to create a program that intentionally utilize Skype emoticons. The following screenshot is the result of the program I put together. It is a restaurant where you can listen, eat, and drink ;)

As you can tell, it is a silly little program. The code for the above screenshot can be found below. Some of the icons I used are secret emoticons that you can lookup.

If you'd like to come up with your own Skype-enabled JavaScript program, then I'd like to see it. Share it in the comments. Have fun!

Find the jQuery Bug #2: Point of No Return

2012-01-25T08:09:00.000-06:00

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.

You can view my other post in this series...

Find the jQuery Bug #1: Chicken or the Egg

The Desired Feature

We want to take the following HTML unordered list and build a JavaScript function that will determine if a specific value is present.

The Buggy Code

The following code snippets is our first attempt at solving the problem, but there is a subtle error. Do you see it?

You can view, run, and edit the above code sample from JSBin.

The results that we expected were false, true, true, true, false, but instead the output in the console is false, false, false, false, false.

The Underlying Problem

At the root of the problem is the special jQuery .each() method we are using. The .each() method is a very handy way to iterate over the jQuery collection, however there is a special meaning to return false within a .each() method.

"We can stop the loop from within the callback function by returning false." --http://api.jquery.com/each

Upon further examination of the code it even makes further sense why it wouldn't work. Most of us are familiar that a return statement exists the current function, but in this case we aren't invoking the function... jQuery is! So, jQuery has control over what happens when you exit your function prematurely and it recognizes return false to mean something special.

A Solution

The solution to fix this problem is really simple and straightforward. All you really need to do is to introduce another variable hasNumber. If the number was found, then set the hasNumber variable to true and then return false; to exit the .each() method.

You can view, run, and edit the above code sample from JSBin.

If you test out the code again below you'll notice that now that we are getting the expected output of false, true, true, true, false.

An Alternate Solution

An alternate way to solve this problem would be to use another technique completely. In the following example we will use the jQuery.grep method. The jQuery.grep method is defined as the following:

"Finds the elements of an array which satisfy a filter function. The original array is not affected." --http://api.jquery.com/jquery.grep/

You can view, run, and edit the above code sample from JSBin.

Although the code looks shorter, it is less performant than the previous solution. Can you tell why? The code is not exiting once the number has been found, but instead goes through each array item and executes the callback function. We get the correct answer, but for a price.

Conclusion

The key concept to remember here is to be aware of the special mean of return false; inside of a jQuery .each() method to exit the loop. Even if you have never made this mistake before, maybe it has opened up your eyes to the fact you can exit out of a .each() method!

Until next time...

Daily and Weekly Front-End Dev Resources

2012-01-19T07:50:00.000-06:00

If you are anything like me, you love and thrive on what is new in the front-end world. What is the latest in HTML5 buzz, what is the newest library that will solve all my needs, what is that new jQuery plugin that will make my client drool, and things of the like.

I used to scour the internet for things like that myself and share them on Twitter and elsewhere, but I've recently changed focus so that I can blog more frequently. My desire for tech news has not diminished in the least, I am still a junkie for new articles and libraries.

So, what am I to do? Well, that is easy. There are many fine resources that have been around for years and there are also some that have cropped up recently that should provide just the right amount of geek influx to quench my thirst and I hope yours as well.

Daily Technology News

Twitter

@JavaScriptDaily by Peter Cooper (@peterc)
@JSCentral by Béla Varga (@netzzwerg) and Axel Rauschmayer (@rauschma)
@JSGoodies by Peter van der Zee (@kuvos)
@DailyJS by Alex Young (@alex_young)
@FunctionSource by Dion Almaer (@dalmaer)
@EchoJS by Frederic Cambus (@fcambus)

Blogs

DailyJS: A JavaScript Blog by Alex Young (@alex_young)
The Morning Brew: A Daily .NET Software Development Link Blog by Chris Alcock (@calcock)
The Morning Dew: Your Source for .NET Development Resources by Alvin Ashcraft (@alvinashcraft)
Function Source: Your Source for Developer News by Dion Almaer (@dalmaer)
EchoJS: A HackerNews-like site dedicated to JavaScript and Front-end News by Frederic Cambus (@fcambus)

Weekly Technology News

Newsletters

JavaScript Weekly by Peter Cooper (@peterc)
HTML5 Weekly by Peter Cooper (@peterc)
Web Design Weekly by Jake Bresnehan (@jake_bresnehan)

Blogs

JsMag News Roundup by David Calhoun (@franksvalli)

Podcasts

The JavaScript Show by Peter Cooper (@peterc) and Jason Seifer (@jseifer)
JavaScript Jabber: Your Prototype for Great Code hosted by AJ O’Neal (@coolaj86), Charles Max Wood (@cmaxw), Jamison Dance (@jergason), Peter Cooper (@peterc), and Yehuda Katz (@wycats)
ShopTalk Show: A live web design and development podcast by Chris Coyier (@chris_coyier) and Dave Rupert (@davatron5000).

[Cross posted from Fresh Brewed Code.]

Bye Bye Tech Tweets

2012-01-16T07:52:00.001-06:00

As you probably noticed I haven't been blogging as much as I used to. With church, family, work, and tech tweets it seems my free time has dwindled down to nothing.

I want to refocus on blogging again for this year. Not only do I enjoy sharing the things that I learn, but by doing so I tend to learn the topic even better than I did in the first place. Also, many of my conference presentations are based off blog posts that I've authored previously.

So, something needs to give for me to have extra time for blogging and giving up Tech Tweets is what I've chosen. Giving up Tech Tweets wasn't an easy decision for me because I've lived and breathed it for probably the past 5 years or so. It is now in my nature to scour the internet for the latest in front-end news. In order for this to work like I want to I'll need to resist the urge to research everything and share it immediately. I'll need to now depend on the others who are currently doing the research.

Thankfully there are many other avenues to get similar information that I've been providing. Many great resources have cropped up recently that allow you to get front-end news, articles, and library information in a daily or weekly manner. I'll be blogging about what resources I recommend you to follow in the near future. These are the same resources that I'll be using to keep myself up to speed on what is going on.

I am not giving up Twitter or anything. I still will be active on social media, but any tech tweets you see from me will probably be retweets from other resources or just interesting things that I came across that day. Who knows, I might get pulled back into the whole tech tweeting again, but even if I do I'd like to keep it somewhat unstructured.

Thank you all for following me and for regularly retweeting my tech tweets. I do appreciate it. My habbits are changing, but hopfully the posts will be of value to you as well. I have planned out numerous jQuery and jQuery Mobile posts that should keep me busy for quite some time.

In addition to a renewed interest in blogging I will also focus on posting some content to the newly created Fresh Brewed Code website where many of my friends from the Nashville area are now blogging. I don't have any posts there yet, but expect some very soon!

devLink: Extend your jQuery Application with AmplifyJS

2011-08-22T23:28:00.001-05:00

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...

Find the jQuery Bug #1: Chicken or the Egg

2011-08-10T00:12:00.006-05:00

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+

2011-08-08T08:14:00.004-05:00

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

2011-08-02T02:49:00.005-05:00

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.

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

Book Review: JavaScript Enlightenment

2011-07-28T23:03:00.003-05:00

This week jQuery team member Cody Lindley self-published the book entitled JavaScript Enlightenment.

If you recall he wrote another great resource a year or so ago called jQuery Enlightenment.

As you've probably heard me talk about before, it is important for a jQuery developer to really know the JavaScript language. Thankfully Cody has written this book to aid in this learning process.

Who is the Target Audience of this Book?

The book targets developers who are already JavaScript Library User (jQuery, dojo, YUI, etc...) and seeks to deepen their knowledge and transform them into a JavaScript Developer.

The audience isn't intended for beginner JavaScript developers. There is an assumption that you somewhat familiar with using a JavaScript library. If you are a developer that wants to deepen your understanding of JavaScript then this book is for you!

If you do consider yourself a beginner JavaScript or jQuery developer then you might consider going over to appendTo's new learning site where they have free videos and exercises to guide you through learning these concepts.

What does the book Cover?

The book covers JavaScript 1.5 (also known as ECMA-262 Edition 3), which is the most prevelant version of JavaScript. The book won't be covering some of the new ECMAScript 5 features, but Cody hints that another book might be coming out the in the future to cover some of these new features that are making themselves into current browsers.

What to Expect in the book?

It is Cody's style to have lots of code examples in his book. The great thing about this is that he provides a jsFiddle link to the code so that you can pull it up in your browser and play around with it until the concept sinks in. I really enjoyed this in his last book (jQuery Enlightenment) and I'm also loving it in this book.

Cody even goes to explain that the words in the book describing the code should be secondary to the code itself. The examples are there to help you understand what is going on, which is great!

High Level Overview of Contents?

Cody's book has 15 main chapters and each of them are broken up into much smaller pieces, but to spare you the who table of contents I've just listed out the top level chapters for you to look over below...

Chapter 01 - JavaScript Object
Chapter 02 - Working with Objects and Properties
Chapter 03 - Object()
Chapter 04 - Function()
Chapter 05 - The Head/Global Object
Chapter 06 - The this Keyword
Chapter 07 - Scope & Closures
Chapter 08 - Prototype Property
Chapter 09 - Array()
Chapter 10 - String()
Chapter 11 - Number()
Chapter 12 - Boolean
Chapter 13 - Null
Chapter 14 - Undefined
Chapter 15 - Math Function

You can actually preview all of Chapter 6 - The this Keyword on the Nettuts website if you are curious as to what some of the content looks like in the book.

Should I Get this Book?

There is a lot of great material in this book. Most of book is coding examples which means that you can get through it fairly quickly. The book is able to fit in a ton of information in less than 150 pages! I highly recommend this book. There is a lot of value jam packed in this book for a price tag of $15.