Disclosure: I’m a member of the jQuery Project team

Back on January 14, 2006, a brash, young and talented developer named John Resig put out a personal project to the OSS world and hoped it could benefit *someone*. Little did he know that 3 years later, his side project would become one of the most influential frameworks for developing JavaScript-based applications. Today, the jQuery project turns 3 years old which, considering the churn rate for open source projects, is a monumental achievement. So it makes sense that on the project’s 3rd birthday, the team has announced the release of jQuery v1.3, the latest and greatest release of jQuery which includes the new Sizzle selector engine.

Along with the inclusion of Sizzle, jQuery v1.3 includes a bevvy of new features:

• 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 details of the release can be found via the release notes.

In addition to that, Remy Sharp donated a new dynamic API browser to the jQuery project which makes searching the jQuery API extremely easy:

The API browser includes:

• 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

In addition, Tane Piper & Remy worked together to provide an AIR app version of the browser so you can view the API locally.

The biggest update though is that the jQuery projects (i.e. jQuery & jQuery UI) will be part of the Software Freedom Conservancy thus making the projects true non-profit endeavor and providing a number of benefits to both the project and the jQuery community including:

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

With so many new individuals & corporations contributing to the project, doing this became a big priority to protect the investments made by the jQuery community.

This is a lot of great news for jQuery developers and here’s wishing jQuery a happy 3rd birthday.

Developers are always looking for a great grid control that is easy to use, customizable and, of course, feature-rich. Paulo Mariñas has created just that for jQuery developers. Flexigrid is an extremely flexible grid control with provides many of the features highly-desired by developers. These include:

• Resizable columns
• Resizable height and width
• Sortable column headers
• Cool theme
• Can convert an ordinary table
• Ability to connect to an ajax data source (XML and JSON[new])
• Paging
• Show/hide columns
• Toolbar
• Search
• Accessible API

Version 1.0b3, which was recently released provides:

• Fixed paging problem on multiple instances
• Mootools and Prototype noConflict() compatibility problems fixed
• New onError event on ajax interaction, (it will pass what the server said in a variable called data), allowing you to handle server problems
• New $().flexAddData method, allows you to directly add new data to the grid using your own data source.
• New preProcess API, allows you to modify or process data sent by server before passing it to Flexigrid, allowing you to use your own JSON format for example.
• Single Rows Select just use { singleSelect: true } in the options

Get more information at the Flexigrid main page.

Dojo developers will be pleased to read about the recent update to the Dojo grid control. Version 1.2 of the grid control focuses primarily on improving integration with Dojo data stores, improved grid layout handling and providing advanced in-place editing capabilities. The update was fairly extensive forcing the team to rethink the design of the widget and refactor quite a bit of code. As such, the updated version of the grid has been setup as a new control allowing developers to continue to use the older version while being able to take advantage the updated features. This will ensure that applications based on the previous grid control won’t break.

The biggest benefit truly is the tighter coupling between the new DataGrid and Dojo’s existing dojo.data stores:

In order to use dojo.data stores with the grid in previous releases, you needed the dojox.grid.data.DojoData model which would bridge the gap between the grid and the store. DataGrid has been engineered to remove that bridge. Instead of using stand-alone models to store data for the grid, any dojo.data store that implements the Dojo Data read API can be used. Additionally, DataGrid can use the write and notification API’s if they are available.

For example, the following code will create a new dojo.data store based off of a JSON file from a URL and populate the new DataGrid by passing it as an option to the DataGrid constructor:

Building a solid grid control isn’t an easy task and it seems like the Dojo team have done a great job of enhancing their widget.

Paul Duncan announced today the release of PersistJS, a client-side JavaScript persistent storage library.

Currently the only reliable cross-platform and cross-browser mechanism for storing data on the client side are cookies. Unfortunately, using cookies to store persistent data has several problems:

* Size: Cookies are limited to about 4 kilobytes in size.
* Bandwidth: Cookies are sent along with every HTTP transaction.
* Complexity: Cookies are difficult to manipulate correctly.

Modern web browsers have addressed these issues by adding non-Cookie mechanisms for saving client-side persistent data. Each of these solutions are simpler to use than cookies, can store far more data, and are not transmitted along with HTTP requests. Unfortunately, each browser has addressed the problem in a different and incompatible way.

Trying to address the need for client-side storage sans browser-specific techniques or browser plugins, Paul has created an abstraction layer that allows developers to use most of the most common client-side storage mechanisms via a common interface. It currently supports persistent client-side storage through the following backends:

• flash: Flash 8 persistent storage.
• gears: Google Gears-based persistent storage.
• localstorage: HTML5 draft storage.
• whatwg_db: HTML5 draft database storage.
• globalstorage: HTML5 draft storage (old spec).
• ie: Internet Explorer userdata behaviors.
• cookie: Cookie-based persistent storage.

Other notables features include:

• Small (9.3k minified, 3k gzipped)
• Standalone: Does not need any additional browser plugins or
  JavaScript libraries to work on the vast majority of current
  browsers.
• Consistent: Provides a consistent, opaque API, regardless of
  the browser.
• Extensible: Custom backends can be added easily.
• Backwards Compatible: Can fall back to flash or cookies if no
  client-side storage solution for the given browser is available.
• Forwards Compatible: Supports the upcoming versions of Internet
  Explorer, Firefox, and Safari (Opera too, if you have Flash).
• Unobtrusive: Capability testing rather than browser detection, so
  newer standards-compliant browsers will automatically be supported.

Just when you thought that datepickers had been played out, along comes Filament Group and puts a whole new spin on it. Working from Mark Grabanski’s jQuery UI DatePicker control, the team substantially enhanced the UI with a host of new features including:

• shortcut links to preset date ranges, for example, “Past 30 days” or “Current YTD,”
• links to “All dates before…” and “All dates after…” to simplify selecting a range of values where the data set is very large or the high or low end value is an unknown, and
• only showing the number of calendars needed for choosing a particular range (i.e., you only need one calendar to choose “All dates before…”, but you’ll need two to select a custom range).
• Use of progressive enhancement for graceful degradation /li>

Check out the demo here.

With the YouTube API recently released, there’s bound to be lots of cool controls coming out soon. Thorsten Suckow-Homberg spent a weekend hacking up a Ext-based user extension that leverages YouTube’s chromeless API to build The Ext.ux.YoutubePlayer.

The Ext.ux.YoutubePlayer allows developers to embed youtube videos into Ext applications, using native Ext components for controlling the video playback. It’ll show the buffer status and let’s you jump to any part in the video using a slider component.

Cool features include:

• Showing the buffer status
• Playback slider that let’s you jump to any position in the video playback
• Mute/unmute the video
• Overall volume control

I whipped up a demo for all to see.

When Jay Salvat set out to build markItUp!, he wasn’t trying to build the next FCKEditor or TinyMCE. He just wanted to build a simple editor that could allow developers to add enhanced markup capability to textarea elements.

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.

The usage is very straightforward. The following code demonstrates the ease of using markItUp!:

The code generates a very intuitive markup editor as demonstrated below:

The script also provides several different options for the editor which adjust the style of editing. You can see those on the examples page.

The main highlights of markItUp! include:

• Fast and unobtrusive integration
• Support for keyboard shortcuts
• Toolbar and drop down menus
• Fully customizable and scriptable
• Editor’s features callable from any place
• Ajax dynamic preview
• Customizable Skins
• Tested on PC: IE6/7, Firefox 2, Opera 9+, Safari 3
• Tested on OSX: Safari, Opera 9+ and Firefox 2
• License: MIT/GPL
• Packed naked engine is about 5.5 kb

The Ext JS user community has been extremely active producing some very cool user extensions to the framework. A new project that recently showed up is a Jabber client that includes:

• Full rostermanagment
• Instant notifications
• Desktop look and feel
• Tabbed chats
• Wysiwyg messages

You can test out the Jabber client here:

https://194.94.76.11/jame/
You can use your own jabber account or you can use the following login info:
username:tester
password:tester
server:jabber.har.fh-stralsund.de
port:5222

To coincide with the release of Adobe’s AIR v1.0, the Ext team released v2.0.2 of the Ext framework with enhanced support for the new AIR runtime. The Ext and Adobe teams collaborated during the AIR beta process to ensure that support for the updated AIR API and security sandbox would be available to Ext users from day one.

To demonstrate Ext’s AIR capabilities, founder Jack Slocum went about updating the Simple Tasks application he initially created during the early AIR beta process.

Making extensive use of the newly updated AIR API, the Ext team enhanced the Ext.air package to handle such functionality as:

• Managing native windows, event listeners and automatic state management for the windows.
• Use of the new synchronous database access introduced in AIR beta 3.
• Native drag and drop and clipboard access.
• Playing sounds.
• Minimizing AIR applications to the system tray.

Adding an icon to the system tray is now a trivial task as can be seen in this code sample:

In addition to demonstrating AIR apis, Simple Tasks v2 also includes several advanced samples to demonstrate creating custom Ext components. These samples include:

ListTree – Allows for a hierarchical list of options, similar to a treeview, but within a drop-down listbox

Custom Grid Columns – Allows for grid columns to be represented as buttons or menus

Switch – Provides a collection of buttons, one of which can be “pressed” at a time. This is used as an alternative for radio buttons.

Ext v2.0.2 is immediately available for download as is Adobe AIR v1.0

The jQuery UI team announced today the release of alpha versions of jQuery UI 1.5a and jQuery Enchant 1.0a! The projects aim to address the need for a strong set of UI controls and effects to complement the jQuery JavaScript library.

I’m very happy to announce the first alpha release of both jQuery UI 1.5 and jQuery Enchant 1.0 to all the adventurous guys out there. This is a huge update – the whole API has been standardized and updated, and many of the plugins have been completely rewritten. jQuery Enchant is the missing part of UI: A library completely devoted to rich effects. It already features all effects you know from scriptaculous/interface, as well as many more great additions: color animations, class animations and highly configurable effects.

Taking a much more cautious approach this time around, the team has made it clear that this is an alpha release which will go through further testing and has requested heavy community involvement to ensure solid libraries are released in a final version.

The code and demos for the two libraries can be found here:

jQuery UI:
http://jqueryjs.googlecode.com/files/jquery.ui-1.5a.zip
http://ui.jquery.com/1.5a/demos/

jQuery Enchant:
http://jqueryjs.googlecode.com/files/jquery.enchant-1.0a.zip
http://ui.jquery.com/enchant/1.0a/demos/

It’s important to note that both jQuery UI and Enchant require the newly jQuery v1.2.3 which was released last night.
http://code.jquery.com/jquery-1.2.3.js
http://code.jquery.com/jquery-1.2.3.min.js
http://code.jquery.com/jquery-1.2.3.pack.js