jQuery UI 1.6rc5 Compatible with jQuery 1.3

Posted on by

jQuery UI 1.6rc5 is available.

Download jQuery UI 1.6rc5
You can download the entire development bundle directly

http://jquery-ui.googlecode.com/files/jquery.ui-1.6rc5.zip

This includes a default theme, as well as all the test and demo files. Or you can create a customized download of individual components

http://ui.jquery.com/download/

and a custom theme at

http://ui.jquery.com/themeroller

Be sure to grab an updated 1.6rc5 theme, if you got a theme from ThemeRoller in the last two weeks. (Also, for any users of 1.5.3, there is a link on ThemeRoller for downloading legacy themes)

Compatibility with jQuery 1.3
Thank you to the many people that helped test and contribute fixes to make this release happen. We have fixed a lot of issues in the two weeks since rc4 and the most major fix is this release is compatible with jQuery 1.3 (Happy Birthday jQuery) where 1.6rc4 was only compatible with jQuery 1.2.6. From now on, we ask that 1.6rc4 is no longer used for testing. Also, from here forward jQuery UI 1.5.3 will only support jQuery 1.2.6. And jQuery UI 1.6 will only support jQuery 1.3+
Thanks for any help you can provide to ensure this release is ready and fully compatible with jQuery 1.3. Please create a ticket for any issue you find on the jQuery UI bug tracker:

http://ui.jquery.com/bugs (note: requires registration)

and send a note for discussion on the jQuery UI Development mailing list as well:

http://groups.google.com/group/jquery-ui-dev

The current schedule is to wrap up 1.6 final by the end of next week.

jQuery 1.3 Released

Posted on by

The jQuery team is pleased to release the latest major release of the jQuery JavaScript library! A lot of coding, testing, and documenting has gone in to this release and we’re really quite proud of it.

I want to personally thank Ariel Flesler and Brandon Aaron who put a lot of work into fixing bugs and getting the release out the door.

Overview

There have been a number of major changes in jQuery 1.3, these are a few of the largest and most prominent changes.

Sizzle Selector Engine

jQuery has a brand new CSS selector engine – nicknamed Sizzle. We wanted an engine that was:

  1. Faster than our current engine for the most commonly used selectors.
  2. Fully extensible (we had to sacrifice some of our extensibility in favor of performance in past versions of jQuery).
  3. Completely standalone.

As far as performance is concerned, we’ve done quite well, coming in about 49% faster than our previous engine:

This is especially surprising considering that the engine in 1.2.6 was already pretty fast and that we gained a great deal of extensibility in the process.

One thing that became very obvious during the development of the new engine: We wanted to be able to collaborate on it with other libraries and developers. We saw an opportunity for some solid collaboration with some of the best JavaScript developers – the result of which will help users of all libraries. For this reason we made sure that Sizzle was able to work completely standalone (no dependencies).

Additionally, as a sign of good faith and willingness to collaborate, we’ve released the source code to Sizzle to the Dojo Foundation. We wanted a common meeting ground where everyone would be able to work together and under which there would be a clear long-term copyright holder.

Right now we’re working with Prototype, Dojo, Yahoo UI, MochiKit, and TinyMCE (and many others) on Sizzle, honing it to perfection.

Live Events

jQuery now supports “live events” – events that can be bound to all current – and future – elements. Using event delegation, and a seamless jQuery-style API, the result is both easy to use and very fast.

More information about live events can be found in the .live() documentation.

When working on live events we wanted a solution that was going to be fast and scale well. To do this we needed a selector engine designed to handle delegation element filtering (roughly speaking “does this selector match this element”). The new Sizzle selector engine blew away all of our expectations – coming in almost 30x faster than our previous solution:

By using advanced filtering techniques we’re able to bring you an event delegation solution that won’t bog down your browser and will scale to dozens or hundreds of delegations on a page at a time.

jQuery Event Object

Ariel Flesler brought some serious refactoring of the jQuery event system to jQuery 1.3. The bulk of this change came down to the new jQuery.Event object. This object completely encapsulates all of the functionality normally found in a W3C-compliant event object implementation and makes it work smoothly across all browsers.

There were a number of individual changes related to the event system, as well, and those are described in-depth later on in the event section.

HTML Injection Rewrite

All of the code related to injecting HTML into a document (such as the append, prepend, before, and after methods) has been overhauled. When we were analyzing jQuery applications we found this to be one of the most common bottlenecks – and thus was in direct need for an improvement. The functionality provided is identical to what was in previous releases of jQuery but with the added benefit of being much, much faster (about 6x faster overall):

We also overhauled the creation of DOM elements (e.g. $("<script/>")) and made it identical to calling $(document.createElement("script")) (it’s both faster and saner as a result).

Offset Rewrite

Brandon Aaron felt that a full rewrite of the .offset() method was due for 1.3. Re-written from scratch, it not only handles cross-browser issues better, but does so much faster:

Seeing an almost 3x jump in performance over the offset method in 1.2.6 this rewrite is sure to make your complex interactions go that much more smoothly.

No More Browser Sniffing

The final major feature of this release is one that you probably won’t ever see or deal directly with but it’s an important change that’ll help to make jQuery last longer and with less bugs: As of 1.3, jQuery no longer uses any form of browser/userAgent sniffing internally – and is the first major JavaScript library to do so.

Browser sniffing is a technique in which you make assumptions about how a piece of code will work in the future. Generally this means making an assumption that a specific browser bug will always be there – which frequently leads to code breaking when browsers make changes and fix bugs.

Instead we use a technique called feature detection where we simulate a particular browser feature or bug to verify its existence. We’ve encapsulated all the checks that we use in jQuery into a single object: jQuery.support. More information about it, feature detection, and what this feature provides can be found in the documentation.

It’s important to note that jQuery.browser is still in jQuery – and will be for the foreseeable future (too many plugins and pieces of code depend on it). That being said we’ve deprecated it in an attempt to encourage you – and all JavaScript developers – to seriously consider using feature detection in your code.

Upgrading

With jQuery 1.3 we attempted to minimize any large upgrade hassles – maintaining all existing public APIs. That being said, please read through the list of potentially-breaking changes to be aware of what might cause problems in your applications.

Note: Many plugins are providing updated releases to coincide with jQuery 1.3. If you’re having difficulties with a particular plugin please be sure to see if a new release has arrived. Specifically both jQuery UI and the Validation plugin have updated releases that work with jQuery 1.3.

Downloading

As usual, we provide two copies of jQuery, one minifed (we now use YUI Compressor as the default minifier) and one uncompressed (for debugging or reading).

http://code.jquery.com/jquery-1.3.min.js jQuery Minified (18kb gzipped)
http://code.jquery.com/jquery-1.3.js jQuery Regular (114kb)

Additionally, Google has provided us with a copy of jQuery hosted on their servers. This copy of jQuery is automatically minified and gzipped – and served from Google’s fast edge cache servers.

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

You can feel free to include the above URL directly into your site and you will get the full performance benefits of a quickly-loading jQuery.

Changes

The following are changes that were made that may have a remote possibility to cause backwards compatibility issues in your web pages.

  • The ‘@’ in [@attr] has been removed. Deprecated since 1.2 this old syntax no longer works. Simply remove the @ to upgrade.
  • Triggered events now bubble up the DOM. Unsuspecting event handlers may accidentally capture more events than they’re expecting.
  • The ready() method no longer tries to make any guarantees about waiting for all stylesheets to be loaded. Instead all CSS files should be included before the scripts on the page.
  • .isFunction is simpler now, it no longer handles some strange edge cases (in favor of simplicity and performance).
  • The order of “a, b, c” style selectors may change. Browsers that support querySelectorAll (Safari, Firefox 3.5+, Opera 10+, IE 8+) will return the elements in document order, other browsers will (currently) return them in the order specified. In 1.3.2 and later release all comma-separated selectors will be returned in document order.
  • The trigger and triggerHandler methods no longer accept event objects within the data array. Instead they should be specified directly as an argument.
  • The undocumented ‘extra’ function is gone from trigger and triggerHandler functions as well.
  • The internal jQuery.event.trigger no longer returns the last item returned by a handler, instead it return true or false as per the W3C specification. You should use a jQuery.Event object to capture the specific return value.
  • You should always be sure to run your page in standards mode. There are known issues with methods not working correctly in quirks mode.
  • An old (deprecated) style of creating selector plugins has been removed. Previously you could create string-encoded plugins which were later turned into functions – this has been removed – please just create the functions directly.
  • jQuery.param(obj) execute obj’s functions instead of converting them to a String.

The following properties have been deprecated (in favor of feature detection and jQuery.support, as discussed in the Overview: jQuery.browser, jQuery.browser.version, jQuery.boxModel.

The following browsers are no longer supported: Safari 2

Performance

To measure the performance of different portions of jQuery we used a modified copy of the SlickSpeed test suite to run our tests (adapted to handle non-selector tests). The raw results for the test runs can be found below (all times in milliseconds).

We used a copy of the Yahoo home page (a representatively complex web page) and used a selection of selectors that people actually use. Targeting selectors that people currently use will help to improve the performance of both existing and future applications.

Frameworks	jQuery 1.2.6	jQuery 1.3	Dojo 1.2.3	MooTools 1.2.1	Prototype 1.6.0.3
Firefox 3	184		111		147		240		137
Firefox 3.5	113		34		105		135		55
Safari 3.2	71		15		64		76		50
Safari Nightly	46		15		65		47		18
Opera 9.6	107		75		73		132		87
IE 6		854		640		561		1611		3174
IE 7		210		181		150		490		761
Chrome		30		13		23		118		10

Delegation Filtering Tests

To test delegation filtering we attempted to see if a given element matched a selector. jQuery 1.3 and Prototype provided native methods for handling this (.is and .match, respectively) whereas jQuery 1.2.6, Dojo, and MooTools all used a “run a selector and see if an element is in the results” technique.

Frameworks	jQuery 1.2.6	jQuery 1.3	Dojo 1.2.3	MooTools 1.2.1	Prototype 1.6.0.3
Firefox 3	3260		199		1630		3798		763
Firefox 3.5	1047		113		620		1101		298
Safari 3.2	1169		91		820		1223		188
Safari Nightly	911		65		294		590		125
Opera 9.6	1764		167		898		1976		451
IE 6		22142		1201		13000		17227		12827
IE 7		4908		341		2664		5497		2994
Chrome		959		125		700		939		153

DOM Manipulation Tests

These tests analyze the performance of inserting DOM fragments (in the case of jQuery and Prototype this is HTML, for MooTools it was using their Element class). Dojo didn’t provide any explicit helpers for injecting HTML or constructing DOM elements so it was excluded.

Frameworks	jQuery 1.2.6	jQuery 1.3	MooTools 1.2.1	Prototype 1.6.0.3
Firefox 3	161		41		47		323
Firefox 3.5	113		31		42		78
Safari 3.2	77		10		25		41
Safari Nightly	87		22		22		31
Opera 9.6	130		23		36		84
IE 6		710		110		600		971
IE 7		560		60		330		460
Chrome		49		14		23		21

.offset() Tests

Ran the jQuery .offset() method on a number of elements.

Frameworks	jQuery 1.2.6	jQuery 1.3
Firefox 3	142		30
Firefox 3.5	45		23
Safari 3.2	92		18
Safari Nightly	75		39
Opera 9.6	39		26
IE 6		151		70
IE 7		100		50
Chrome		115		21

.hide()/.show() Results

Ran the .hide() and .show() methods on a number of elements.

Frameworks	jQuery 1.2.6	jQuery 1.3
Firefox 3	2680		722
Firefox 3.5	1867		448
Safari 3.2	1015		577
Safari Nightly	532		306
Opera 9.6	2327		1173
IE 6		8242		2715
IE 7		1912		961
Chrome		1922		551

jQuery 1.3 and the jQuery Foundation

Posted on by

Happy Birthday to jQuery! jQuery is three years old today, after being released way back on January 14th, 2006 at the first BarCampNYC by John Resig.

We have four announcements for you today, we hope you’ll enjoy them!

jQuery 1.3

First, we have an excellent new release of jQuery ready for you to enjoy. The big features of this release are:

  • Sizzle: A sizzlin’ hot CSS selector engine.
  • Live Events: Event delegation with a jQuery twist.
  • jQuery Event Overhaul: Completely rewired to simplify event handling.
  • HTML Injection Rewrite: Lightning-fast HTML appending.
  • Offset Rewrite: Super-quick position calculation.
  • No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.

The full details of the release can be found in the release notes:
http://docs.jquery.com/Release:jQuery_1.3

We’re currently planning on a follow-up jQuery 1.3.1 release sometime within the next week or two to catch any straggling bugs that might’ve slipped through. If you spot any bugs please be sure to submit them to the bug tracker.

Sizzle

jQuery has a brand new CSS selector engine – nicknamed ‘Sizzle‘. You can read the full details behind it in the jQuery 1.3 Release Notes (including performance numbers).

More importantly, though, we’re taking a big leap with Sizzle: We’re releasing it as a completely standalone project to be collaborated upon by many library creators and developers. We saw an opportunity to give something back to not just the jQuery community but to the JavaScript development community as a whole; and at the same time be able to collaborate with developers of other libraries on a single, unified, selector engine. We feel that there’s too much competition and not enough collaboration occurring and so we put our code out on the line as a good first step towards working together.

As a sign of good faith and willingness to collaborate, we’ve turned over Sizzle to the Dojo Foundation (an excellent non-profit well suited for this project, not to be confused with the Dojo Toolkit). We wanted a common meeting ground where all developers would be able to work together and under which there would be a clear long-term copyright holder.

Our request for collaboration has already seen an amazing resopnse: Developers from Prototype, Dojo, Yahoo UI, MochiKit, and TinyMCE (and many other projects) have all shown interest in refining Sizzle to perfection.

A rough Sizzle project page can be found here:
http://sizzlejs.com/

Along with the full source code:
http://github.com/jeresig/sizzle/tree/master

New API Browser

Along with the release of jQuery 1.3, I’m pleased to present the new API browser, developed by Remy Sharp, available at: http://api.jquery.com/.

jQuery API Browser
This is an alternative view to the existing jQuery API that should be easy to navigate and use.

The new API browser includes the following features:

  • All the latest jQuery and jQuery UI documentation.
  • The ability to mark pages as favorites for those pages you keep wanting to return to.
  • Syntax highlighting in the code examples
  • Live running of examples within the browser
  • Links to edit and experiment with the code examples

Most importantly though, the API browser is also available offline as an Adobe AIR application (thanks to Tane Piper’s AIR framework). The interface looks and works the same, and includes an auto-update mechanism, so you’ll always be up to date.

Download and install the AIR API browser

If you find problems please submit a bug to the bug tracker under the ‘site’ component.

Which leads us to the last, and certainly not the least important, point…

jQuery Foundation

With the jQuery Project growing at a tremendous rate, it was important for us, as a team, to take a step back and determine how the project’s ownership should be handled. Currently, John Resig, jQuery’s founder and lead developer, and Paul Bakaus, lead developer for jQuery UI, both maintain ownership of their respective projects. This posed several concerns from a practical and legal perspective as it enjoined two individuals as the owners of the projects instead of a formal organization. As more individuals and corporations started contributing to the projects, these concerns became even more evident causing confusion as to who were the correct copyright holders for specific units of work.

After meeting up to talk at the recent jQuery Conference, we decided to really make a concerted effort to fix this and determine how we could shift ownership of the jQuery projects to a foundation-type organization that would:

1. Understand the nature of open-source software development.
2. Allow us to continue to manage the project unhindered.
3. Ensure that the projects continue to live on regardless of who is involved in the effort.

After examining many options we came to a final conclusion – and we’re excited to announce that the Software Freedom Conservancy has extended the jQuery project an invitation to join the non-profit organization and continue developing software under its auspices. By joining The Software Freedom Conservancy, the jQuery projects and community immediately realize some important benefits:

1. It allows the current project members to continue to manage the projects and maintain ultimate responsibility for the direction of current and future efforts.
2. It allows the projects to be considered a true non-profit efforts allowing us to be able to accept donations and contributions without incurring tremendous personal financial liability.
3. The copyright of the code will be assigned to the conservancy thus ensuring that no single person will own contributions or assets of the project.
4. It may allow corporations to write off time when an employee contributes to a project.
5. Most importantly, it ensures that the jQuery projects will always be open and free software.

This is a big step in formalizing the jQuery projects and an important accomplishment in ensuring that the investment being made by the jQuery community is protected. We’ll be making the transition into the conservancy over the coming weeks. There will be very little, to no, change in how the project will run. The jQuery Team will still run and manage the project and we’re still going to work hard to build the best JavaScript library possible. If anything this will help to free up some of our time so that we can spend more time coding – and who doesn’t like the sound of that?

Happy 3rd birthday, jQuery!

Help Test jQuery 1.3 Beta 2

Posted on by

We’re getting ever-closer to the final release of jQuery 1.3! In a follow-up to the recent 1.3 Beta 1 we have another test version for everyone to try. As with before, it’s not ready for production use yet but we definitely need help in hunting down any bugs that we may have missed.

Please don’t test 1.3 Beta 1 anymore – all testing should move on to beta 2. The final release of jQuery 1.3 will be on the 14th of January with a final release candidate available a few days before.

Download

A copy of jQuery 1.3b2 can be found here:

Please don’t use minified or packed versions of jQuery when testing – it makes locating bugs difficult.

Changes

So far two changes in 1.3 have been the most likely to cause problems:

  1. Old, XPath, style attribute selectors: [@attr=value]. These have been deprecated for quite some time – and we’re finally removing them. To fix it just remove the @!
  2. Bubbling triggered events. Triggered events now bubble up the DOM – some plugins haven’t expected this and have had to adapt. Its pretty easy to fix your code to “protect” against bubbling – add the following statement to your bound handler: if ( this === event.target ) { ... }

Tests

The test suite is holding up quite well. We currently have 1370 tests covering all aspects of the library and passing in all the major browsers:

jQuery 1.3b2

How to provide feedback:

  • Submit a bug to the jQuery bug tracker (you will need to create an account, first).
  • Be sure to include a simple test case for any problem that you’re experiencing (either attach the test case or provide a link).
  • Mention that you’re testing “jQuery 1.3 Beta 2” (otherwise your ticket will get confused with another release).
  • Email a link to your test case and bug report to the jQuery Dev list so that the dev team will be notified about your issue.

Thanks to everyone, in advance, for all your help in testing this release. We’re really excited about this release and can’t wait to get it into your hands.

jQuery UI 1.6rc4: It’s getting really close

Posted on by

Attention: We found a regression in the rc3 release that breaks datepicker in Internet Explorer. The issue has now been resolved with the rc4 release – please do not download the rc3 release anymore. We apologize for the inconvenience.

I’m absolutely thrilled to announce the latest release candidate for the long awaited jQuery UI version 1.6. It has been a busy couple of months, and not only our team but also our processes, specifications, and codebase has been updated. This means that rc4 isn’t simply a bugfix release on top of rc2, but really a whole different level of code. Using a our new interaction design processes, we build up the foundation of many widgets from the ground up, and refactored widgets multiple times until we finally reached the look and feel we were confident with. So, let me show you quickly what has changed especially in this release!

Datepicker and slider refresh

In order to make room for the new theming, we needed to unclutter the datepicker a bit. A couple of options have been removed, changeMonth and changeYear have been changed to be disabled by default and showButtonPanel was introduced as new method. More on that soon, detailed information can also be found in the related ticket.

The slider also went through a refactor. The ‘axis’ option was changed to ‘orientation’, the ‘handle’ and ‘handles’ options were removed, ‘steps’ and ‘stepping’ were removed in favor of ‘step’, ‘startValue’ and ‘moveTo’ have been removed in favor of ‘value’ (option and method), and much more. For more detail, see the slider specification page.

We will provide detailed compatibility information and upgrade solutions with the final release, so stay tuned.

Drag & Drop logic overhaul

The positioning and intersection logic of drag and drop and sortables has been completely redone, along with more than 200 automated tests to test all different environments, i.e. scroll offsets and position values. As positive effect, at least 30 conditions where the positioning was failing (i.e. scroll not included, helper stick at top) had been fixed.

New widget designs

jQuery UI 1.6rc4 features an entirely new look and feel, designed by our new Interaction Design team and powered by the new jQuery UI CSS Framework. Each widget’s markup and CSS has been re-approached to provide our cleanest and most flexible solution yet.

CSS Framework

jQuery UI 1.6rc4 is built upon a brand new powerful CSS framework. The new jQuery UI CSS framework is built to support not only jQuery UI’s own plugins, but also custom plugin development. It is a special kind of CSS framework that is aimed specifically at user interface development as opposed to overall page layout. The framework provides classes for commonly used UI utilities, states, containers and icons and is manipulated by jQuery UI ThemeRoller. Read more about the
framework API here: http://jqueryui.pbwiki.com/jQuery-UI-CSS-Framework

Refreshed demos

Themeroller v2
The website is currently going through some major updates, and in the first block of changes we’re happy to announce that the demos section has been completely redone from scratch. We removed the demo carousel (which was nice but not really usable), and introduced a page that both includes real world and functional demos for all widgets and interactions. The demos are directly pulled from the actual demos/ directory in our code repository, and then ajaxified. They are bookmarkable, and if you download the development bundle, you’ll see they even come as standalone!
This is only the first step of where we want to go for the final 1.6 release. If you’re interested in how it might look in the end, have a peek at our design wiki!

Themeroller v2!

Themeroller v2

ThemeRoller has been completely redesigned to compliment the new CSS framework and widget designs. ThemeRoller now resides in a vertical sidebar and has loads of new features added, such as:

Toggle-able panels with previews

ThemeRoller’s levers are now grouped into collapsible panes for ease of use. Each pane shows a preview of that state’s current styles so you can still view its settings while collapsed.

New Levers! Round corners! Drop shadows!

We’ve added new levers to the application for highlight, error, corner radius, overlays, and overlay shadows. Try em out!

Themeroller v2 - Shadows

Icon sprites

The jQuery UI CSS Framework comes with loads of icons for custom widget development. Icons are now packed into sprites and classes for each icon can be found in the docs.

Themeroller v2 - Icons

New themes

We’ve added a bunch of cool new themes to the new gallery which can beviewed and customized in the gallery tab of ThemeRoller.

Themeroller v2 - Gallery

History/back button support

Every action you take in TR is now undoable/redoable through your browser’s history.

Legacy theme support

Themes designed using the older version of ThemeRoller will load just fine in ThemeRoller v2, but keep in mind that there are a number of new settings that your old theme will not have yet. This version of ThemeRoller allows you to still download any ThemeRoller theme for jQuery UI 1.5.

Coming soon…

  • PNG 8 Support in ThemeRoller
  • New ThemeRoller developer tool: Pull ThemeRoller into any page on the web and design themes for custom components built using the jQuery UI CSS Framework.
  • New ThemeSwitcher bookmarklet: A quick script that will allow you to bring a miniaturized Theme Gallery into your web pages to allow visitors to quickly change themes for custom components built using the jQuery UI CSS Framework.

Download and test!

Now go ahead and download from our download page, then help us test and report anything odd that looks like a bug in our bugtracker. Also note: jQuery UI 1.6 final will ship with and require jQuery 1.3, so please let us know if you find any issues when combining this release with jQuery 1.3b1.

Cheers!

Help Test jQuery 1.3 Beta 1

Posted on by

The jQuery team has been working hard on the new release of the jQuery library and it’s ready for some in-depth testing! jQuery 1.3 is not ready for production use yet but we need help to weed out any bugs that might’ve snuck through.

Download

A copy of jQuery 1.3b1 can be found here:

Please don’t use minified or packed versions of jQuery when testing – it makes locating bugs difficult.

Major Areas of Change

Here are some of the areas that have seen major changes and are most likely to cause problems in your code:

  • Selector Engine – The selector code has undergone a complete rewrite – it’s likely that some edge cases still exist here.
  • DOM Manipulation (append/prepend/before/after) – This code has also undergone a large rewrite along with some of the logic for executing inline script elements.
  • .offset() – Another method that has been completely rewritten.
  • Event Namespaces – The logic for handling namespaced events has been completely rewritten.
  • Event Triggering – When triggering an event the event now bubbles up the DOM – this is likely to cause some problems.

While we won’t get into the particulars of all the new features that are in jQuery 1.3 (we’ll do that later, when it’s ready for final release – scheduled for January 14th) we do appreciate any/all feedback that you can provide.

How to provide feedback:

  • Submit a bug to the jQuery bug tracker (you will need to create an account, first).
  • Be sure to include a simple test case for any problem that you’re experiencing (either attach the test case or provide a link).
  • Mention that you’re testing “jQuery 1.3 Beta 1” (otherwise your ticket will get confused with another release).
  • Email a link to your test case and bug report to the jQuery Dev list so that the dev team will be notified about your issue.

Thanks to everyone, in advance, for all your help in testing this release. We’re really excited about this release and can’t wait to get it into your hands.

What’s Up With jQuery UI?

Posted on by

The jQuery UI team has had a busy and productive fall and wanted to give everyone an update on what we’ve been up to.  First off, we’re happy to announce that our team of contributors has grown significantly in the past few months and want to thank everyone for their support. To round out the great group of developers on the core team, new sub teams and team roles have been created, to focus on areas such as evangelism, design, builds, testing, website, and documentation. Most noticeable is the recent activity of the Interaction Design sub team focusing on UI design, widget planning, and theming. To learn more about who’s on the team and what we all like to do, check out the jQuery UI team page. Also, we are pleased to announce that Filament Group is now an official sponsor of jQuery UI, making up most of our Interaction Design team. Thank you.

When’s 1.6 coming?

The 1.6rc3 release is being wrapped up and will be out within a week. Our goal is to have 1.6 final out still in December. We’ve decided to cut back the number of new additions in order to re-factor the existing plugins for improved accessibility, performance, and theming. In this release, the only new plugin will be the determinate progress bar. The autocomplete, colorpicker, and spinner plugins have been moved into a future release (to allow time for further refactoring, not delaying 1.6 any further), while magnifier has been moved into experimental again, soon to be released as external plugin at Paul Bakaus’ homepage (more on that in the next final release announcement). With a better planning process in place now (see below), we’re confident removing plugins from a release candidate won’t happen in the future, and we apologize for any trouble it might have introduced for you.

What’s 1.6 all about?

One of the most exciting changes arriving with the final version of 1.6 is a complete re-factor of the CSS class framework used across all the jQuery UI widgets. This will build on the ideas of the original ThemeRoller tool, but extend the system to be a rich UI class framework that can be used across all plugins, both internal and external. Here is just a partial list of what’s in the works:

  • New classes for error, highlight and disabled states
  • Extended, sprite-based ThemeRoller icon set
  • Class system for adding rounded corners via CSS (Firefox and Webkit, gracefully degrades)
  • New ThemeRoller tool with inspector style view
  • Theme gallery with voting and user-generated themes
  • Improved documentation for generating custom themes and using the class framework

You can learn more about the new ThemeRoller app and class framework on our new wiki.

What are y’all working on?

To keep us organized and make the planning process more transparent to the community, we’ve created a new design and planning wiki at http://jqueryui.pbwiki.com/. On the wiki, we’ve been refining and detailing our processes for growing the team and the project, accepting and reviewing contributions, and prioritizing new plugins into a roadmap. By channeling ideas and decisions made on the jQuery UI Dev google group conversations into the wiki, we hope to provide a single, unified view of our current thinking, so we’re all in sync. To see what we’re up to, a summary of the current development status can always be found at the top of the wiki homepage. (Note: http://docs.jquery.com/UI will continue as the end-user documentation/production wiki for jQuery UI)

How can I help?

One big part of the wiki is collecting a long list of ideas for future plugins that we might want to include in the jQuery UI library. So far, we’ve created a sortable table on the wiki homepage with over 50 plugins with planning information for the highest priority items. Each plugin has a detail page where we can collect best practices, visual designs, sample markup and style, accessibility considerations and track the status of the development. We hope to have a vibrant conversation with the community and engage as many designers and developers in the process, so please feel free to add comments, edit pages, and link to examples on the wiki. We’ve just started the plugin design and specification process so this is a great time to get involved and help us shape the future of jQuery UI.

CloudFront CDN for jQuery

Posted on by

Here at jQuery we’ve been using Amazon S3 to host the jQuery code and static site files for quite some time. It’s remained dependable and quite responsive.

Yesterday Amazon released their new service, called CloudFront. The major difference between it and S3 (they are both designed to serve files) is all about network performance. Whereas S3 was just about instantaneous control (being able to upload a file and see it live, instantly) – CloudFront tries to serve up a file as quickly as possible.

Yesterday we made the switch to using CloudFront for the jQuery site. The two domains that are affected are:

  • code.jquery.com – Hosts the jQuery source code.
  • static.jquery.com – Hosts all the jQuery site images, CSS, and JavaScript files.

Whereas S3 only had servers in Seattle, CloudFront has servers across the globe – allowing the site to load much-more-quickly no matter where you’re located.

Some initial numbers of come in and they’re quite promising.

Roland Moriz posted about the improvement in latency that he’s seen in Germany – with static.jquery.com coming in at 24ms latency in comparison to jquery.com’s 105ms latency.

I ran a similar test here in Boston and even managed to see a large improvement. I was seeing latency of anywhere from 50-200ms on Amazon S3, but only a latency of 17-19ms with CloudFront.

What does all of this mean? It means that the jQuery site is going to load even faster than it does now. We already receive some excellent hosting from Media Temple but being able to off-load these static files to the fast-loading servers will only make for a better browsing experience.

It also means that the jQuery project can expect to be paying even more in hosting costs. In less than 24 hours we’ve already had almost 2.5 million requests for over 50GB of data.

We pay all of these costs out of our own pocket – so a donation will significantly help us to make sure that we can keep providing a fast jQuery web site.

It should also be noted that CloudFront doesn’t appear to provide any sort of GZip compression on the transferred data. Because of this I still recommend that you use the Google Ajax Libraries API to load your copy of jQuery, done like so:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

If you’re unfamiliar with the Google Ajax Libraries API I highly recommend that you check in to it – we use it on jquery.com and it’s still the fastest way to serve up jQuery (Hosted by Google, Gzipped, and Minified).

jQuery Pumpkin

Posted on by

jQuery Halloween Pumpkin

Created by jQuery user Christopher Pickert (of BigFishGames.com), he writes:

"Since Halloween is the perfect time to celebrate the black arts of web development, I carved a special jQuery pumpkin last night. I hope you enjoy it.

Our QA person said that he found a bug in the code, but I explained that it was because of the candle."

He continues:

I did carve that – it’s not photoshop. On an impulse I bought a little $7 battery-operated pumpkin saw at the grocery store, and it’s great because you can do small details more easily. So actually the hard part was drawing the characters first and getting them the right size.

Great work Christopher!