Web Dev .NET

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 you can jump to the end for the Conclusion.

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.

Getting Started with the AmplifyJS NuGet Package in Visual Studio

2011-07-25T08:04:00.002-05:00

Last week I packaged appendTo's AmplifyJS Library and published it to the central NuGet server for use in your Visual Studio projects.

The package contains...

An unminifed version of AmplifyJS for development use
A minified version of AmplifyJS for production use
A VSDOC version of AmplifyJS that enables intellisense support within Visual Studio

What is AmplifyJS?

In case you aren't familiar with what AmplifyJS is, here is an excerpt from the website...

AmplifyJS is a set of components designed to solve common web application problems with a simplistic API. AmplifyJS solves the following problems:

Ajax Request Management

amplify.request provides a clean and elegant request abstraction for all types of data, even allowing for transformation prior to consumption.

Client Side Component Communication

amplify.publish/subscribe provides a clean, performant API for component to component communication.

Client Side Browser & Mobile Device Storage

amplify.store takes the confusion out of HTML5 localStorage. It doesn't get simpler than using amplify.store(key, data)! It even works flawlessly on mobile devices.

Installation

In order to install the NuGet package in your Visual Studio project all you need to do is type the following command into the "Package Manager Console"

Once you type the above command into the "Package Manager Console" then all of the appropriate files will be downloaded to your project to support AmplifyJS.

If the command line isn't your thing and you prefer a Graphical User Interface, then you can install AmplifyJS as well by searching for "AmplifyJS" in the "Add Library Package Reference" dialog.

Referencing and Using AmplifyJS

Now that you've installed AmplifyJS all that is left is to reference the script file that was added to your Scripts folder and start using it. It is considered best practice to add your scripts to the bottom of your webpage for best overall performance. Once you do this you can start using the library right away as shown in the following code snippet.

The code that I am showing the above screenshot is a very simple example of what can be accomplished with AmplifyJS. Look at the following code and see how the 3 components work together (Publish/Subscript, Request, and Store).

You can play around with the above code inside the following jsFiddle. Click the "+" sign to launch a full editor so you can tweak with the code yourself. Try commenting out the 2nd definition of the mocked "getTweets" request. You should see real data from Twitter being returned instead of mock data.

If are interested to see how AmplifyJS might help your application then you might check out an article entitled Extending Your jQuery Application with AmpilfyJS that is hosted on Microsof't's Script Junkie website.

There is so much more you can do with the AmplifyJS library. Feel free to check out the official AmplifyJS Documentation and if you need support or more information check out the AmplifyJS Community page.

JavaScript & jQuery on Yet Another Podcast

2011-07-20T06:47:00.000-05:00

Recently Jessie Liberty, Senior Developer-Community Evangelist for Microsoft, asked to interview me on his Yet Another Podcast podcast. I was honored to be a guest on his 41st show. It was very easy and enjoyable to talk with Jesse and discuss some of the things I've been excited about.

You can listen to the podcast by downloading the mp3 or subscribing via iTunes or Zune.

Some of the things that Jesse and I talked about were...

How I got started into the world of JavaScript and jQuery
An overview of my Mix presentation entitled Good JavaScript Habits for C# Developers
My involvement into social media (Twitter & Google+)
Some resources I recommend for developers getting into JavaScript and jQuery

appendTo’s new Training Site (free self paced training with screencasts & exercises)
JavaScript: The Good Parts by Douglas Crockford
Crockford on JavaScript video series on Yahoo!
10 Things I Learned from Looking at the jQuery Source by Paul Irish
11 More Things I Learned from Looking at the jQuery Source by Paul Irish

As it turns out both Jesse Liberty and I will both be speaking at the devLINK conference coming up in Tennessee ( August 17-19 ). If you are able to make it to the conference, then we'd love to meet you.

filterByData jQuery Plugin: Select by HTML5 Data Attr Value

2011-07-19T00:05:00.010-05:00

I've been using HTML5 data attributes more and more lately and have been finding it slightly awkward when I need to select element based on their data.

I find myself writing the following code snippet more than once and I just doesn't feel right to me.

I initially tweeting about my thoughts on this syntax and mentioned that I wished a better API existed. Instead of wishing, I figured the best route would be to figure something out on my own.

I ended up writing a jQuery plugin and then after talking with Doug Neiner (a jQuery team member) it morphed into the following plugin...

I want to thank Paul Giberson for recommending to use the ternary operator which has the same behavior, but minifies to a much smaller output.

I wrote some unit tests for the plugin and you can view them here...

I also wanted to give a shout out to Dan Heberden (another jQuery team member) who saw my tweet and wrote a similar plugin to solve the same issue. Dan took a slightly different approach and performs a find and filter at the same time, where as my plugin only filters the initial selection.

Google+ Invite Form

2011-07-18T08:01:00.002-05:00

If you don't already have a Google+ account I would be happy to invite you. I've been finding Google+ to be much more conversational than Twitter as of recent.

I made the initial mistake by of letting people reply to me on Twitter for Google+ invites, but that turned into flood of unmanageable tweets and actually made the invitation process very time consuming and manual.

I eventually got smart and created a Google Form (see below) to help manage the information necessary for the invitation process. Since I have created macros to do most of the work for me, the overhead is considerably small.

What do you have to do to get on?

Do you have to tweet? No
Do you have to follow me on twitter? No
Do you have to add a comment to this blog? No

All you have to do is fill out the following form and I'll invite people in groups throughout the day.

I ask for a twitter handle so that I can tweet you after I invite you. It isn't necessary, but if you provide it I'll send you a public tweet saying I've sent your invitation out.

I look forward to seeing you on Google+ in the near future if you aren't already!

As far as I know in order to get on Google+ your email address needs to be tied to a Google Profile. Please provide that below.

<p>&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Loading...&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;</p>

jQCon: Front-end Prototyping & Unit Testing with Mocking

2011-04-21T01:20:00.010-05:00

Right after speaking at the Mix11 conference in Las Vegas, Nevada I flew to the jQuery Conference in San Francisco, California to present my next talk.

If you were able to attend my talk in person I would appreciate if you could give me some feedback on SpeakerRate. Thanks in advance! Unfortunately, the session was not recorded at the conference, but I plan to record the material soon and make the session available for to you to watch.

For this talk I focused on some prototyping and unit testing tools to help web developers quickly build their front-end while not depending on the back-end. Here is the abstract for the session:

Prototyping and Unit Testing with Mockjax, mockJSON, and Amplify

The front-end and back-end of your application inevitably progress at different speeds. In order for each layer to develop independently it is optimal if the front-end piece can work regardless of the back-end, which is where the Mockjax plugin or the Amplify Request component comes in. These tools can intercept and simulate ajax requests made with jQuery with minimal effort and impact to your code. Another tool that works well with these tools is mockJSON which provides a random data templating feature. This can be very handy when you want to mock a JSON response from a AJAX call, but instead of manually building the response you can build a template to do it for you.

As you are developing, Mockjax or Amplify Request can also be used to help Unit Test your front-end code. You can setup a static mock responses to your requests and then Unit Test your Ajax success and fail event handlers.

At the end of the presentation I went through a demo showing the various types of prototype and unit testing techniques you can utilize using Mockjax, mockJSON, and Amplify. The source code for all of the examples I presented can be found on my GitHub account.

The demonstration code goes through the following steps (they are outlined in the index.html comments):

Use a local JSON file with contacts and have $.getJSON refer to that endpoint
Update URL to use the real endpoint and use Mockjax to intercept and return the contacts
Use mockJSON and Mockjax to return a random set of contacts based on a template
Use Amplify Request and return an array of mock contacts (this part was mentioned, but not demonstrated)
Uses Amplify Request and mockJSON to return an random array of contacts*
Updates Amplify Request Definition to pull contacts from Whitepages instead*
Pulls out Amplify Request decoder and type to allow reuse for later requests*

* No code changes were made to the main application. The only changes made were to the amplify.request.define statement.

View Slides Download Code

Mix11 Video: Good JavaScript Habits for C# Developers

2011-04-20T10:58:00.000-05:00

If you were able to watch my presentation (either in person or the above video) please consider rating my talk on SpeakerRate and providing a comment with your feedback. Thank you.

Thanks to everyone who voted my talk, I was able to present again at Mix again this year. In my presentation I reviewed some common problems that C# developers tend to make when moving to the JavaScript language. The languages look very similar, but they are very much different and knowing these differences is key!

You can view the recorded session above. The conference was jam packed with great sessions and many times it was difficult to pick which one to attend. Fortunately, all the sessions were recorded and Mix did a great job about publishing the videos only a few days after recording.

Throughout the presentation I list several resources that you might want to dig into and research for yourself.

Slides and Articles

I have hosted the slides from the video. I utilized an HTML5 Presentation tool and the slides are best viewed using either Google Chrome or Firefox.
The article series this video was based on can be found on Enterprise jQuery

Tools

JSLint.com by Douglas Crockford
JSHint.com (a fork of JSLing supported and maintained by the JavaScript developer community) by Anton Kovalyov

Books

JavaScript: The Good Parts by Douglas Crockford
JavaScript Patterns by Stoyan Stefanov

Articles

Video

Crockford on JavaScript video series on Yahoo!

20 Mix11 HTML5 and JavaScript Sessions

2011-03-28T00:06:00.003-05:00

This year I will be attending the Microsoft Mix Conference again in Las Vegas (April 12-14 2011). There were a lot of great sessions last year and there appear to be many more scheduled for this year.

I have listed 20 sessions (in alphabetical order) that I hope to attend if the schedule permits, otherwise I'll just catch the videos that will be posted shortly after they are presented.

In addition to these sessions I'm also looking forward to the Future of the Web keynotes by Scott Guthrie, Dean Hachamovitch, Joe Belfiore.

If you are already going or plan to attend after seeing these great sessions, then I hope to see you there! It should be another great conference! See http://live.visitmix.com/mix11 for more details...

5 Things You Need To Know To Start Using <video> and <audio> Today
Nigel Parker

Come along to this session to get an overview of the new video and audio tags from the HTML5 specification. Discover how to use them to play media in modern browsers and on mobile devices. Learn the most advanced techniques and best practices, including encoding optimizations, custom skinnable players, full screen workarounds, seeking settings and fallback scenarios for legacy browsers.
50 Performance Tricks to Make Your HTML5 Web Sites Faster
Jason Weber

Learn how you can make your sites faster directly from the Internet Explorer Performance Team. These are the same guys who brought you GPU accelerated graphics and compiled JavaScript with Internet Explorer 9, and they’re going to share their favorite 50 best practices for web developers. This session will provide an inside look into browser performance, discuss why common web best practices are important, and then go deep into how to get the most from new HTML5 capabilities including Canvas, Audio, Video, SVG, local storage, and more.
Building Business Centric Application in JavaScript
Deepesh Mohnani

Building end-to-end data-intensive JavaScript applications has never been easier. In this session, we will talk about tools that let you focus on business logic, without having you worry about plumbing and infrastructure, making your development process more productive. Attendees will learn about the latest investments that are being made to simplify development of business-centric applications, bringing rich data and visualization to your jQuery client using WCF and WCF DomainServices.
Data in an HTML5 World
Asad Khan

Come and learn about ‘datajs’. datajs is a new cross-browser JavaScript library that enables better data-centric web application by leveraging HTML5 browser features and modern protocols such as OData. It's designed to be small, fast, and provide functionality for structured queries, data modification, and interaction with various cloud services, including Windows Azure.
Deep Dive Into HTML5 <canvas>
Jatinder Mann

If you’ve seen the demos for Internet Explorer 9’s hardware accelerated graphics, you are probably excited to learn the details of HTML5 Canvas. With all major browsers supporting HTML5 Canvas, a scriptable 2D drawing context, Canvas is quickly becoming the natural choice for graphics on the web. In this session, you will learn advanced Canvas concepts (including the origin-clean security and the Canvas Drawing Model), understand when to use Canvas versus SVG and get a deeper look at how the Internet Explorer team solved interoperability issues as we implemented the specification. You will learn to build HTML5 Canvas websites through best practices and lots of code samples.
Designer and Developer: A Case for the Hybrid
Jeff Croft

Should designers code? Or is is okay for one to specialize in visual design and expect others to build their vision? As we get farther and farther away from the days of the "webmaster," and become an industry of specialists, are we losing some of the beauty, efficiency, and innovation that can be found at the point where design and development intersect? Jeff Croft, hybrid designer and developer, makes the case that the best web products will always be created by designers who understand the building blocks of the web: the code.
Filling the HTML5 Gaps with Polyfills and Shims
Rey Bango

Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring older browsers render your web pages as expected? This is where polyfills and shims come in. In the session, you’ll learn how to use specially crafted JavaScript and CSS code that emulate HTML5 features so that you can take advantage of HTML5 today without breaking your sites in older browsers.
The Future of HTML5
Giorgio Sardo

We love HTML5 so much that we want it to actually work – in an interoperable, predictable manner across all browsers. In this session you will learn the current status of HTML5 and the Open Web Platform and what will take to bring it to a Recommendation. You will also preview the next emerging standards and understand Microsoft implementation approach through prototypes. Finally ride the DeLorean at 88mph and discover some of the work being done by Microsoft with the W3C on what will lead into HTML6.
Going Mobile with Your Site on Internet Explorer 9 and Windows Phone 7
Joe Marini

The mobile Web is here, it’s huge, and your business can’t afford to ignore it. Mobile users have come to expect their favorite Web sites to give them a great mobile experience – otherwise, they find new favorite sites that do. In this session, Joe Marini, Principal Program Manager for Internet Explorer on Windows Phone will take you through the design and experience principles you need to consider when creating your mobile Web presence, teach you about the exciting new HTML5 capabilities that Internet Explorer 9 on Windows Phone 7 will support, and show you how to give your sites the next-generation features you need to engage your users on their smartphones.
Good JavaScript Habits for C# Developers
Elijah Manor

It seems that far too many people come to jQuery thinking that their previous knowledge with object-oriented languages like C# or Java will help them be successful at client-side scripting. In many cases, you can be successful with this approach, however, the more JavaScript you write you will inevitably find yourself uncovering strange bugs because you didn't take time to learn JavaScript properly. This session is targeted for developers that use jQuery, but haven’t invested adequate time to learn some of the foundational JavaScript concepts that differ from C#. If you would like to avoid some of these common mistakes when bringing your existing expertise to JavaScript, then please join me as I try to explain some of the differences.
HTML5 with ASP.NET
Mads Kristensen

This talk is all about code. Whether you are building a new website using ASP.NET or maintaining an existing one, you’ll leave the talk ready and able to utilize HTML5 on ASP.NET. We’ll look at what HTML5 offers modern application developers and how you can code HTML5 with ASP.NET WebForms or ASP.NET MVC today and tomorrow.
JavaScript Panel
Luke Hoban, Allen Wirfs-Brock, Tomasz Janczuk and Doug Crockford

JavaScript is one of the most widely used general purpose functional, dynamic and prototype-based object-oriented programming languages on the web with considerable amounts of JS even running outside of the browser in other hosts. The language has matured and is currently in version 5 (officially, this is known as EcmaScript 5). Where did it come from? What problems was it initially designed to solve? How has it managed to scale to so many different usage scenarios? What are these scenarios, exactly? What does EC5 add to the language and what specific problems do these new additions solve? What's missing from the language? How will it evolve? How general purpose is JavaScript, really? The folks who will be on stage can answer all of these questions, but most importantly, YOU will drive the panel with your own questions. What do you want to know? What's the most burning question you have in your mind related to JavaScript? Answers await.
Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET
Steve Sanderson

Steve Sanderson delivers KnockoutJS in this lightening talk. Learn how the Knockout library builds on advanced jQuery and JavaScript techniques to make even the most complex data-filled HTML forms a breeze. We’ll see jQuery, jQuery templating, JSON and live data banding applied wto the MVVM pattern with Knockout, combined with ASP.NET to produce results that need to be seen to believed.
Making Better Web Apps For Today's Browsers
James Mickens

Microsoft Research is working on several cool ways to make web applications faster and more robust. In this session, James Mickens will describe two projects that leverage JavaScript to improve web programs running on unmodified, commodity browsers. His talk will focus on Silo, a system that exploits DOM storage and AJAX to make web pages load more quickly. He’ll also describe Mugshot, a framework which allows developers to capture and replay JavaScript application bugs that users encounter in the wild. Neither project requires users to install a plugin or otherwise change their browser.
Modernizing Your Website: SVG meets HTML5
Jennifer Yu

Scalable Vector Graphics (SVG) integrates with the HTML5 and CSS features to unleash some of the most beautiful experiences on the web. In this session we’ll explain what is SVG and when you should consider using it instead of other alternatives. We’ll show you how to create content that is interoperable across browsers and devices. We’ll cover common pitfalls to avoid, as well as look at the best SVG tools and libraries available to developers. We’ll walk through code samples to learn first-hand how you can bring a high quality, interactive SVG experience to your customers.
Node.js, Ruby, and Python in Windows Azure: A Look at What’s Possible
Steve Marx

Most people using Windows Azure are using ASP.NET and PHP, but Windows Azure is much more general than that. Steve Marx will show how he built a few web apps (including his blog) that run on Windows Azure and don’t use .NET or PHP. Server-side JavaScript, Ruby, and Python will be the most prominent examples.
An Overview of the MS Web Stack of Love
Scott Hanselman

Oh yes. Building web applications on the Microsoft stack continues to evolve. There’s lots of great tools to leverage, but it can be difficult to keep up with all the options. In this technical and fast-paced session, you’ll learn from Scott Hanselman how the pieces fit together. We’ll look at ASP.NET MVC 3, MvcScaffolding, Entity Framework Code First (Magic Unicorn Edition), SQL Compact 4, jQuery and more. We’ll also see how many times Scott can say “unobtrusive” in a single talk. You’ll leave this session with a clear understanding of the technology options available on the Microsoft Web Stack. What’s changed since PDC? What direction are we doing? Let’s see what we can build in a PowerPoint-free hour with the Microsoft Web Stack of Love.
Pragmatic JavaScript, jQuery & AJAX with ASP.NET
Damian Edwards

jQuery turned the world on its ear. Do we still write JavaScript or do we just write jQuery? Damian will answer that question with new JavaScript techniques and AJAX as well as some jQuery plugin surprises up his sleeve. What are the best libraries and practices for using jQuery and JavaScript with ASP.NET? How should balanced applications be designed to make the best use of the power of the server and the power of the client?
Reactive Extensions for JavaScript (RxJS)
Bart De Smet

Nobody likes sluggish web interfaces that get stuck when interacting with servers and services. Asynchrony has become the way of life to enhance user experiences. The A in AJAX pinpoints this observation precisely. Moreover, the sheer amount of asynchronous data sources is overwhelming: stock tickers, Twitter quotes, RSS feeds, you name it. Unfortunately, the programmability story for each of those sources differs significantly, with little to no unification or compositionality. Got tired of writing cumbersome code with plenty of callbacks, tedious logic and tricky error handling? Enter the Reactive Extensions, a library to seamlessly compose all kinds of asynchronous “reactive” data streams using LINQ-style query operators, available for both .NET and JavaScript (RxJS). Come and learn how Rx will make your life as a web developer easier when dealing with the asynchronous reality of modern web programming.
The View of the World Depends on the Glasses I Wear
Thomas Lewis

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? Sitting next to HTML5 is its friend CSS3 with its support for Media Queries. Media Queries let you customize your web experience based on parameters of display, device, properties and more. If you are a designer or front-end developer, come to this session to explore the sheer brutality of CSS3 Media Queries.

Webinar: Amplify JavaScript Library with Scott González

2011-03-24T00:18:00.004-05:00

appendTo has recently launched a new JavaScript library called Amplify. The intent of the library is to help you solve common front-end problems and it is meant to "amplify" your current JavaScript library of choice (jQuery, dojo, mootools, etc).

Amplify is currently composed of three components

Publish and Subscribe: Provides a clean pub/sub API, prevents collisions between custom events and method names, and allows a priority to your messages.
Request: Sets out to make data retrieval more maintainable. It does this by separating the definition of a request from the actual implementation of requesting the data. The definition of the quest is only responsible for deciding the caching strategy, server location, data type, decoders, headers, etc. while the actual requestor code only needs to know a request ID.
Store: Handles the persistant client-storage, using standards like localStorage and sessionStorage, but falling back on non-standard implementations for older browsers.

Scott González, the lead Amplify architect, will be presenting the library in an upcoming Webinar on Thursday March 31, 2011 12:00 PM Central. You might already know Scott from his role as jQuery UI Developer Lead.

If you are interesting in joining the webinar you can sign-up from appendTo's event page.

Sign-up for Webinar

JSConsole Remote Debugging and JSBin Live Preview

2011-03-22T00:29:00.004-05:00

Remy Sharp ( @rem ) recently implemented some really awesome new features to jsconsole.com and jsbin.com that I wanted to share with you.

JSConsole: Remote Debugging

JSConsole.com is a useful tool if you want to play around with JavaScript. You can load another webpage into jsconsole, load external scripts, and then start playing around with them.

However, a really compelling feature that he has added recently is the ability to remotely debug against another browser. Think of the potential of this. You can use jsconsole and remote debug against a jQuery Mobile application or any other website on any other device for that matter!

The process is really straightforward. All you do is type :listen at the jsconsole command line and it will output a unique identifier for you to use in your web application. It even spits out the whole script tag so you can copy/paste it into the web app that you want to remote debug.

/* Example script tag outputted by the JSConsole 
   :listen command that you need to insert into 
   your web application */
<script src="http://jsconsole.com/remote.js?5BDE9731-8EBD-42A8-8D72-CB24878F09A6"></script>

Once you've pasted the script into your web app, then you'll see that a connection has been made in the jsconsole window. It will show the useragent of the browser you've just connected to.

When you are connected then you can either enter commands into the jsconsole command line to execute on the remote browser. In addition any console.logs that are invoked on the remote browser will show up in your jsconsole window!

If for some reason you'd rather not use the GUID that JSConsole generates, you can just as easily provide your own "unique identifier" such as myApplication, but you do run the risk that this might conflict with someone else's "unique identifier".

NOTE: This debugging tool is intended for debug only and not for production code.

JSBin: Live Preview Pane

Another cool new feature is the "Live Preview" pane in JSBin. Previously, you had to manually click the "Preview" button to preview the result of our JSBin, but now you can see live updates in this new pane.

All you need to do is type the following statement in your browser's console. After you've executed the statement, then JSBin will remember this option by default when you create a new JSBin.

jsbin.livePreview();

Book Review: Eloquent JavaScript

2011-03-17T00:26:00.001-05:00

Eloquent JavaScript: A Modern Introduction to Programming

During my flight to and from Seattle, WA from the MVP Summit I was able to read Eloquent JavaScript: A Modern Introduction to Programming by Marijn Haverbeke (@marijnjh). It is kind of funny to say, but for some parts of the book it almost read like a novel. Read on for more details ;)

Introduction
Basic JavaScript: Values, Variables, and Control Flow
Functions
Data Structures: Objects and Arrays
Error Handling
Functional Programming
Object-Oriented Programming
Modualarity
Regular Expressions
Web Programming: A Crash Course
The Document Object Model
Browser Events
HTTP Request

An Enjoyable Read

I enjoy technical books anyway, but this one was quite unique. Not only did it get into the nitty gritty of JavaScript, techniques, and patterns, but it also did it in a light hearted and often times hilarious way. For example, there were two stories described in the book "Aunt Emily's Cats" and "The Sad Story of the Recluse" that really stood out to me. I don't know the last time I've read a technical book and the stories have made such an impression.

Aunt Emily's Cats

Story: A story of a guy whose crazy Aunt has over 50 cats living with her and she regularly emails you to keep you up-to-date. At the end of each email she appends what cats have been born and which cats have died. You want to humor your Aunt by keeping track of the genealogy of her cats so that you can ask about her cats, their birthdays, etc…

Solution: Write an algorithm to parse all the emails the Aunt sent and build up a genealogy using JavaScript and techniques that are taught along the way.

The Sad Story of the Recluse

Story: There was a recluse living in the mountains. He didn't do much, but one day he wanted to write something, so he decided to write a technical book. Instead of writing his book in HTML he decided to make up his own Markdown-ish language that he would later convert into HTML. Unfortunately, the recluse was struck by lightening and died.

Solution: In his honor, the book guides you on how to write the program that the recluse only had dreamed.

Funny Code Examples

Don't worry, there is no lack of code in this book. In fact some of the code is downright hilarious!

In his explanation of the stack in JavaScript he shows asking the computer a really hard question that causes it to run out of space or "blow the stack"!

function chicken() {
   return egg();
}

function egg() {
   return chicken();
}

print( chicken() + " came first." );

I wish I would have thought of that. A good example and funny! LOL

Memorable Quotes

As I wrote in my margins the following quotations from his book stood out to me, so I thought I would share them with you.

"The art of programming is the skill of controlling complexity" --Page 3

"Pure functions are the things that mathematicians mean when they say "function." They always return the same value when given the same argument and do not have side effects...Generally, when something can naturally be expressed as a pure function, write it that way. You'll thank yourself later. If not, don't feel dirty for writing nonpure functions." --Page 37

"...[don't] worry about efficiency until your program is provably too slow. When it is, find out which parts are taking up the most time, and start exchanging elegance for efficiency in those parts." --Page 38

"If we build up a big string by concatenating lots of little string, new strings have to be created at every step, only to be thrown away when the next piece is concatenated to them. If, on the other hand, we store all the little strings in an array and then join them, only one big string has to be created." --Page 88

Summary

I would target this book for both a beginner and intermediate developer. As I've mentioned before, the book was pretty easy to read and in some parts quite amusing ;)

Even thought you might be tempted to skip a chapter here and there because you think you know something, I would encourage you to read it from start to end. You never what what small nuances you've been missing all these years about JavaScript.

An older version of the material can be found free online ( HTML/PDF ) and also a revised and updated version is available from Amazon ( Paperback/Kindle ).

Thanks Marijn Haverbeke for an informative and enjoyable book!

Web Dev .NET

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

Introduction

Scripts Explorer

TextMate's ⌘T "Go to File" Feature

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

Dock Dev Tools to the Right

Conclusion

Find the jQuery Bug #4: Animations Gone Wild

Introduction

The Desired Feature

The Buggy Code

The Underlying Problem

A Solution

A Fancy Solution

Refactoring the Code

Conclusion

Regular Expressions in CoffeeScript are Awesome

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

Introduction

Using the Bind Method

Using the Live Method

Using the Delegate Method

Using the On Method

Conclusion (tl;dr)

How to Access jQuery's Internal Data

Find the jQuery Bug #3: Give Me Truth

Introduction

The Desired Feature

The Buggy Code

The Underlying Problem

A Solution

Conclusion

Having Fun with JavaScript and Skype Emoticons

Find the jQuery Bug #2: Point of No Return

Introduction

The Desired Feature

The Buggy Code

The Underlying Problem

A Solution

An Alternate Solution

Conclusion

Daily and Weekly Front-End Dev Resources

Daily Technology News

Twitter

Blogs

Weekly Technology News

Newsletters

Blogs

Podcasts

Bye Bye Tech Tweets

devLink: Extend your jQuery Application with AmplifyJS

Find the jQuery Bug #1: Chicken or the Egg

Introduction

The Desired Feature

The Buggy Code

The Unexpected Result

The Underlying Problem

The Solution

Simple Example of the Same Problem

Conclusion

Top JavaScript Developers You Should Follow on Google+

7 Chrome Tips Developers & Designers May Not Know

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

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

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

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

5. The ability to inspect CSS pseudo-class selectors

6. The ability to access most features via keyboard shortcuts

7. The ability to configure settings your way

&amp; Many, many, more...

Book Review: JavaScript Enlightenment

Getting Started with the AmplifyJS NuGet Package in Visual Studio

What is AmplifyJS?

Installation

Referencing and Using AmplifyJS

JavaScript & jQuery on Yet Another Podcast

filterByData jQuery Plugin: Select by HTML5 Data Attr Value

Google+ Invite Form

jQCon: Front-end Prototyping & Unit Testing with Mocking

& Many, many, more...