Post on 13-Jan-2015
description
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.
Looking at YUI APIs, you might see…
It’s a matter of perspective.
But coming from a gamer perspective I see:
It’s a matter of perspective.
But coming from a gamer perspective I see:
So I present to you:
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()
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;
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
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”}
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
Deeply Hidden – first batch
Phew! Now to less esoteric stuff…
Deeply Hidden – second batch
• Y.stamp()
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
Deeply Hidden – second batch
• Y.stamp()
• Y.UA
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!
Deeply Hidden – second batch
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()
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
Deeply Hidden – second batch
• Y.stamp()
• Y.UA
• Node.getData()/Node.setData()
• Y.Global.on() / Y.Global.fire()
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
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 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
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 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
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 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.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 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.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 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") });
});
Hiding in Plain Sight
• Y.on(“hover”)
• Y.on(“clickoutside”) [<event>outside]
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
Hiding in Plain Sight
Y.on(“clickoutside”)
blurchangeclickdblclickfocuskeydownkeypresskeyupmousedown
mousemovemouseoutmouseovermouseupselectsubmit
Hiding in Plain Sight
• Y.on(“hover”)
• Y.on(“clickoutside”) [<event>outside]
• Y.Later
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);
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?