This document discusses hidden gems and features within the YUI JavaScript library. It begins by introducing the author as a Yahoo web developer and YUI enthusiast. The author then presents an analogy that viewing YUI APIs from a gamer's perspective reveals hidden features, just as exploring a game world might reveal secrets. The document is structured to guide the reader through progressively less hidden areas of YUI, from "Deeply Hidden" techniques to features "Hiding in Plain Sight." It provides examples of useful but obscure methods like Y.extend(), Y.augment(), and Y.stamp(). Other highlighted features include Y.Frame for creating isolated environments, Y.DOM.inViewportRegion for lazy loading, and event handlers

1. YUI Hidden
Gems
Andrew Wooldridge
Web Developer, Yahoo!
@triptych

2. Who am I?
Andrew Wooldridge

3. Who am I?
Andrew Wooldridge
• Web Developer – Yahoo!

4. Who am I?
Andrew Wooldridge
• Web Developer – Yahoo!
• YUI Enthusiast

5. Who am I?
Andrew Wooldridge
• Web Developer – Yahoo!
• YUI Enthusiast
• Gamer

6. Why mention gaming?

7. It’s a matter of perspective.

8. It’s a matter of perspective.
Looking at YUI APIs, you might see…

9. It’s a matter of perspective.
Looking at YUI APIs, you might see…

10. It’s a matter of perspective.
But coming from a gamer perspective I see:

11. It’s a matter of perspective.
But coming from a gamer perspective I see:

12. So I present to you:

13. So I present to you:

14. YUI = Minecraft

15. How we’ll proceed:

16. How we’ll proceed:
• Deeply Hidden

17. How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface

18. How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight

19. How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels

20. How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels
• Your Quest…

21. Let’s get started.

22. Deeply Hidden

23. Deeply Hidden – first batch
• Y.extend()

24. Deeply Hidden – first batch
• Y.extend()
• Y.augment()

25. Deeply Hidden – first batch
• Y.extend()
• Y.augment()
• Y.merge()

26. Deeply Hidden – first batch
• Y.extend()
• Y.augment()
• Y.merge()
• Y.mix()

27. Deeply Hidden – first batch
Y.extend()
functionBall(name){this.name=name;}Ball.prototype.round=tru
e;
functionBasketBall(name){
//chain
constructorsBasketBall.superclass.constructor.call(this,name);
}
Y.extend(Basketball,Bird);
varbball=newBasketball(“pro”);
// bball.round == true;

28. Deeply Hidden – first batch
Y.augment()
varFoo=function(){
/** special foo code **/
}
Y.augment(Foo,Y.EventTarget);
varfoo=newFoo();
// foo has EventTarget functionality

29. Deeply Hidden – first batch
Y.merge()
var one = {apple: "mac"}
var two = {pc: "ibm", handheld:"palm"}
var three= {pc: "dell"}
var res =Y.merge(one,two,three);
Y.log(res);
//> {apple:”mac”,handheld:”palm”,pc:”dell”}

30. Deeply Hidden – first batch
Y.mix()
varDuh=function(){
/** static stuff so I cannot extend **/
}
varYeah=function(){
/** new functionality I need **/
}
Y.mix(Duh,Yeah);
// Duh has Yeah’s functionality
// like Y.extend only for any object

31. Deeply Hidden – first batch
Phew! Now to less esoteric stuff…

32. Deeply Hidden – second batch
• Y.stamp()

33. Deeply Hidden – second batch
Y.stamp()
// set id’s for all links
Y.all("a").each(function(){
varsId=Y.stamp(this);
if(!this.get("id")){
this.set("id", sId);
}
});
// safe to run this 2X times – wont
// change ID’s

34. Deeply Hidden – second batch
• Y.stamp()
• Y.UA

35. Deeply Hidden – second batch
Y.UA
// browser detection – yucky – but useful
Y.log(Y.UA.chrome);
// > 16.0912
Y.log(Y.UA.userAgent);
// > Mozilla/5.0 (Macintosh; Intel Mac …
if(Y.UA.iphone){
//load responsive web code
}
//use sparingly!

36. Deeply Hidden – second batch
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()

37. Deeply Hidden – second batch
Node.getData() / Node.setData()
// kinda like stamp() only you set the value
// <div id=“foo” class=“bar”></div>
Y.one("#foo").setData("info", {name:'foo'});
//now get the dom node some other way
Y.log(Y.one(".bar").getData("info").name);
//>foo
// data is not stored in the DOM of the element

38. Deeply Hidden – second batch
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()
• Y.Global.on() / Y.Global.fire()

39. Deeply Hidden – second batch
Y.Global.on / Y.Global.fire
// two YUI instances
YUI().use("event","event-custom", function(Y){
Y.Global.on("demo:othermsg",fn)
});
YUI().use("event","event-custom", function(Y){
Y.Global.fire("demo:othermsg",{})
});
// shared environment between both YUI’s

40. Deeply Hidden – second batch -recap
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()
• Y.Global.on() / Y.Global.fire()

41. Deeply Hidden – level up!

42. Onward! Gems Near the Surface

43. Near the Surface
• Y.Frame

44. Y.Frame
• “Buried” inside Editor Module

45. Y.Frame
• “Buried” inside Editor Module
• Wrapper for iframe

46. Y.Frame
• “Buried” inside Editor Component
• Wrapper for iframe
• Creates another YUI instance

47. Y.Frame
• “Buried” inside Editor Module
• Wrapper for iframe
• Creates another YUI instance
• Cross-frame communication / events

48. Near the Surface
Y.Frame (part 1 listing)
var frame =newY.Frame({
title:"foo",container: "#bork",
content: "<hr/><b>loading</b><hr/>",
id: "foopynoopy",
use: ['substitute', 'node’,'stylesheet'],
extracss: "hr {color: blue;}"
});
// frame created.

49. Near the Surface
Y.Frame (part 2 listing)
// listen for “ready” event
frame.after("ready", function({
varfi=frame.getInstance();
// inner frame dom access
fi.one("b")
.set("innerHTML", "loaded!")
.setStyle("color", "green");
});
// great for creating sandboxed widgets

50. Near the Surface
• Y.Frame
• Y.DOM.inViewportRegion

51. Y.DOM.inViewportRegion
• “Buried” inside ImageLoader

52. Y.DOM.inViewportRegion
• “Buried” inside ImageLoader
• Actually lives in DOM module

53. Y.DOM.inViewportRegion
• “Buried” inside ImageLoader
• Actually lives in DOM module
• Needs a DOM element (not a Node)

54. Y.DOM.inViewportRegion
• “Buried” inside ImageLoader
• Actually lives in DOM module
• Needs a DOM element (not a Node)
• Perfect for lazy loading elements

55. Near the Surface
Y.DOM.inViewportRegion
var watcher =Y.one("#footer");
if (Y.DOM.inViewportRegion(
Y.Node.getDOMNode(watcher), false, null)) {
Y.log("in viewport!");
}
// only checks 1x time. You need to poll
// or check during scroll event
// can check for partial or whole element
// in viewport

56. Near the Surface
• Y.Frame
• Y.DOM.inViewportRegion
• Y.substitute / Y.Lang.sub

57. Y.Substitute / Y.Lang.Sub
• Useful for templating like Mustache.js

58. Y.Substitute / Y.Lang.Sub
• Useful for templating like Mustache.js
• Does {placeholder} substitution on a
string.

59. Y.Substitute / Y.Lang.Sub
• Useful for templating like Mustache.js
• Does {placeholder} substitution on a
string.
• Uses JSON object with keys

60. Y.Substitute / Y.Lang.Sub
• Useful for templating like Mustache.js
• Does {placeholder} substitution on a
string.
• Uses JSON object with keys
• Usually just use Y.Lang.sub() for simple
substitution

61. Near the Surface
Y.Substitute
var temp ="Hello, {who}!";
varobj= {who: "World"};
var greeting =Y.substitute(temp,obj);
Y.log(greeting);
// > Hello, World!
// great for making HTML templates

62. Near the Surface
• Y.Frame
• Y.DOM.inViewportRegion
• Y.substitute / Y.Lang.sub
• Y.QueryString

63. Y.QueryString
• Utility module

64. Y.QueryString
• Utility module
• Converts JS objects to query strings and
back

65. Y.QueryString
• Utility module
• Converts JS objects to query strings and
back
• Y.QueryString.parse() – str to obj

66. Y.QueryString
• Utility module
• Converts JS objects to query strings and
back
• Y.QueryString.parse() – str to obj
• Y.QueryString.stringify() – obj to str

67. Y.QueryString
• Utility module
• Converts JS objects to query strings and
back
• Y.QueryString.parse() – str to obj
• Y.QueryString.stringify() – obj to str
• Perfect for creating urls

68. Near the Surface
Y.QueryString (part 1 – stringify)
Y.use("querystring", function(){
myobj= {
color:"brown", adj:"slow", literary:
true };
Y.one("#result").append(
Y.QueryString.stringify(myobj));
});
// > color=brown&adj=slow&literary=1
// coerces true to 1

69. Near the Surface
Y.QueryString (part 2 – parse)
YUI().use("querystring", function(Y){
varobj=Y.QueryString.parse(
"sword=golden&pocket=triforce");
Y.log(obj.pocket);
});
// >triforce

70. Near the Surface - recap
• Y.Frame
• Y.DOM.inViewportRegion
• Y.substitute / Y.Lang.sub
• Y.QueryString

71. Near the Surface – level up!

72. Hiding in Plain Sight

73. Hiding in Plain Sight
• Y.on(“hover”)

74. Hiding in Plain Sight
Y.on(“hover”)
YUI().use("node", "event-hover", function(Y){
Y.one("#searchbox").on("hover",
function(e) {
e.relatedTarget.addClass("hover")
}, function(e) {
e.relatedTarget.removeClass("hover")
});
});

75. Hiding in Plain Sight
• Y.on(“hover”)
• Y.on(“clickoutside”) [<event>outside]

76. Hiding in Plain Sight
Y.on(“clickoutside”)
YUI().use("node", "event-outside", function(Y){
Y.on("domready", function(){
Y.one("#inside").on("clickoutside", function(){
Y.log("clicked outside");
})
})
});
// triggers if click anywhere outside of node

77. Hiding in Plain Sight
Y.on(“clickoutside”)
blur mousemove
change mouseout
click mouseover
dblclick mouseup
focus select
keydown submit
keypress
keyup
mousedown

78. Hiding in Plain Sight
• Y.on(“hover”)
• Y.on(“clickoutside”) [<event>outside]
• Y.Later

79. Hiding in Plain Sight
Y.Later
var time =60;
var display =Y.one('#timer');
functiondec(){
time -=1;
Y.one('#timer').setContent(time+
' seconds left');
}
var fuse = Y.later(1000,Y.one('body'),dec, null,true);

80. So far so good?
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight

81. Next up:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels

82. Future Levels

83. Future Levels
• Graphics

84. Future Levels - Graphics

85. Future Levels
• Graphics
• App Framework (MVC)

86. Future Levels – App Framework

87. Future Levels
• Graphics
• App Framework (MVC)
• Transition

88. Future Levels – Transition

89. Finally:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels
• Your Quest…

90. Your Quest…

91. Your Quest…
• Get the basics down (Y.Base, Y.Widget)

92. Your Quest…
• Get the basics down (Y.Base, Y.Widget)
• Explore the Gallery
(http://yuilibrary.com/gallery/ )

93. Your Quest…
• Get the basics down (Y.Base, Y.Widget)
• Explore the Gallery
(http://yuilibrary.com/gallery/ )
• Have an attitude of discovery

94. Your Quest…
• Get the basics down (Y.Base, Y.Widget)
• Explore the Gallery
(http://yuilibrary.com/gallery/ )
• Have an attitude of discovery
• Have fun! (Try new things)

95. Your Quest…
• Get the basics down (Y.Base, Y.Widget)
• Explore the Gallery
(http://yuilibrary.com/gallery/ )
• Have an attitude of discovery
• Have fun! (Try new things)
• Share your Gems (@triptych)

96. Thank You!

97. Credits
• YUI Team – killer codebase
• Anthony Pipkin – great ideas
• Ryan Grove – code formatting tips
• Internet – pretty pictures
• Game developers – for making worlds

98. Questions?