Kyle Nunery

YUI Starter Kit

Kyle Nunery -
The Yahoo UI is a strong JavaScript library that is rapidly gaining popularity due to it’s modularity, compactness, and ease of use. The library is very well documented and numerous resources are available to help the JavaScript neophyte get started. The first website to check out is http://developer.yahoo.com/yui/. . At this site,one can download the full source (simple text files) for the YUI library. The cool thing to point out is that there are three files for each *.js file; debug, full, and minimized versions. The amount of resources available can be daunting, so I am going to give a road map to rapidly gain mastery of the YUI library. The first portion of the roadmap may be skipped if you are already up and running as a JavaScript developer, but it is recommended that you read through it at least once. Setting up your development environment( Skip this if you have one you are comfortable with ).
  1. Download FireFox.
  2. Download the FireFox plugin FireBug.
  3. Download the wonderful open source IDE, Aptana, for JavaScript development.

Learning JavaScript.

Much of modern JavaScript object design is attributed to Douglas Crockford. Read the following links from his site:
If you are one of those people that likes to have a reference book, buy the “Rhino” book, JavaScript: The Definitive Guide (5th Edition) by David Flanagan.

Learning YUI

Go to the YUI website and navigate to each of the YUI components available in the left hand side navbar. After clicking a component hyperlink, a list of working examples come up in the upper right-hand side of the screen to show off the component in action. Play with as many of these examples as you can to see what YUI offers out of the box. The CSS components, resets, fonts, and grids, are very useful. Have you ever run into issues making a 3 column website layout using div tags? Grids CSS is the answer for you. You can easily create any column layout with fixed or stretchy columns. The resets CSS component is a css file that sets margins and paddings for the pages html elements to 0 to help normalize the default browser settings. This is a common trick used by web designers, but it is nice that they included it. These type of components show the thought and design put into the YUI library. I hope this helps you get started using YUI. Referenced sites: