Most everyone knows that Google has really stepped up to the plate by helping many JavaScript library projects host their builds on the Google AJAX Libraries API. Apart from providing a central distribution point for these libraries, the bandwidth cost savings alone go a long way in helping frameworks service their users in a sustainable manner.
Thanks to Vadim Spivak at Google and Dion Almaer (now at Mozilla) for helping to make this additional option available to the YUI developer community. We love that Google is supporting web developers in this way — grabbing YUI files from Google’s global infrastructure is a fantastic option to have.
This is great news for YUI developers who now have a choice of linking directly to YUI via yui.yahooapis.com and ajax.googleapis.com. YUI team lead, Eric Miraglia, has a great write-up on the YUI blog about this and goes into detail on how the framework’s users can take advantage of this new hosting option.
jQuery and Amazon CloudFront
With nearly 2.5 million requests per day to the jQuery website, the jQuery project team is constantly on the look out for ways to decrease hosting costs while still managing the growing number of requests for the site’s resources. Originally leveraging Amazon S3 for many of their static pages, the project has now turned to Amazon’s new CloudFront CDN. The change has allowed for jQuery pages to be globally hosted as opposed to being centrally located in Amazon’s Seattle-based S3 hosting center.
In tests, John Resig, team lead for the jQuery project, noticed substantial performance gains based on the switch:
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.
In less than 24 hours the project had received almost 2.5 million requests for over 50GB of data. The only drawback is an increase in bandwidth costs but still substantially less than that of a traditional hosting plan. The jQuery project makes use of the Google AJAX API as well and recommends it as choice for linking to the jQuery and jQuery UI libraries.
The hosting is free and what makes it unique to something like the Google CDN is that it allows Ext developers a central access point for their own custom builds.
We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.
Several months ago, we covered jsTree, a promising new tree component built on top of jQuery. It's since gained its own website and is nearing a 1.0 release. There have been a few changes since we last wrote about it:
* A lot of focus on the JSON data source
* Native async support (meaning correct data loading, event handling, etc).
* In the last public version there is a simple instance manager.
* The instance manager enabled full multitree support - node dragging between trees, with language cleanup (if languages differ), and also and most important - the receiving tree's dragrules are respected.
* There have been a lot of bugfixes, optimizations, enhancements.
It's coming along nicely since the initial story; give it another look and pass on bug reports and feedback to Ivan at his blog prior to the 1.0 release.
John Resig linked to an interesting new time picker UI that Maxime Haineault implemented as a jQuery plugin:
He made a "two click" time picker. The first click is within the time field. This activates the display and allows the user to choose the time - all of which is done by moving the mouse over the times that you desire. The final click is anywhere - filling in the time that was chosen. It's hard to explain, you simply have to try it.
One thing that you'll notice using it is that it's fast. Very fast. I'd argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.
John has changed his stance from "oh man that is ugly" to "it has merit". We sure do need help with layout. Can't we have JGoodies give us a decent layout manager for JavaScript?
John also discussed:
The new Element Traversal API and how his jQuery plugin uses the cleaner API and gives promising speed improvements: "With this addition .siblings() is 84% faster and .children() is 35% faster."
In Deadly Expandos he discusses the old bug that has the id to method madness of DOM0 stepping on functions to break your apps.
Santosh Rajan has created JX, which he calls a "Object Oriented Extension to jQuery". With that description, I was expecting something like Dean's Base library, but instead I found a layout manager for JavaScript with the following features:
Only 8K minified
True Objected Oriented jQuery Extension
Complex layouts by nesting Containers
Whole application configurable
'Custom event' driven programming
Extendable via Objected Oriented Inheritance.
To see it at work, you can check out the Border Layout that you would use via:
I was having a bit of difficulty finding a jQuery plugin that not only provided scrolling behavior to a list of elements, but also used & then generated markup that could still be accessible, semantic & validate whether or not the user ran the javascript.
Nater took the existing jquery.scrollable.js plug-in by Tero Piirainen and enhanced it in the following ways:
1. make those items scrollable horizotally or vertically
2. decide how many items are visible at once
3. scroll elements with mouse, arrow keys and mousewheel (requires mousewheel.js)
4. make navigational buttons without programming
5. have programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
6. need to know when list is scrolled with custom event listener
7. You can now start with semantic markup
8. I want this all in single js file that weights only 3.9 4.1 Kb minified!
Check out Nate's blog for more details, including the source.
Sam Ruby has that way about him that sees things very clearly. He just took a peak at jQuery for the first time and was able to really put into words what I think jQuery enthusiasts like about the library:
The notable thing about this is that despite all of the asynchronous events taking place, the code is sequential (nested, but sequential), and that the JSON results of the AJAX call is immediately available to the function that is invoked when the selection changes.
This is based on the following code that he wrote:
Pastebins have become an important part of sharing code with colleagues. Sites such as Pastebin & Pastie.org are extremely popular because they're easy to use and very effective in letting people compare notes on source code, especially in a support setting.
Remy Sharp wanted to take the pastebin concept a step further, past the static posting of code. His idea, which he tossed around for 6 months, finally came to fruition in the form of JS Bin, a new pastebin site with a twist:
JS Bin is a form of paste bin, but with a twist. It allows you to also include the HTML and CSS to provide context to your pasty. As such, it means you can actually run the JavaScript and pass this on to a colleague to help to debug.
This is a great idea as it lets you troubleshoot your code while seeing immediate results. The feature list is well thought out as well.
Save private snippet
Remote Ajax debugging
Snippet URLs run entirely on their own (i.e. without the JS Bin framework around them)
Support to quickly inject major JS libraries including jQuery, jQuery UI, Prototype, Scriptaculous, Dojo, MooTools & YUI
Saves state within the open window (i.e. refresh and the code doesn't reset)
The ability to inject many of the popular JavaScript libraries is especially important and I would highly recommend individual project teams to contact Remy directly to have their libs included.
To give this a run, I'd suggest going to the JS Bin site and putting it through its paces. In addition, Remy has produced two videos which go into detail on how to leverage JS Bin:
Wrapping a single anchor around the whole content (title, thumbnail, summary) is a bad idea as it’s not standards compliant and renders the page invalid. So I turned to my good friend jQuery and threw together the following plugin using the ‘Learning jQuery’ plugin development pattern.
The concept is simple:
Attach the plugin to any link in the content block.
Pass through the click zone selector as a plugin option.
The plugin then attaches onclick and hover events to the click zone.
User clicks anywhere on the click zone.
The original link href is retrieved.
If the link has a rel attribute and it’s set to ‘external’, open the link target in a new window; otherwise open the link in the current browser window.
Just as jQuery kicks off its first jQuery conference adjunct with The Ajax Experience in Boston tomorrow, it gets an energy boost from some big double-barrel news:
Microsoft and jQuery
Microsoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).
Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.
Scott Guthrie talks about the news and details some of the features. His blog shows intellisense at work, and more.
Here is the sample code that shows the weaving of jQuery and Client template APIs. The script src at the top is to an "intellisense" version of jQuery, which includes the addition of special comments to make Intellisense work. The Open Ajax Alliance is trying to standardize on this metadata so we can share it between the various tools (e.g. Aptana has a very nice sdoc that does this, and allows you to put it external to the file so you don't have to have clients download it).
Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.
To start Nokia will be moving a number of their applications to work on the run-time (such as Maps) and building them using jQuery. jQuery will become part of their widget development platform, meaning that any developer will be able to use jQuery in the construction of widgets for Nokia phones.
How will these companies work with the project?
Microsoft and Nokia aren’t looking to make any modifications to jQuery (both in the form of code or licensing) - they simply wish to promote its use as-is. They’ve recognized its position as the most popular JavaScript library and wish to see its growth and popularity continue to flourish.
In fact their developers will begin to help contribute back to the jQuery project by proposing patches, submitting test cases, and providing comprehensive testing against their runtimes. As with any contribution that comes in to the jQuery project it’ll be closely analyzed, reviewed, and accepted or rejected, based upon its merits, by the jQuery development team - no free ride will be given.
A significant level of testing will be added to the project in this respect. The jQuery test suite is already integrated into the test suites of Mozilla and Opera and this move will see a significant level of extra testing being done on Internet Explorer and WebKit - above-and-beyond what is already done by the jQuery team.
First, he shows his Marquee plugin that gives you the marquee effect. Why would you do this when the marquee tag itself is widely adopted?
Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it's built directly in to the browser).
You can see how the untouched marquees are jumpy to animate, even in the later browsers such as Firefox 3 and Safari - let alone IE6.
It is simple to use, and gives you hooks to do more:
, Cloud
