YUI Hidden Gems

YUI Hidden Gems

Andrew WooldridgeWeb Developer, Yahoo!

@triptych

Who am I?

Andrew Wooldridge

Who am I?

Andrew Wooldridge

• Web Developer – Yahoo!

Who am I?

Andrew Wooldridge


• YUI Enthusiast

Who am I?

Andrew Wooldridge


• YUI Enthusiast

• Gamer

Why mention gaming?

It’s a matter of perspective.


Looking at YUI APIs, you might see…


But coming from a gamer perspective I see:

So I present to you:

YUI = Minecraft

How we’ll proceed:


• Deeply Hidden


• Deeply Hidden

• Just Beneath the Surface


• Deeply Hidden


• Hiding in Plain Sight


• Deeply Hidden



• Future Levels


• Deeply Hidden



• Future Levels

• Your Quest…

Let’s get started.

Deeply Hidden

Deeply Hidden – first batch

• Y.extend()


• Y.extend()

• Y.augment()


• Y.extend()

• Y.augment()

• Y.merge()


• Y.extend()

• Y.augment()

• Y.merge()

• Y.mix()


Y.extend()

function Ball(name){this.name = name;}Ball.prototype.round = true;function BasketBall(name){

//chain constructors BasketBall.superclass.constructor.call(this,name);}

Y.extend(Basketball,Bird);var bball = new Basketball(“pro”);// bball.round == true;


Y.augment()

var Foo = function(){ /** special foo code **/

}

Y.augment(Foo,Y.EventTarget);

var foo = new Foo();// foo has EventTarget functionality


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”}


Y.mix()

var Duh = function(){/** static stuff so I cannot extend **/

}var Yeah = function(){

/** new functionality I need **/}Y.mix(Duh,Yeah);

// Duh has Yeah’s functionality// like Y.extend only for any object


Phew! Now to less esoteric stuff…

Deeply Hidden – second batch

• Y.stamp()


Y.stamp()

// set id’s for all links Y.all("a").each(function(){

var sId = Y.stamp(this); if(!this.get("id")){

this.set("id", sId); }

});// safe to run this 2X times – wont// change ID’s


• Y.stamp()

• Y.UA


Y.UA

// browser detection – yucky – but usefulY.log(Y.UA.chrome);// > 16.0912Y.log(Y.UA.userAgent);// > Mozilla/5.0 (Macintosh; Intel Mac …

if(Y.UA.iphone){ //load responsive web code}//use sparingly!


• Y.stamp()

• Y.UA

• Node.getData()/Node.setData()


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 wayY.log(Y.one(".bar").getData("info").name);//> foo

// data is not stored in the DOM of the element


• Y.stamp()

• Y.UA


• Y.Global.on() / Y.Global.fire()


Y.Global.on / Y.Global.fire

// two YUI instancesYUI().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

Deeply Hidden – second batch -recap

• Y.stamp()

• Y.UA


• Y.Global.on() / Y.Global.fire()

Deeply Hidden – level up!

Onward! Gems Near the Surface

Near the Surface

• Y.Frame

Y.Frame

• “Buried” inside Editor Module

Y.Frame


• Wrapper for iframe

Y.Frame

• “Buried” inside Editor Component


• Creates another YUI instance

Y.Frame



• Creates another YUI instance

• Cross-frame communication / events

Near the Surface

Y.Frame (part 1 listing)

var frame = new Y.Frame({ title:"foo",container: "#bork", content: "<hr/><b>loading</b><hr/>", id: "foopynoopy",use: ['substitute', 'node’,'stylesheet'],extracss: "hr {color: blue;}"

}); // frame created.

Near the Surface

Y.Frame (part 2 listing)

// listen for “ready” eventframe.after("ready", function({

var fi = frame.getInstance(); // inner frame dom access fi.one("b")

.set("innerHTML", "loaded!")

.setStyle("color", "green");});

// great for creating sandboxed widgets

Near the Surface

• Y.Frame

• Y.DOM.inViewportRegion

Y.DOM.inViewportRegion

• “Buried” inside ImageLoader



• Actually lives in DOM module




• Needs a DOM element (not a Node)




• Needs a DOM element (not a Node)

• Perfect for lazy loading elements

Near the Surface


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

Near the Surface

• Y.Frame


• Y.substitute / Y.Lang.sub

Y.Substitute / Y.Lang.Sub

• Useful for templating like Mustache.js



• Does {placeholder} substitution on a string.




• Uses JSON object with keys




• Uses JSON object with keys

• Usually just use Y.Lang.sub() for simple substitution

Near the Surface

Y.Substitute

var temp = "Hello, {who}!";var obj = {who: "World"};

var greeting = Y.substitute(temp,obj);

Y.log(greeting);// > Hello, World!// great for making HTML templates

Near the Surface

• Y.Frame



• Y.QueryString

Y.QueryString

• Utility module

Y.QueryString

• Utility module

• Converts JS objects to query strings and back

Y.QueryString

• Utility module


• Y.QueryString.parse() – str to obj

Y.QueryString

• Utility module



• Y.QueryString.stringify() – obj to str

Y.QueryString

• Utility module



• Y.QueryString.stringify() – obj to str

• Perfect for creating urls

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

Near the Surface

Y.QueryString (part 2 – parse)

YUI().use("querystring", function(Y){ var obj = Y.QueryString.parse(

"sword=golden&pocket=triforce"); Y.log(obj.pocket);});// > triforce

Near the Surface - recap

• Y.Frame



• Y.QueryString

Near the Surface – level up!

Hiding in Plain Sight


• Y.on(“hover”)


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") });

});



• Y.on(“clickoutside”) [<event>outside]


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


Y.on(“clickoutside”)

blurchangeclickdblclickfocuskeydownkeypresskeyupmousedown

mousemovemouseoutmouseovermouseupselectsubmit



• Y.on(“clickoutside”) [<event>outside]

• Y.Later


Y.Later

var time = 60;var display = Y.one('#timer');function dec(){

time -=1; Y.one('#timer').setContent(time +

' seconds left');}var fuse = Y.later(1000,Y.one('body'),dec, null,true);

So far so good?

• Deeply Hidden



Next up:

• Deeply Hidden



• Future Levels

Future Levels

Future Levels

• Graphics

Future Levels - Graphics

Future Levels

• Graphics

• App Framework (MVC)

Future Levels – App Framework

Future Levels

• Graphics

• App Framework (MVC)

• Transition

Future Levels – Transition

Finally:

• Deeply Hidden



• Future Levels

• Your Quest…

Your Quest…

Your Quest…

• Get the basics down (Y.Base, Y.Widget)

Your Quest…


• Explore the Gallery (http://yuilibrary.com/gallery/ )

http://yuilibrary.com/gallery/

Your Quest…



• Have an attitude of discovery


Your Quest…




• Have fun! (Try new things)


Your Quest…




• Have fun! (Try new things)

• Share your Gems (@triptych)


Thank You!

Credits

• YUI Team – killer codebase

• Anthony Pipkin – great ideas

• Ryan Grove – code formatting tips

• Internet – pretty pictures

• Game developers – for making worlds

Questions?

YUI Hidden Gems

Technology

Transcript of YUI Hidden Gems