YUI for control freaks - a presentation at The Ajax Experience

7,495 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,495
On SlideShare
0
From Embeds
0
Number of Embeds
226
Actions
Shares
0
Downloads
71
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

YUI for control freaks - a presentation at The Ajax Experience

  1. 1. YUI for control freaks Christian Heilmann The Ajax Experience, Boston, MA, Autumn 2008
  2. 2. Oh, hello there...
  3. 3. I’m Chris.
  4. 4. I am a lazy person.
  5. 5. I prefer doing things once, and do them right instead of doing them over and over again.
  6. 6. For this, I need control.
  7. 7. I like having control.
  8. 8. Remote control rubber duck
  9. 9. However, having too much control can be an issue.
  10. 10. Limitation is good.
  11. 11. Let’s do a quick rewind.
  12. 12. The Commodore 64
  13. 13. 16 preset colours resolution 160x200 pixels 4 colours per each 8x8 pixel block
  14. 14. Limitations that inspire different people in different ways.
  15. 15. It is great to have a one size fits all solution.
  16. 16. ... but it can be as cool to have a on-demand set of tools.
  17. 17. YUI is the latter.
  18. 18. It brings order to the chaos.
  19. 19. What chaos?
  20. 20. JavaScript is a part of a larger world.
  21. 21. This is not the JavaScript is a part of a larger world. copyrighted photo you are looking for
  22. 22. Browser Interaction with other technologies (CSS, Markup) Interaction with other scripts Interaction with the backend
  23. 23. Interaction with the operating system. Interaction with the user (with unknown ability) Interaction with bad code (a.k.a. ads)
  24. 24. YUI deals with all of this.
  25. 25. Because it has to – we built it for industrial (Yahoo) strength.
  26. 26. The first thing we needed to get are some sensible constraints.
  27. 27. We did this with the Graded Browser Support: http://developer.yahoo.com/ yui/articles/gbs/
  28. 28. This gave us a defined playground, and we were able to start tackling the other issues.
  29. 29. The first thing to tackle before you can even hope to build interfaces are browser differences in CSS.
  30. 30. There is no such thing as an “unstyled page”.
  31. 31. There is no such thing as an “unstyled page”.
  32. 32. Good luck working around that one.
  33. 33. Unless you use reset.css http://developer.yahoo.com/ yui/reset/
  34. 34. Starting with a blank canvas = good.
  35. 35. What about typography?
  36. 36. Make it work across browsers with fonts.css http://developer.yahoo.com/ yui/fonts/
  37. 37. Even create layouts with grids.css http://developer.yahoo.com/ yui/grids/
  38. 38. Grids gives you an amazingly large amount of options and layout permutations.
  39. 39. Everybody Duck!
  40. 40. There will be code
  41. 41. Wouldn’t it be cool to not know when to use which size of the grid automatically?
  42. 42. This is where the next YUI gem comes in: DOM. http://developer.yahoo.com/ yui/dom
  43. 43. Using the DOM component, I can read out what happens in the browser.
  44. 44. I can get the dimensions of the window, the dimensions of the browser, and the dimensions of any element in the document – regardless of its positioning.
  45. 45. Using DOM, I can create a YUI grid that works with all kind of different browsers sizes.
  46. 46. http://yuiblog.com/blog/ 2008/06/25/autogrids
  47. 47. YAHOO.example.autoGrid = function(){ var container = YAHOO.util.Dom.get('doc') || YAHOO.util.Dom.get('doc2') || YAHOO.util.Dom.get('doc4') || YAHOO.util.Dom.get('doc3') || YAHOO.util.Dom.get('doc-custom'); if(container){ var sidebar = null; var classes = container.className; if(classes.match(/yui-t[1-3]|yui-left/)){ var sidebar = 'left'; } if(classes.match(/yui-t[4-6]|yui-right/)){ var sidebar = 'right'; } function switchGrid(){ var currentWidth = YAHOO.util.Dom.getViewportWidth();
  48. 48. if(currentWidth > 950){ container.id = 'doc2'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t3' : 'yui-t6'; } } if(currentWidth < 950){ container.id = 'doc'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t2' : 'yui-t5'; } } if(currentWidth < 760){ container.id = 'doc3'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t1' : 'yui-t4'; } }
  49. 49. if(currentWidth < 600){ container.id = 'doc3'; container.className = ''; } }; switchGrid(); function throttle(method, scope) { clearTimeout(method._tId); method._tId= setTimeout(function(){ method.call(scope); }, 100); }; YAHOO.util.Event.on(window,'resize',function(){ throttle(YAHOO.example.autoGrid.switchGrid,window); }); }; return { switchGrid:switchGrid }; }();
  50. 50. What about monitoring the size of an element?
  51. 51. position:fixed is sexy!
  52. 52. It can however also render your site impossible to use.
  53. 53. var YD = YAHOO.util.Dom; YAHOO.util.Event.onDOMReady(toggleMenu); YAHOO.util.Event.on(window,'resize',function(){ toggleMenu(); }); function toggleMenu(){ var sidebar = YD.getRegion('sb'); var browser = YD.getViewportHeight(); YD.setStyle('sb','position', browser < sidebar.bottom ? 'static' : 'fixed' ); }
  54. 54. The DOM stepchild: Region
  55. 55. Using Region I can find out the dimensions of an element.
  56. 56. I can also find the region that is big enough to include two regions, or the one that is the intersection of the two.
  57. 57. region example
  58. 58. YAHOO.util.Event.onDOMReady(function(){ var YD = YAHOO.util.Dom; var r1 = YD.getRegion('region-one'); var r2 = YD.getRegion('region-two'); var i = r1.intersect(r2); var u = r1.union(r2); var intersect = document.createElement('div'); document.body.appendChild(intersect); YD.setStyle(intersect,'position','absolute'); YD.setStyle(intersect,'background','#c0c'); YD.setStyle(intersect,'width',i.right-i.left + 'px'); YD.setStyle(intersect,'height',i.bottom-i.top + 'px'); YD.setStyle(intersect,'z-index',100); YD.setXY(intersect,i);
  59. 59. var union = document.createElement('div'); document.body.appendChild(union); YD.setStyle(union,'position','absolute'); YD.setStyle(union,'background','#000'); YD.setStyle(union,'opacity',.5); YD.setStyle(union,'width',u.right-u.left + 'px'); YD.setStyle(union,'height',u.bottom-u.top + 'px'); YD.setStyle(union,'z-index',90); YD.setXY(union,u); });
  60. 60. This gives me full control to avoid any overlap!
  61. 61. What about things the browser does not tell me?
  62. 62. Wouldn’t it be cool to find out when the font is resized?
  63. 63. http://alistapart.com/articles/fontresizing
  64. 64. You can detect the font size in several ways:
  65. 65. Include an element with a known size in ems and read its offsetHeight and offsetWidth in an interval...
  66. 66. ...or use an iframe with em sizing off-screen and subscribe to its resize event.
  67. 67. Or use the YUI container module anywhere on your page... :)
  68. 68. YAHOO.namespace('example.container'); YAHOO.util.Event.onDOMReady(function(){ YAHOO.example.container.module1 = new YAHOO.widget.Panel( 'module1', { close:true, draggable:true, constraintoviewport:true } ); YAHOO.example.container.module1.render(); YAHOO.widget.Module.textResizeEvent.subscribe( function(o){ console.log('Text has been resized!') } ); });
  69. 69. YAHOO.namespace('example.container'); YAHOO.util.Event.onDOMReady(function(){ YAHOO.example.container.module1 = new YAHOO.widget.Panel( 'module1', { close:true, draggable:true, constraintoviewport:true } ); YAHOO.example.container.module1.render(); YAHOO.widget.Module.textResizeEvent.subscribe( function(o){ console.log('Text has been resized!') } ); });
  70. 70. This works with one feature of YUI event that is very close to my heart: Custom Events.
  71. 71. ... which is so cool that all the other big libraries now have it aswell :)
  72. 72. Custom Events allow you to notify an unknown amount of listeners about what is happening...
  73. 73. ... sending information not necessarily accessible to them when it happens.
  74. 74. Every single YUI component has a lot of Custom Events you can subscribe to.
  75. 75. Say for example you want to make sure to securely chain animation sequences...
  76. 76. //This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim(quot;animatorquot;, { left: {from:0, to:75} }, 1); //This is the second animation; it will fire //when the first animation is complete. var changeColor = new YAHOO.util.ColorAnim( quot;animatorquot;, { backgroundColor: {from:quot;#003366quot;, to:quot;#ff0000quot;} }, 1); //Here's the chaining glue: We subscribe to the //first animation's onComplete event, and in //our handler we animate the second animation: move.onComplete.subscribe(function() { changeColor.animate(); });
  77. 77. //Here we set up our YUI Button and subcribe to //its click event. When clicked, it will //animate the first animation: var start = new YAHOO.widget.Button(quot;startAnimquot;); start.subscribe(quot;clickquot;, function() { //reset the color value to the start so that //the animation can be run multiple times: YAHOO.util.Dom.setStyle(quot;animatorquot;, quot;backgroundColorquot;, quot;#003366quot;); move.animate(); });
  78. 78. //You can also make use of the onStart and onTween //custom events in Animation; here, we'll log all //of changeColor's custom events and peek at their //argument signatures: changeColor.onStart.subscribe(function() { YAHOO.log(quot;changeColor animation is starting.quot;, quot;infoquot;, quot;examplequot;); }); changeColor.onTween.subscribe(function(s, o) { YAHOO.log(quot;changeColor onTween firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); }); changeColor.onComplete.subscribe(function(s, o) { YAHOO.log(quot;changeColor onComplete firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); });
  79. 79. That is a lot of control!
  80. 80. {font resizing example}
  81. 81. Knowledge is power.
  82. 82. This is why YUI comes with a lot of tools to gain knowledge about what is happening under the hood of your application.
  83. 83. YUI logger gives you a cross- browser console to show values.
  84. 84. Death to alert()!
  85. 85. All YUI components come as a debug version which log everything that is going on to the logger.
  86. 86. You can even include the logger on the fly with a bookmarklet.
  87. 87. http://blog.rajatpandit.com/sandbox/yuilogger/index.html
  88. 88. If you need even more control, there is the YUI profiler. http://developer.yahoo.com/ yui/profiler/
  89. 89. And the YUI test framework for test driven development. http://developer.yahoo.com/ yui/yuitest/
  90. 90. If you like even more control...
  91. 91. Then you must be Nicholas Zakas or Dean Edwards!
  92. 92. On a code level, YUI comes out-of-the-box with namespacing.
  93. 93. Which – if used correctly – keeps large amounts of code readable and maintainable.
  94. 94. YAHOO.lang also comes with a lot of validation methods to ensure things are what they are.
  95. 95. So how is YUI good for control freaks?
  96. 96. Built on agreed standards Separated into modules each dealing with one task Constant reporting of what is going on Own Debugging environment
  97. 97. Here’s another small thing I prepared earlier:
  98. 98. Using Event and Dom I can control the visible part:
  99. 99. function move(e){ y = YAHOO.util.Event.getXY(e); if(y[1] > size){ render(y); } }; function render(y){ var d = YAHOO.util.Dom; var real = y[1] - d.getDocumentScrollTop(); d.setStyle(top,'height',real-size+'px'); d.setStyle(bottom,'top',real+size+'px'); var h = d.getViewportHeight() - real + size; d.setStyle(bottom,'height',h + 'px'); };
  100. 100. http://yuiblog.com/blog/2008/09/30/reading-blinds/
  101. 101. What does the future hold?
  102. 102. YUI3 http://developer.yahoo.com/ yui/3/
  103. 103. Include on demand Multiple sandboxed instances in a page Modularity on CSS level (per element reset) Every event is a custom event
  104. 104. THANKS! http://icanhaz.com/yuicontrol Christian Heilmann http://wait-till-i.com http://scriptingenabled.org http://twitter.com/codepo8

×