SF jQuery Meetup and Ajax Experience West

Ajax Experience West 2007
The good folks over at Ajaxian and TechTarget have put together a great conference, July 25-27. Speakers are varied, talking about the latest and greatest from the world of rich web development. See the full list of speakers and schedule. Speakers include Brendan
Eich, CTO of Mozilla; Creator of JavaScript. Chris Wilson, Internet Explorer Platform Architect and Kevin Lynch, Chief Software Architect, Adobe. It promises to be a lively and interesting forum.

More exciting than even those speakers, there will be two jQuery representatives speaking: John Resig and Glen Lipka.

John will be giving 3 sessions, two on jQuery:

• Introduction to jQuery
• Advanced jQuery
• Client-Side Framework Overview

Additionally, John will be speaking on a panel, at Friday’s lunch, on the future of Ajax.

And Glen will be giving a talk on jQuery:

• jQuery For Designers

There will be a number of other jQuery users, and team members, in attendance (including Yehuda Katz and Michael Geary).

SF jQuery Meetup

On July 26, we are taking the opportunity to invite everyone in the jQuery community to meetup at the Gordon Biersch San Francisco Brewery for drinks appetizers and debugging. We are open source, so BYOCC (Bring Your Own Credit Card).

Yehuda Katz has special jQuery SWAG for the first 1000 25 jQueriers to buy another member of the community a drink. Additionally, we should have a couple extra copies of the brand-new Learning jQuery book by Karl Swedberg & Jonathan Chaffer.

We hope you can make it. Sign up and see you then!

More information:
http://upcoming.yahoo.com/event/220122/

This is a quick bug fix release for jQuery 1.1.3. About six major issues popped up after the 1.1.3 release that we deemed important enough to resolve immediately, with a follow-up release. The full list of resolved issues can be found on the bug tracker.

If you haven’t already upgraded to 1.1.3, please just upgrade straight to 1.1.3.1 instead. Also, if you’re encountering any issues with 1.1.3, please try this release.

You can download the release from the jQuery Google Code page:

Download:

• jQuery 1.1.3.1
• jQuery 1.1.3.1 (Compressed)

As always, be sure to let us know if you encounter any issues by submitting a bug report to the jQuery bug tracker.

There is a good article about client-side form validation on the Interaction Design Blog. It describes important points to keep in mind when building your own framework for client-side validation.

Of course the alternative to building your own framework is to use an existing one. This approach yields some important advantages, amonst them the “given enough eyeballs, all bugs are shallow” principle.

Lets see how well the validation plugin currently performs on the points listed in the article:

1. Use a form validation framework or a form validation library

Check.

2. Focus on solving the big validation problems

As soon as you start developing and implementing your validation, it is easy trying to address all potential validation that is needed for all types of input. My advice is to try to catch 75-85% of the potential user input errors in the front-end validation. Trying to catch all will lead to the following:

• Bloated code, your framework will grow too large
• More or less impossible to test client side validation as there are too many combinations of validation that can go wrong
• Business rules will move to the front-end.(More on how to avoid this by using Ajax later)

Well, bloated code is a problem I tried to address with lots of refactoring. The current codebase has 1446 lines (about half of it being inline documentation). A few weeks ago Dan G. Switzer took a look at the plugin and was able to provide excellent help on specific code-related problems within a few hours.

About testing: The current testsuite for the validation plugin runs 65 tests with over 350 assertions. jQuery’s testsuite runs about 500 assertions. I seems to have a good code coverage, as I added tests for all occuring issues whenever possible. Regression issues are quite likely to be catched by the testsuite, as well as it helps a lot while developing.

Testing against browser events and with AJAX is still a very difficult task, even with the AJAX support in jQuery’s testsuite.

About business rules moving to the front end: Thats more of a design and architectural problem. Avoiding that using AJAX gets supported with the upcoming 1.2 release.

3. Do Form Validation before form is submitted

The message here is to validate when the user inputs something, instead of waiting for the submit event. Pre 1.0 versions allowed you to specify a single event to check individual elements, eg. blur or keyup. That worked in some cases, and was disturbing in other cases, where the user clicked on an input and was welcomed with an annyoing error message. To address those issues, a more sophisticated system was released in 1.1. Basically the plugin waits with validation until the user blurs a field where he entered something incomplete. If the field is already marked invalid (eg. after an attempt to submit an invalid form), all elements are validated on keyup (textinputs) or click (checkbox, radio). The current implementation isn’t perfect yet, and of course feedback is appreciated.

4. Use Ajax Form Validation for business data input

A small teaser for the AJAX validation in 1.2:

$("#myform").validate({
  rules: {
    username: {
      required: true,
      minLength: 2,
      remote: "users.php"
    }
  },
  messages: {
    username: {
      required: "Enter your username",
      minLength: "At least 2 characters are necessary",
      remote: String.format("The name {0} is already in use")
    }
  }
});

The API allows you to use the same declarative style for remote validation as you are used to use for local validation. String.format creates another function that is later called with the value the user entered, resulting in something like “The name asdf is already in use” as the error message.

Check the AJAX validation preview for more details.

5. Do extensive testing of your javascript form validation

That is covered above.

6. Rewrite input data to valid formats

Now this is an interesting point. Basically the idea is to accept “20070515” as a valid date, transforming it into “2007-05-15” for validation. I haven’t seen any specific requests for a feature like this, so if anyone is interested, let me know. Meanwhile a good idea may be to use the masked input plugin to help and assist the user typing the correct format.

7. Attach javascript form validation late in the design process

That is a very good recommendation. jQuery helps a lot with this, due to its unobtrusive nature. Design your form without any JavaScript at all, and add it later, improving the user experience (UX) as much as possible.

8. Make the script i18n- and l10n-compatible

In other words: Avoid hard-coded strings, instead make it as easy as possible to replace them with the current locale.

The validation plugin allows you to translate all default messages by just overwriting them. Its easy to include a file after the plugin file that contains something like the following:

$.extend($.validator.messages, {
  required: "Eingabe nötig",
  email: "Bitte eine gültige E-Mail-Adresse eingeben",
  ...
});

That approach works quite well. You can gather other translation in the same file, for example labels for the datepicker.

To include the proper right translation file for the user’s locale is then a mere serverside issue.

Other problems, eg. different number or date formats, can be covered by writing custom methods, or overwriting the default ones (in $.validator.methods). Methods for german date and number formats are provided by default: date (default JavaScript Date format), dateISO (1990-01-01 or 1990/01/01), dateDE (01.01.1990 or 2.12.2012) and number (100,000.59) and numberDE (100.000,59) are available. Though currently none of those validates any ranges, eg. 0001-13-50 is also a valid iso date.

9. Add callback functions to validator framework

The most important callback function the validation plugin provides is the submitHandler. It is called when a valid form is submitted, allowing you to eg. submit the form via AJAX. Others are available like errorPlacement, to customize where error messages are inserted into the DOM, eg. for table layouts.

In 1.2 a callback for invalid forms gets added, called each time the user submits a form and it is invalid. So far the showErrors callback could be used for that, but that one gets also called each time is single element is validated. The new callback can then be used to update a message like “There are 6 issues in the form below”. Showing and hiding such a message can be handled using the existing errorContainer options.

10. Make your framework/library extensible

The most important point to extend the validation plugin with your own stuff is $.validator.addMethod. It allows you to add any validation method you need. By keeping your own custom methods inside your own files it is easy to update the plugin itself.

Its quite likely that the first approach to AJAX validation will evolve into $.validator.addRemoteMethod, providing all the necessary boilerplate code for remote AJAX methods, but allowing you use any required protocol. It won’t matter if you use get or post, send a single value or the whole form to the server, and if the server returns only true or false, or an error message to display, in whatever format you prefer or need to work with. Of course it would require a bit more work to implement the method, but provides a great flexibility. Your feedback on this is essential, as I avoid to randomly guess what you may need.

I hope this gives a good idea about the current status of the form validation and its progress and should help with the descision to use it or not.

I’m pleased to announce the release of jQuery 1.1.3. After many months of testing, developing, and more testing, we have a very solid release available for download. It comes with roughly 80+ fixed bugs and a handful of enhancements for good measure. Highlights include:

1. Improved speeds, with DOM traversal over 800% faster than in 1.1.2.
2. A re-written event system, with more graceful handling of keyboard events.
3. A re-written effects system (with an accompanying fx test suite), featuring faster execution and better cross-platform support.

Update – July 4th: We just finished a quick bug fix release, versioned 1.1.3.1, which fixes a couple of outstanding issues.

Download:

• jQuery 1.1.3.1 (Compressed, 20KB)
• jQuery 1.1.3.1 (61KB)
• jQuery 1.1.3.1 (Docs, Source Code)

As always, if you find any bugs with this release, please post them to the jQuery Bug Tracker.

1.1.3 Features

Massive Selector Speed Improvements

Due to popular demand, we dug deep and made some major changes to jQuery’s selector engine. Here’s a breakdown of the speed improvements that were made to jQuery itself. All numbers are based on the SlickSpeed test suite.

Browser	jQuery 1.1.2	jQuery 1.1.3	% Improvement
IE 6	4890ms	661ms	740%
Firefox 2	5629ms	567ms	993%
Safari 2	3575ms	475ms	753%
Opera 9.1	3196ms	326ms	980%
Average improvement:			867%

Additionally, we tested the improved code base against some of the other popular selector libraries, again with the SlickSpeed test suite.

Browser	Prototype	jQuery	Mootools	Ext	Dojo
IE 6	1476ms	661ms	1238ms	672ms	738ms
Firefox 2	219ms	567ms	220ms	951ms	440ms
Safari 2	1568ms	475ms	909ms	417ms	527ms
Opera 9.1	220ms	326ms	217ms	296ms	220ms

A couple things to notice when looking at the speed suite results are that:

• We’re over 800% faster than we were in jQuery 1.1.2.
• We’re the fastest framework in the most popular browser, Internet Explorer 6.
• We’re the only framework that doesn’t give incorrect results.
• And all of this comes at no expense to you — jQuery is still the same 20KB that you’ve come to expect and enjoy.

New Selectors

Unicode Selectors: This is a huge addition for those of you who want to use Unicode attribute values, IDs, class names, or tag names. You can now use them directly in jQuery selectors:

$("div.台北")
$("div#台北")
$("foo_bar台北")
$("div[@id=台北]")

Escape Selectors: A frequently requested feature you can now select elements by ID (or other selector) that uses a special character, for example this will find the div that has the ID of “foo.bar”:

$("div#foo\\\\.bar")

Inequality Selector: While this selector isn’t part of the CSS specification, it’s frequently used and included in other selector libraries, so we decided to add it in:

$("div[@id!=test]")

:nth-child() improvements: This selector allows you to locate specific child elements. We’ve supported selectors like :nth-child(1) and :nth-child(odd) since the beginning of jQuery, now we’ve added advanced :nth-child selectors, such as:

$("div:nth-child(2n)")
$("div:nth-child(2n+1)")
$("div:nth-child(n)")

Space-separated attributes: After being removed in jQuery 1.0, this selector has now been brought back by popular demand. It allows you to locate individual items in a space-separated attribute (such as a class or rel attribute).

$("a[@rel~=test]")

Animation Improvements

Speed: Animations are now significantly faster and smoother. Additionally, you can run more simultaneous animations without incurring any speed hits.

Testing: We now have a dedicated test suite for animations — which has allowed us to fix a number of pressing animation bugs that weren’t previously locatable.

DOM Event Listeners

Internally, the jQuery Event system has been overhauled to use the DOM Event system, rather than the classical “onclick” style of binding event handlers. This improvement allows you to be more unobtrusive in your use of the library (not affecting the flow of other libraries around it). Additionally, it helped to resolve some of the outstanding issues that existed with binding event listeners to IFrames.

Event Normalization

Some great steps have been taken to normalize keyboard and mouse events. You can now access the event.which property to get most details about the specific key or button that was pressed.

Multiple .is()

The .is() method can now take multiple selectors, separated by a comma. This allows you to test your jQuery set against multiple selectors.

$("div").is(":visible, :first")

Browser Version

A commonly requested feature, by plugin authors, was a way to determine what browser version their users were using. We now expose an extra property through which this information can be accessed.

jQuery.browser.version

More Bug Fixes

Please see the ticket listing for the full list of all issues resolved in this release.

The Future of jQuery

We’ve been very concerned with the direction and progress being made towards furthering the jQuery project. We’re focusing on a number of different aspects now, but the primary concern is still the advancement of the core jQuery library. We’ve spec’d out the next two releases, which you can read more about below:

jQuery 1.1.4

This will be the last release of the jQuery 1.1 branch – another bug fix release with some minor improvements. This release will also mark a number of methods as deprecated, in accordance with the upcoming jQuery 1.2 release.

We’re currently planning on having this release take place at the end of July.

jQuery 1.2

This will be the next major release of jQuery, containing a significant number of new features. The full details of this release can be found in the jQuery 1.2 Roadmap.

Your comments and feedback on this release are greatly appreciated. It’s still in planning, so nothing is completely final. We’re currently planning on releasing jQuery 1.2 by the end of August.

jQuery Books

We’re now up to 4 jQuery books being written and, just as importantly, they’re all being written by members of the jQuery team (so you’ll know that you’re getting good information).

The books and their authors are as follows:

• Learning jQuery by Karl Swedberg and Jonathan Chaffer – due out early July 2007 (Packt Publishing).
• jQuery Reference Guide by Karl Swedberg and Jonathan Chaffer – due out Summer 2007 (Packt Publishing).
• jQuery Quickly by Yehuda Katz and Bear Bibeault (Manning Publishing).
• Designing with jQuery by Glen Lipka (Manning Publishing).

This is really fantastic news. I’ve been able to read some of the pre-release chapters and I think you’re going to be in for a real treat with these books.

jQuery Talks and Conference

I’d like to announce some talks being given about jQuery in the upcoming months. Specifically, there will be a number of talks given about jQuery at both of the Ajax Experience conferences.

At the San Francisco Ajax Experience, John Resig will be giving an introductory overview to jQuery followed by an advanced jQuery talk. Glen Lipka will be giving a talk on designing with jQuery.

At the Boston Ajax Experience, John and Glen will be presenting again, and will be joined by Paul Bakaus to give a talk on developing intense applications and games with jQuery.

Since there’s going to be quite a few members of the jQuery team at the Boston Ajax Experience, we’d like to announce that we’re planning on doing a small, one day, jQuery Conference the next day after the Ajax Experience. This will be the perfect opportunity for you to meet the jQuery team and ask any nagging questions that you have. We’ll also be giving a number of talks about specific aspects of jQuery. We’ll have more details about this soon.

jQuery UI

Today, we’re also pleased to announce a secret project that we’ve been working on: jQuery UI. This project, being written by Paul Bakaus, is a whole new Drag & Drop library being developed from the ground up with speed and extensibility taken into consideration. Additionally, great care is being taken to have the code be fully documented and tested — allowing many other developers to use and help extend it.

This library will contain full code for Draggables, Droppables, Sortables, Resizables, and a Slider.

You can take a look at some of Paul’s early work in the SVN repository.

Funding and Thank You

The new jQuery UI library marks a new step for the jQuery project: This is a piece of code whose development we’re sponsoring using money donated by you, the jQuery users!

This is being made possible in two ways: first by your continued support and donations to the jQuery project, and second by a generous server donation by Media Temple. This is allowing us to focus our financial resources on other projects that’ll benefit everyone the most.

So I’d like to take this opportunity to request additional donations to help us continue funding exciting new work that you’ll be able to use in your web sites. Any help will be greatly appreciated.

Amount in $

Once again, I’d like to thank the jQuery team and everyone who has helped to make this release possible. It’s been a lot of work, but I hope you’ll be as pleased with this release as we are. Thank you — and thanks for using jQuery!