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.

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.

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.

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, 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.

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.

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.

Aptana latest release of their Web 2.0 IDE software now includes the ability to import jQuery’s JavaScript library into a web project. The project sets itself up with an included sample page that was created by Cody Lindley that demonstrates how to use jQuery.

“You can now quickly access Code Assist on your favorite AJAX JavaScript libraries by creating an AJAX library project. Currently, Aptana supports creating projects based on the AFLAX, Dojo, JQuery, MochiKit, Prototype, Rico, script.aculo.us, and Yahoo UI libraries.” —Aptana Weblog

Aptana is a IDE for developing Web 2.0 web sites quickly and easily. The key is to see what you are doing as you do it in the preview pane. Aptana requires JRE v1.4.2 and can be installed on Windows, Mac and Linux. It is also available as a Eclipse plugin with other IDEs to come.

“Aptana is a robust Integrated Development Environment (IDE) designed specifically for web developers who use (X)HTML, CSS, and JavaScript. Aptana includes the following features:

• Full Code Assist on all Core and DOM JavaScript functionality, as well as your own JavaScript functions
• Code structure outliner for (X)HTML, CSS, and JavaScript (even all at the same time)
• Errors and warnings across all 3 languages (code validation)
• Ability to extend the IDE via JavaScript with new ‘Actions’ and new ‘Views’
• Support for Mac (Universal Binary) and Windows with Linux coming soon
• Free and open source ” — Aptana FAQ

John Resig has been working with Aptana to improve the jQuery docs such that they’ll work better with their autocomplete api, so look for that in the near future.

If there’s anything that’s apparent from watching the jQuery mailing list and jQuery-related blog posts on Technorati, it’s that there’s a huge international audience for the library.

As I’ve been working on the new version of the web site (to be released together with the upcoming version 1.0 of jQuery) I’ve had a number of offers from users to translate documentation and blog posts into their native language. I cannot express how pleased I am by this.

I have two questions for all the jQuery users out there: If you are fluent in language other than English, would you be willing to help translate alternate versions of blog posts or documentation? If you are, please respond to this post so that I can get a feel for everyone who is interested and what languages are represented.

Secondly, if you speak a language other than English (but may, or may not, be able to help translate), please let me know what language you would like to see the jQuery site in:

Thank you, everyone, for your input – it’s greatly appreciated.

(by the way, the Internationalization module for Drupal is very cool)

jQuery provides an extremely versatile DOM query mechanism. If you’re wondering what’s happening under the covers, and if there are less- and more-performant ways to formulate your query . . . the answer is YES. In many cases you can help jQuery by specifying a tag name, i.e.:

$("div.class").show()

is faster than:

$(".class").show()

. . . with the difference being that the query engine can narrow by tag name first. It’s smart like that.

So, you shoud be in the habit of specifying a tag name. The only exception: getting by ID. If you’re getting by ID, do not include a tag name, or anything else besides the ID selector.

Note that the second example here (with the class selector only) is perfectly valid, and if you need to query for multiple element types, by all means go ahead — jQuery will still return the correct results.

Just today Technorati pushed a new redesign live. Amongst other changes, it now uses jQuery as its primary Javascript code base. This is huge news as another big web site chooses jQuery as their Javascript library of choice.

If I had to guess, as to why they chose it, I’d say that they appreciated the bandwidth savings that jQuery afforded them, while still providing a number of useful usability improvements. I’ll see if I can hunt down who was in charge of the Javascript for the redesign to get their actual thoughts.