Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
YUI TIDBITS              Jai Santhosh                @jaisanth
What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
http://yuilibrary.com/
What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
Good Architecture!!
Few others
What’s in Smart Software?• Reliability• Maintainability• Compatibility• Extensibility
Y U NO SIMPLE?
http://yuilibrary.com/yui/docs/guides/
http://yuilibrary.com/yui/docs/guides/
What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
Getting YUI 3// http://yuilibrary.com/yui/docs/yui/<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></scr...
YUI() TidbitsYUI().use(function (Y) {      Y.log();      Y.later();      Y.cached();      Y.UA      Y.Lang});
Y.log();      Y.log(message);Console WidgetYUI().use(”console”, function(Y) {    var myConsole = new Y.console();    myCon...
Y.dump();YUI().use(”dump”, function(Y) {      Y.log(Y.dump(myObj));});
Y.later();   var timer = Y.later(50, gizmo, gizmo.foo);   timer.cancel();   var args = [10, 20];   var timer = Y.later(50,...
Y.cached();  var cachedFoo = Y.cached(foo);  var result = cachedFoo(arg1, arg2);
Y.cached();      var cachedFoo = Y.cached(foo);      var result = cachedFoo(arg1, arg2);ClassnamemanagerYUI().use(”classna...
Y.UAY.UA.geckoY.UA.osY.UA.mobileY.UA.secureY.UA.airY.UA.caja
Y.LangY.Lang.isString(something);Y.Lang.type(something);Y.Lang.trim(something);
Y.mix();Y.mix(obj1, obj2);       obj1          obj2       name          name       foo()         bar()                    ...
Y.mix();Y.mix(obj1, obj2);       obj1          obj2       name          name       foo()         bar()       bar()        ...
Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj             obj1            obj2   obj3                    name  ...
Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj             obj1            obj2   obj3  name              name  ...
Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj             obj1            obj2   obj3  name              name  ...
Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj             obj1            obj2   obj3  name              name  ...
Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj             obj1            obj2   obj3  name              name  ...
OOP ModuleYUI().use(”oop”, function(Y) {      Y.clone();      Y.aggregate();      Y.augment();});
Y.clone() var obj2 = Y.clone(obj1);         obj2                obj1   bing               bing   bong               bong  ...
Y.aggregate()Y.aggregate(obj2, obj1);         obj2              obj1   bing              bing   bong              bong   f...
Y.aggregate()Y.aggregate(obj2, obj1);         obj2              obj1   bing              bing   bong              bong   f...
Y.augment() Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({ ... }); list.each(function (item) { ... });M...
Y.augment() Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({ ... }); list.each(function (item) { ... });M...
Y.plug()  var overlay = new Y.Overlay({ ... });  overlay.plug(Y.Plugin.Drag);  overlay.dd.set(lock, true);  overlay.unplug...
Y.plug()  var overlay = new Y.Overlay({ ... });  overlay.plug(Y.Plugin.Drag);  overlay.dd.set(lock, true);  overlay.unplug...
Y.plug()  var overlay = new Y.Overlay({ ... });  overlay.plug(Y.Plugin.Drag);  overlay.dd.set(lock, true);  overlay.unplug...
Y.plug()  var overlay = new Y.Overlay({ ... });  overlay.plug(Y.Plugin.Drag);  overlay.dd.set(lock, true);  overlay.unplug...
Y.plug()  var overlay = new Y.Overlay({ ... });  overlay.plug(Y.Plugin.Drag);  overlay.dd.set(lock, true);  overlay.unplug...
Y.substitute()var greeting =Y.substitute("Hello, {who}!", { who: "World" });
Y.bind()Y.on(submit, Y.bind(function(e){   e.halt();   this.set(businessForDirections, null);}, this), #ymap-get-direction...
Y.delegate()Y.one(#ymap-get-directions).delegate("keypress",    function(e) { ... }, >li.input);node.delegate("myNode|keyp...
Y.detach()node.delegate("myNode|keypress", function(e) { ... }, input);node.on("myNode|mouseenter", function(e) { ... });n...
Y.DoYUI().use("event-custom” , function(Y) {      Y.Do.before(objClass.woo, obj1, foo);      Y.Do.after(objClass.wee, obj2...
What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
References• http://yuilibrary.com/• Images from Google, Flickr • YUI Theater - http://www.youtube.com/yuilibrary         ...
Questions?• Slides at http://slideshare.net/jaisanth/• jaisanth@• IRC freenode: #yui
THANK YOU!
YUI Tidbits
YUI Tidbits
Upcoming SlideShare
Loading in …5
×

YUI Tidbits

A bunch of extremely simple but really useful YUI3 helpers.

  • Be the first to comment

  • Be the first to like this

YUI Tidbits

  1. 1. YUI TIDBITS Jai Santhosh @jaisanth
  2. 2. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  3. 3. http://yuilibrary.com/
  4. 4. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  5. 5. Good Architecture!!
  6. 6. Few others
  7. 7. What’s in Smart Software?• Reliability• Maintainability• Compatibility• Extensibility
  8. 8. Y U NO SIMPLE?
  9. 9. http://yuilibrary.com/yui/docs/guides/
  10. 10. http://yuilibrary.com/yui/docs/guides/
  11. 11. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  12. 12. Getting YUI 3// http://yuilibrary.com/yui/docs/yui/<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>Getting YUI sandbox instanceYUI().use(function (Y) { // Your code here});
  13. 13. YUI() TidbitsYUI().use(function (Y) { Y.log(); Y.later(); Y.cached(); Y.UA Y.Lang});
  14. 14. Y.log(); Y.log(message);Console WidgetYUI().use(”console”, function(Y) { var myConsole = new Y.console(); myConsole.render(); Y.log(message);});
  15. 15. Y.dump();YUI().use(”dump”, function(Y) { Y.log(Y.dump(myObj));});
  16. 16. Y.later(); var timer = Y.later(50, gizmo, gizmo.foo); timer.cancel(); var args = [10, 20]; var timer = Y.later(50, gizmo, gizmo.foo, args);
  17. 17. Y.cached(); var cachedFoo = Y.cached(foo); var result = cachedFoo(arg1, arg2);
  18. 18. Y.cached(); var cachedFoo = Y.cached(foo); var result = cachedFoo(arg1, arg2);ClassnamemanagerYUI().use(”classnamemanager”, function(Y) { var sClass = new Y.ClassNameManager.getclassname(”button”, ”hover”); // sclass = ”yui-button-hover”});
  19. 19. Y.UAY.UA.geckoY.UA.osY.UA.mobileY.UA.secureY.UA.airY.UA.caja
  20. 20. Y.LangY.Lang.isString(something);Y.Lang.type(something);Y.Lang.trim(something);
  21. 21. Y.mix();Y.mix(obj1, obj2); obj1 obj2 name name foo() bar() baz()
  22. 22. Y.mix();Y.mix(obj1, obj2); obj1 obj2 name name foo() bar() bar() baz() baz()
  23. 23. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name foo bar foo bar baz
  24. 24. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo bar baz
  25. 25. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz
  26. 26. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz bar baz
  27. 27. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz bar baz
  28. 28. OOP ModuleYUI().use(”oop”, function(Y) { Y.clone(); Y.aggregate(); Y.augment();});
  29. 29. Y.clone() var obj2 = Y.clone(obj1); obj2 obj1 bing bing bong bong foo foo bar bar baz baz
  30. 30. Y.aggregate()Y.aggregate(obj2, obj1); obj2 obj1 bing bing bong bong foo foo bar bam baz
  31. 31. Y.aggregate()Y.aggregate(obj2, obj1); obj2 obj1 bing bing bong bong foo foo bar bam bam baz baz
  32. 32. Y.augment() Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({ ... }); list.each(function (item) { ... });ModelList Constructor ArrayList listPrototype Prototype Constructor create create init Prototype init each each each item item Prototype item
  33. 33. Y.augment() Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({ ... }); list.each(function (item) { ... });ModelList Constructor ArrayList listPrototype Constructor each 1. Copy create init Prototype 2. Construct each each 3. Execute item item Prototype
  34. 34. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd);
  35. 35. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay overlay Constructor ATTRS Attributes Attributes x x y y
  36. 36. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS Attributes y y lock
  37. 37. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS y y lock
  38. 38. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS y y lock
  39. 39. Y.substitute()var greeting =Y.substitute("Hello, {who}!", { who: "World" });
  40. 40. Y.bind()Y.on(submit, Y.bind(function(e){ e.halt(); this.set(businessForDirections, null);}, this), #ymap-get-directions);
  41. 41. Y.delegate()Y.one(#ymap-get-directions).delegate("keypress", function(e) { ... }, >li.input);node.delegate("myNode|keypress”, function(e) { ... }, input);node.on("myNode|keypress”, function(e) { ... }, input);node.delegate("myNode|keypress”, function(e) { ... }, input);node.delegate("myNode|keypress”, function(e) { ... }, input);
  42. 42. Y.detach()node.delegate("myNode|keypress", function(e) { ... }, input);node.on("myNode|mouseenter", function(e) { ... });node.on("myNode|mouseleave", function(e) { ... });node.on("myNode|click", function(e) { ... });Y.detach("myNode|*");
  43. 43. Y.DoYUI().use("event-custom” , function(Y) { Y.Do.before(objClass.woo, obj1, foo); Y.Do.after(objClass.wee, obj2, bar);});
  44. 44. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  45. 45. References• http://yuilibrary.com/• Images from Google, Flickr • YUI Theater - http://www.youtube.com/yuilibrary INDUSTRIAL STRENGTH BUILT TO LAST!!
  46. 46. Questions?• Slides at http://slideshare.net/jaisanth/• jaisanth@• IRC freenode: #yui
  47. 47. THANK YOU!

×