Back To The Future

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    16 Favorites

    Back To The Future - Presentation Transcript

    1. Back to the Future Lessons from the Past for Today’s Web Developers Bill Scott 2008 Yahoo! Front End Developer’s Summit 10.08.2008 1
    2. “There's an old saying about those who forget history. I don't remember it, but it's good.” Stephen Colbert, The Colbert Report, March 10, 2008 2
    3. Lessons from the Past Importance of Tools Proficiency in Debugging Understanding the Leaky Abstraction Being Pixel Retentive Inspired by Problems Students of Beautiful Code 3
    4. my history 4
    5. importance of tools 5
    6. importance of tools 5
    7. the web’s slide rule javascript alert. microsoft debugger. document.write(). innerHTML(). 6
    8. explosion of tools firebug debugger. yslow. hammerhead. developer toolbar. drosera. webkit web inspector. webkit network timeline. fiddler. charles. httpwatch. firefox throttle. firebug profiler. jiffy. episodes. cuzillion. ua profiler. greasemonkey. dom inspector. html validator. live http headers. tamper data. venkman. firecookie. selenium. ie8 debugger. chrome debugger. foxyproxy. firephp. pixel perfect. dragonfly. debugbar. modify headers. xray. design bookmarklet. jsmin. jslint. 7
    9. missing tools simple prototyping visibility into browser engine css layout & refactoring tools 8
    10. prototyping flash world: strong DHTML prototyping: still weak jQuery yui 3.0 protoscript (experimental) 9
    11. [protoscript slide] 10
    12. browser performance visibility no real visibility into memory consumption processing times javascript engine rendering engine reflow times page event timing (Episodes, Jiffy) 11
    13. [episodes slide, jiffy extension & round trip extension] 12
    14. css refactoring firebug css panel dust-me selectors extension css lint but no reliable way to clean up CSS 13
    15. proficiency in debugging 14
    16. 15
    17. 15
    18. example: netflix Q performance IE 7 > 250 16
    19. example: gzip breaks safari page weight dropped by 6x outbound network traffic dropped in half 17
    20. rules of debugging 1. understand the system 2. make it fail 3. quit thinking and look 4. divide and conquer 5. change one thing at a time 6. keep an audit trail http://www.debuggingrules.com/ http://www.whyprogramsfail.com/toc.php 7. check the plug 8. get a fresh view 9. if you didn't fix It, it ain't fixed 18
    21. understanding the leaky abstraction 19
    22. understanding deep magic story of GATO development barely understood the language barely understood mac development afterward determined to understand the deep magic disassembled ROM, commented all the code wrote numerous utilities asked what happens from click to render 20
    23. building on abstractions boosts productivity but what happens when you have to look underneath? the “leaky abstraction” syndrome it’s easy to just fiddle till it works but not stop to ask why 21
    24. example: closures Most candidates we interview cannot accurately explain a closure cannot detect common errors with closures If you use closures you should understand closures When something goes wrong you have to understand it var alertFuncs = []; for(var i = 0; i < 3; i++) { var alertFunc = function(value) { return function() { alert(value); } }(i); alertFuncs.push(alertFunc); } for (var i = 0; i < alertFuncs.length; i++) { alertFuncs[i](); } 22
    25. example: toolkits libraries have been a big boost to our community however, it’s easy to end up knowing a library but not really what the library does for them it’s ok to focus on the usage of a library, but a little dose of curiosity a day will teach you a lot 23
    26. example: end to end http request to http response is basic but do we understand what happens and when? getting a picture of the overall picture helps us track down performance issues 24
    27. being pixel retentive 25
    28. end-point paranoia (quickdraw) coordinate system infinitely thin lines between pixels (0,0) (8,0) (0,4) (8,4) filling or framing a rectangle: 0,0,8,4 points anchor to thin grid, to right & below 26
    29. 27
    30. css reset 28
    31. css frameworks 29
    32. YUI setX(), setY() 30
    33. interactive intelligence 31
    34. drag and drop interesting moments grid subtlety of drag & drop 32
    35. 33
    36. inspired by problems 34
    37. 35
    38. chasing ideas 36
    39. belief in creative process 37
    40. saying yes 38
    41. students of beautiful code 39
    42. wang calculator Find out if the given number was prime Instructions: J if 0, J if +, J if <>0, J if Err, Store, Recall, Mark, Search, Set PC, Indir Sieve of Eratosthenes 40
    43. 41
    44. macintosh patent for regions 42
    45. (0,0) (14,0) (9,6) (14,6) (20,10) (9,10) (5,12) (13,12) 0, 0, 14, 32678, (5,17) (13,17) 6, 9, 14, 32768, 10, 9, 20, 32768, 12, 5, 13, 32768, 17, 5, 13, 32768, (20,20) 20, 0, 20, 32768 (0,20) 43
    46. macpaint MC68000 MOVEM 32 32 32 32 32 32 32 32 32 32 32 32 32 44
    47. html* 45
    48. hacker? 46
    49. event-driven 47
    50. objects 48
    51. separation of concerns 49
    52. model-view-controller 50
    53. style-behavior-logic 51
    54. patterns 52
    55. 53
    56. Make it right before you make it fast. Make it clear before you make it faster. Keep it right when you make it faster. 54
    57. Where there are two bugs, there is likely to be a third. 55
    58. Make sure your code 'does nothing' gracefully. 56
    59. Premature optimization is the root of all evil. 57
    60. 1978 58
    61. 59
    62. Lessons from the Past Importance of Tools Proficiency in Debugging Understanding the Leaky Abstraction Being Pixel Retentive Inspired by Problems Students of Beautiful Code 60
    63. Credits http://flickr.com/photos/rogersmith/53912456/ http://flickr.com/photos/threesixes/12169049/ http://flickr.com/photos/playstar_rocker/2626983033/ http://flickr.com/photos/jakecaptive/49915119/ http://www.oldcalculatormuseum.com/wang600.html http://flickr.com/photos/trainor/451799414/ http://flickr.com/photos/tom-b/2441980046/ http://www.1000bit.it/support/manuali/apple/lisa/LisaPatentQuickDraw.pdf http://en.wikipedia.org/wiki/Image:TI-59.jpg 61

    + Bill ScottBill Scott, 2 years ago

    custom

    4991 views, 16 favs, 6 embeds more stats

    Keynote for the Yahoo! Frontend Developer's Summit more

    More info about this document

    CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

    Go to text version

    • Total Views 4991
      • 4799 on SlideShare
      • 192 from embeds
    • Comments 0
    • Favorites 16
    • Downloads 141
    Most viewed embeds
    • 185 views on http://looksgoodworkswell.blogspot.com
    • 3 views on http://www.hanrss.com
    • 1 views on http://www.blogger.com
    • 1 views on http://migurski.net
    • 1 views on http://feeds.feedburner.com

    more

    All embeds
    • 185 views on http://looksgoodworkswell.blogspot.com
    • 3 views on http://www.hanrss.com
    • 1 views on http://www.blogger.com
    • 1 views on http://migurski.net
    • 1 views on http://feeds.feedburner.com
    • 1 views on http://feeds2.feedburner.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories