SF jQuery Meetup and Ajax Experience

Posted on by

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:

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:

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/

jQuery 1.1.3.1

Posted on by

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:

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

About client-side form validation and frameworks

Posted on by

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.

jQuery 1.1.3: 800%+ Faster, still 20KB

Posted on by

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:

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!

Visual jQuery Magazine: Part Deux

Posted on by

Those of you who have been around for a while know that in September of last year I published the first issue of the Visual jQuery Magazine. In October, the magazine was also released in French.

The mag had interviews with important jQuery community members (like creator John Resig, plugin editor Dave Cardwell, etc.), articles on jQuery features and implementations, and even a piece or two on alternate Javascript libraries, complete with quality graphics and original art.

The positive response was incredible, and people really seemed to like it. Unfortunately, though I’d initially planned on making the magazine a monthly publication, things fell to the wayside as my schedule got progressively more hectic. Since Issue 1 I’ve found a new job (new then; about eight or nine months old now), moved across the country (NY to CA), and gotten a huge chunk of the way through writing my first book (stay tuned for details!). Clearly, things have been busy.

The lack of Issue 2 has been bugging me since Issue 1, and I’ve decided it’s time to make it happen (this, I admit, is also largely in part to my good friend Rey Bango’s recently renewed effort to push jQuery forward). Thankfully, the magazine’s lead designer and the team of French developers/translators have all expressed an interest in helping make Issue 2 happen, which makes this goal a lot more tangible.

Issue 1 was an experiment, and it went really well. Since it was a first though, it was very much “the Yehuda show.” I’d like Issue 2 to be more of a collaboration of contributors; there are a lot of jQuery topics to explore, and a lot of team member and users with fascinating tales to tell.

As such, I’m putting the word out there. I’m looking for contributions for Issue 2 of Visual jQuery Magazine. Articles can vary in length extensively, from brief three paragraph shorts, to three page features. They can be tutorials, feature articles, interviews and lots of other things I’m sure you’ll all think of. Just a few brief (and somewhat flexible) guidelines:

  • The article must be in magazine or newspaper format (if, in fact, your submission is a piece of writing — illustrations will also be considered). I’m extremely lax on this, but it should be something you could see being in a magazine.
  • The article must be about a topic that is timely and pertinent to the jQuery community, with broad appeal.
  • The article must not be an advertisement (but it may, obviously, feature a plugin you have written if it has broad appeal).
  • The article must be factually correct.
  • The magazine staff will edit your article for grammar, space, and style. You will receive an edited copy prior to publication for approval.
  • The magazine staff will add graphics and other visual elements as appropriate.
  • Please email a proposal or brief description of your submission before spending a chunk of time working on it; that way we can avoid running out of space and ensure that everything print-worthy gets in. Email submissions and letters to the editor to editor AT visualjquery DOT com.

    As I said from the beginning of this project, I think that the magazine has real potential to open up the jQuery world to new users, and hope that by pushing the envelope of community-produced content, we can keep jQuery moving forward in it’s current positive direction. I, for one, I’m really excited about it.

    I will also be accepted advertisements, with all proceeds to go to the jQuery project. If you’re interested, please email me!

    New Plugin Repository

    Posted on by

    jQuery Plugin Repository

    One of the great aspects of jQuery is its extensibility, as evidenced by the many excellent plugins that have been developed for it. The jQuery team, and the Web team in particular, have been working hard behind the scenes to put together a repository to showcase these plugins.

    The new repository comes with a few features that are sure to help users to find what they’re looking for and determine which plugins will best suit their needs. There’s the (jQuery-based) ratings widget to let you know how highly others value each plugin. The ratings are viewable by all, and you can rate them yourself by simply registering on the site with a user name and email address. You’ll also have easier access to change logs, demos, and documentation, as well as bug reporting and feature requests.

    There are still a few rough edges to be smoothed out, and the list of plugins on the site is admittedly small so far. We’re requesting that plugin authors post their work to the new plugin repository in the next couple weeks, as we’ll be gradually phasing out the plugins wiki page.

    Special thanks to Mike Hostetler for the hours of work he put in to get the repository off to a great start.

    Check it out at: http://jquery.com/plugins/

    jQuery Paris Meetup

    Posted on by

    NOTE The venue for this event has changed! We’re now meeting at the Best Western Bergère Opéra, please change your plans accordingly.

    When:
    Sunday, June 24, 2007 – 10:30 AM

    Where:
    Best Western Bergère Opéra
    32, Rue Bergère
    Paris, ÃŽle-de-France 75009
    (Google Maps Directions)

    About:
    This is a meet up for those that use and are interested in the jQuery JavaScript Library. We’ll be meeting in the lobby of the Best Western Bergère Opéra and then move to a park for a picnic.

    John Resig, the creator and lead developer of jQuery, will be attending.

    This meet up is being organized by the SPIP (a popular CMS, happily using jQuery) core team.

    Register:
    If you’re interested in attending this event, please sign up on the event’s Upcoming.org page:
    http://upcoming.yahoo.com/event/206745

    New Command-Line jQuery Tool

    Posted on by

    Update: I have completely refactored jcheat and added substantial new functionality, including a ton of filters that can be used in any combination. Do a gem update and run jcheat -h for full usage details.

    I released a new tool, jquery-cheat, that allows you to get information about the jQuery API directly from the command-line. You can get the description of a function, a list of functions in each module, search the list of all function descriptions for a string, get a list of all functions whose name match a string, and some other cool tricks.

    Some examples:

    # jcheat desc clearForm
    --------------------------------------------------------------------------------
    Name:         clearForm()
    Description:  Clears the form data.
                  
    Details:      Clears the form data.  Takes the following actions on the
                  form's input fields:  - input text fields will have their
                  'value' property set to the empty string  - select elements
                  will have their 'selectedIndex' property set to -1  - checkbox
                  and radio inputs will have their 'checked' property set to
                  false  - inputs of type submit, button, reset, and hidden will
                  *not* be effected  - button elements will *not* be effected
                  
    Returns:      jQuery
    --------------------------------------------------------------------------------
    |                                   EXAMPLES                                   |
    --------------------------------------------------------------------------------
    ---------------
    | Description |
    ---------------
    Clears all forms on the page.
    
    --------
    | Code |
    --------
    $('form').clearForm();
    
    # jcheat namelike $.ajax
    $.ajaxTimeout(time) in Ajax
    $.ajaxSetup(settings) in Ajax
    $.ajax(properties) in Ajax
    
    # jcheat like clear field
    clearForm() in Plugins/Form
    clearFields() in Plugins/Form
    
    

    You can grab the tool by doing:

    gem install jquery-cheat -y
    

    The -y is so that it automatically includes hpricot, a required dependency.

    jQuery Dashboard Widget

    Posted on by

    jQuery Widget

    Ryan Dunphey has just released a brand new jQuery Dashboard Widget that you can use to browse the jQuery API, even when you’re not connected to the Internet. You can download the, sharply designed, widget from jQuery SVN.

    If you’re interested in doing some dashboard development (and especially widget development using jQuery), you can learn from this widget, as the full source code of it is in the jQuery SVN repository.

    This fantastic work (and the subsequent open source release of the widget) was sponsored by Ryan’s employer, Medallia. Incidentally, if you’re interested in getting paid to do some jQuery coding, Medallia has a Front-End Developer position open.