The document discusses the evolution of event handling in JavaScript libraries like YUI. It shows how early approaches involved multiple ways of attaching event handlers and a lack of normalization. YUI 2 introduced a normalized subscription model but event handling was not fully normalized. YUI 3 further improved on this with a fully normalized subscription and event handling model using DOM-like syntax and contexts. It also discusses how YUI 3 extended this model to custom events, introducing features like default behaviors, payloads and control over bubbling to make custom events behave more like DOM events.

1. Events Evolved
Luke Smith
yuilibrary: lsmith
github: lsmith
twitter: @ls_n
YUICONF 2009
Monday, January 17, 2011

2. <input type="button" onclick="doSomething();">
YUICONF 2009
Monday, January 17, 2011

3. <input type="button" onclick="doSomething();">
YUICONF 2009
Monday, January 17, 2011

4. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
YUICONF 2009
Monday, January 17, 2011

5. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
YUICONF 2009
Monday, January 17, 2011

6. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
YUICONF 2009
Monday, January 17, 2011

7. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
YUICONF 2009
Monday, January 17, 2011

8. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
YUICONF 2009
Monday, January 17, 2011

9. if (button.addEventListener) {
button.addEventListener('click', doSomething, false);
} else if (button.attachEvent) {
button.attachEvent('click', doSomething);
} else {
button.onclick = doSomething;
}
YUICONF 2009
Monday, January 17, 2011

10. if (button.addEventListener) {
button.addEventListener('click', doSomething, false);
} else if (button.attachEvent) {
button.attachEvent('click', doSomething);
} else {
button.onclick = doSomething;
}
DUMB
YUICONF 2009
Monday, January 17, 2011

11. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
if (button.addEventListener) { /* madness */ }
YUICONF 2009
Monday, January 17, 2011

12. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
if (button.addEventListener) { /* madness */ }
addEvent(button, 'click', doSomething);
YUICONF 2009
Monday, January 17, 2011

13. function doSomething(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
return false;
}
YUICONF 2009
Monday, January 17, 2011

14. function doSomething(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
return false;
}
YUICONF 2009
Monday, January 17, 2011

15. function doSomething(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
return false;
}
We've been through this
YUICONF 2009
Monday, January 17, 2011

16. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
if (button.addEventListener) { /* madness */ }
addEvent(button, 'click', doSomething);
YUICONF 2009
Monday, January 17, 2011

17. <input type="button" onclick="doSomething();">
button.onclick = doSomething;
button.addEventListener('click', doSomething, false);
if (button.addEventListener) { /* madness */ }
addEvent(button, 'click', doSomething);
YUICONF 2009
Monday, January 17, 2011

18. YUI 2
YAHOO.util.Event.on(button,'click',doSomething);
YUICONF 2009
Monday, January 17, 2011

19. YUI 2
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
YUICONF 2009
Monday, January 17, 2011

20. YUI 2
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
✓ Normalized subscription
YUICONF 2009
Monday, January 17, 2011

21. YUI 2
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
✓ Normalized subscription
✓ Normalized event handling
YUICONF 2009
Monday, January 17, 2011

22. YUI 2
YAHOO.util.Event.on(button,'click',doSomething);
YAHOO.util.Event.preventDefault(e);
✓ Normalized subscription
✓ Normalized event handling
✓ DOM-like method names
YUICONF 2009
Monday, January 17, 2011

23. YUI 3
button.on('click', doSomething);
e.preventDefault();
YUICONF 2009
Monday, January 17, 2011

24. YUI 3
button.on('click', doSomething);
e.preventDefault();
✓ Normalized subscription
YUICONF 2009
Monday, January 17, 2011

25. YUI 3
button.on('click', doSomething);
e.preventDefault();
✓ Normalized subscription
✓ Normalized event handling
YUICONF 2009
Monday, January 17, 2011

26. YUI 3
button.on('click', doSomething);
e.preventDefault();
✓ Normalized subscription
✓ Normalized event handling
✓ DOM-like method names
YUICONF 2009
Monday, January 17, 2011

27. YUI 3
button.on('click', doSomething);
e.preventDefault();
✓ Normalized subscription
✓ Normalized event handling
✓ DOM-like method names
✓ DOM-like context
YUICONF 2009
Monday, January 17, 2011

28. YUI 3
button.on('click', doSomething);
e.preventDefault();
✓ Normalized subscription
✓ Normalized event handling
✓ DOM-like method names
✓ DOM-like context
✓ Terse
YUICONF 2009
Monday, January 17, 2011

29. We give you the DOM
YUICONF 2009
Monday, January 17, 2011

30. We give you the DOM
... but it works
YUICONF 2009
Monday, January 17, 2011

31. You are here
YUICONF 2009
Monday, January 17, 2011

32. Custom Events
YUI 2
YUICONF 2009
Monday, January 17, 2011

33. Custom Events
YUI 2
this.myEvent =
new YAHOO.util.CustomEvent("myEvent");
instance.myEvent.subscribe(doSomething);
this.myEvent.fire();
YUICONF 2009
Monday, January 17, 2011

34. Custom Events
YUI 2
instance.subscribe("myEvent",doSomething);
this.fireEvent("myEvent");
YUICONF 2009
Monday, January 17, 2011

35. Custom Events
YUI 3
instance.on("myEvent", doSomething);
this.fire("myEvent");
YUICONF 2009
Monday, January 17, 2011

36. Custom Events
YUI 3
this.publish("myEvent", config);
instance.on("myEvent", doSomething);
this.fire("myEvent");
YUICONF 2009
Monday, January 17, 2011

37. Y.extend( MyClass, Y.EventTarget );
Y.EventTarget
✓ Event API
YUICONF 2009
Monday, January 17, 2011

38. Y.extend( MyClass, Y.Base );
Y.EventTarget Y.Base
✓ Event API ✓ Event API
✓ Attributes
✓ Plugins
YUICONF 2009
Monday, January 17, 2011

39. Y.extend( MyClass, Y.Widget );
Y.EventTarget Y.Base Y.Widget
✓ Event API ✓ Event API ✓ Event API
✓ Attributes ✓ Attributes
✓ Plugins ✓ Plugins
✓ UI Lifecycle
YUICONF 2009
Monday, January 17, 2011

40. Y.extend( MyClass, Y.Widget );
Y.EventTarget Y.Base Y.Widget
✓ Event API ✓ Event API ✓ Event API
✓ Attributes ✓ Attributes
✓ Plugins ✓ Plugins
✓ UI Lifecycle
YUICONF 2009
Monday, January 17, 2011

41. Y.extend( MyClass, Y.Base );
Y.EventTarget Y.Widget
Y.Base
✓ Event API ✓ Event API
✓
✓ Event API ✓
Attributes
Plugins
✓ Attributes ✓ UI Lifecycle
✓ Plugins
YUICONF 2009
Monday, January 17, 2011

42. Normalized subscription
✓ DOM events
button.on("click", doSomething);
✓ Custom events
instance.on("myEvent", doSomething);
YUICONF 2009
Monday, January 17, 2011

43. Unified subscription
✓ DOM events
button.on("click", doSomething);
✓ Custom events
instance.on("myEvent", doSomething);
YUICONF 2009
Monday, January 17, 2011

44. Your App
Event API
DOM Events Module/App Events
YUICONF 2009
Monday, January 17, 2011

45. Custom
DOM
Events
YUICONF 2009
Monday, January 17, 2011

46. Custom
DOM
Events
YUICONF 2009
Monday, January 17, 2011

47. Custom Events more DOM like
✓ Unify Subscription API
- Default behaviors
- Bubbling
YUICONF 2009
Monday, January 17, 2011

48. Custom Events more DOM like
✓ Unify Subscription API foo.on(event, fn)
- Default behaviors
- Bubbling
YUICONF 2009
Monday, January 17, 2011

49. Custom Events more DOM like
✓ Unify Subscription API
- Default behaviors
this.publish(...)
- Bubbling
YUICONF 2009
Monday, January 17, 2011

50. Custom Events more DOM like
Default behaviors
YUICONF 2009
Monday, January 17, 2011

51. Custom Events
YUI 3
this.publish("myEvent", config);
instance.on("myEvent", doSomething);
this.fire("myEvent");
YUICONF 2009
Monday, January 17, 2011

52. Custom Events
YUI 3
this.publish("myEvent", config);
YUICONF 2009
Monday, January 17, 2011

53. Default behaviors
this.publish( name, config );
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn
});
}
YUICONF 2009
Monday, January 17, 2011

54. Default behaviors
this.publish( name, config );
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn
});
}
YUICONF 2009
Monday, January 17, 2011

55. Default behaviors
initializer: function () { ... },
_defStartFn: function (e) {
Y.log("started " + e.time);
this._disableControls();
this._getGoing(e.urgency);
}
YUICONF 2009
Monday, January 17, 2011

56. Event payload
e.time
e.urgency
this.fire("start", payload);
YUICONF 2009
Monday, January 17, 2011

57. Event payload
e.time
e.urgency
this.fire("start", {
time: new Date(),
urgency: 'ASAP'
});
YUICONF 2009
Monday, January 17, 2011

58. instance.on("start", doSomething);
this.fire("start");
YUICONF 2009
Monday, January 17, 2011

59. instance.on("start", doSomething);
this.fire("start"); execute subscribers
end yes prevented?
_defStartFn no
YUICONF 2009
Monday, January 17, 2011

60. prevented? Behavior is preventable
function doSomething(e) {
if (e.urgency === 'ASAP') {
e.preventDefault();
}
}
YUICONF 2009
Monday, January 17, 2011

61. ... but it doesn't have to be
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn,
preventable: false
});
}
YUICONF 2009
Monday, January 17, 2011

62. ... but it doesn't have to be
initializer: function () {
this.publish("start", {
defaultFn: this._defStartFn,
preventedFn: this._prvStartFn
});
}
YUICONF 2009
Monday, January 17, 2011

63. YUICONF 2009
Monday, January 17, 2011

64. Dogfood (nom)
cache.js
initializer: function () {
this.publish("add", {
defaultFn: this._defAddFn
});
this.publish("flush", {
defaultFn: this._defFlushFn
});
}
YUICONF 2009
Monday, January 17, 2011

65. Dogfood (nom)
console.js
initializer: function () {
this.publish(ENTRY, {
defaultFn: this._defEntryFn
});
this.publish(RESET, {
defaultFn: this._defResetFn
});
}
YUICONF 2009
Monday, January 17, 2011

66. Dogfood (nom)
datasource.js
initializer: function () {
this.publish("request", {
defaultFn: Y.bind("_defRequestFn",
this),
queuable:true
});
...
}
YUICONF 2009
Monday, January 17, 2011

67. Dogfood (nom)
drag.js
initializer: function () {
this.publish(EV_MOUSE_DOWN, {
defaultFn: this._defMouseDownFn,
bubbles: true
});
...
}
YUICONF 2009
Monday, January 17, 2011

68. Dogfood (nom)
slider.js
initializer: function () {
this.publish(SYNC, {
defaultFn: this._defSyncFn
});
this.publish(POSITION_THUMB, {
defaultFn: this._defPositionThumbFn
});
}
YUICONF 2009
Monday, January 17, 2011

69. Dogfood (nom)
async-queue.js
this.publish({
execute: { defaultFn : this._defExecFn },
shift : { defaultFn : this._defShiftFn },
add : { defaultFn : this._defAddFn },
promote: { defaultFn : this._defPromoteFn },
remove : { defaultFn : this._defRemoveFn }
});
YUICONF 2009
Monday, January 17, 2011

70. We love default behaviors
You should, too
YUICONF 2009
Monday, January 17, 2011

71. Custom Events more DOM like
✓ Unify Subscription API
✓ Default behaviors
- Bubbling
YUICONF 2009
Monday, January 17, 2011

72. Custom Events more DOM like
Bubbling
YUICONF 2009
Monday, January 17, 2011

73. Bubbling
initializer: function () {
this.publish("start", {
bubbles: true
});
this.addTarget(host);
}
YUICONF 2009
Monday, January 17, 2011

74. Bubbling
initializer: function () {
this.publish("start", {
broadcast: 1
});
}
YUICONF 2009
Monday, January 17, 2011

75. Bubbling
initializer: function () {
this.publish("start", {
bubbles: true,
stoppedFn: this._stopStartFn
});
}
YUICONF 2009
Monday, January 17, 2011

76. Event Delegation
<UL>
<li>one</li>
<li>two</li>
Y.all('li')
<li>three</li> .on('click', sayHi);
<li>four</li>
<li>five</li>
<li>six</li>
YUICONF 2009
Monday, January 17, 2011

77. Event Delegation
<UL>
<li>one</li>
<li>two</li>
Y.all('li')
<li>three</li> .on('click', sayHi);
<li>four</li>
<li>five</li> 6 subscriptions
<li>six</li>
YUICONF 2009
Monday, January 17, 2011

78. Event Delegation
<UL> Y.one('ul')
.on('click', sayHi);
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
YUICONF 2009
Monday, January 17, 2011

79. Event Delegation
<UL> Y.one('ul')
.on('click', sayHi);
<li>one</li>
<li>two</li>
1 subscription
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
YUICONF 2009
Monday, January 17, 2011

80. Event Delegation
<UL> Y.one('ul').delegate(
'click',sayHi,'li');
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
YUICONF 2009
Monday, January 17, 2011

81. Event Delegation
<UL> Y.one('ul').delegate(
'click',sayHi,'li');
<li>one</li>
<li>two</li>
1 subscription
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
YUICONF 2009
Monday, January 17, 2011

82. Event Delegation
instance1 instance1.on('start', sayHi);
instance2 instance2.on('start', sayHi);
instance3 instance3.on('start', sayHi);
instance4 instance4.on('start', sayHi);
instance5 instance5.on('start', sayHi);
instance6 instance6.on('start', sayHi);
YUICONF 2009
Monday, January 17, 2011

83. Event Delegation
6 subscriptions
instance1 instance1.on('start', sayHi);
instance2 instance2.on('start', sayHi);
instance3 instance3.on('start', sayHi);
instance4 instance4.on('start', sayHi);
instance5 instance5.on('start', sayHi);
instance6 instance6.on('start', sayHi);
YUICONF 2009
Monday, January 17, 2011

84. Event Delegation
ManagerClass Mgr.on('foo:start', sayHi);
instance1
instance2
instance3
instance4
instance5
instance6
YUICONF 2009
Monday, January 17, 2011

85. Event Delegation
ManagerClass Mgr.on('foo:start', sayHi);
instance1
instance2 1 subscription
instance3
instance4
instance5
instance6
YUICONF 2009
Monday, January 17, 2011

86. Event Delegation
ManagerClass Mgr.on('foo:start', sayHi);
instance1
instance2 1 subscription
instance3
instance4 initializer: function () {
this.addTarget(
instance5 this.get("host");
);
instance6 }
YUICONF 2009
Monday, January 17, 2011

87. Dogfood
Drag and Drop
var draggable = new Y.DD.Drag({
node: '#dragme'
});
draggable.on('start', doSomething);
YUICONF 2009
Monday, January 17, 2011

88. Dogfood
Drag and Drop
var draggable = new Y.DD.Drag({
node: '#dragme'
});
Y.DD.DDM.on('drag:start', doSomething);
YUICONF 2009
Monday, January 17, 2011

89. Dogfood
Y.Global
Y.on('yui:log', doSomething);
Y.Global.on('yui:log', doSomething);
YUICONF 2009
Monday, January 17, 2011

90. Custom Events more DOM like
✓ Unify Subscription API
✓ Default behaviors
✓ Bubbling
YUICONF 2009
Monday, January 17, 2011

91. Custom
DOM
Events
YUICONF 2009
Monday, January 17, 2011

92. Above and beyond
YUICONF 2009
Monday, January 17, 2011

93. Above and beyond
- Subscription context override
YUICONF 2009
Monday, January 17, 2011

94. Above and beyond
- Subscription context override
- Subscription payload
YUICONF 2009
Monday, January 17, 2011

95. Above and beyond
- Subscription context override
- Subscription payload
- Easy event detach
YUICONF 2009
Monday, January 17, 2011

96. Above and beyond
- Subscription context override
- Subscription payload
- Easy event detach
- "After" subscriptions
YUICONF 2009
Monday, January 17, 2011

97. Above and beyond
- Subscription context override
- Subscription payload
- Easy event detach
- "After" subscriptions
- New DOM events
YUICONF 2009
Monday, January 17, 2011

98. on()++
instance.on("start", myObj.startHandler);
YUICONF 2009
Monday, January 17, 2011

99. on()++
instance.on("start",
Y.bind(myObj.startHandler, myObj));
YUICONF 2009
Monday, January 17, 2011

100. on()++
instance.on("start",
myObj.startHandler, myObj);
instance.on(event, handler, context);
YUICONF 2009
Monday, January 17, 2011

101. on()++
node.on("click",
myObj.clickHandler, myObj);
instance.on(event, handler, context);
node.on(event, handler, context);
YUICONF 2009
Monday, January 17, 2011

102. on()++
instance.on("start", myObj.startHandler);
YUICONF 2009
Monday, January 17, 2011

103. on()++
instance.on("start",
Y.rbind(myObj.startHandler, myObj,
1, new Date(), { foo: "bar" }));
YUICONF 2009
Monday, January 17, 2011

104. on()++
instance.on("start",
myObj.startHandler, myObj,
1, new Date(), { foo: "bar" });
instance.on(evt, fn, ctx, arg1, ...argN);
node.on(evt, fn, ctx, arg1, ...argN);
YUICONF 2009
Monday, January 17, 2011

105. on()++
instance.on("start",
myObj.startHandler, myObj,
1, new Date(), { foo: "bar" });
instance.on(evt, fn, ctx, arg1, ...argN);
node.on(evt, fn, ctx, arg1, ...argN);
node.on(evt, fn, null, arg1, ...argN);
YUICONF 2009
Monday, January 17, 2011

106. Above and beyond
✓ Subscription context override
✓ Subscription payload
- Easy event detach
- "After" subscriptions
- New DOM events
YUICONF 2009
Monday, January 17, 2011

107. Above and beyond
✓ Subscription context override
✓ Subscription payload
- Easy event detach
- "After" subscriptions
- New DOM events
YUICONF 2009
Monday, January 17, 2011

108. Handles and categories
button.detach("click", doSomething);
YUICONF 2009
Monday, January 17, 2011

109. Handles and categories
button.detach("click", doSomething);
var sub = button.on("click", doSomething);
sub.detach();
YUICONF 2009
Monday, January 17, 2011

110. Handles and categories
button.detach("click", doSomething);
var sub = button.on("click", doSomething);
sub.detach();
button.on("my-cat|click", doSomething);
button.detach("my-cat|click");
YUICONF 2009
Monday, January 17, 2011

111. Handles and categories
button.detach("click", doSomething);
var sub = button.on("click", doSomething);
sub.detach();
widget.on("guid|xChange", handleXChange);
widget.on("guid|yChange", handleYChange);
widget.detach("guid|*");
YUICONF 2009
Monday, January 17, 2011

112. Above and beyond
✓ Subscription context override
✓ Subscription payload
✓ Easy event detach
- "After" subscriptions
- New DOM events
YUICONF 2009
Monday, January 17, 2011

113. Above and beyond
✓ Subscription context override
✓ Subscription payload
✓ Easy event detach
- "After" subscriptions
- New DOM events
YUICONF 2009
Monday, January 17, 2011

114. event instance.on(event,handler)
_defEventFn
instance
YUICONF 2009
Monday, January 17, 2011

115. event instance.on(event,handler)
_defEventFn
instance.after(event,handler)
instance
YUICONF 2009
Monday, January 17, 2011

116. Y.Base
✓ Event API
✓ Attributes After moments
✓ Plugins
this.after("attrChange", this._updateUI);
YUICONF 2009
Monday, January 17, 2011

117. Y.Base
✓ Event API
✓ Attributes After moments
✓ Plugins
this.after("attrChange", this._updateUI);
Side effects of a state change
YUICONF 2009
Monday, January 17, 2011

118. event instance.on(event,handler)
_defEventFn
instance.after(event,handler)
instance
YUICONF 2009
Monday, January 17, 2011

119. State UNCHANGED
event instance.on(event,handler)
_defEventFn
instance.after(event,handler)
instance
YUICONF 2009
Monday, January 17, 2011

120. State UNCHANGED
event instance.on(event,handler)
Change state _defEventFn
instance.after(event,handler)
instance
YUICONF 2009
Monday, January 17, 2011

121. State UNCHANGED
event instance.on(event,handler)
Change state _defEventFn
instance.after(event,handler)
State CHANGED
instance
YUICONF 2009
Monday, January 17, 2011

122. YUICONF 2009
Monday, January 17, 2011

123. Above and beyond
✓ Subscription context override
✓ Subscription payload
✓ Easy event detach
✓ "After" subscriptions
- New DOM events
YUICONF 2009
Monday, January 17, 2011

124. Above and beyond
✓ Subscription context override
✓ Subscription payload
✓ Easy event detach
✓ "After" subscriptions
- New DOM events
YUICONF 2009
Monday, January 17, 2011

125. DOM++
Y.Env.evt.plugins.YOUR_EVENT =
Y.Node.DOM_EVENTS.YOUR_EVENT = {
on: function (type, handler, ctx) {
}
}
YUICONF 2009
Monday, January 17, 2011

126. DOM++
Y.Env.evt.plugins.YOUR_EVENT =
Y.Node.DOM_EVENTS.YOUR_EVENT = {
on: function (type, handler, ctx) {
}
}
YUICONF 2009
Monday, January 17, 2011

127. Konami
Y.Env.evt.plugins.konami =
Y.Node.DOM_EVENTS.konami = {
}
YUICONF 2009
Monday, January 17, 2011

128. Konami
Y.Env.evt.plugins.konami =
Y.Node.DOM_EVENTS.konami = {
on: function (type, fn, ctx) {
var progress = {},
handlers = {},
keys = [38,38,40,40,37,39,37,39,66,65],
...
node.on("keydown", _checkProgress);
return detachHandle;
}
YUICONF 2009
Monday, January 17, 2011

129. Using your event
node.on('konami', addUnicorns);
YUICONF 2009
Monday, January 17, 2011

130. Above and beyond
✓ Subscription context override
✓ Subscription payload
✓ Easy event detach
✓ "After" subscriptions
✓ New DOM events
YUICONF 2009
Monday, January 17, 2011

131. Summary
✓ Unified subscription
✓ Default behaviors
✓ Bubbling
Custom ✓ Context override
DOM
Events ✓ Subscription payload
✓ Easy event detach
✓ "After" subscriptions
✓ New DOM events
YUICONF 2009
Monday, January 17, 2011

132. Rethink how you use events
YUICONF 2009
Monday, January 17, 2011

133. Rethink how you build your apps
YUICONF 2009
Monday, January 17, 2011

134. Image credit
http://www.redandgreen.org/R2Kphotos2.htm (revolution)
http://www.vinylrecords.ch/B/BE/Beatles/
http://www.flickr.com/photos/farewell_goodnight/214712018/
http://www.flickr.com/photos/docman/2948845217/
http://www.flickr.com/photos/yabanji/3175297773/
http://www.flickr.com/photos/hueyatl/233553293/
http://www.flickr.com/photos/dark_hylian/56050955/
http://www.flickr.com/photos/techthis/3528776386/
YUICONF 2009
Monday, January 17, 2011