The YUI is aimed at and can be used by just about anyone and everyone, from single site hobbyists to creators of the biggest and best web applications around. Developers of any caliber can use as much or as little of it as they like to improve their site and to help with debugging.

It's simple enough to use for those of you that have just a rudimentary working knowledge of JavaScript and the associated web design technologies, but powerful and robust enough to satisfy the needs of the most aspiring and demanding developers amongst you.

The library will be of interest primarily to frontend developers, as the main aim of the YUI is to provide a framework within which robust and attractive interfaces can be quickly and easily designed and built. It can help you to side-step what can otherwise be insurmountable compatibility issues.

There is no set standard that says you must know this much or that much before you can begin to use the YUI. However, the more you know and understand about JavaScript, the more the library will make sense to you and the more you will be able to gain from using it.

Trying to learn how to make use of the YUI without first knowing about the JavaScript language itself, at least to a basic working standard, is an endeavor likely to end in frustration and disappointment. It would be a great shame if a lack of understanding prevented you from enjoying the benefits that using the library can bring to both your creativity and creations.

So to get the most out of the YUI, you do need to have at least a basic understanding of JavaScript and the principles of object oriented programming. However, a basic working understanding is all that is required and those developers who have less knowledge of scripting will undoubtedly find that they come out of the experience of developing with the YUI knowing a whole lot more than they did to begin with.

The YUI can teach you advanced JavaScript scripting methods, coding, and security best practices, and more efficient ways of doing what you want to do. It will even help more advanced programmers streamline their code and dramatically reduce their development time, so everyone can get something from it.

For some, the YUI is also a challenge; it's an excellent opportunity for developers to get involved in a growing community that is creating something inspiring. The Firefox browser is a great example of an open source, community-driven, collaborative effort of separate but like-minded individuals. Some people may not want to develop web pages or web applications using the library: they may just want to be involved in evolving it to an even greater accomplishment.

I should also point out at this stage that like the library itself, this book expects you to have a prior knowledge and understanding of JavaScript, HTML, and CSS. While the use of the utilities, controls, and CSS tools will be explained in detail throughout the book, any HTML, CSS, or PHP code that is featured in any of the examples may not be explained in detail. Other skills, such as the ability to install and configure a web server, are also required.

Using any JavaScript library can save you great amounts of time and frustration when coding by hand, and can allow you to implement features that you may not have the knowledge or skill to make use of. But why should you use the YUI rather than the many other libraries available?

To start with, as I'm sure you already know, Yahoo! is extremely well established, and at the forefront of cutting-edge web technology and frontend design principles. The utilities and controls provided by the library have already been tried and tested in their world-class service provision environment. Hence you know that the components are going to work, and work in the way that you expect them to work and that Yahoo! says that they will. The YUI Library is not a second-rate product, it is what Yahoo! uses.

The YUI library is not the only developer-centric offering to come from these world-class leaders and to achieve high levels of accomplishment and a following amongst developers. Apart from this, other very successful projects include the extensive Design Pattern library, Yahoo! Widgets, and the Yahoo! Query Language. They also have a wide range of APIs for you to experiment and work with, so they have already shown a commitment to providing open source tools designed to succeed.

Additionally, the library has already been publicly available for over three years and in this time has undergone rapid and extensive improvement in the form of bug fixes and additional functionality. Like the Mozilla and Firefox browsers, it has a huge, world-wide following of developers, all seeking to further enhance and improve it.

Other libraries seek to alter the JavaScript language itself, by building capabilities into the language that the developers felt should already have been present and extending the language in new and interesting ways. While these libraries can provide additional functionality at a deeper and more integrated level, their use can often be hampered by technical implementation difficulties. These will be too difficult to overcome for all but the most advanced and seasoned developers.

The YUI is not like this; it is extremely well documented, stuffed full of examples, and is extremely easy to use. It doesn't get bogged down in trying to alter the JavaScript language at a fundamental level, and instead sits on top of it as a complementary extension.

There's also no reason why you can't use the YUI library in conjunction with other JavaScript libraries if a particular feature, such as the rounding of box corners as provided by MochiKit for example, is required in your application but not provided by the YUI.

Whichever browser you prefer, there's one thing that I think we can all agree on; all browsers are not created equal. Differing support and a lack of common standards implementation are things that have confounded web developers for as long as there have been web developers.

Although the situation is improving with agreed standards from the W3C, and we have better and more consistent support for these standards, yet we are far from being in a position where we can write a bit of code and know that it is going to function on any of the many browsers in use.

There may never come a time when this can be said by developers, but with the YUI, you can already count on the fact that the most popular browsers in use, on all types of operating systems, are going to be able to take full advantage of the features and functionality you wish to implement.

It doesn't, and can't be expected to support every single web browser that exists, but it does group together common browsers with common capabilities into a graded support framework that provides as much as it can to visitors no matter which browser they happen to be using.

Every single browser in existence falls into one of the defined grades; the most common class of browser are the A-grade variety of browsers, which the creators of the library actively support. These are modern, generally standards compliant and are capable of rendering in full the enhanced visual fidelity, and advanced interface functionality provided by the library as well as the inner core of content.

Though the number of browsers in this category is small, more than 95% of users regularly accessing Yahoo's sites use one of these. The YUI development team continually checks Yahoo's own statistics so that new browsers may be incorporated into or dropped from this category accordingly.

C-grade browsers are able to access the base or core content and functionality of the library components, but cannot handle the enhanced content. They are basically old, less capable versions of current browsers, or discontinued ones. These are browsers that are simply not supported by the library.

X-grade browsers are the ones that do not fall in the previous two categories. They are most likely to provide the full, enhanced experience. The most frequent cause for a browser to be in the X-grade list is that it does not have enough market share to justify devoting much time to test the YUI on it. A current example is Safari, which works fine in Windows, but it is not tested because it is an uncommon combination. Any browser that has not been extensively tested by the YUI development team is automatically an X-grade browser regardless of its capabilities.

Currently (in 2010 Q1), the complete spectrum of A-grade browsers supported by the library includes the following combinations of browser and platform configurations:

These common configurations are able to make use of not just the core content of any applications we create with the YUI, but also all of the enhanced functionality brought on by the library. Any browser not on this list will still receive either an A or C-grade experience, but may be classed as an X-grade browser if it has not been extensively tested.

The graded browser support strategy is based on the notion of progressive enhancement as opposed to graceful degradation. Graceful degradation is a term that I'm sure you've heard at some point and involves designing content such that when it breaks in older browsers, it retains some semblance of order.

This method involves designing a page with presentation in your supported browsers as your main priority while still allowing unsupported browsers to view at least some kind of representation of your content.

Progressive enhancement approaches the problem of supporting browsers with different capabilities from the other direction by providing a core of accessible content and then building successive layers of presentation and enhanced functionality on top of this inner core of generalized support.

The following screenshot shows how the Rich Text Editor control appears in a C-grade browser. Older readers may recognize the browser used in this experiment as Netscape Navigator version 4—a browser popular approximately a decade ago.

As you can see from this example, the inner core of the page content is a standard HTML <textarea> element, which is displayed completely normally. The page doesn't break, but the high-fidelity content is not displayed. Using graceful degradation techniques, the browser would probably attempt to display the editor, but it would probably look very poor and would certainly not function.

The following screenshot shows how the editor appears in an A-grade browser:

In a capable, supported browser the library can transform the <textarea> element into the full Rich Text Editor control. Now the following screenshot shows exactly the same page in exactly the same browser but with JavaScript switched off:

Notice the similarity between a C-grade browser and an A-grade browser with JavaScript switched off.

The knowledge that has enabled Yahoo! to use the concept of graded browser support has been gained from the wide variety of user agents that hit their site every single day. They've been accessed by over 10,000 different software and platform configurations since they began focusing on by whom and how their portal is accessed. Approximately 96% of this total has received an A-grade experience when using the Yahoo! site.