This Week in jQuery, vol. 1

Posted on by

This is the first in what we’re hoping to be a weekly series of blog posts about what is going on in the world of jQuery. We’ll take a look at new or updated plugins, recent tutorials, and other jQuery-related news.

Book

Learning jQuery 1.3

Jonathan Chaffer and I (Karl Swedberg) just had our book Learning jQuery 1.3 published by Packt Publishing. It’s an update of the popular Learning jQuery book, which was released nearly two years ago. The new one features additions to the library (event namespacing, JSONP, new effects methods, etc.) introduced since the release of the first book, improved and extended examples, expanded plugins chapters, and a quick reference to all methods and selectors. It’s available on the Packt website and on amazon.com.

Magazine

JSMag, a promising new magazine for JavaScript developers, just published their first issue. The magazine’s goal is to provide “quality JavaScript content to educate, motivate and inspire you in your work with JavaScript.” PDF-only issues are US$4.99 each, with bulk licensing discounts starting at 30% off the individual price. Contents of the first issue include:

  • Debugging JavaScript without alert()
  • Introduction to ExtJS
  • Community News
  • Unit testing with YUI
  • What’s new in jQuery 1.3
  • Functional Programming in JavaScript

Check out a sample (PDF) from the first issue.

Plugins

Among the ever-growing selection of jQuery plugins, a few perennial favorites were updated this week. Ariel Flesler released version 1.2.7 of his LocalScroll plugin, which animates anchor navigation within a web page. Mika Tuupola updated his Jeditable plugin, for seamless in-place editing, with a number of “callback hooks” and a few bug fixes. Josh Bush’s new version of Masked Input includes bug fixes and a few feature enhancements as well.

After looking for a simple, fast and flexible grid/spreadsheet component, Michael Liebman decided to roll his own. This week he put out a call for contributors, seeking “experienced developers who can pick this up and turn it into something that everybody can use,” perhaps by converting it into a plugin. The code can be found at http://code.google.com/p/slickgrid/.

Tutorials

Steve Reynolds has posted a tutorial on how to create OS X Dashboard Widgets with jQuery. For those who want to know “What in the heck is JSONP and why would you use it?” Raymond Camden gives you the answers on the O’Reilly Inside RIA blog (hint: cross-domain ajax).

Quick Tip

We often see questions posted in the jQuery Google Group about why a jQuery script is “broken” in Internet Explorer when it works in all other tested browsers. By far the most common solution in these cases is to search for and then remove a trailing comma from the last key-value pair in an object literal:

var foo = {
  bar: 'ice cream',
  baz: 'luhrmann', // <-- get rid of that comma!
}

This can especially trip up developers who are used to other languages such as PHP, in which including the trailing comma is considered a “best practice.” JSLint is a great tool to run your JavaScript through periodically, as it does a great job of flagging these kinds of errors and warnings for you. If you use TextMate, the JavaScript Tools bundle runs a “quick JSLint” every time you save your JavaScript file and runs the full JSLint, along with a number of other conveniences, from the bundle’s menu.

Well, that’s it for this week. Be sure to check out This Week in jQuery UI, too!

13 thoughts on “This Week in jQuery, vol. 1

  1. Pingback: This Week in jQuery UI vol. 1 « jQuery UI Blog

  2. dafire on said:

    about the jslint quick tip… if you use komodo for editing your js files it does error checking in the background all the time.

  3. Jason Kuhn on said:

    An addition to the quick tip:

    If you’re writing singleton objects (typically options in jquery/ui), and you have a value that you might change frequently, such as setting the active tab temporarily, it’s a good idea to ensure that value isn’t the last in the list.

    var options = {
    selected: 2,
    orientation: ‘vertical’
    };

    this way you can easily comment it out without having the extra comma issue addressed in the quick tip above.

    this example will cause errors in some browsers:
    var options = {
    orientation: ‘vertical’,
    //selected: 2
    };

    do this instead:
    var options = {
    //selected: 2,
    orientation: ‘vertical’
    };

  4. Kevin Peno on said:

    RE the IE compatability problems. Another thing developers should do is turn on strict javascript warnings in browsers, such as firefox, during development. This will flag other issues that may also cause problems with compatability (including trailing commas last I checked), mostly in relation to syntax. That way when you test in IE, if it is not your primary development browser, you are less likely to run in to problems.

    I like the idea of this blog. I look forward to some cool tips and exposure of less popular, yet useful, plugins!

  5. Mack Hankins on said:

    I have enjoyed reading the new book. Now on chapter 5 and I have never used Jquery before. I will really enjoy this part of your blog.

  6. @Gordon: yeah, I initially had written, “considered by some to be a best practice,” but I was afraid I was getting too wordy. Anyway, at least Drupal’s coding standards document recommends it: “Note the comma at the end of the last array element; This is not a typo! It helps prevent parsing errors if another element is placed at the end of the list later.” In retrospect, I probably should have gone with the much weaker statement that the trailing comma is “perfectly valid syntax,” as noted in the PHP Manual.

  7. I previously forced my users to switch to Firefox for the web app I’ve built if only for the speed increase (lots and lots of Ajax loads to recreate a Java program). A couple of runs through Jslint found the one errant comma and IE works now too.

    Then again, I almost want to the put the comma back to continue to force Firefox in hopes they will like it and get it at home too.

  8. Howard Jess on said:

    An alternate syntax for object literals that can help avoid the trailing comma problem is nice (if you can get used to it):

    var foo = {
    bar: ‘ice cream’
    ,baz: ‘luhrmann’
    ,bongo: ‘feinman’
    }

  9. moby_dick on said:

    You can also use the following regex to find the wrong commas:

    ,[\s\r\n]*[\}\]]