For our current project at Yahoo!, we make use of our YUI library to add behaviour to the site. I started to play around with it 2 weeks ago, trying to accomplish the task of rewriting the JavaScript stuff that I used for my portfolio section. Instead of my self-written functions, I tried to make use of the YUI to achieve what I wanted.
When you learn a new technique, it is not always a steady learning curve. I struggled quite a bit, especially in the beginning. But finally, today, I managed to complete it.
You won’t see much difference when viewing the showroom, but “under the hood”, attentive readers and developers will notice that several JS files from the YUI library get imported, as well as the actual file that drives the slideshow. Feel free to check it out and provide me with feedback, if you spot any bug or crime against proper coding
.
Sidenote: To optimize the JavaScript file (apart from running it through JSLint) it is recommended to remove any whitespace, comments etc. Gladfully, another tool by Douglas Crockford does just that: The JavaScript Minifier (JSMIN). I omitted that step here to keep the file readable and give others the option to provide feedback. One final step then could/should be to use e.g. the JavaScript Compressor by Dean Edwards to further reduce the filesize.
For those of you who are interested in getting started with the YUI, there are – of course – a couple of resources available:
- Yahoo! UI Library: YUI homepage on the Yahoo! Developer Network. Provides the complete documentation of every component of the YUI, including examples. Some of these can be pretty hard to digest for a newbie (like I am).
- YUI API documentation: Very important and helpful for looking up classes and methods.
- YUI Blog: News and articles for people who develop sites with Yahoo! Libraries.