Beginning java script with dom scripting and ajax from novice to professional by christian heilmann
Professional Web Development Tools - Amazon Web...
Transcript of Professional Web Development Tools - Amazon Web...
![Page 1: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/1.jpg)
Professional Web Development Tools
Christian HeilmannIPC Media Brownbag, London, England May 2009
![Page 2: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/2.jpg)
Almost every web site is broken.
![Page 3: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/3.jpg)
This is bad.
![Page 4: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/4.jpg)
Unhappy visitors.
![Page 5: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/5.jpg)
Unhappy developers.
![Page 6: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/6.jpg)
Unhappy clients.
![Page 7: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/7.jpg)
Reasons
![Page 8: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/8.jpg)
Lack of communication
![Page 9: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/9.jpg)
Development environment
![Page 10: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/10.jpg)
Piecemeal development
![Page 11: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/11.jpg)
Lack of handover and documentation
![Page 12: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/12.jpg)
Interface to functionality
![Page 13: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/13.jpg)
Solutions
![Page 14: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/14.jpg)
Back to Basics
![Page 15: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/15.jpg)
![Page 16: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/16.jpg)
Task: Define type of search, enter search term,submit form.
![Page 17: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/17.jpg)
![Page 18: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/18.jpg)
![Page 19: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/19.jpg)
Analyse what data you display, and find the easiest way to show it.
Then make it look the way you want it to.
![Page 20: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/20.jpg)
Build things people want and know how to use.
![Page 21: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/21.jpg)
http://developer.yahoo.com/ypatterns
![Page 22: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/22.jpg)
Using technology for good
![Page 23: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/23.jpg)
Screenshots of uk.video.yahoo.com with and without JavaScript
http://uk.video.yahoo.com/
![Page 24: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/24.jpg)
![Page 25: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/25.jpg)
Aiming for excellence.
![Page 26: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/26.jpg)
http://finance.yahoo.com/currency-converter?u#from=USD;to=EUR;amt=1
![Page 27: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/27.jpg)
http://developer.yahoo.net/blog/archives/2009/01/accessible_converter.html
![Page 28: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/28.jpg)
Removing browsers
![Page 29: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/29.jpg)
http://developer.yahoo.com/yui/articles/gbs/
![Page 30: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/30.jpg)
Making browsers behave.
![Page 32: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/32.jpg)
Making browsers behave.
http://developer.yahoo.com/yui/reset/
![Page 33: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/33.jpg)
There is no such thing as an “unstyled page”.
![Page 34: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/34.jpg)
![Page 35: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/35.jpg)
![Page 36: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/36.jpg)
![Page 37: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/37.jpg)
![Page 38: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/38.jpg)
ctrl+z
![Page 39: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/39.jpg)
![Page 40: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/40.jpg)
![Page 41: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/41.jpg)
![Page 42: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/42.jpg)
![Page 43: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/43.jpg)
http://developer.yahoo.com/yui/fonts/
![Page 44: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/44.jpg)
http://developer.yahoo.com/yui/grids/
![Page 45: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/45.jpg)
http://developer.yahoo.com/yui/grids/builder/
![Page 46: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/46.jpg)
Doing one job at a time.
![Page 47: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/47.jpg)
DOM access.
![Page 48: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/48.jpg)
http://yuiblog.com/blog/2008/06/25/autogrids
![Page 49: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/49.jpg)
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();
![Page 50: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/50.jpg)
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'; } }
![Page 51: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/51.jpg)
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 };}();
![Page 52: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/52.jpg)
Predicting issues and fixing them.
![Page 53: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/53.jpg)
position:fixed is sexy!
![Page 54: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/54.jpg)
![Page 55: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/55.jpg)
![Page 56: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/56.jpg)
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' ); }
![Page 57: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/57.jpg)
Once fixed, let’s re-use.
![Page 58: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/58.jpg)
http://ui.jquery.com/
http://ui.jquery.com
![Page 59: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/59.jpg)
![Page 60: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/60.jpg)
Re-use means the ability to style differently.
![Page 61: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/61.jpg)
http://developer.yahoo.com/yui/articles/skinning/
![Page 62: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/62.jpg)
Document your work.
![Page 63: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/63.jpg)
http://developer.yahoo.com/yui/docs/
![Page 64: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/64.jpg)
Learn by example.
![Page 65: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/65.jpg)
http://developer.yahoo.com/yui/examples/
![Page 66: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/66.jpg)
Allow for extension.
![Page 67: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/67.jpg)
![Page 68: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/68.jpg)
//This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim("animator", { 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( "animator", { backgroundColor: {from:"#003366", to:"#ff0000"} }, 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(); });
![Page 69: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/69.jpg)
//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("startAnim"); start.subscribe("click", function() { //reset the color value to the start so that //the animation can be run multiple times: YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366"); move.animate(); });
![Page 70: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/70.jpg)
//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("changeColor animation is starting.", "info", "example"); }); changeColor.onTween.subscribe(function(s, o) { YAHOO.log("changeColor onTween firing with these arguments: " + YAHOO.lang.dump(o), "info", "example"); }); changeColor.onComplete.subscribe(function(s, o) { YAHOO.log("changeColor onComplete firing with these arguments: " + YAHOO.lang.dump(o), "info", "example"); });
![Page 71: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/71.jpg)
Know what is happening.
![Page 72: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/72.jpg)
![Page 73: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/73.jpg)
Monitor performance.
![Page 74: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/74.jpg)
![Page 75: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/75.jpg)
Test before you write.
![Page 76: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/76.jpg)
![Page 77: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/77.jpg)
http://developer.yahoo.com/performance/
![Page 78: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/78.jpg)
http://developer.yahoo.com/yslow/
![Page 79: Professional Web Development Tools - Amazon Web Serviceschrisheilmann.s3.amazonaws.com/professional-web... · Professional Web Development Tools Christian Heilmann IPC Media Brownbag,](https://reader036.fdocuments.us/reader036/viewer/2022062914/5e865ad38ebd3a32064e552b/html5/thumbnails/79.jpg)
Christian Heilmann
http://icant.co.uk
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8
Thanks.Any questions?