deeply re-factored to improve performance and handle more edge cases. This includes event handling for click, submit, and hashchange, all of the base tag management, path management, active link class handling, etc. and better support for dialogs.

Individuals have noted some breaking changes  relative to early revs.

Data Link

jQuery already supports a data API:

This is better than attaching data directly to data nodes for various reasons, e.g. storing non-string data and improving performance. And it also avoids memory leaks - when you remove an element, jQuery removes everything. Looking towards jQuery 1.4.3, the project had to decide if they want to remove data events, and they decided to keep them and make them more useful.

The new data linking plugin, developed in conjunction with Microsoft and released yesterday, supports binding between DOM objects and elements. Binding from an object to a form element looks like this:

Whenever "first-name" or "last-name" elements are updated, the form element is updated. You can also bind in the opposite direction, so that a form element changes when you change an object.

More info on GitHub.

Templating

Templating has become a big deal in Javascript, and there's now an official jQuery templating plugin, also released yesterday, which John tells me has a good chance of being integrated into the core at some point. John told me his original Micro-Templating library was considered at one point, but the new templating is more refined.

Pre-compiling template strings is possible too:

The most interesting feature is that elements retain the data that made them - you can ask an element "what data did you come from"?

John argues that developers try to create too much abstraction between HTML and the data model. At least in the client, the DOM "is everywhere" and you should be okay with storing your data against it.

More info on GitHub.

jQuery Mobile

jQuery Mobile, under development, aims for broad mobile browser support, which also means a high regard for progressive enhancement. John explains the need to target multiple mobile browsers by focusing on BlackBerry. Why support BlackBerry? Among other things, BlackBerry mobile traffic is rising (he shows this stat of 10% growth in the past 12 months), your boss probably views your apps in it, and targeting one mobile browser is like targeting one desktop browser. (i.e. wrong.)

With most mobile browsers, there's a big problem: You can't do fixed positioning - John says it's just been added in Android 2.2, but not there in earlier Android, iPhone, etc. Some frameworks have done the complete simulation of scrolling to get around this, but it leads to massive amounts of code and doesn't work right - the subtle UI issues it causes are very noticeable.

Considering it unacceptable to simulate scrolling, jQuery Mboile always uses native scrolling. e.g. to show a select menu, it simply hides the rest of the page and makes the select list occupy the entire page.

There are toolbars available - user clicks to show and hide them, and it works nicely because it supports native scrolling. While you're scrolling, the toolbars are hidden, and they show again when the scroll action is complete (if they were cvisible before the scroll action began).

Developers can detect the various touch events:

taphold
tap
swipeleft
swiperight
swipe

Web Roundup

John finishes off with some highlights on the web in general:

• Performance improvements (showing Are We There Yet?)
• Web GL (he shows this ray-tracing )
• Audio (he shows some Nihlogic magic and the Beat Detektor).

From Tim Aidlin over at Microsoft comes a tutorial on using JQuery to do animation. The tutorial is focused on using a new library they have designed called Glimmer that allows designers and developers to create interactive elements and animations on web pages using JQuery. Using Glimmer you setup your HTML and CSS and then use the visual Glimmer tool to create animations and other effects:

The Glimmer tool then generates JQuery JavaScript automatically that you can pull into your page. An example snippet:

I have had the pleasure to start working with the awesome jQuery team on a new mobile development. Today, John announced jQuery Mobile, "a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation."

Palm has sponsored the effort with other great folks, and I wrote about it over here:

When we heard that the jQuery team was putting a lot of effort towards supporting their great library on devices, we wanted to help. At first we started with devices for John to test on as he explored compatibility, but with the newly announced jQuery Mobile initiative, we wanted to do more.

What are we doing? We are going to sponsor some of the great work that will go into jQuery Mobile from jQuery team members such as the Filament Group who are well known for their work on jQuery UI and ThemeRoller. First and foremost, we want to allow the team to focus on making a great jQuery experience across the mobile Web.

Secondly, we will be working hard to make sure that webOS itself is a fantastic host for the product. This will mean testing help, and also some jQuery plugins that show off some of the great abilities of webOS (e.g. the notifications system) in a progressive way.

We are really excited to be working with the team as their launch into jQuery Mobile en force.

Here are some more details on the goals of jQuery Mobile from Mr. John Resig himself:

"The jQuery project is really excited to announce the work that we’ve been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we’re also working to release a complete, unified, mobile UI framework.

Absolutely critical to us is that jQuery and the mobile UI framework that we’re developing work across all major international mobile platforms (not just a few of the most popular platforms in North America). We’ve published a complete strategy overview detailing the work that we’re doing and a chart showing all the browsers that we’re going to support.

Right now we're working hard, planning out the features that we want to land and doing testing against the devices that we want to support — and hoping for a release later this year.

If you wish to help, please join the discussion in the jQuery Mobile Community.

Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs)."

It has been enjoyable to see the great touch and mobile support that YUI 3.2 is adding, and we look forward to hosting the Dojo team at Palm for one of their events. Sencha Touch and SproutCore are showing us that Web applications can feel like "native" apps on other platforms. All in all, the future for a cross platform Web application world is bright. We look forward to working with the entire community to make it happen.

Franz Enzenhofer has created a nice new webkitTransform plugin that helps you manage transforms and state.

Franz tells us more:

With jQuery.css you can't easily change the webkitTransform CSS because webkitTransform is not your average CSS.

If in one step you add .css('-webkit-transform', "rotate(20deg)") and in the next step .css('-webkit-transform', "scale(2.0)") the rotate value gets reset, as you have rewritten the complete -webkit-transform CSS value.

You could use the WebKitCSSMatrix javascript element, but it's currently buggy, not consistently implemented and a pain to use.

Additionally you can't just retrieve the '-webkit-transform' css with .css('-webkit-transform') as this just gives a matrix code.

Our goal with webkitTransform() was to fix this problem. With it, every element you assign webkit-transform css with can be edited in a simple way, without resetting every other -webkit-transform values.

1. script loading must be async
2. script loading should do as much in parallel as possible. This means in particular, that it should be possible to avoid dynamic nested dependency loading.
3. it looks like a script wrapper is needed to allow #1 and #2 to work effectively, particularly for cross-domain loading. It is unfortunate, but a necessity for script loading in browsers.

With the RequireJS 0.11.0 release James feels like he has the features to make that real:

• There is a new priority config option to indicate priority, parallel download of build layers.
• A new JSONP plugin allows you to treat any JSONP service as dependency.
• require.js should be Caja-compliant. The plugins may not be, but the main require.js file passed cajoling on http://caja.appspot.com/.
• Instructions and optimization support for renaming require().
• There is a new RequireJS+Transport D download option that supports the CommonJS Transport D proposal. This can be useful in conjunction with the server-side Transporter project.

James mentioned a server side scanning tool.... and Kyle Simpson (of LABjs) is almost ready to show something there too.

Right away he notes that these are true micro optimizations, and to "use with caution and balance elegance with performance correctly." Chances are you are a lucky chap if these are the biggest issues for performance on your application!

The post is still interesting as it shows a lot of jQuery core itself. I would think that Mr. "inline it" Dalton would approve of some of these tips :)

1. jQuery.root: Internally, all selectors that don't provide a context use jQuery( document ).find( selector ). Save yourself some ms, store the document root onto jQuery itself, and then run all global selectors off of that element.
2. Context sucks, use find: Don't get me wrong, you should always run selections based on a context if possible. But passing in a context to the jQuery constructor creates an extra unneeded function call. Internally jQuery runs context.find( selector ) anyway, so skip that step
3. Live is terrible, delegate is awesome: The best part: delegate is live with a context. So why is live a bad idea? To use live, you first have to run a selection on the page, and then bind the live handler.
4. jQuery.data > jQuery.fn.data: avoid jQuery(this)
5. Bind and Trigger, get used to it: don't use the short cut methods, save a function call
6. Each is evil: there is only one true reason to use each, and that is when a closure is needed for each item. If you are just looping through an array, then the callback function gets triggered on every iteration. So using an array of 25 items, the callback gets triggered 25 times.
7. Classes over styles: I would go so far as to say that using a class for a single style change is better than running through jQuery's style module.
8. Object.length, use it: Every jQuery selection comes with a length property that defines how many elements were found. Always check to make sure that there is a set of elements in your object before running a chain of methods.

The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization. For example, table row data values serve as chart bars, lines or pie wedges; table headers become value and legend labels; and the title and caption values provide title labels within the image. Visualize also automatically checks for the highest and lowest values in the chart and uses them to calculate x-axis values for line and bar charts. Finally, the plugin includes two different CSS styles — one light and one dark — that can be used as is, or can serve as a starting point to customize chart and graph presentation to match any application style.

Someone pointed out that "accessible" means many things. If you have a 10,000 row table, it may not be easy to consume.... but hey!

What are special events?

The jQuery special events API is a fairly flexible system by which you can specify bind and unbind hooks as well as default actions for custom events. In using this API, you can create custom events that do more than just execute bound event handlers when triggered—these “special” events can modify the event object passed to event handlers, trigger other entirely different events, or execute complex setup and teardown code when event handlers are bound to or unbound from elements.

He does into intrigue detail on the API and gets to show you how to implement the hello world of custom events: tripleclick:

There is a lot in his article, so give it a once over.

What's new?

Position utility

Position any element relative to any other, or even relative to the window or the mouse. In true “Write Less. Do More” fashion, it’s a simple as selecting the element you want and saying which part of it should be positioned relative to which part of another element. Bam.

Button widget

The button widget creates a themable button from any imaginable element you might be using as a native button. Progressive enhancement all the way. Now your <button> will look like your <input type=”submit”> will look like your <a class=”button”>. We updated jQuery UI widgets that have buttons, such as Dialog, to use the button plugin when you’ve opted to include it. Otherwise, they’ll remain native button elements. Again thanks to PE this is as unobtrusive as possible. Thanks to Filament Group for figuring out how to do this and Jörn Zaefferer for making it happen. And of course the community as a whole for providing feedback during early design/dev and later dev/testing. We’re stoked about having pretty form elements, and button is the first step.

Autocomplete widget

Now you can make any text input pop up a menu to aid the user in completing a text entry or search box, providing suggestions or allowed values. The autocomplete is designed and built based on the popular Jörn Zaefferer’s Autocomplete. As with the button widget we’ve kept the API as minimal as possible while providing the hooks necessary to customize it based on your needs. For example, you can provide static local data using the source option, or provide a callback function as the data source which can handle getting data from a server via Ajax. Single option, overloaded. This is the new way we’ll be writing and refactoring all of our widgets going forward, and we’re excited to hear what people think. It’s quite a change, but should keep the library lean while still as flexible and powerful as possible.

Spritely is a new jQuery plugin that adds sprite() and pan() to your $().

The fun front page of birds is explained with simple goodness of:

The library is very new with 0.1 stable and 0.2 preview out.

Also check out this demo and follow them.

Rey Bango (Ajaxian and now Microsoft employee) will do a post that rounds up the news from MIX today where the IE9 team shared a first preview release of IE9 that comes with new features from HTML5+ (video, SVG, CSS3, addEventListener, JavaScript compilation spread across multicore, and more). All of this is hardware accelerated. Yum. Missing was news on canvas and I didn't see deets on CSS transforms and the like (which would be awesome with hardware acceleration too).

John Resig just got on stage to talk about the collaboration between jQuery and Microsoft and how Microsoft is now contribution resources and code. For example, templates (all on GitHub which gives you:

updated with info from Microsoft press release:

As part of Microsoft’s broad engagement with open source communities, Corporate Vice President Scott Guthrie today announced that Microsoft is investing resources to contribute to the development of the jQuery JavaScript Library to help improve the development process of standards-based Web applications. Microsoft will also work to provide better interoperability between ASP.NET and the jQuery JavaScript Library by enhancing ASP.NET so .NET developers can better incorporate jQuery capabilities. In addition, Microsoft will actively promote and distribute versions of the jQuery JavaScript Library by packaging it with popular products such as Microsoft Visual Studio 2010 and ASP.NET MVC 2. As a first step, Microsoft will contribute a templating engine to the jQuery JavaScript Library Team to simplify Web applications.

It is early days (preview release) but great to see a solid go at it here. I *really* want the IE9 team to help us put the Silverlight team out of business :)

In case you want to use YUI3 but really really like jQuery syntax :) OK, it breaks the whole sandboxing idea of YUI3, but that's a small price to pay, right?

jQuery 1.4.2 has been released today and it comes with some performance bumps (aggressive ones according to Taskspeed). Benchmarks are challenging, and John even calls that out:

For example, we saw significant overall performance speed-ups in Taskspeed simply by optimizing the $("body") selector because it’s called hundreds of times within the tests. Additionally we saw large gains by optimizing .bind() and .unbind() by a fraction of a millisecond – an inconsequential amount – especially considering that any cases where you would bind hundreds of events you would likely want to use .live() or .delegate() instead.

There are some new APIs a bunch of them around ergonomics:

In this release we’ve added two new methods: .delegate() and .undelegate(). These methods serve as complements to the existing .live() and .die() methods in jQuery. They simplify the process of watching for specific events from a certain root within the document.

For example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. $("table").delegate("td", "hover", function(){
3.         $(this).toggleClass("hover");
4. });
5.  

This is equivalent to the following code written using .live():

PLAIN TEXT

JAVASCRIPT:

1.  
2. $("table").each(function(){
3.         $("td", this).live("hover", function(){
4.                 $(this).toggleClass("hover");
5.         });
6. });
7.  

Additionally, .live() is roughly equivalent to the following .delegate() code.

PLAIN TEXT

JAVASCRIPT:

1.  
2. $(document).delegate("td", "hover", function(){
3.         $(this).toggleClass("hover");
4. });
5.  

The jQuery team continues to really put the pedal to the metal.

Jacek Galanciak has created a nice visual transition library, Quicksand, that filters and shows a set of data in an interesting way.

The jQuery plugin has you quickly calling quicksand like this:

and you have the data to transition between:

You can customize the effect (set the easing, setup data, and the like). Seethe docs and demos for more.

Whilst Google supports this in the satellite and hybrid maps, the basic ones still can't be turned. Which is why I took CSS3 transformations (wrapped in a very useful jQuery plugin) and voila - rotating is possible:

Read more about the implementation and some of the things that need fixing in the original blog post about map rotation.

There are a lot of new features, and as usual performance gains are showcased.

• Easy Setter Functions: For a while now, you’ve been able to pass a function into .attr() and the return value of that function is set into the appropriate attribute. This functionalilty has now been extended into all setter methods
• Ajax: A lot of enhancements to the various remoting functions including support for native JSON parsing, etags, request context, and more
• .css and .attr have been improved
• Per property easing on effects
• If you want to ensure that “this” inside a function will be permanently bound to a particular value, you can use jQuery.proxy to return a new function with that scope
• New events: focusin and focusout

And Joe Walker will be really excited to see that dojo.create has made it in! :)

Congrats to the jQuery team. I look forward to seeing posts over the next 2 weeks that go into more detail on the new coolness.

This loads the document any link with a class of "ajaxtrigger" points to and updates the content of the element with the ID "target". If the link is a third party link on another domain it fails though - and silently at that. Normally you'd work around that with a server-side proxy, but you can actually do without it.

YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you. For example to load http://bbc.co.uk you'd use the following statement:

As a URL this turns into:

You could request JSON-P by setting the output format to json and define a callback, but that would give the HTML back as a massive object which is not nice. YQL also offers JSON-P-X as an alternative which is a JSON object with a callback and the HTML as a string inside a simple Array. See it by clicking the following URL:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%27http%3A%2F%2Fbbc.co.uk%27%0A&format=xml&diagnostics=false&callback=foo

Now, using jQuery's getJSON() we can load this even without a named callback function. That way we can use one method for content that is third party and simply use load() for the other:

You can see the demo in action here, more details are available on my blog and the source is available on GitHub.

A couple of feature-packed jQuery podcasts have appeared in the past month or so: YayQuery (iTunes), a laid-back video podcast from folks in the jQuery community; and the official jQuery podcast (iTunes), hosted on the official jQuery blog and aiming to be a mix of news and interviews, hosted by Elijah Manor and Ralph Whitbeck.

Paul Irish sent the following about YayQuery:

It's a video podcast hosted by myself and three others, featuring laid-back discussions about current news and library/plugin releases; recently we've covered Brian LeRoux's Lawnchair script, JSON serialization options, dependency management and front-end performance techniques. We've just released our fifth episode.

Besides news, we also do a few segments where we dive deeper into particular areas of jQuery; we try to have a range of topics that will appeal to newbs and veterans alike.

- "Hiddenhancements", handy tricks inside jQuery you might not know about
- "Anti-Pattern for Performance of the Week" - Common coding practices that can get you into trouble, and how to avoid them
- "Plugin of the Week" - a new and/or awesome jQuery plugin that needs some evangelisin'
- "Beginner's Corner" - Things we wish we'd known when we were getting started with JavaScript and jQuery
- "nayQuery" - When to *not* use jQuery, and what options exist outside the $

The yayQuery hosts (Paul Irish, Rebecca Murphey, Alex Sexton and Adam J. Sontag) have years of experience being neck-deep in their own jQuery development, as well as providing support and training to the community

The official jQuery podcast has thus far interviewed jQuery creator Jon Resig, jQuery UI release manager Richard D. Worth, and none other than YayQuery host Paul Irish.

There's also Remy Sharp's jQuery For Designers, which has been publishing a video podcast feed of screencast tutorials since the start of the year.