My experience at FOWA Miami 2010 ended with an afternoon workshop by John Resig covering jQuery that went from the basics of jQuery for those unfamiliar into some more advanced techniques. John described jQuery as a library that is designed to simplify the interaction between HTML and JavaScript. Essentially its intended to "route around the craziness of the DOM." John wrote it back in 2005 when he was working on an application but was tired of dealing with cross-browser issues. The goal was that one day you could code your application in one browser and it would work in all browsers (it doesn't route around CSS issues but jQuery doesn't change that).

I recently wrote an article for the February edition of the Adobe Edge newsletter. This is a beginning tutorial covering creating desktop applications in Adobe AIR using HTML, JavaScript and jQuery. I focused on using tools built into Dreamweaver for this although I realize most of the readers of this blog probably use Eclipse-based tools. The audience for this article is intended to be front-end developers who already have HTML and JavaScript skills but with less emphasis on back-end coding (i.e. no ColdFusion in this one - rather I use existing API's). In this audience, I would think Dreamweaver is the dominant tool as opposed to Apatana, so I stuck with what would be comfortable for that group.

If you are looking for a introductory tutorial for building JavaScript-based AIR apps, please check out the article. It also includes some discussion of using the New York Times movie API as a means of highlighting that the Times makes a number of fantastic API's available for free. You can find the article here.

I was reading my friend Kyle Hayes post from earlier today. In it, he discusses a service called fpoimage.com that he created based upon the concept of dummyimage.com. The concept is simple: create a way to fill placement images in your layouts during the design and mock-up phase. He improved upon the concept by adding the ability to have some descriptive text in the generated image. Using a little jQuery magic, I made the API even easier than it already was.

Here's the situation: you have form with two selects containing the same options, for example, to choose your favorite sports team and a secondary favorite. In this scenario, you'd want to ensure that your user doesn't choose the same option in both select boxes. You could accomplish this simply via server-side validation but that wouldn't be very user-friendly. Instead, we can use a little jQuery magic to remove the invalid option from the other select list. In order to accomplish this task, we'll utilize some jQuery selectors and traversal methods as well as the data() method (you can see the code in action here).

In the last tutorial I covered combining selectors, adding filters, DOM traversing and more. All of this was done in the context of an extremely simple example intended to make the examples easy to understand but close enough to the real world. In this example, I am going to take it a step further by using the same techniques to build a simple tic-tac-toe game. This example gets into some more complex code but essentially the entire game logic is a matter of combining selectors, filters and DOM traversal using jQuery. You can try the game here. Granted, your opposition (i.e. the computer) isn't smart (maybe in a Part 3) but I think it serves as a great example of working with jQuery selectors.