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• Web Developer – Yahoo!• YUI Enthusiast

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

Why mention gaming?

It’s a matter of perspective.

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

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

So I present to you:

YUI = Minecraft

How we’ll proceed:

How we’ll proceed:• Deeply Hidden

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

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

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

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

Let’s get started.

Deeply Hidden

Deeply Hidden – first batch• Y.extend()

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

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

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

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

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

Deeply Hidden – first batchY.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”}

Deeply Hidden – first batchY.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

Deeply Hidden – first batchPhew! Now to less esoteric stuff…

Deeply Hidden – second batch• Y.stamp()

Deeply Hidden – second batchY.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

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

Deeply Hidden – second batchY.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!

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

Deeply Hidden – second batchNode.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

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

Deeply Hidden – second batchY.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• Node.getData()/Node.setData()• 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• “Buried” inside Editor Module• Wrapper for iframe

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

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

Near the SurfaceY.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.

Near the SurfaceY.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

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

Y.DOM.inViewportRegion• “Buried” inside ImageLoader

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

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

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

Near the SurfaceY.DOM.inViewportRegionvar 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.DOM.inViewportRegion• Y.substitute / Y.Lang.sub

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

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

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

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

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

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

Y.QueryString• Utility module

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

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

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

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

Near the SurfaceY.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 SurfaceY.QueryString (part 2 – parse) YUI().use("querystring", function(Y){ varobj=Y.QueryString.parse( "sword=golden&pocket=triforce"); Y.log(obj.pocket); }); // >triforce

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

Near the Surface – level up!

Hiding in Plain Sight

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

Hiding in Plain SightY.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") }); });

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

Hiding in Plain SightY.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

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

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

Hiding in Plain SightY.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);

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

Next up:• Deeply Hidden• Just Beneath the Surface• Hiding in Plain Sight• 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 • Just Beneath the Surface • Hiding in Plain Sight • Future Levels • Your Quest…

Your Quest…

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

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

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

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)

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)

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?

http://andrewwooldridge.com	870
http://www.andrewwooldridge.com	716
http://buildingitwithyui.blogspot.com	33
http://lanyrd.com	13
http://buildingitwithyui.blogspot.in	6
http://translate.googleusercontent.com	4
http://buildingitwithyui.blogspot.co.nz	4
https://twitter.com	2
http://buildingitwithyui.blogspot.jp	1
http://buildingitwithyui.blogspot.com.ar	1

YUI Hidden Gems

by Andrew Wooldridge

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,650

Statistics

YUI Hidden Gems Presentation Transcript