jQuery.com Site Redesign

Posted on by

We’ve just pushed out a brand new site redesign (for jQuery.com and all its sub-sites). This has been a long time coming and it feels great to get it out the door.

New Homepage

jQuery.com

Easily the most contentious part of the redesign – but absolutely the most eye-catching.

jQuery has long been driven by rock, even looking back to its original release which was heavily inspired by the always-excellent Devo. We shot for a catchy design that helped to bring JavaScript out of the cold doldrums that it frequently inhabits – giving it a serious jolt of fun.

New Site Layout

jQuery Docs

The entirety of the site has a new layout. With drastically improved multi-layer navigation and a standardized sidebar it should become much easier to navigate the individual portions of the site.

You should probably wear a hard hat while exploring the interior pages – font sizes, spacing, and colors are all in need of tweaking, which will be handled over the upcoming week (it’s fun working against Trac, WordPress, Drupal, and Mediawiki simultaneously).

New Logo

jQuery Logo

The original jQuery logo was a variation of the Devo hat – we’ve taken that concept, turned it on its ear, and made it something that we can call our own – while still being inspired by the original contours of the Devo Energy Dome.

Thanks

Site and Logo Design: Scott Jehl – he put a fantastic amount of work into this redesign, bringing it all the way from conception to final implementation.

Rockin’ Illustration: Varick Rosete from nGenWorks also of Happy Webbies fame.

Initial Logo Prototyping: Bradley Sepos.

Also want to thank Media Temple for our hosting. They’ve been helping us a lot this past week migrating our sites to some new servers – expect some speed improvements for the sub-domains very soon.

jQuery UI 1.5.2

Posted on by

About 4 days ago, many have noticed that we had uploaded another minor bugfix release to our Google Code account. While there’s, again, no new API introduced, more than 30 issues have been cleared and the codebase is growing more stable every day.

The full changelog is available here if you want to find out if a specific issue has been addressed. As with 1.5.1, updating to this version is highly recommended and likely not to break anything in your written code.

You can grab the latest release as always via the downloader or as developer package at http://ui.jquery.com/download or if you prefer, get it as latest tag from Subversion.

As a last comment, this is probably the last minor release before 1.6, which we will announce before the end of July, so watch out for a couple of awesome new components and enhancements soon!

Have a nice day,

Paul Bakaus & the jQuery UI Team

jQuery UI 1.5.1

Posted on by

Soon after the release of jQuery UI 1.5, we were getting many useful feedback and issues entered in our bugtracker. Today, we’re happy to release another version of jQuery UI which takes care of many minor regressions and a lot of unsolved issues.

1.5.1 doesn’t add any new features or API changes, but fixes more than 50 found issues. A full changelog is available, if you want to know the specifics. Updating to this version is highly recommended and likely not to break anything in your written code.

Additionally, issues within ThemeRoller and the demos on our homepage also have been reported and fixed. We are now continuing to finish all unit tests and functional demos, so expect to see another release of both UI and its website soon again.

You can grab the latest release as always via the downloader or as developer package at http://ui.jquery.com/download or if you prefer, get it as latest tag from Subversion.

See you soon,

Paul Bakaus & the jQuery UI Team

jQuery 1.2.6: Events 100% faster

Posted on by

jQuery 1.2.6 is primarily a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

This is the next release immediately following jQuery 1.2.3. Releases 1.2.4 and 1.2.5 were skipped (1.2.4 was built incorrectly, rendering it effectively identical to 1.2.3, and 1.2.5 was missing a patch).

The entire jQuery team did a fantastic job in pulling this release together – I want to take this opportunity to thank them all for their continued hard work.

I’d also like to take this opportunity to welcome Ariel Flesler to the core jQuery development team. He provided valuable help in pulling this release together – contributing bug fixes, performance improvements, features, and test cases. You can see the result of his hard work all throughout this release. Welcome Ariel and thank him for all his contributions!

Downloading

jQuery 1.2.6:

If you wish to checkout the full release from the Subversion repository, you can do so by following the instructions and checking out the source from the following location:

svn co http://jqueryjs.googlecode.com/svn/tags/1.2.6

Performance Improvements

Once again the jQuery team has worked hard to bring huge performance improvements in this release. As with previous releases we’ve expanded to look at many areas of the jQuery framework, looking for common pain points, and providing relief.

All data and test cases for the below performance improvements can be found in the the following jQuery 1.2.3 v. 1.2.6 Google Spreadsheet (results for Internet Explorer 6 were excluded in favor of Internet Explorer 7 due to their virtually-identical results).

Event Handling is 103% Faster

In analyzing intense application code (specifically operations such as drag-and-drop) we looked for ways in which universal changes could be made that would affect all users. A frequently-called piece of code was that of the jQuery event handler, any optimizations to it would dramatically improve the performance of all resulting frequently-called events. By focusing improvements here all frequently-called events that you have should see immediate benefits.

CSS Selectors are 13% faster

A number of optimizations have been made to internal jQuery methods, dramatically improving their performance, while providing measurable benefit to some of the most commonly used code in jQuery (such as the CSS Selector code).

For example the jQuery.map() method is now 866% faster and jQuery.extend() is 19% faster. These two changes have allowed for dramatic improvements in performance all throughout the library.

.offset() is 21% faster

Together with the improvements to jQuery’s event handling code optimizations of .offset() have allowed intense mouse-based operations to become much faster. For example jQuery UI’s drag-and-drop code is now over 300% faster because of these change (allowing you to achieve faster, smoother, drag-and-drop operations).

.css() is 25% faster

A method that’s frequently called (both internally and externally). The optimizations to this method are easily felt in others (like .offset(), for example).

New Features and Major Changes

Dimensions Plugin is Now Part of Core

The remaining methods of the Dimensions plugin, by Brandon Aaron, have been introduced into jQuery core, along with additional bug fixes and performance improvements. This plugin has seen considerable use amongst developers and plugin authors and has become a solid part of the jQuery ecosystem. We’ve been, slowly, introducing the most-used methods from the Dimensions plugin over the past couple releases – but with the release of 1.2.6 all remaining methods are now part of core.

If you’re upgrading your copy of jQuery to version 1.2.6 you can now opt to exclude the Dimensions plugin from your code.

The full documentation for Dimensions can be found on the jQuery documentation site (and is in the process of becoming integrated with the core jQuery documentation).

.attr() overhaul

The .attr() method has been completely overhauled (resolving about 15 outstanding bugs). Additionally, the method has been significantly simplified and optimized.

.toggle() can now accept more functions

Historically jQuery’s .toggle() function has accepted two functions (to be toggled in an even/odd manner). However that has been changed so that any number of functions can be provided and toggled by a mouse click.

$("div").toggle(function(){
  $(this).removeClass("three").addClass("one");
}, function(){
  $(this).removeClass("one").addClass("two");
}, function(){
  $(this).removeClass("two").addClass("three");
});

You can now unbind bound .toggle() and .one() functions

function test(){ $(this).addClass("test"); }
$("div").one("click", test);
$("div").unbind("click", test);

$("div").toggle(test, test);
$("div").unbind("click", test);

.index() supports jQuery collections

jQuery’s .index() function has allowed you to find the location of a DOM element in the jQuery collection – now you can also specify a jQuery collection (the first element of which will be extracted and located in the original set).

var test = $("div.test");
$("div").index( test ) == 3

jQuery.makeArray can convert ANYTHING to an array.

jQuery’s internal .makeArray() method now converts any array-like object into a new array. Additionally it wraps all other objects as an array and returns the resulting set.

jQuery.makeArray( document.getElementsByTagName("div") )
// => [ div, div, div ]

jQuery.makeArray( true )
// => [ true ]

jQuery.makeArray()
// => []

beforeSend can cancel Ajax calls

The beforeSend Ajax callback has allowed developers to execute a piece of code prior to a request occurring – now that code can also verify the integrity of some parameters and cancel the resulting Ajax request (useful for tasks like form validation).

$.ajax({
  beforeSend: function(){
    return $("#input").val() == "";
  },
  url: "test.php"
});

Exposed Speeds

jQuery has a number of named animation speeds (such as ‘slow’, ‘fast’, and ‘default’) you can now provide your own names for animation speeds, or modify the existing ones, by manipulating the jQuery.fx.speeds object.

jQuery.fx.speeds.slow = 1000;
$("#test").slideDown("slow");

jQuery UI 1.5 release candidate, we’re getting excited

Posted on by

The jQuery 1.5 release candidate is now available at http://ui.jquery.com/download for everyone to test and download!

This is the most stable UI version ever, and it fixed all known bugs that are not in the categories “minor” or “trivial”, which means that we ourselves think it’s good to go. However, the reason why we’re still holding off with the final release is the fact that we want you to try out every aspect of our release candidate.

Therefore, the jQuery UI team encourages you to try out the demos on the website in any of the supported browsers, play around with every option you can find and test in different browsers using the new unit tests, which we’re finalizing right now. If you grab the whole development package from the website, it will come with unit tests for slider, draggables and resizables. We are working on other automated tests, which can be downloaded in the next few days from our SVN.

If you find anything strange going on, or if something isn’t working / looking like it should, that’s great :-) ! Please then submit your issue to us via the new jQuery UI bugtracker at http://ui.jquery.com/bugs/newticket. This will greatly help us to make the final release as solid as possible.

Now we really don’t want you to wait any longer than needed: I’m very excited to announce that jQuery UI 1.5 will be released and announced in exactly 6 days, on June 8th, along with updated documentation and a epic changelog to convince your bosses and collegues.

See you soon!

The jQuery UI Team

jQuery UI 1.5b4, featuring effects and a new home

Posted on by

jQuery UI 1.5b4

Attention: We originally intended to release 1.5b3 a couple of hours ago, but we had two serious issues that forced use to deprecate it and go for b4. Sorry for the inconvenience.

The third and last beta has finally arrived to jQuery UI 1.5. Hundreds of hours went into fixing more than 50 bugs for this release – it’s all about stability. jQuery UI 1.5b4 is the last release before pushing out a release candidate – and with only 5 major bugs left, you can expect to see the next release in the next couple of days!

Although it’s mainly a stability release, we also introduced many new API helpers, removed the dimensions dependancy and made all plugins a bit smaller by introducing a generic widget factory into the core. Even better, performance of UI components firing events (i.e. “mousemove” in Draggables) was dramatically improved with recent changes in the jQuery core.

With the release candidate following right after this one, we will also push out a live test suite for everyone to use on any platform, helping us to track down issues, and fixing them for the final release. Yes, this means you an expect a stable, solid and performance-optimised 1.5 release this month!

Go grab the whole package (This package includes a custom build jQuery you’ll need, too):

jquery.ui-1.5b4.zip

jQuery Enchant becomes part of jQuery UI

After many weeks of discussions, I’m particulary happy to announce that the unreleased jQuery effects suite “Enchant”, earlier introduced as sister library to jQuery UI, is now a part of jQuery UI. With the 1.5b4 release, you’ll see a bunch of new files in the project’s folder!

The jQuery UI effects can be used standalone or together with UI and have a separate core, which extend the jQuery core to introduce easing, class transitions (morphing) and color animations. All further effects are tighly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).

There’s no documentation for the rich effect API at this point, but we’ll make sure it’s released before the final release of jQuery UI 1.5. In the meantime, feel free to start digging through the code – and watch more more blog posts discussing the new effects!

Overall, we have more than 15 ready-to-use effects for you to use in your projects, not only including everything you know from script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh new effects (transfer, explode. clip, scale) for you to enjoy!

jQuery UI has a new home

UI Website

I’m absolutely thrilled to announce that jQuery UI has finally found a new home at http://ui.jquery.com, along with brand new content, a new combined logo and a complete new design. After many weeks of iterations, we finally found the time to concentrate a bit on the website.

The new site features a complete new download builder already including effects, a real-world demo carousel, and a functional demo suite that makes it easy to see and try out UI examples and their syntax. Also planned for the next weeks is a theme section with directions on downloading UI themes and how to make them, and a tutorials section that will feature easy tutorials to easily learn controlling UI widgets.

A big thanks and kudos goes to Liferay’s Art Director Brian Miller, who did a great job and invested countless hours to achieve this beautiful design!

See you soon!

Paul Bakaus and the jQuery UI Team

jQuery Worldwide Sprint a huge success

Posted on by

The jQuery Worldwide Sprint (see previous post) is over, and it was a wonderful momentum and great experience for many of us.

We made great use of the sprint wiki page during the sprint, and it now serves as a reference of what we accomplished, including meeting summaries and irc logs.

We moved a lot closer to jQuery UI 1.5, and we had 20+ people actively participating, working in one of four different groups:

Development Group

The dev group was solely focusing on the codebase of jQuery UI. They fixed more than 20 issues in our bugtracker, and implemented missing features such as the greedy option in Droppables. Additionally, we improved the core of UI in a very positive way: we got rid of two dependancies (jquery.dimensions.js and ui.mouse.js) and added one (ui.base.js). The impact was so great that even the core was changed: jQuery itself now includes useful methods from the Dimensions plugin (more on this in the upcoming blog post).

Test Group

The test group focused on writing and running a full suite of unit tests for each UI Plugin. This is critical, to ensure that all the features of each plugin are thoroughly tested in all supported browsers. The unit test coverage after the sprint is about 60%. Our goal is to have it in the high 90s before 1.5 final.

Demos Group

The demos group created a brilliant functional demo template and functional demos for many of our plugins. Also, many volunteers worked on stunning real-world examples that show how a specific plugin can be used in a real world scenario. All demos will flow into the new demo category on our upcoming website.

Documentation Group

The docs group had the pleasure of pouring over the documentation for each UI plugin, comparing to the source code, to unit tests, and demo pages. They wrote and updated to ensure correctness and clarity, for even an absolute newcomer to jQuery UI.

Thank you

So after all, we haven’t completely reached all of our goals, and we still have to work hard on fixing all issues still open. But we made huge progress that certainly wouldn’t have been possible without the combined power of all who helped. Not only this, but the Sprint was also a great way to introduce and motivate new people to join the UI project.

A big thanks to everyone who helped during the sprint and before the sprint – especially Richard Worth, who had the initial idea and made this event possible (he did all the hard stuff ;-) ), Eduardo Lundgren, who managed the demo group and worked insanely long hours during the sprint, and all the others who made huge contributions on both days.

But it’s not over until it’s over: We stll have to date 46 issues opened in our bugtracker until we are ready to roll out the final version of UI 1.5. Therefore, we are already thinking about a follow-up sprint. More on that soon here!

See you soon!

Paul Bakaus & the jQuery Team

jQuery UI Worldwide Sprint: March 14-15

Posted on by

The jQuery UI Team is pleased to announce its first Worldwide Sprint, to take place next Friday and Saturday, March 14-15, 2008. Two full days of testing, fixes, documentation, and general getting-stuff-done. Our goal is to get the jQuery UI 1.5 release (alpha, beta) ready for final, and we invite any and all to help. Whether you have an hour, or an afternoon, come and run really fast with us.

How Will It Work?

We’ll all gather in IRC (#jquery-sprint on freenode) throughout the two-day sprint, with a couple of scheduled meetings to keep everyone on the same page, and make sure things keep moving. Other than that we’ll just be doing as much as we can, as fast as we can. Opening tickets, closing tickets, breaking stuff, fixing other things, and everyone’s favorite pastime: documentation.

I’m New Here. Can I Help?

Absolutely. If you’ve thought about contributing to jQuery or jQuery UI before, but never really found the right moment or momentum, this sprint is the perfect time to get involved. Paul and I will be around, as well other members of the jQuery Team to help people get started, especially if it’s your first time. We’ll help you help us, in whatever way you want. That could be testing, documentation, ticket triage, bug fixes, writing demos, or even just playing with new stuff as we churn it out, and providing valuable feedback. We want to ensure this release is rock solid on all supported browsers, including yours.

More Details

We’ve created a wiki page to help coordinate this big event. It has some more details on what is planned, how to jump in, and will be updated throughout the sprint to show status and next steps. We invite you to add your name to the page as a participant, if you’re interested, even if you have only a few hours (or aren’t sure how much time you’ll have). Also, feel free to specify what you’re willling and/or able to do. Thanks!

jQuery UI 1.5b: New API, more features, huge performance boost

Posted on by

Hey everybody,

The jQuery team is proud to release the first beta release of the new upcoming version of UI, jQuery UI 1.5! It has been a long path to this release – originally intended to be a bugfix release, it was growing into something we just couldn’t call 1.0.1, not even 1.1, no, it’s so damn delicious we had to call it 1.5.

jQuery UI 1.5 is a complete overhaul of the library – many of the components have been completely rewritten from scratch to improve overall stability and performance, and we finally managed to settle on a unified API for all components. So let’s get straight to a list of all the changes:

Unified API

The API has been updated for all UI components. It should now be very easy to use other plugins if you’re familiar with one of them. There is only one exposed method for every plugin – All other methods are called by passing in a String into the exposed method, the initialization of the plugin works by giving on a options hash as first argument. You can now change and get all options at a later point if you want to by using the new data method. Basic example for draggables:


$(..).draggable({...}); //Initialize the draggable
$(..).draggable("disable"); //Disable the draggable
$(..).data("cursor.draggable", "move") //Change the cursor during drag to 'move'

Updated and revised documentation

The documentation in the jQuery Wiki has been completely updated to reflect the recent changes. We also made sure all callbacks and its arguments are documented this time.

Drag & Drop: Snapping, Relative dragging

Draggables and Droppables have been completely refactored. It might now be the most non-destructive drag & drop implementation ever: The css position’s value will not be changed except for ‘static’: That means that elements, that were static or relative, will not be forced into absolute positioning, which often destroyed layouts, especially when dealing with floats.

Some options have been renamed to better be recognized: preventionTimeout becomes delay, preventionDistance becomes distance.

Also, a new option plugin has been added: The snap plugin. Remember the docking Winamp windows? Yes, you can do that now with UI draggables – just set “snap” to a selector to select all elements you want to snap to and you’re ready to go. Of course, you can also configure it to your needs using snapTolerance and snapMode.

Slider: Ranges, multiple handles and accessibility

The slider wasn’t refactored, but has been completely rewritten from scratch. While it’s still almost backwards compatible, it’s now very stable and simpler than ever: The moveTo method now only takes two arguments: The value you want to move the handle to and optionally the index of the handle you want to move. Want to retrieve a specific handle value? No problem, just call $(..).slider(“value”, index) .

Even better, the slider now is completely keyboard accessible: You can now tab and focus each slider handle seperately and move its position using the left/right keys. We also improved support for using the mouse: Clicking into a empty area now moves the focused handle to the clicked position, regardless on how many handles you have.

For those of you searching for advanced usage, the slider now supports ranges: Just set the option “range” to true and make sure you have two handles, and the script will create a visible range between these two sliders that can be styled individually. The script even makes sure that you cannot create negative ranges.

Sortables: Connected sortables, serialization and more

Rewritten as well, the sortables now support a wide range of features you already know from draggables: cursor, zIndex, revert, opacity, axis, handles, containment and scrolling. Additional to that, you can now serialize your items to a url hash, and you now have the often requested ability to connect multiple sortables, so you can drag a node from one sortable to another.

and there’s more!

This is just an excerpt of the plugins I personally was involved in – the final release will come with an official changelog – but most of the other plugins have been refactored as well, with tons of new features in datepicker, tabs, accordion, resizables and more.

..and less!

Preparing for our sister library Enchant, we removed the magnifier and the shadow plugin and moved it to Enchant. Worry not, you can find them in our SVN trunk under trunk/fx. Additionally, the table sorter component has been removed because of API and roadmap incompabilities. There will soon be a grid component that includes most of its functionality.

…and countless bugfixes

We could have made it easy for us, just rewrite everything and delete all bug tickets of 1.0 because it’s not possible to track down anymore, but we did not: All issues coming in for the 1.0 release have been adressed and solved.

For everything that has changed in this release, please consult the documentation or look for it in the code. Remember this is a beta release – expect things to be buggy and unstable (but better than 1.0 :P ). Also, you would do us a great favor if you report any issues to our bug tracker.

Now go ahead and grab it here: http://ui.jquery.com or directly from our google code page: jquery.ui-1.5b.zip. For this release, we deactivated the downloader – so please download the zip package and include what you need. You can read about the dependancies in the documentation.

Thanks to all the contributors who made this release possible – I will thank each of you individually in the final release notes, I’m too lazy and too tired to do it twice :)

See you again in about two weeks!

jQuery 1.2.3: AIR, Namespacing, and UI Alpha

Posted on by

We’re happy to announce a brand new release of jQuery. This is primarily a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.3:

If you wish to checkout the full release from the Subversion repository, you can do so by following the instructions and checking out the source from the following location:

svn co http://jqueryjs.googlecode.com/svn/tags/1.2.3

Important Changes

The primary purpose of this release was to fix a couple outstanding bugs from the jQuery 1.2.2 release. Specifically, this release is now compatible with Adobe AIR, will be included in Drupal 6, and will be the base for jQuery UI 1.5. Additionally, a couple minor features, for plugin developers, were included in this release.

.data() and .removeData()

These methods complement the, already included, jQuery.data and jQuery.removeData methods introduced in jQuery 1.2. The important change, however, is that they’ve been tailored for plugin developers. You can now namespace data additions – like you can with event binding/unbinding. For example:

  $("div").data("test", "original");
  $("div").data("test.plugin", "new data");
  alert( $("div").data("test") == "original" ); // true
  alert( $("div").data("test.plugin") == "new data" ); // true

Additionally, getting or setting data values can be overridden by a plugin. For example, the following code is from the, recently updated, draggables in jQuery UI:

  $(element).bind("setData.draggable", function(event, key, value){
     self.options[key] = value;
  }).bind("getData.draggable", function(event, key){
     return self.options[key];
  });

The above makes it such that all attempts to get and set draggable-namespaced data will be intercepted and handled by the plugin directly (rather than being bound directly to the element). The result is a powerful new interface for dealing with internalized data within a plugin.

.unbind(“.namespace”)

In jQuery 1.2 you could add and remove namespaced events, however you always had to include a name for the type of event being used. With this addition you can now remove all bound events that match a particular namespace, for example:

  $("div").bind("click.plugin", function(){});
  $("div").bind("mouseover.plugin", function(){});
  $("div").unbind(".plugin"); // All handlers removed

The above removes all bound event handlers that are within the “plugin” namespace.

.trigger(“click!”)

Finally, a new addition was included to allow exclusion of namespaced events from being triggered. For example:

  $("div").bind("click", function(){ alert("hello"); });
  $("div").bind("click.plugin", function(){ alert("goodbye"); });
  $("div").trigger("click!"); // alert("hello") only

The above only triggers the non-namespaced event handlers.

Alpha Release: jQuery UI 1.5 and jQuery Enchant 1.0

Last, but not least, we’re pleased to announce a new alpha release of jQuery UI. This is an overhaul of the existing code base with tons of a bug fixes and API tweaks. We need a ton of help testing this alpha, making sure that it’ll be rock-solid for the upcoming release candidate. Please participate in the discussion, helping us to get ready.

Additionally, we’re working on a new plugin called jQuery Enchant which will bring a ton of advanced effects to the library (like clip, shake, and explode – to name a few). This is an alpha release of this plugin, as well – so please help us test it and make sure that it’s completely up to the jQuery level of quality.

Download

Demos

Enjoy!