Web Dev .NET

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.

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)

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)

[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!

Hanselminutes #256: JavaScript & jQuery: Moving beyond Alert()

2011-03-16T00:48:00.002-05:00

Dave Ward ( @encosia ) and I were honored to be guests on Hanselminutes #256: JavaScript & jQuery: Moving beyond Alert() while we were at the MVP Summit in Redmond, WA.

Listen to Podcast

Our conversations revolved around trying to encourage developers to take their JavaScript knowledge to the next level.

Many developers view JavaScript as a necessary evil and possibly a toy language. Part of this tarnished view of JavaScript may have stemmed from the olden days when you had to manually navigate through the various DOM inconsistencies yourself. Thankfully today modern JavaScript libraries (such as jQuery, Dojo, MooTools, YUI, etc) have abstracted away many of those horrible cross-browser inconsistencies in the DOM.

Many developers don't take the necessary effort to learn JavaScript appropriately. What typically happens is that a developer will try to code JavaScript in the same way they would C#, Java, etc... In many cases, you can be successful with this approach, however, the more JavaScript you write you will inevitably find yourself uncovering strange bugs.

Lint Tools
These are some tools that can help you identify some common problems in your JavaScript

JSLint.com by Douglas Crockford *Based on the concepts from the JavaScript: The Good Parts book
JSHint.com by Anton Kovalyov ( @antonkovalyov ) *A JavaScript Community fork of JSLint

Script Loaders
A way to load your scripts asynchronously so that your pages can load faster

LAB.js by Kyle Simpson ( @getify )
RequireJS by James Burke ( @jrburke )
DeferJS by Boris Moore
YepNope by Alex Sexton ( @slexaxton ) and Ralph Holzmann ( @ralphholzmann )
etc... ( spreadsheet comparing many script loaders )

HTML5 Libraries
Detects features of your browser so that you can use it or pollyfill with JavaScript

Modernizr by Paul Irish ( @paul_irish ), Faruk Ateş ( @KuraFire ), and Alex Sexton ( @slexaxton ) *Note: The YepNope script loader works really well with this library. Check out Progressively Enhancing HTML5 Forms by Chris Coyier ( @chriscoyier )
List of HTML5 Cross Browser Pollyfills

Books
These are some good books to introduce you to JavaScript, show you what you what parts are good, and also good patterns that you should consider.

Eloquent JavaScript: A Modern Introduction to Programming by Marijn Haverbeke ( @marijnjh ) *Free
JavaScript: The Good Parts by Douglas Crockford
JavaScript Patterns by Stoyan Stefanov

Articles
These articles are targeted for C# developers that want to understand JavaScript better.d

Videos
These are some great videos that I have learned a lot from. If you have time I strongly encourage you sit back and enjoy.

Crockford on JavaScript video series on Yahoo!
10 Things I Learned from the jQuery Source by Paul Irish ( @paul_irish )
11 More Things I Learned from the jQuery Source by Paul Irish ( @paul_irish )

{Dev:unplugged} HTML5 Contest

2011-03-15T00:39:00.002-05:00

Contest

In addition to launching IE9 yesterday Microsoft has recently launched a new HTML5 competition called {Dev:unplugged}.

The goal is to encourage innovation and push the barrier as to what HTML5 and related technologies can create.

The contest is split between 3 main categories: Games, Music, and Innovation. To help get you started, Microsoft is even providing assets, recommending resources, and referring to various code samples.

Judges

As a side note, I am honored to be one of the judges for this contest alongside some extremely talented leaders in this field:

Andrew Dupont (@AndrewDupont)
Dion Almaer (@dalmaer)
Brad Neuberg (@bradneuberg)
Allison House (@allison_house)
Rob Ford (@fwa)
Ben Galbraith
Robert Nyman (@robertnyman)
Dominic Espinosa (@mrs_moustache)
Naveen Selvadurai (@naveen)
Grant Skinner (@gskinner)
Remy Sharp (@rem)

Prizes

To encourage participation there are over $40,000 worth in prizes that will be given away with the Grand Prize winner receiving $9,000 in cash and a trip to the Future of Web Apps Converence in Las Vegas.

Rules

The following are the rules of the competitions. You can find more details on their website.

No Plugins: The submission must stick to HTML/CSS/JS on the client-side (no restrictions on the server-side)
Same Markup: The submission has to work across IE9 RC, Chrome Beta and Firefox Beta.
Making the Web Native: The submission must be amazing! We will be keeping an eye out for submissions that push the envelope and blur the line between a web app and a native app.

Get Coding

So, what are you waiting for? Shoot for the stars and start developing the next innovation on the web! You have until May 8, 2011 to submit your web application to be included in the content. Sign up today!

Dynamically Appending Elements to jQuery Mobile ListView

2011-02-24T07:31:00.008-06:00

I've been developing with jQuery Mobile the past several weeks and the application I'm working on has a listing page where I am retrieving the results via $.ajax and then dynamically appending the results to the current page. I started out with a page very much like the following...

<div data-role="page" id="hackerNews">
    
  <div data-role="header" data-backbtn="false">
    <a id="btnRefresh" href="#" data-icon="refresh">Refresh</a>
    <h1>Hacker News  
      <span id="itemCount" class="count ui-btn-up-c ui-btn-corner-all">0</span>
    </h1>
  </div>
    

  <div id="content" data-role="content">
    <ol class="newsList" data-role="listview"></ol>
  </div>
        
</div>

<script id="newsItem" type="text/x-jquery-tmpl">
  <li data-messageId="${id}" class="newsItem">
    <h3><a href="${url}">${title}</a></h3>
    <p class="subItem"><strong>${postedAgo} by ${postedBy} </strong></p>
    <div class="ui-li-aside">
      <p><strong>${points} points</strong></p>
      <p>${commentCount} comments</p>
    </div>
  </li>
</script>

...but when I tried to dynamically render the ListView into the content area the browser ended up rendering something like the screenshot below on the left, where I had expected it to render something like the screenshot on the right.

In the following example, I will pull the most recent items from Hacker News and display them inside of a jQuery Mobile ListView.

After some digging and researching, it turns out the difference between the left screenshot and the right is just one line of code. All you have to do is to call the $.listview() widget off of your list jQuery object... so, something like $( "#myUnorderedList" ).listview();.

Make sure to notice line #61, which is the main difference between the screenshot above!

var hackerNews = (function( $, undefined ) {
  var pub = {};

  pub.init = function() {
    //Refresh news when btnRefresh is clicked
    $( "#btnRefresh" ).live( "click", 
      function() {
        pub.getAndDisplayNews();
      });
        
    //When news updated, display items in list
    amplify.subscribe( "news.updated", 
      function( news ) {
        displayNews( news );
      });

    //When news updated, then set item count
    amplify.subscribe( "news.updated", 
      function( news ) {
        $("#itemCount").text( news.items.length );
      });    
  };
    
  pub.getAndDisplayNews = function() {
    //Starting loading animation
    $.mobile.pageLoading();    

    //Get news and add success callback using then
    getNews().then( function() {
      //Stop loading animation on success
      $.mobile.pageLoading( true );    
    });    
  };
    
  function getNews() {
    //Get news via ajax and return jqXhr
    return $.ajax({
      url: "http://api.ihackernews.com/" + 
         "page?format=jsonp",
      dataType: "jsonp"
    }).then( function( data, textStatus, jqXHR ) {
      //Publish that news has been updated & allow
      //the 2 subscribers to update the UI content
      amplify.publish( "news.updated", data );
    });
  }
    
  function displayNews( news ) {
    var newsList = $( "#hackerNews" )
      .find( ".newsList" );
        
    //Empty current list
    newsList.empty();
        
    //Use template to create items & add to list
    $( "#newsItem" ).tmpl( news.items )
      .appendTo( newsList );
        
    //Call listview jQuery UI Widget after adding 
    //items to the list for correct rendering
    newsList.listview( "refresh" );    
  }
    
  return pub;
}( jQuery ));

hackerNews.init();
hackerNews.getAndDisplayNews();

I am utilizing some of the new jQuery 1.5 Deferred syntax and also the publish/subscribe methods from the Amplify Library released by appendTo recently. I'm also using the Revealing Module Pattern to protect the global scope.

View Demo Edit Demo

jQuery.Deferred to Tell When Certain iframes Are Loaded

2011-02-22T07:35:00.008-06:00

Since jQuery 1.5 came out I've been intrigued about the new jQuery.Deferred feature, but hadn't used it until now. You might think that Deferreds are isolated to only jQuery.ajax requests, but they are much more flexible than that. jQuery.ajax utilize defferds, but you can also use them to define your own set of promises.

Eric Hynds wrote an awesome blog post entitled Using Deferreds in jQuery 1.5 describing the inns and outs of jQuery Deferreds in much more detail, but I thought I'd share a use case that I found helpful in a recent project.

I'm working on a project where there are multiple hidden iframes loaded on the page (don't ask why LOL) and I needed a way to tell if they were all loaded. Almost immediately I thought about using the new Deferred feature!

(function($) {

function iFrameLoaded( id, src ) {
   var deferred = $.Deferred(),
      iframe = $( "" ).attr({
         "id": id,
         "src": src
      });

   iframe.load( deferred.resolve );
   iframe.appendTo( "body" );

   deferred.done(function() {
      console.log( "iframe loaded: " + id );
   });

   return deferred.promise();
}

$.when(
   iFrameLoaded("jQuery", "http://jquery.com"),
   iFrameLoaded("appendTo", "http://appendto.com"))
.then( function() {
   console.log( "Both iframes loaded" );
});
    
}(jQuery));

The above code creates a new jQuery.Deferred object (line 4) and iframe element. Once the iframe is loaded, we tell the deferred object to resolve itself (line 10). At that point we define our own event handler to respond to when the deferred is done (line 13). In this case we just print to the console that "iframe loaded". Then we return the deferred promise (line 17) so that we can use it in the new jQuery.when method.

Next we call the jQuery.when method (line 20) and pass all the promises we want fulfilled before we proceed. Once all the iframes are loaded, then the then method will execute (line 23) printing out "Both iframes loaded" to the console.

View Demo Edit Demo

Note: This same concept can also be applied to a set of images loading and many other applications.

ASPInsiders Twitter List

2011-02-17T00:26:00.005-06:00

The ASPInsiders is a select group of international professionals in ASP.NET technologies (Web Forms, MVC, Web Pages, etc...)

Jason Gaylord has assembled a list of ASPInsiders into a new ASPInsiders Twitter List that you can follow to keep track of the latest in ASP.NET technologies.

"The ASPInsiders team spends countless hours answering questions and giving guidance to other ASP.NET developers, as well as providing feedback and diretion on new features for future ASP.NET releases. Their work and contributions are invaluable."

Scott Guthrie

Product Unit Manger, Web Platforms, Microsoft Corporation

ASPInsiders Twitter List

Note: The ASPInsiders group is different from the Microsoft MVP award. Many of the ASPInsiders either are or have been a Microsoft MVP as well, but there are also many that have not. There is not a 1:1 correlations between the two groups.

Free Julian on JavaScript Series

2011-02-16T03:49:00.003-06:00

If you are new to JavaScript or just don't know it as well as you should, then I encourage you to watch the Julian on JavaScript Series on DevExpress.

Julian M Bucknall wrote an awesome series a while back called JavaScript for C# Developers that I remember going through that helped me become a better JavaScript developer.

Julian has planned out 4 sessions thus far, and has completed one of them already. If you can't make the live webinar, then the sessions will be available to view online afterwards.

Julian on JavaScript I (07-Feb-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it's a C-like language, so what can go wrong? Julian starts off a series of webinars to teach you the basics of writing JavaScript. No experience is necessary apart from an understanding of C#. This webinar will concentrate on types.

Watch Online

Julian on JavaScript II (28-Feb-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it's a C-like language, so what can go wrong? Julian continues a series of webinars that teach you the basics of writing JavaScript. This webinar will concentrate on objects and assumes you've watched part I.

Register Online

Julian on JavaScript III (07-Mar-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it's a C-like language, so what can go wrong? Julian continues a series of webinars that teach you the basics of writing JavaScript. This webinar will concentrate on functions and assumes you've watched parts I and II.

Register Online

Julian on JavaScript IV (28-Mar-2011)

Writing JavaScript when you already know C# can seem like a piece of cake: after all it's a C-like language, so what can go wrong? Julian continues a series of webinars that teach you the basics of writing JavaScript. This webinar will dive deep into writing good JavaScript and assumes you've watched the previous three parts.

Register Online

Web Dev .NET

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

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

Mix11 Video: Good JavaScript Habits for C# Developers

20 Mix11 HTML5 and JavaScript Sessions

Filling the HTML5 Gaps with Polyfills and Shims

Webinar: Amplify JavaScript Library with Scott González

JSConsole Remote Debugging and JSBin Live Preview

JSConsole: Remote Debugging

JSBin: Live Preview Pane

Book Review: Eloquent JavaScript

Eloquent JavaScript: A Modern Introduction to Programming

Table of Contents

An Enjoyable Read

Funny Code Examples

Memorable Quotes

Summary

Hanselminutes #256: JavaScript & jQuery: Moving beyond Alert()

{Dev:unplugged} HTML5 Contest

Contest

Judges

Prizes

Rules

Get Coding

Dynamically Appending Elements to jQuery Mobile ListView

jQuery.Deferred to Tell When Certain iframes Are Loaded

ASPInsiders Twitter List

Free Julian on JavaScript Series

& Many, many, more...