A bunch of extremely simple but really useful YUI3 helpers.

1. YUI TIDBITS
Jai Santhosh
@jaisanth

2. What We’re Going to Cover
• Why YUI?
• YUI Tidbits
• Before we are done!

3. http://yuilibrary.com/

4. What We’re Going to Cover
• Why YUI?
• YUI Tidbits
• Before we are done!

5. Good Architecture!!

8. Few others

9. What’s in Smart Software?
• Reliability
• Maintainability
• Compatibility
• Extensibility

10. Y U NO SIMPLE?

11. http://yuilibrary.com/yui/docs/guides/

12. http://yuilibrary.com/yui/docs/guides/

13. What We’re Going to Cover
• Why YUI?
• YUI Tidbits
• Before we are done!

14. 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 instance
YUI().use(function (Y) {
// Your code here
});

15. YUI() Tidbits
YUI().use(function (Y) {
Y.log();
Y.later();
Y.cached();
Y.UA
Y.Lang
});

16. Y.log();
Y.log(message);
Console Widget
YUI().use(”console”, function(Y) {
var myConsole = new Y.console();
myConsole.render();
Y.log(message);
});

17. Y.dump();
YUI().use(”dump”, function(Y) {
Y.log(Y.dump(myObj));
});

18. 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);

19. Y.cached();
var cachedFoo = Y.cached(foo);
var result = cachedFoo(arg1, arg2);

20. Y.cached();
var cachedFoo = Y.cached(foo);
var result = cachedFoo(arg1, arg2);
Classnamemanager
YUI().use(”classnamemanager”, function(Y) {
var sClass =
new Y.ClassNameManager.getclassname(”button”, ”hover”);
// sclass = ”yui-button-hover”
});

21. Y.UA
Y.UA.gecko
Y.UA.os
Y.UA.mobile
Y.UA.secure
Y.UA.air
Y.UA.caja

22. Y.Lang
Y.Lang.isString(something);
Y.Lang.type(something);
Y.Lang.trim(something);

23. Y.mix();
Y.mix(obj1, obj2);
obj1 obj2
name name
foo() bar()
baz()

24. Y.mix();
Y.mix(obj1, obj2);
obj1 obj2
name name
foo() bar()
bar()
baz()
baz()

25. Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
newObj obj1 obj2 obj3
name foo bar
foo bar baz

26. Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
newObj obj1 obj2 obj3
name name foo bar
foo bar baz

27. Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
newObj obj1 obj2 obj3
name name foo bar
foo foo bar baz

28. Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
newObj obj1 obj2 obj3
name name foo bar
foo foo bar baz
bar
baz

29. Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
newObj obj1 obj2 obj3
name name foo bar
foo foo bar baz
bar
baz

30. OOP Module
YUI().use(”oop”, function(Y) {
Y.clone();
Y.aggregate();
Y.augment();
});

31. Y.clone()
var obj2 = Y.clone(obj1);
obj2 obj1
bing bing
bong bong
foo foo
bar bar
baz baz

32. Y.aggregate()
Y.aggregate(obj2, obj1);
obj2 obj1
bing bing
bong bong
foo foo
bar bam
baz

33. Y.aggregate()
Y.aggregate(obj2, obj1);
obj2 obj1
bing bing
bong bong
foo foo
bar bam
bam baz
baz

34. Y.augment()
Y.augment(Y.ModelList, Y.ArrayList);
var list = new Y.ModelList({ ... });
list.each(function (item) { ... });
ModelList
Constructor
ArrayList list
Prototype Prototype
Constructor
create create
init Prototype init
each each each
item item Prototype
item

35. Y.augment()
Y.augment(Y.ModelList, Y.ArrayList);
var list = new Y.ModelList({ ... });
list.each(function (item) { ... });
ModelList
Constructor
ArrayList list
Prototype
Constructor
each 1. Copy
create
init Prototype
2. Construct
each each 3. Execute
item item Prototype

36. Y.plug()
var overlay = new Y.Overlay({ ... });
overlay.plug(Y.Plugin.Drag);
overlay.dd.set('lock', true);
overlay.unplug('dd');

37. 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

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
Attributes
y y lock

39. 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

40. 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

41. Y.substitute()
var greeting =
Y.substitute("Hello, {who}!", { who: "World" });

42. Y.bind()
Y.on('submit', Y.bind(function(e){
e.halt();
this.set('businessForDirections', null);
}, this), '#ymap-get-directions');

43. 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');

44. 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|*");

45. Y.Do
YUI().use("event-custom” , function(Y) {
Y.Do.before(objClass.woo, obj1, 'foo');
Y.Do.after(objClass.wee, obj2, 'bar');
});

46. What We’re Going to Cover
• Why YUI?
• YUI Tidbits
• Before we are done!

47. References
• http://yuilibrary.com/
• Images from Google, Flickr 
• YUI Theater - http://www.youtube.com/yuilibrary
INDUSTRIAL STRENGTH
BUILT TO LAST!!

48. Questions?
• Slides at http://slideshare.net/jaisanth/
• jaisanth@
• IRC freenode: #yui

49. THANK YOU!