YUI Evolved: YUI3 and Why It’s Good for Youwhimsical.nu/hack/yui-slides.pdf · 2015. 1. 30. ·...

Preview:

Citation preview

YUI Evolved:YUI3 and Why It’s Good for You

Saturday, November 21, 2009

http://www.flickr.com/photos/valjk/634696442/

Saturday, November 21, 2009

http://www.flickr.com/photos/valjk/634696442/

document.onmousemove = mouseMove;document.onmouseup = mouseUp;var dragObject = null;var mouseOffset = null;

function mouseCoords(ev){ if(ev.pageX||ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop };}

function makeClickable(object){ object.onmousedown = function(){ dragObject = this; }

}function mouseUp(ev){ dragObject = null;}function getMouseOffset(target,ev){ ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};}function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return {x:left, y:top};}function mouseMove(ev){

ev = ev||window.event; var mousePos = mouseCoords(ev); if(dragObject){dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; return false; }}function mouseUp(){ dragObject = null;}function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; }

Saturday, November 21, 2009

http://www.flickr.com/photos/funadium/2311851858/

Saturday, November 21, 2009

http://www.flickr.com/photos/funadium/2311851858/

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

YUI().use('dd-drag', function(Y) { var dd = new Y.DD.Drag({ //Selector of the node to make draggable node: '#demo' }); });

Saturday, November 21, 2009

Change always comes bearing gi@s‐ Price Pritche*

Lighter Easier

Saturday, November 21, 2009

Change always comes bearing gi@s‐ Price Pritche*

• Finer grained modules, sub‐modules

• Lazy‐loading

• Emphasis on code reuse- common base, plugins, 

extensions

Lighter Easier

Saturday, November 21, 2009

Change always comes bearing gi@s‐ Price Pritche*

• Finer grained modules, sub‐modules

• Lazy‐loading

• Emphasis on code reuse- common base, plugins, 

extensions

• Sandboxed development

• Consistent API

• Convenience- each, bind, nodelist, queue, 

chainability, general sugar

Lighter Easier

Saturday, November 21, 2009

Change always comes bearing gi@s‐ Price Pritche*

• Finer grained modules, sub‐modules

• Lazy‐loading

• Emphasis on code reuse- common base, plugins, 

extensions

• Sandboxed development

• Consistent API

• Convenience- each, bind, nodelist, queue, 

chainability, general sugar

Lighter Easier

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

yui-min.js

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

yui-min.js

node event

dom selector

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

yui-min.js

node event

dom selector

YUI().use("imageloader", function(Y){ // magic! }

);

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

add ph

ase

use ph

ase

yui-min.js

node event

dom selector

YUI().use("imageloader", function(Y){ // magic! }

);

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

add ph

ase

use ph

ase

yui-min.js

node event oop

dom selector imageloader

YUI().use("imageloader", function(Y){ // magic! }

);

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

add ph

ase

use ph

ase

yui-min.js

node event oop

dom selector imageloader

YUI().use("imageloader", function(Y){ // magic! }

);oop imageloadereventnode

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

add ph

ase

use ph

ase

yui-min.js

node event

YUI().use("anim-base",

function(Y){ // magic! }

);

oop

dom selector imageloader

YUI().use("imageloader", function(Y){ // magic! }

);oop imageloadereventnode

Saturday, November 21, 2009

All in a day’s work(but taking less than a day, hopefully)

add ph

ase

use ph

ase

yui-min.js

node event

YUI().use("anim-base",

function(Y){ // magic! }

);

oopevent-custom

attribute-base

base-base

dom selectoranim-base

imageloader

YUI().use("imageloader", function(Y){ // magic! }

);oop imageloadereventnode oopevent-

customattribute-

basebase-basedomselector

eventnode

anim-base

Saturday, November 21, 2009

Playing in your own sandbox(but invite others too)

add 

use ph

ase

yui

node ...

Easier

Saturday, November 21, 2009

Playing in your own sandbox(but invite others too)

add 

use ph

ase

yui

node ...

<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">

<script>YUI().use("overlay", function(Y){

Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );

});</script>

Easier

Saturday, November 21, 2009

Playing in your own sandbox(but invite others too)

add 

use ph

ase

yui

node ...

<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">

<script>YUI().use("overlay", function(Y){

Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );

});</script>

<script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js">

<script>YUI().use("overlay", function(Y){

new Y.Overlay({ … }).render();

});</script>

Easier

Saturday, November 21, 2009

Playing in your own sandbox(but invite others too)

add 

use ph

ase

yui

node ...

<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">

<script>YUI().use("overlay", function(Y){

Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );

});</script>

<script src="http://yui.yahooapis.com/3.0/build/overlay/overlay-min.js">

<script>YUI().use("overlay", function(Y){

new Y.Overlay({ … }).render();

});</script>

Y.on("click", function(){ new Y.Overlay({ … }).render(); }, "#button" );

Easier

Saturday, November 21, 2009

Everything where you want them(a.k.a. event façades)

Easier

Event

Saturday, November 21, 2009

Everything where you want them(a.k.a. event façades)

YUI2 YUI3

Easier

Event

Saturday, November 21, 2009

Everything where you want them(a.k.a. event façades)

var Dom = YAHOO.util.Dom;var Event = YAHOO.util.Event;

var linkNode = Dom.get("id");

Event.addListener( linkNode, "click", function(e) {

var target = Event.getTarget(e);

if( Dom.hasClass( target, "selector" )) {

Event.preventDefault(e);

}});

YUI2 YUI3

Easier

Event

Saturday, November 21, 2009

Everything where you want them(a.k.a. event façades)

var Dom = YAHOO.util.Dom;var Event = YAHOO.util.Event;

var linkNode = Dom.get("id");

Event.addListener( linkNode, "click", function(e) {

var target = Event.getTarget(e);

if( Dom.hasClass( target, "selector" )) {

Event.preventDefault(e);

}});

YUI2 YUI3

linkNode.on("click", function(e) {

if(!e.target.hasClass("selector")){ e.preventDefault(); }

});

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.stopImmediatePropagation()

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.stopImmediatePropagation()

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.preventDefault()

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.preventDefault()

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.preventDefault()

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.preventDefault()

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.stopImmediatePropagation()

Easier

Event

Saturday, November 21, 2009

ON

ON

Default Behavior

After

After

After

ON

One moment in Jme(regarding on and aNer moments)

ON

Default Behavior

After

After

After

this.fire("select");

e.stopImmediatePropagation()

Easier

Event

Saturday, November 21, 2009

Too many events spoil the page(a.k.a. event delegaOon)

HTML JS

Easier

Event

Saturday, November 21, 2009

Too many events spoil the page(a.k.a. event delegaOon)

<div id=”menu”> <ul>

<li class=”menuitem”> <em>Open file...</em> </li>

<li class=”menuitem”> <em>Save file...</em> </li>

<li class=”menuitem”> <em>Close file</em> </li>

<li class=”menuitem stop”> <em>Quit</em> </li>

</ul></div>

HTML JS

Easier

Event

Saturday, November 21, 2009

Too many events spoil the page(a.k.a. event delegaOon)

<div id=”menu”> <ul>

<li class=”menuitem”> <em>Open file...</em> </li>

<li class=”menuitem”> <em>Save file...</em> </li>

<li class=”menuitem”> <em>Close file</em> </li>

<li class=”menuitem stop”> <em>Quit</em> </li>

</ul></div>

HTML JS

var menuDiv = Y.one(“#menu”);

menuDiv.delegate("click", function(e){

}, "li.menuitem");

Easier

Event

Saturday, November 21, 2009

Too many events spoil the page(a.k.a. event delegaOon)

<div id=”menu”> <ul>

<li class=”menuitem”> <em>Open file...</em> </li>

<li class=”menuitem”> <em>Save file...</em> </li>

<li class=”menuitem”> <em>Close file</em> </li>

<li class=”menuitem stop”> <em>Quit</em> </li>

</ul></div>

HTML JS

var menuDiv = Y.one(“#menu”);

menuDiv.delegate("click", function(e){

}, "li.menuitem");

Easier

Event

Y.log( this.get(‘innerHTML’) ); // <em>Quit</em>, etc

// this == e.currentTarget // e.container == menuDiv

Saturday, November 21, 2009

Too many events spoil the page(a.k.a. event delegaOon)

<div id=”menu”> <ul>

<li class=”menuitem”> <em>Open file...</em> </li>

<li class=”menuitem”> <em>Save file...</em> </li>

<li class=”menuitem”> <em>Close file</em> </li>

<li class=”menuitem stop”> <em>Quit</em> </li>

</ul></div>

HTML JS

var menuDiv = Y.one(“#menu”);

menuDiv.delegate("click", function(e){

}, "li.menuitem");

Easier

Event

Y.log( this.get(‘innerHTML’) ); // <em>Quit</em>, etc

// this == e.currentTarget // e.container == menuDiv

// but maybe we want to stopY.one(“li.stop”).on(“click”, function(e){ e.stopPropagation(); });

Saturday, November 21, 2009

Menu

ON

Def. Behavior

After

After

NoJficaJon flow: Bubbling(Ony bubbles)

MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event

Saturday, November 21, 2009

Menu

ON

Def. Behavior

After

After

NoJficaJon flow: Bubbling(Ony bubbles)

MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event

Saturday, November 21, 2009

Menu

ON

Def. Behavior

After

After

NoJficaJon flow: Bubbling(Ony bubbles)

MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event

Saturday, November 21, 2009

Menu

ON

Def. Behavior

After

After

NoJficaJon flow: Bubbling(Ony bubbles)

MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

Easier

Event

Saturday, November 21, 2009

Menu

ON

Def. Behavior

After

After

NoJficaJon flow: Bubbling(Ony bubbles)

MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

e.stopPropagation()

Easier

Event

Saturday, November 21, 2009

Menu

ON

Def. Behavior

After

After

NoJficaJon flow: Bubbling(Ony bubbles)

MenuItem

ON

ON

Def. Behavior

After

After

After

ON

ON

Def. Behavior

After

After

After

ON

Def. Behavior

After

After

e.stopPropagation()

Easier

Event

Saturday, November 21, 2009

Working with HTML Elements(selectors, sugar, chaining, oh my)

YUI2 YUI3

Easier

Node

Saturday, November 21, 2009

Working with HTML Elements(selectors, sugar, chaining, oh my)

var Dom = YAHOO.util.Dom;var Event = YAOO.util.Event;

var elms = Dom.getElementsByClassName( "task", "li", "actions");

for (var i = 0; i < elms.length; i++) {

var elm = elms[i];

if(Dom.hasClass(elm, "selected")){

Dom.addClass(elm, "current"); Event.on(elm, "click", handler);

}

}

YUI2 YUI3

Easier

Node

Saturday, November 21, 2009

Working with HTML Elements(selectors, sugar, chaining, oh my)

var Dom = YAHOO.util.Dom;var Event = YAOO.util.Event;

var elms = Dom.getElementsByClassName( "task", "li", "actions");

for (var i = 0; i < elms.length; i++) {

var elm = elms[i];

if(Dom.hasClass(elm, "selected")){

Dom.addClass(elm, "current"); Event.on(elm, "click", handler);

}

}

YUI2 YUI3

var elm = Y.Node.get( ".actions li.task.selected");

elm.addClass("current");elm.on("click", handler);

Easier

Node

Saturday, November 21, 2009

Working with HTML Elements(selectors, sugar, chaining, oh my)

var Dom = YAHOO.util.Dom;var Event = YAOO.util.Event;

var elms = Dom.getElementsByClassName( "task", "li", "actions");

for (var i = 0; i < elms.length; i++) {

var elm = elms[i];

if(Dom.hasClass(elm, "selected")){

Dom.addClass(elm, "current"); Event.on(elm, "click", handler);

}

}

YUI2 YUI3

var elm = Y.Node.get( ".actions li.task.selected");

elm.addClass("current");elm.on("click", handler);

Easier

Node

// want something shorter?Y.Node.get(…).addClass("current").on( "click",handler);

Saturday, November 21, 2009

HTML Elements made easier(HTMLElement API improved)

Supports Normalizes Enhances

Easier

Bulk operaOons

Node

Saturday, November 21, 2009

HTML Elements made easier(HTMLElement API improved)

node.appendChild(new)

node.cloneNode(node)

node.scrollIntoView()

node.get("parentNode")

node.set("innerHTML", "Hello world!")

Supports Normalizes Enhances

Easier

Bulk operaOons

Node

Saturday, November 21, 2009

HTML Elements made easier(HTMLElement API improved)

node.appendChild(new)

node.cloneNode(node)

node.scrollIntoView()

node.get("parentNode")

node.set("innerHTML", "Hello world!")

Supports Normalizes Enhances

node.getAttribute("href")

node.contains(node)

node.getText()

node.getStyle("paddingTop")

node.previous()

Easier

Bulk operaOons

Node

Saturday, November 21, 2009

HTML Elements made easier(HTMLElement API improved)

node.appendChild(new)

node.cloneNode(node)

node.scrollIntoView()

node.get("parentNode")

node.set("innerHTML", "Hello world!")

Supports Normalizes Enhances

node.getAttribute("href")

node.contains(node)

node.getText()

node.getStyle("paddingTop")

node.previous()

node.addClass("selectable")

node.toggleClass("enabled")

node.getXY()

node.get("region")

Easier

Bulk operaOons

Node

Saturday, November 21, 2009

HTML Elements made easier(HTMLElement API improved)

node.appendChild(new)

node.cloneNode(node)

node.scrollIntoView()

node.get("parentNode")

node.set("innerHTML", "Hello world!")

Supports Normalizes Enhances

node.getAttribute("href")

node.contains(node)

node.getText()

node.getStyle("paddingTop")

node.previous()

node.addClass("selectable")

node.toggleClass("enabled")

node.getXY()

node.get("region")

Easier

var items = Y.Node.all(".actions li");items.addClass("disabled");items.set("title", "Item Disabled");

items.each(function(node) { node.addClass("disabled); node.set("title", "Item Disabled");});

Bulk operaOons

nodeList.filter(‘a[href]’);nodeList.odd();nodeList.even();

Node

Saturday, November 21, 2009

CreaJon, removal, and ancestry(a couple of last points)

Node creaOon

Node removal

Node ancestry

Easier

Node

Saturday, November 21, 2009

CreaJon, removal, and ancestry(a couple of last points)

var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);

Node creaOon Node removal

Node ancestry

Easier

Node

Saturday, November 21, 2009

CreaJon, removal, and ancestry(a couple of last points)

var html = '<fieldset><input type="checkbox" ... ></fieldset>';

// create the node and appendvar node = Y.node.create( html );form.appendChild( node );

// or do it right awayform.append( html );

var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);

Node creaOon Node removal

Node ancestry

Easier

Node

Saturday, November 21, 2009

CreaJon, removal, and ancestry(a couple of last points)

var html = '<fieldset><input type="checkbox" ... ></fieldset>';

// create the node and appendvar node = Y.node.create( html );form.appendChild( node );

// or do it right awayform.append( html );

var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);

Node creaOon Node removal

var parent = node.parentNode;parent.removeChild( node );

Node ancestry

Easier

Node

Saturday, November 21, 2009

CreaJon, removal, and ancestry(a couple of last points)

var html = '<fieldset><input type="checkbox" ... ></fieldset>';

// create the node and appendvar node = Y.node.create( html );form.appendChild( node );

// or do it right awayform.append( html );

var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);

Node creaOon Node removal

var parent = node.parentNode;parent.removeChild( node );

node.remove();

Node ancestry

Easier

Node

Saturday, November 21, 2009

CreaJon, removal, and ancestry(a couple of last points)

var html = '<fieldset><input type="checkbox" ... ></fieldset>';

// create the node and appendvar node = Y.node.create( html );form.appendChild( node );

// or do it right awayform.append( html );

var fieldset = document.createElement("fieldset");var input = document.createElement("input");input.type = "checkbox";input.name = "myCheckBox";...fieldset.appendChild("input");form.appendChild(fieldset);

Node creaOon Node removal

var parent = node.parentNode;parent.removeChild( node );

node.remove();

Node ancestry

var root = li.ancestor('.root');

<ul class="root"> <li>One</li> <li>Two</li> <li> <ul> <li>Sub One</li> <li>Sub Two</li> </ul> </li></ul>

Easier

Node

Saturday, November 21, 2009

Sugar is sweet(and so are you)

Easier

Saturday, November 21, 2009

oop

Sugar is sweet(and so are you)

Y.log

Y.later

Y.cached

Y.UA

Y.Lang

Easier

Y.Array

Y.Object

Y.mix

Y.merge

Y.clone

Y.aggregate

Y.augment

Y.extend

Y.each

Y.bind

++

Saturday, November 21, 2009

screenshot by me :)

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

http://whimsical.nu/hack/openhacksea.php

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

<div id="show"><div id="current"> <?php echo $show ?></div></div><div id="imageDump" style="display: none;"> <?= $dump ?></div>

The HTML

Datasource

Animation

The HTML

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

Datasource

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});

Datasource

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});var myCallback = { success: function(e){ // magic! // (add stuff to a custom PhotoReel obj) Y.later( 5000, myPhotoReel, myPhotoReel.advance, Array( Y ), true ); }};

Datasource

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

var myDataSource = new Y.DataSource.Get({ source:"flickrcall.php?tag=openhacksea", scriptCallbackParam:'jsoncallback'});var myCallback = { success: function(e){ // magic! // (add stuff to a custom PhotoReel obj) Y.later( 5000, myPhotoReel, myPhotoReel.advance, Array( Y ), true ); }};

myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { schema: { resultListLocator: "photos.photo", resultFields: ["id", "owner", "secret", "server", "farm", "title","ownername"] }});

Datasource

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

Datasource

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

Y.on( 'domready', function(e){ myDataSource.sendRequest("", myCallback); });

Datasource

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

});

PhotoReel.prototype = { ...

advance : function(Y) {

Y.one( "#show" ).append( '<div id="next" style="opacity:0;">' + this.photos[this.current] + '</div>' );

... }}

Animation

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

PhotoReel.prototype = { ...

advance : function(Y) {

... }}

});

Animation

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

PhotoReel.prototype = { ...

advance : function(Y) {

... }}

});

fadeInAnim = new Y.Anim({ node : "#next", to : { opacity: 1 } }); fadeOutAnim = new Y.Anim({ node : "#current", to : { opacity: 0 } })

Animation

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

PhotoReel.prototype = { ...

advance : function(Y) {

... }}

});

Animation

Saturday, November 21, 2009

Photo slideshow(because pictures are pre*eh)

The HTML

Datasource

Animation

YUI().use("datasource","node","substitute","anim", function(Y){ ...

PhotoReel.prototype = { ...

advance : function(Y) {

... }}

});

fadeInAnim.on( 'run', function(e) { fadeOutAnim.run(); });

fadeInAnim.on( 'end', function(e) {

Y.one( "#current" ).setContent( this.photos[this.current] ); Y.one( "#next" ).remove();

}, this );

fadeInAnim.run();

Animation

Saturday, November 21, 2009

http://www.flickr.com/photos/kandyjaxx/2012468692/

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/

YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/

YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/

YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/

YUI3 Galleryh*p://yuilibrary.com/gallery/ 

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/

YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/

YUI3 Galleryh*p://yuilibrary.com/gallery/ 

Saturday, November 21, 2009

Making life easier(for you and for me and the enOre human race)

Tutorials, samples, and guidesh*p://developer.yahoo.com/yui/3/

YUI API DocumentaJonh*p://developer.yahoo.com/yui/3/api/

YUI3 Galleryh*p://yuilibrary.com/gallery/ 

YUI Forumh*p://yuilibrary.com/forum/ 

Saturday, November 21, 2009

http://www.flickr.com/photos/bzedan/2905906576/

Go forth and hack!

Or, do you have any quesOons?

Angela Sabas

amari@yahoo-inc.comhttp://whimsical.nu@angelamaria

Frontend Engineer, Yahoo!

http://whimsical.nu/hack/openhacksea.php

Saturday, November 21, 2009