Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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()functionBall(name){this.name=name;}Ball.prototype.round=true;functionBasketBall(name...
Deeply Hidden – first batchY.augment() varFoo=function(){ /** special foo code **/ } Y.augment(Foo,Y.EventTarget); varfoo=...
Deeply Hidden – first batchY.merge() var one = {apple: "mac"} var two = {pc: "ibm", handheld:"palm"} var three= {pc: "dell...
Deeply Hidden – first batchY.mix() varDuh=function(){     /** static stuff so I cannot extend **/ } varYeah=function(){   ...
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...
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.userAge...
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” ...
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...
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>l...
Near the SurfaceY.Frame (part 2 listing) // listen for “ready” event frame.after("ready", function({ varfi=frame.getInstan...
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)• Perfe...
Near the SurfaceY.DOM.inViewportRegionvar watcher =Y.one("#footer");if (Y.DOM.inViewportRegion(Y.Node.getDOMNode(watcher),...
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 JSO...
Y.Substitute / Y.Lang.Sub• Useful for templating like Mustache.js• Does {placeholder} substitution on a  string.• Uses JSO...
Near the SurfaceY.Substitute var temp ="Hello, {who}!"; varobj= {who: "World"}; var greeting =Y.substitute(temp,obj); Y.lo...
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.Query...
Y.QueryString• Utility module• Converts JS objects to query strings and  back• Y.QueryString.parse() – str to obj• Y.Query...
Near the SurfaceY.QueryString (part 1 – stringify) Y.use("querystring", function(){ myobj= { color:"brown", adj:"slow",   ...
Near the SurfaceY.QueryString (part 2 – parse) YUI().use("querystring", function(Y){ varobj=Y.QueryString.parse( "sword=go...
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(...
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.o...
Hiding in Plain SightY.on(“clickoutside”) blur                  mousemove change                mouseout click            ...
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).setCon...
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 attit...
Your Quest…• Get the basics down (Y.Base, Y.Widget)• Explore the Gallery  (http://yuilibrary.com/gallery/ )• Have an attit...
Your Quest…• Get the basics down (Y.Base, Y.Widget)• Explore the Gallery  (http://yuilibrary.com/gallery/ )• Have an attit...
Thank You!
Credits• YUI Team – killer codebase• Anthony Pipkin – great ideas• Ryan Grove – code formatting tips• Internet – pretty pi...
Questions?
Upcoming SlideShare
Loading in …5
×

YUI Hidden Gems

4,754 views

Published on

Slides from my talk at the Nov 2011 YUIConf

Published in: Technology
  • Be the first to comment

YUI Hidden Gems

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

×