yui hidden gems
DESCRIPTION
Slides from my talk at the Nov 2011 YUIConfTRANSCRIPT
![Page 1: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/1.jpg)
YUI Hidden Gems
Andrew WooldridgeWeb Developer, Yahoo!
@triptych
![Page 2: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/2.jpg)
Who am I?
Andrew Wooldridge
![Page 3: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/3.jpg)
Who am I?
Andrew Wooldridge
• Web Developer – Yahoo!
![Page 4: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/4.jpg)
Who am I?
Andrew Wooldridge
• Web Developer – Yahoo!
• YUI Enthusiast
![Page 5: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/5.jpg)
Who am I?
Andrew Wooldridge
• Web Developer – Yahoo!
• YUI Enthusiast
• Gamer
![Page 6: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/6.jpg)
Why mention gaming?
![Page 7: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/7.jpg)
It’s a matter of perspective.
![Page 8: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/8.jpg)
It’s a matter of perspective.
Looking at YUI APIs, you might see…
![Page 9: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/9.jpg)
It’s a matter of perspective.
Looking at YUI APIs, you might see…
![Page 10: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/10.jpg)
It’s a matter of perspective.
But coming from a gamer perspective I see:
![Page 11: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/11.jpg)
It’s a matter of perspective.
But coming from a gamer perspective I see:
![Page 12: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/12.jpg)
So I present to you:
![Page 13: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/13.jpg)
So I present to you:
![Page 14: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/14.jpg)
YUI = Minecraft
![Page 15: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/15.jpg)
How we’ll proceed:
![Page 16: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/16.jpg)
How we’ll proceed:
• Deeply Hidden
![Page 17: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/17.jpg)
How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface
![Page 18: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/18.jpg)
How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
![Page 19: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/19.jpg)
How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels
![Page 20: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/20.jpg)
How we’ll proceed:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels
• Your Quest…
![Page 21: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/21.jpg)
Let’s get started.
![Page 22: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/22.jpg)
Deeply Hidden
![Page 23: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/23.jpg)
Deeply Hidden – first batch
• Y.extend()
![Page 24: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/24.jpg)
Deeply Hidden – first batch
• Y.extend()
• Y.augment()
![Page 25: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/25.jpg)
Deeply Hidden – first batch
• Y.extend()
• Y.augment()
• Y.merge()
![Page 26: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/26.jpg)
Deeply Hidden – first batch
• Y.extend()
• Y.augment()
• Y.merge()
• Y.mix()
![Page 27: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/27.jpg)
Deeply Hidden – first batch
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;
![Page 28: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/28.jpg)
Deeply Hidden – first batch
Y.augment()
var Foo = function(){ /** special foo code **/
}
Y.augment(Foo,Y.EventTarget);
var foo = new Foo();// foo has EventTarget functionality
![Page 29: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/29.jpg)
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”}
![Page 30: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/30.jpg)
Deeply Hidden – first batch
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
![Page 31: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/31.jpg)
Deeply Hidden – first batch
Phew! Now to less esoteric stuff…
![Page 32: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/32.jpg)
Deeply Hidden – second batch
• Y.stamp()
![Page 33: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/33.jpg)
Deeply Hidden – second batch
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
![Page 34: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/34.jpg)
Deeply Hidden – second batch
• Y.stamp()
• Y.UA
![Page 35: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/35.jpg)
Deeply Hidden – second batch
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!
![Page 36: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/36.jpg)
Deeply Hidden – second batch
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()
![Page 37: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/37.jpg)
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 wayY.log(Y.one(".bar").getData("info").name);//> foo
// data is not stored in the DOM of the element
![Page 38: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/38.jpg)
Deeply Hidden – second batch
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()
• Y.Global.on() / Y.Global.fire()
![Page 39: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/39.jpg)
Deeply Hidden – second batch
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
![Page 40: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/40.jpg)
Deeply Hidden – second batch -recap
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()
• Y.Global.on() / Y.Global.fire()
![Page 41: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/41.jpg)
Deeply Hidden – level up!
![Page 42: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/42.jpg)
Onward! Gems Near the Surface
![Page 43: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/43.jpg)
Near the Surface
• Y.Frame
![Page 44: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/44.jpg)
Y.Frame
• “Buried” inside Editor Module
![Page 45: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/45.jpg)
Y.Frame
• “Buried” inside Editor Module
• Wrapper for iframe
![Page 46: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/46.jpg)
Y.Frame
• “Buried” inside Editor Component
• Wrapper for iframe
• Creates another YUI instance
![Page 47: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/47.jpg)
Y.Frame
• “Buried” inside Editor Module
• Wrapper for iframe
• Creates another YUI instance
• Cross-frame communication / events
![Page 48: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/48.jpg)
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.
![Page 49: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/49.jpg)
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
![Page 50: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/50.jpg)
Near the Surface
• Y.Frame
• Y.DOM.inViewportRegion
![Page 51: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/51.jpg)
Y.DOM.inViewportRegion
• “Buried” inside ImageLoader
![Page 52: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/52.jpg)
Y.DOM.inViewportRegion
• “Buried” inside ImageLoader
• Actually lives in DOM module
![Page 53: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/53.jpg)
Y.DOM.inViewportRegion
• “Buried” inside ImageLoader
• Actually lives in DOM module
• Needs a DOM element (not a Node)
![Page 54: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/54.jpg)
Y.DOM.inViewportRegion
• “Buried” inside ImageLoader
• Actually lives in DOM module
• Needs a DOM element (not a Node)
• Perfect for lazy loading elements
![Page 55: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/55.jpg)
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
![Page 56: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/56.jpg)
Near the Surface
• Y.Frame
• Y.DOM.inViewportRegion
• Y.substitute / Y.Lang.sub
![Page 57: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/57.jpg)
Y.Substitute / Y.Lang.Sub
• Useful for templating like Mustache.js
![Page 58: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/58.jpg)
Y.Substitute / Y.Lang.Sub
• Useful for templating like Mustache.js
• Does {placeholder} substitution on a string.
![Page 59: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/59.jpg)
Y.Substitute / Y.Lang.Sub
• Useful for templating like Mustache.js
• Does {placeholder} substitution on a string.
• Uses JSON object with keys
![Page 60: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/60.jpg)
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
![Page 61: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/61.jpg)
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
![Page 62: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/62.jpg)
Near the Surface
• Y.Frame
• Y.DOM.inViewportRegion
• Y.substitute / Y.Lang.sub
• Y.QueryString
![Page 63: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/63.jpg)
Y.QueryString
• Utility module
![Page 64: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/64.jpg)
Y.QueryString
• Utility module
• Converts JS objects to query strings and back
![Page 65: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/65.jpg)
Y.QueryString
• Utility module
• Converts JS objects to query strings and back
• Y.QueryString.parse() – str to obj
![Page 66: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/66.jpg)
Y.QueryString
• Utility module
• Converts JS objects to query strings and back
• Y.QueryString.parse() – str to obj
• Y.QueryString.stringify() – obj to str
![Page 67: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/67.jpg)
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
![Page 68: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/68.jpg)
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
![Page 69: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/69.jpg)
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
![Page 70: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/70.jpg)
Near the Surface - recap
• Y.Frame
• Y.DOM.inViewportRegion
• Y.substitute / Y.Lang.sub
• Y.QueryString
![Page 71: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/71.jpg)
Near the Surface – level up!
![Page 72: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/72.jpg)
Hiding in Plain Sight
![Page 73: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/73.jpg)
Hiding in Plain Sight
• Y.on(“hover”)
![Page 74: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/74.jpg)
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") });
});
![Page 75: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/75.jpg)
Hiding in Plain Sight
• Y.on(“hover”)
• Y.on(“clickoutside”) [<event>outside]
![Page 76: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/76.jpg)
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
![Page 77: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/77.jpg)
Hiding in Plain Sight
Y.on(“clickoutside”)
blurchangeclickdblclickfocuskeydownkeypresskeyupmousedown
mousemovemouseoutmouseovermouseupselectsubmit
![Page 78: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/78.jpg)
Hiding in Plain Sight
• Y.on(“hover”)
• Y.on(“clickoutside”) [<event>outside]
• Y.Later
![Page 79: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/79.jpg)
Hiding in Plain Sight
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);
![Page 80: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/80.jpg)
So far so good?
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
![Page 81: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/81.jpg)
Next up:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels
![Page 82: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/82.jpg)
Future Levels
![Page 83: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/83.jpg)
Future Levels
• Graphics
![Page 84: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/84.jpg)
Future Levels - Graphics
![Page 85: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/85.jpg)
Future Levels
• Graphics
• App Framework (MVC)
![Page 86: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/86.jpg)
Future Levels – App Framework
![Page 87: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/87.jpg)
Future Levels
• Graphics
• App Framework (MVC)
• Transition
![Page 88: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/88.jpg)
Future Levels – Transition
![Page 89: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/89.jpg)
Finally:
• Deeply Hidden
• Just Beneath the Surface
• Hiding in Plain Sight
• Future Levels
• Your Quest…
![Page 90: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/90.jpg)
Your Quest…
![Page 91: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/91.jpg)
Your Quest…
• Get the basics down (Y.Base, Y.Widget)
![Page 92: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/92.jpg)
Your Quest…
• Get the basics down (Y.Base, Y.Widget)
• Explore the Gallery (http://yuilibrary.com/gallery/ )
![Page 93: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/93.jpg)
Your Quest…
• Get the basics down (Y.Base, Y.Widget)
• Explore the Gallery (http://yuilibrary.com/gallery/ )
• Have an attitude of discovery
![Page 94: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/94.jpg)
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)
![Page 95: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/95.jpg)
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)
![Page 96: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/96.jpg)
Thank You!
![Page 97: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/97.jpg)
Credits
• YUI Team – killer codebase
• Anthony Pipkin – great ideas
• Ryan Grove – code formatting tips
• Internet – pretty pictures
• Game developers – for making worlds
![Page 98: YUI Hidden Gems](https://reader038.vdocument.in/reader038/viewer/2022102721/54b49b994a79596e038b4573/html5/thumbnails/98.jpg)
Questions?