Oleg Slobodskoi, guru behind jimdo.com, has open sourced xLazyLoader a jQuery plugin that lets you asynchronously load resources such as JavaScript, CSS, and images. Quite useful if you want to head of and load some CSS to do something custom and you need the callback.
Jaxer ships with a number of basic samples, but I've seen quite a few people online in search of more complex examples and specifically ones that make use of the new ActiveRecord.js library. The extended example I developed is called jChat. jChat is fully functional chatroom application that demonstrates integration of the following web related technologies; HTML, CSS, JavaScript, MySQL, YUI, Jaxer, and Activerecord.js.
jChat's DOM access/manipulation, event handling, and animation code makes heavy use of YUI. The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
Then we get to Red tag crazy (or w00t! for girls) who told us about their live chat implementation in the wild:
We wanted this to be really fun for our shoppers, and chicks like to chat. Then came the idea, “what if we have a chat system right on our home page?”. The pre-requisites were: it has to be super easy to use, not require any sign-up, no plugins, and it has to support thousands of users at once. Solution = jQuery Ajax.
Our server crashed on day 2 from the memory used by PHP to refresh hundreds of ajax clients at once. Our solution was to cache a single JavaScript file that is loaded via ajax by each client every 15 seconds. This file contains all the necessary data to update a page with a bunch of chat bubbles and slide in new comments as if it were some sort of crazy java plugin. PHP runs via cron-job to update this cached JS/jQuery powered file every 2 seconds on our server, which turns out to be a lot less memory intensive than at every ajax request.
You can also do this type of thing on new browsers via CSS transforms so it would be cool to merge the two (if one is supported great, else try the other).
They've also updated their slider control to be compatible with the upcoming jQuery UI 1.6 release and new options have been added for choosing the label and tooltip text source, better integration with native UI Slider options, and dynamic width adjustments based on the parent container.
The purpose of this plugin is to allow for the jQuery UI Slider plugin to be generated using progressive enhancement. The plugin scrapes the data from a select element and generates a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. This also allows the slider to work with our without javascript since the select element can be used if the slider is unavailable.
ThemeRoller-ready
The interesting part of these two controls is that they're now taking advantage of the new jQuery UI CSS Framework which makes them immediately ThemeRoller-ready. This allows for easy skinning of both controls via the ThemeRoller application.
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
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:
It allows the current project members to continue to manage the projects and maintain ultimate responsibility for the direction of current and future efforts.
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.
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.
It may allow corporations to write off time when an employee contributes to a project.
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.
You can check it out via his Ubiquity documentation example that shows you side by side documentation with the actual source code itself. This context is terrific. He does this all dynamically, and uses border padding to align the documentation with the code itself.
Here is what he has to say about how it is done:
The raw source code for the file being documented above just has chunks of comments that are marked-up in WikiCreole; when the parser runs into such a chunk, it renders it alongside the code it annotates using Ivan Fomichev and Chris Purcell’s JavaScript Creole 1.0 Parser.
The idea of using the documentation to annotate the code—or the code to annotate the documentation, depending on how you look at it—was inspired in part by some of the typography presented in Ellen Lupton’s excellent Thinking with Type, which I recommend to anyone interested in the field.
It’s nice not having a separate documentation build step: aside from making the process of writing and editing documentation quicker, it also lowers the barrier for entry to contributors since they don’t need to setup a toolchain. It also means that we get versioned documentation in every commit for free.
Right now there isn’t much else to the system; the only other feature I added is the auto-generation of quasimodal popup menus that link the names of XPCOM interfaces to their entries on XUL Planet and MDC. It’d be nice to have more features like this; other niceties would be an automatically-generated table of contents, JavaScript Doctests, search functionality, cross references to other code, and even the ability to fix code formatting errors in-page. For now, though, I need to focus on actually using this tool to document more code.
As soon as Ben and I saw this our minds started to race. What if you could navigate the code via hyperlinks too? Or have groups comment inline? Many exciting ideas.
It is fun to see the 80 character column limit in place (and seeing where that is ignored). 80 character limits with wide screen displays? I never get that :)
Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
No more browser testing: For example, no more if ( jQuery.browser.msie && !jQuery.isXMLDoc(this) ) { which is replaced with if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) {
Live event delegration: Reglib's claim to fame was how event delegation was "live" meaning that if you added elements later on, they would also fall into the same delegations. With $("#foo > div").live("click", someFn); you get the same in jQuery
$(this).closest("div");: Returns this or closest ancestor that matches selector
.offset() rewrite - significantly faster, uses no browser sniffing.
Adrien Friggeri has taken the music player ui and spent some time to create a really nice gestures library that allows you to add mouse gestures to a web page, supports complex (i.e. sequences of) gestures and provides visual feedback through the use of a canvas element.
Eric Wahlforss, the founder of SoundCloud, wrote in to tell us about "The Cloud Player", a iTunes / Songbird clone written entirely in Ajax:
we just released an open-source itunes-clone built in jquery (and app engine, soundmanager 2, soundcloud api), complete with smart playlists, drag'n'drop, keyboard shortcuts, load-as-you-scroll playlists, playlist sharing, waveform display of tracks, etc. we've extended jquery ui a bit for this to happen.
It's using soundcloud.com as the primary music source, and the SoundCloud JSONP API to access the track metadata, available at http://soundcloud.com/api.
I like how it shows the waveform of the entire track at the bottom of the screen. Unfortunately, it's limited to the rather tiny music selection on soundcloud's service, but since it's open-source, the future is interesting indeed.
alert('Images loaded so far: ' + $('img:loaded').size());
This code is one example of how you can extend the selector experience in jQuery with simple JavaScript code.
James Padolsey takes us through this in a lot of detail, showing other examples including a simple "if the element is inline" selector, as well as well as tying into jQuery's "data" functionality.
I started creating an operating system like user interface in JavaScript. I had intended to use it for the admin sections of my content management system(that runs this website), but through developing it I started to question it's usability and decided to discontinue development.
Features in it's current state:
Start Button
Task Bar - view open windows and set focus/minimize
Windows (Create, move, maximize, minimize, resize, etc.)
Show Desktop on right click
Properties (Theme Color, Text Color, Background Color, Background Image)
Properties saved in cookies for next visit
Still don't know how to create a new window other than a Google one, and I am never quite sure when people will use these (even fully baked). I am sure it will happen, but not until the browser platform has gotten to a point where it actually can. Calling this an "OS" is funny too ;)
Voting has started in Dojo land to take in John Resig's Sizzle next-gem CSS selector engine.
This is incredibly exciting, as it shows how Ajax libraries are working together more and more. Instead of reinventing the wheel in different ways for each project, is it possible to find some core pieces that can be nicely shared? Of course, if our world was nicer and we could share code by linking in a nice way maybe this would happen more.
As I mentioned in my thanksgiving note, the work that the Ajax library developers do is hugely important and impactful, and having them work together can only be great news.
Take a look at this public email to the Dojo Foundation on the vote:
Overview
The Sizzle project is a JavaScript library for performing selections
across a DOM tree using CSS selectors. The library is designed to be
standalone (have no external dependencies), lightweight, fast, and
extensible. This culminates in a library that is perfectly suited for
integration into other libraries. While it's feasible that a developer
may use Sizzle directly the target audience for it is other library
authors.
All of the code for the project has been written by John Resig and is
released under an MIT license. There are some patches pending from
some other contributors (namely Prototype).
Right now the following libraries are adopting or are looking to adopt
Sizzle as their primary CSS selector engine:
It's likely that Sizzle will become the unified engine behind a
majority of the JavaScript libraries on the market (if not in numbers
then certainly in market share).
The project is owned by John Resig who will serve as BDFL/Project lead
if the project is accepted. There is no formal voting process, as of
yet, but it's likely that one will come about, considering the number of
projects using the codebase.
If the project is accepted to the foundation then all contributors to
the project will be required to have a CLA and follow the policies of
the Dojo foundation.
It's very likely that Sizzle will eventually expand into other areas
of JavaScript libraries (such as DOM manipulation and event binding).
That last line excites me too! It is interesting to see this happen in the Dojo Foundation. Remember, Dojo was founded out of toolkits coming together to aggregate forces. Kudos to everyone involved, and good luck!
, Library
