jQuery 1.0.1

Posted on by

The first post-1.0 release is now ready – and (as you would probably expect) it’s a bug fix release. I’ve been working on fixing up some of the most pressing 1.0 bugs during the past couple days and I think it’s ready to go. So, without further ado – here’s jQuery 1.0.1:

I definitely recommend that you upgrade to this release since it’ll only help make your development go easier (I expect that the next few point releases will be rather feature-lite). Here’s what’s been fixed in this release:

There’s a couple more, less-pressing, bug fixes waiting in the queue, with a bunch of nice enhancements coming up soon (especially for the AJAX functions, thanks to Will Jessup). The next move is going to be putting the finishing touches on the API documentation and moving proj.jquery.com to jquery.com.

As always, if you spot any bugs, please feel free to post them to the bug tracker (it helps me to keep tabs on everything, and keep it organized).

Update: I’ve applied two hot fixes to this update, both of which fix big problems with this bug update. That’s what I get for releasing this at some awful time in the morning. Please make sure you get the latest source from this page.

jQuery 1.0

Posted on by

I’d like to take this opportunity to announce the brand new jQuery 1.0! A lot of work has gone into this release. A lot of bugs fixed, a ton of new features, and a complete overhaul of how the jQuery development process is run.

In reality, this release is so large, it’s going to take a couple days to release it (this includes a new version of the jQuery web site). So bare with us as we make the transition over to full release. There’s some kinks that’ll have to be worked out (namely, finalizing the new documentation) but it’s all in the pipeline and will be ready within the next couple days.

For now, here are some relevant links to get you started:

If you want to build your own copies of jQuery, you can check it out of Subversion and build it from the command line. You can get the latest jQuery by doing:

svn co svn://jquery.com/home/jquery/src/jquery

There’s so much more to come. I’ll be doing a post every day this week detailing some aspect of jQuery 1.0 along with some screencasts demonstrating what you can do with all the new code. Please, if you spot any bugs, file them in the bug tracker:

I’d like to thank everyone who made this release possible. It’s been a lot of work, but the journey is only just beginning. I can’t wait to delve into some of the very exciting advances that we have planned. Happy Coding!

Update: Here’s a fun fact. jQuery 1.0 has been released nearly one year after it was first conceived as a post in my weblog. Funny how those things work.

Update: The very cool Visual jQuery site has also released a preview version of the new documentation in its sharp style. The final release of their updated docs will be coming in the next couple days.

Why jQuery’s Philosophy is Better

Posted on by

There have been a whole bunch of posts on this blog about the differences in code size between jQuery and Prototype. The basic premise of those posts (which I agree with) is that because of the way jQuery code is structured, all sorts of typical Javascript design patterns are rendered shorter and simpler in the framework when compared with Prototype.

For the longest time, I was a confessed Prototype junkie. I discovered the framework when I started doing Rails work, and for Rails developers, there is very little alternative. Prototype, in all its ugliness, is baked into Rails, and it’s very difficult to give up the productivity gains Rails provides by coding Javascript by hand. Going further on a tangent, that’s why I started working on jQuery on Rails, which aims to allow Rails developers to use jQuery as a drop-in replacement for Prototype.

But back to the purpose of this post, there’s something more fundamentally different about jQuery’s programming sense than just its code size. In fact, the difference in sensibilities is very similar to the difference in sensibilities between Java and Ruby, so it’s ironic that the Rails community has embraced Prototype so completely.

Let’s take a look at some code comparisons. First up, adding some arbitrary HTML after a particular node.

In Prototype:

new Insertion.After('myId', 'Arbitrary HTML');

In jQuery:

$('#myId').after('Arbitrary HTML');

Now, we haven’t done much by way of reducing code clutter (although jQuery’s is cleaner), but there is a fundamental difference in the way that Prototype and jQuery each approach the problem.

Prototype creates a series of monolithic classes that each encapsulate some functionality. Developers then pass in an id, and some other parameters, and the class does what it’s supposed to do. Very much like the Java way of encapsulating functionality (like the Math class, for instance). NOTE: That’s not to say that Java couldn’t do things this way.

jQuery approaches the problem in a fundamentally different way. It sees sets of HTML nodes as objects to pass messages to (more like the traditional Ruby way). So instead of having a separate class that adds text after an HTML node, jQuery glues the functionality onto the jQuery object, which is returned by the $ function. By contrast, Prototype’s $ function returns a vanilla DOM node.

Prototype attempted to achieve similar functionality with its $$ method added in the latest RC of the framework, but there’s a fundamental difference. While Prototype’s $$ returns an array of DOM Elements, jQuery’s $ is the fundamental underpinning of the entire framework. Virtually all jQuery functions bind to the jQuery object, which is returned by the $ method.
The benefits of the jQuery way are highly visible:

  • Chainability. Because jQuery objects have functionality glued onto them, they return other jQuery objects, which the developer can then pass additional messages to. The trivial example on the jQuery website is $(“p.surprise”).addClass(“ohmy”).show(“slow”);
  • Use of CSS selectors and XPath operators. Because jQuery passes messages to objects, it can (and has) implement additional selector functionality into the $ method. The methods that are glued onto jQuery objects just see an array-like object that holds a series of DOM elements. It doesn’t care how we got them. So plugin developers can add additional parsers into the $ method, or glue additional functions onto the jQuery object rather easily.
  • Which brings us to plugin development. The jQuery way is very conducive to plugin development. It’s quite easy to add functionality that takes advantage of the jQuery object, and jQuery plugins are usually much shorter than their counterparts. jQuery Plugins
  • Automatic looping. jQuery methods are required to automatically loop through all DOM elements in the array, and apply the desired method. So $(expression).after(‘some HTML’) transparently adds the HTML after every single element returned by the expression. $(‘p’).after(‘some HTML’) will add ‘some HTML’ after every <p> on the page, for instance. Personally, I find the elimination of iteration in my code (in most cases) to be one of the top practical, day-to-day benefits of using jQuery.
  • Builds on itself. As jQuery has matured, it’s become easier to build plugins on top of the existing architecture. Because all jQuery functions automatically loop, using existing jQuery functions means that annoying iteration is all but gone.

There’s more, but the thread that runs through all of the benefits comes out of the very meticulous way that John Resig has made the jQuery object/array accept passed messages, rather than build various monolithic functionality blocks, each of which must be built from scratch.

Some other examples:
AJAX Updater in Prototype:

new Ajax.Updater('placeholder', url, { method: 'get', parameters: par });

AJAX Updater In jQuery:

$('#placeholder').load(url + par);

Note: This example doesn’t deal with the obvious iteration benefits we get if we wanted to load the response into every <p> object, for instance.

Adding a class to an element in Prototype:

Element.addClassName('element', 'className');

Adding a class to an element in jQuery:

$('#element').addClass('className');

Adding a class to a group of elements in Prototype:

$$('.element').each(function(node) {
Element.addClassName(node, 'className');
}

Adding a class to a group of elements in jQuery:

$('.element').addClass('className');

That last one is the clearest example of the difference in methodology. Because jQuery is passing messages to jQuery objects, the code is barely changed. jQuery doesn’t care that we’re now adding a class to a group of objects instead of one object; the underlying code is the same (add the class to the set of elements in the object). Prototype, on the other hand, requires an iterator.

And as your code becomes more complex, jQuery’s scales easily, while nested loops become the norm in frameworks like Prototype.

[UPDATE] An astute reader (Mislav) pointed out that Prototype does indeed do just a bit of what jQuery does. Prototype seems to bind the Element class to DOM Elements, allowing things like $(‘myElement’).hide(), and such. However, it only applies to the Element module, and seems to only work on single DOM elements. Binding the Elements module is cool, but it’s more an afterthought than the way jQuery makes it a fundamental design decision.

jQuery Boston

Posted on by

If there are any jQuery users here in Boston, MA – I’m going to be giving a presentation about jQuery on the 23rd for the local Drupal group. I’m not sure if it’ll be recorded and/or transcribed – but I’ll be sure to throw any slides or examples online after its done.

More info about the event can be found on the Drupal website.

Also, I’d love to be able to do a jQuery meetup sometime, maybe in association with a big conference (OSCON, AJAX Experience?) But that’s for another post.

YShout – Real-time Chat with jQuery

Posted on by

View of the Chat Area

Yuri Vishnevsky has just released a new AJAX chat application that makes great use of jQuery. This application allows you to embed a chat area into a section of your web site and have it update in real-time as users chat with each other. It’s really slick and works quite nicely.

YShout includes a bunch of nice features:
– Unicode Support
– An administration area
– Flood control
– and a history viewer

You can view demo of it in action on the project page.

YShout Admin Area

Probably the most interesting part, from the perspective as a jQuery user, is that this isn’t the first version of his application – it’s the third – and is the result of a complete re-write from Prototype to jQuery. Yuri stated that the reason for this switch was that “the file size coupled with the method chaining” together with the “intuitive syntax”.

If you like this application, you should Digg Yuri’s article, as I’m sure a lot of other webmasters would love to put this on their web sites.

Your own Digg Spy with jQuery

Posted on by

Digg-like Spy with jQuery

Remy Sharp has just released a new jQuery plugin which allows you to emulate the, very cool, Spy feature of Digg.

For those who are unfamiliar, the Spy feature of Digg has stories fade in, in real time, as people vote, moderate, or comment, on them. It’s a very slick feature for checking the pulse on the Digg community.

Remy has taken that Digg Spy concept and created a jQuery plugin that automatically pulls new items (using AJAX) from the server and gracefully fades them in. Additionally, it fades out the old items that don’t matter as much, any more.

As proof of how easy it is to use this, another Digg user has already taken the plugin and implemented it on his own site, which is quite impressive given the short amount of time that this has been out.

If you like this plugin, you should Digg Remy’s article, as I’m sure a lot of Digg users would really like their own Spy to play around with.

ThickBox 2.0, Running on jQuery

Posted on by

ThickBox, a Lightbox-like modal window framework for the browser written by Cody Lindley that runs on top of the jQuery library, has been given a bit of an upgrade. The new 2.0 release adds greybox functionality (iFramed content), image set support (similar to the Lightbox 2.0 functionality), and is now running on jQuery 1.0 among other things.

You might be asking yourself:

“Why wouldn’t I just use Lightbox 2.0 if ThickBox 2.0 does the same thing?”

The answer is simple. Uncompressed, the jQuery library and the ThickBox add-on script come in at only 51kb (and at just 27kb if jQuery is compressed), whereas the Lightbox Javascript files alone are over 100kb combined. Think about the amount of bandwidth saved and the increased loading time for the end user.

Won’t someone please think of the children end user?

Another advantage that ThickBox has over Lightbox is that images are automatically resized if the browser window is too small to display them full size without scrolling. Also, clicking outside of the modal window closes it in ThickBox, whereas in Lightbox, a “close” button must be clicked to remove it from the screen.

Visit the ThickBox demo site for instructions on installation, demos of different techniques (including iFramed content and AJAX content), and support information.

Currently supported and tested browsers include Internet Explorer 6 and 7, Firefox 1.5+ on both OS X and Windows, Opera 9+ and Safari 1.3.2 and 2.0.3., though it should work on any modern browser. ThickBox is protected by the MIT License.

jQuery Suckerfish Menu

Posted on by

I think we all have heard of or used Suckerfish CSS Menu’s before, written by Pattrick Griffiths and Dan Webb for A List Apart. If not, it’s a cool way to make drop down menu’s using standards based semantic HTML and CSS. Unfortunately, with IE still dominating the browser marketplace we still need a way to handle the hover state in IE. To do that we need a little bit of JavaScript to attach mouseover and mouseout events to HTML elements.

Myles Angell decided to rewrite Suckerfish’s JavaScript with jQuery. Myles uses jQuery’s Basic Effects to show and hide the submenus and jQuery’s BaseStyle Base module methods to highlight the current moused over menu item. Pretty slick.

Check out some of Myles other experiments with jQuery. For the jQuery beginner these are good examples to start out with. The treeview is another experiment that caught my eye.

3d Universe with jQuery

Posted on by

Universe Screenshot

Will Jessup has just release a great demo of what’s possible with jQuery (and Javascript in general): A 3d model of the universe. Try moving your mouse vertically around the screen to see the universe at different angles, horizontally to make it rotate faster. All the images are courtesy of NASA.

Will used a lot of techniques to really simulate the 3d experience correctly:

  • He adjusts the opacity and z-index of the images based upon the depth of the element.
  • The height and width are also adjusted dynamically – but are all laid out using fontSize and EMs, allowing you to also simulate depth-of-field with text (in addition to static images or elements).
  • The background moves based upon the speed, and direction, of rotation.

Also, take a look at his code for specific caching optimizations used (like saving a reference to a single jQuery object and calling it over and over, rather than re-querying on every rotation).

Be sure to digg this up as it’s a really great example of the power of jQuery.