Y the YUI?Christian Heilmann,

GeekUp Leeds, February 2008

Why any library?

Because not everybody likes pain.

Browsers have shifty eyes and will steal your lunch money!

Memory leaks,creative standards support and syntax

oddities make your life less fun

So why the YUI?

First of all, please stop the fanboy fights.

All good libraries want to do the same thing:make your life easier.

YUI has one big benefit though:

It is Dr.Martensfor the web:

Industrial strength for your solutions.

Safety and Maintainability.

Namespacing included.

Let’s guess what the following things are...

YAHOO.util.DomYAHOO.util.Event

YAHOO.widget.ColorPicker

Roll your own:

YAHOO.namespace(‘GeekUp’);YAHOO.GeekUp.getRoundIn = function(){...}

Mess around with JavaScript:

YAHOO.lang. ...

OO-goodness for JS,Testing for types:

isArray, isBoolean, isFunction, isNull, isNumberisObject, isString, isUndefined, isValue

React to User Agents: YAHOO.env.uaif(YAHOO.env.ua.ie === 5){ alert(“you hate developers,right?”);}

OMG! It is so HUGE!

Hosting by YAHOO (CDN, gzipped, minified)

Include on-demand, either with YAHOO loader, get or

YAHOO_config.

Take control with Custom Events.

You do know what happens when and how and you can react to it.

Yes, you can use CSS selectors!

(as a query and as a filter)

You have full API documentation, examples and

cheatsheets - even offline!

(Elephants, Tigers and Bears are extra.)

Oh, and the YUI is *not* a JavaScript library!

It is a framework of JS, CSS, Design Patterns

and Widgets.

Developed and tested for use in Yahoo! properties, and handed over to you

for free!(BSD license FTW)

Go, fetch!http://developer.yahoo.com/yui

Tips for quick YUI development:

Get an IDE that supports it (Aptana, Eclipse, TextMate Bundle)

Make your own shortcuts and nest them in a

module pattern.

YAHOO.namespace('geekup');YAHOO.geekup.doStuff = function(){ function handler(){ if(YAHOO.util.Dom.hasClass(this, 'hl')){ YAHOO.util.Dom.removeClass(this, 'hl'); } else { YAHOO.util.Dom.addClass(this, 'hl'); } } var nav = YAHOO.util.Dom.get('nav'); var lis = YAHOO.util.Selector.query('#nav li') for(var i=0;lis[i];i++){ YAHOO.util.Event.addListener(lis[i], 'click', handler); }}();

YAHOO.namespace('geekup');YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom, var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; function handler(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } } var lis = $('#nav li') for(var i=0;lis[i];i++){ YE.on(lis[i], 'click', handler); }}();

YAHOO.namespace('geekup');YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom, var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; function handler(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } } var lis = $('#nav li') for(var i=0;lis[i];i++){ YE.on(lis[i], 'click', handler); }}();

YAHOO.namespace('geekup');YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom; var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; YE.on($('#nav li'),'click',function(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } });}();

YAHOO.namespace('geekup');YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom; var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; YE.on($('#nav li'),'click',function(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } });}();

YAHOO.namespace('geekup');YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom; var YE = YAHOO.util.Event; YE.on(YD.get('nav'),'click',function(e){ var t = YE.getTarget(e); if(t.nodeName.toLowerCase()==='li'){ if(YD.hasClass(t, 'hl')){ YD.removeClass(t, 'hl'); } else { YD.addClass(t, 'hl'); } } });}();

Thanks, now tell me what you’d like to know.