a |b |c |d |e |f |g |h |i |j |k |l |m |n |o |p |q |r |s |t |u |v |w |x |y |z |


The Yahoo! User Interface (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. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

Related javascript Articles

An Introduction to the YUI Library

Yahoo! released the Yahoo User Interface Library (YUI) as a free, open-source JavaScript and CSS library eighteen months ago along with a commitment to the developer community: We'll share with you our best frontend tools, engage with you about how they're built and why, and we'll document them fully. In that short time, YUI has become one of the best-regarded frontend libraries and has been adopted by individuals on their blogs, startups who are going all-in with YUI as the foundation of their frontend architecture, and Fortune 500 companies using YUI as a trusted, tested, long-view toolkit for creating great user-experiences on the Web.

YUI Compressor: The latest minification tool

Julien Lecomte has created a new tool that aims to minify better than JSMin, and compress better than the Dojo compressor:

The What

The YUI Compressoris a new JavaScript minifier. Its level of compaction is higher than the Dojo compressor, and it is as safe as JSMin. Tests on the YUI library have shown savings of about 18% compared to JSMin and 10% compared to the Dojo compressor (these respectively become 10% and 5% after HTTP compression).

The How

The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement). The YUI Compressor is open-source, so don’t hesitate to look at the code to understand exactly how it works.

The Limitations

Unlike JSMin, the YUI Compressor is slow and cannot be used for on-the-fly code minification (see minify for a PHP implementation of JSMin by Ryan Grove, another Yahoo! engineer, that does on-the-fly JavaScript minification among other things).

Download YUI Compressor 1.0to start compressing your files.

YUI 3: The goals are lighter, faster, consistent, power, secure

YUI 3 has a preview releasefor us to check out.

The goals are:

  • lighter (less K-weight on the wire and on the page for most uses)
  • faster (fewer http requests, less code to write and compile, more efficient code)
  • more consistent (common naming, event signatures, and widget APIs throughout the library)
  • more powerful (do more with less implementation code)
  • more securable (safer and easier to expose to multiple developers working in the same environment; easier to run under systems like Cajaor ADsafe)

What's New

  • Sandboxing: Each YUI instance on the page can be self-contained, protected and limited (YUI().use()). This segregates it from other YUI instances, tailors the functionality to your specific needs, and lets different versions of YUI play nicely together.
  • Modularity:YUI 3 is architected to use smaller modular pieces, giving you fine-grained control over what functionality you put on the page. If you simply want to make something draggable, you can include the dd-dragsubmodule, which is a small subset of the Drag & Drop Utility.
  • Self-completing:As long as the basic YUI seed file is in place, you can make use of any functionality in the library. Tell YUI what modules you want to use, tie that to your implementation code, and YUI will bring in all necessary dependencies in a single HTTP request before executing your code.
  • Selectors: Elements are targeted using intuitive CSS selector idioms, making it easy to grab an element or a group of elements whenever you’re performing an operation.
  • Custom Events++: Custom Eventsare even more powerful in YUI 3.0, with support for bubbling, stopping propagation, assigning/preventing default behaviors, and more. In fact, the Custom Event engine provides a common interface for DOM and API events in YUI 3.0, creating a consistent idiom for all kinds of event-driven work.
  • Nodes and NodeLists:Element references in YUI 3.0 are mediated by Nodeand NodeList facades. Not only does this make implementation code more expressive ( Y.Node.get("#main ul li").addClass("foo");), it makes it easier to normalize differences in browser behavior (Y.Node.get("#promo").setStyle("opacity", .5);).
  • Chaining: We’ve paid attention throughout the new architecture to the return values of methods and constructors, allowing for a more compressed chaining syntax in implementation code.

Some example snippets

  1. // Creates a YUI instance with the node module (and any dependencies) and adds the class "enabled" to the element with the id of "demo".
  2. YUI().use('node', function(Y) {
  3. Y. get('#demo').addClass('enabled');
  4. });
  5. // Creates an instance of YUI with basic drag functionality (a subset of the dd module), and makes the element with the id of "demo" draggable.
  6. YUI().use('dd-drag', function(Y) {
  7. vardd = newY. DD.Drag({
  8. node: '#demo'
  9. });
  10. });
  11. // Adds the class "enabled" to the all elements with the className "demo".
  12. Y.all('.demo').addClass('enabled');
  13. // Sets the title attribute of all elements with the className "demo" and removes the class "disabled" from each.
  14. Y.all('.demo').set('title', 'Ready!').removeClass('disabled');
  15. // Adds the Drag plugin to the element with the id "demo", and enables all of its h2 children drag as handles.
  16. Y.get('#demo').plug(Y.Plugin.Drag, {
  17. handles: 'h2'
  18. });
  19. // Attaches a DOM event listener to all anchor elements that are children of the element with the id "demo". The event handler prevents the anchor from navigating and then sets a value for the innerHTML of the first em element of the clicked anchor.
  20. Y.on('click', function(e) {
  21. e. preventDefault();
  22. e. target.query('em').set('innerHTML', 'clicked');
  23. }, '#demo a');

Very exciting stuff to the team. I look forward to seeing a full up code repository too!

PBwiki JavaScript Testing
This is a test system built by members of the PBwiki engineering team in order to gather data about browser and javascript library performance. All results are published live on the summary page for public consumption.

Datejs is an open-source JavaScript Date Library. Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.

Facebook API

This JavaScript client library allows you to make Facebook API calls from any web site and makes it easy to create Ajax Facebook applications. Since the library does not require any server-side code on your server, you can now create a Facebook application that can be hosted on any web site that serves static HTML. An application that uses this client library should be registered as an iframe type. This applies to either iframe Facebook apps that users access through the Facebook web site or apps that users access directly on the app’s own web sites. Almost all Facebook APIs are supported.


moo.rdis a super lightweightjavascript (object oriented) library based on the MooTools framework.
It is designed to give many useful and powerful functionalities to the developers, like a lot of effects, customizable standards, utility native functions, table management, virtual boxesand many more.
In addiction moo.rd is modular, flexible, and completely compatiblewith all MooTools plug-in.