Geekup Leeds - Why the YUI?
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Geekup Leeds - Why the YUI?

  • 14,849 views
Uploaded on

My presentation at GeekUp in Leeds, UK about the ins and outs why libraries in general and the YUI is a good idea.

My presentation at GeekUp in Leeds, UK about the ins and outs why libraries in general and the YUI is a good idea.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
14,849
On Slideshare
14,218
From Embeds
631
Number of Embeds
16

Actions

Shares
Downloads
115
Comments
0
Likes
9

Embeds 631

http://www.wait-till-i.com 220
http://developer.yahoo.com 164
http://developer.yahoo.net 121
http://christianheilmann.com 85
http://docupia.tistory.com 15
http://icant.co.uk 9
http://all-for-women.com 4
http://localhost 3
http://www.slideshare.net 2
http://www.wretch.cc 2
http://geneticnanobot.com 1
http://nanotechnologyproducts.org 1
http://retinalprojectors.com 1
http://webcache.googleusercontent.com 1
file:// 1
http://nanotechrobotics.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Y the YUI?
    • Christian Heilmann,
    • GeekUp Leeds, February 2008
  • 2. Why any library?
  • 3. Because not everybody likes pain.
  • 4. Browsers have shifty eyes and will steal your lunch money!
  • 5. Memory leaks, creative standards support and syntax oddities make your life less fun
  • 6. So why the YUI?
  • 7. First of all, please stop the fanboy fights.
  • 8. All good libraries want to do the same thing: make your life easier.
  • 9. YUI has one big benefit though:
  • 10. It is Dr.Martens for the web: Industrial strength for your solutions.
  • 11. Safety and Maintainability.
  • 12. Namespacing included.
  • 13. Let’s guess what the following things are...
  • 14. YAHOO.util.Dom YAHOO.util.Event YAHOO.widget.ColorPicker
  • 15. Roll your own: YAHOO.namespace(‘GeekUp’); YAHOO.GeekUp.getRoundIn = function(){...}
  • 16. Mess around with JavaScript: YAHOO.lang. ...
  • 17. OO-goodness for JS, Testing for types: isArray, isBoolean, isFunction, isNull, isNumber isObject, isString, isUndefined, isValue
  • 18. React to User Agents: YAHOO.env.ua if(YAHOO.env.ua.ie === 5){ alert(“you hate developers,right?”); }
  • 19. OMG! It is so HUGE!
  • 20. Hosting by YAHOO (CDN, gzipped, minified)
  • 21. Include on-demand, either with YAHOO loader, get or YAHOO_config.
  • 22. Take control with Custom Events.
  • 23. You do know what happens when and how and you can react to it.
  • 24. Yes, you can use CSS selectors! (as a query and as a filter)
  • 25. You have full API documentation, examples and cheatsheets - even offline! (Elephants, Tigers and Bears are extra.)
  • 26. Oh, and the YUI is *not* a JavaScript library!
  • 27. It is a framework of JS, CSS, Design Patterns and Widgets.
  • 28. Developed and tested for use in Yahoo! properties, and handed over to you for free! (BSD license FTW)
  • 29. Go, fetch! http://developer.yahoo.com/yui
  • 30. Tips for quick YUI development:
  • 31. Get an IDE that supports it (Aptana, Eclipse, TextMate Bundle)
  • 32. Make your own shortcuts and nest them in a module pattern.
  • 33. 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); } }();
  • 34. 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); } }();
  • 35. 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); } }();
  • 36. 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'); } }); }();
  • 37. 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'); } }); }();
  • 38. 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'); } } }); }();
  • 39. Thanks, now tell me what you’d like to know.