Back to the Future
Lessons from the Past for Today’s Web Developers

                   Bill Scott
   2008 Yahoo! Front En...
“There's an old saying about
those who forget history. I don't
   remember it, but it's good.”
 Stephen Colbert, The Colbe...
Lessons from the Past
  Importance of Tools
  Proficiency in Debugging
  Understanding the Leaky Abstraction
  Being Pixel ...
my history




             4
importance of tools




                      5
importance of tools




                      5
the web’s slide rule



javascript alert. microsoft debugger.
  document.write(). innerHTML().




                       ...
explosion of tools
      firebug debugger. yslow. hammerhead.
     developer toolbar. drosera. webkit web
  inspector. webk...
missing tools
simple prototyping
visibility into browser engine
css layout & refactoring tools




                       ...
prototyping
flash world: strong
DHTML prototyping: still weak
 jQuery
 yui 3.0
 protoscript (experimental)




            ...
[protoscript slide]




                      10
browser performance visibility
no real visibility into
  memory consumption
  processing times
   javascript engine
   ren...
[episodes slide, jiffy extension & round trip extension]




                                                           12
css refactoring
firebug css panel
dust-me selectors extension
css lint
but no reliable way to clean up CSS




            ...
proficiency in debugging




                          14
15
15
example: netflix Q performance
                      IE 7
                     > 250




                                16
example: gzip breaks safari
  page weight dropped by 6x




  outbound network traffic dropped in half




                ...
rules of debugging
  1. understand the system
  2. make it fail
  3. quit thinking and look
  4. divide and conquer
  5. c...
understanding the leaky
abstraction




                          19
understanding deep magic
  story of GATO development
   barely understood the language

   barely understood mac developme...
building on abstractions
  boosts productivity
  but what happens when you have to look underneath?
  the “leaky abstracti...
example: closures
  Most candidates we interview
        cannot accurately explain a closure

        cannot detect common...
example: toolkits
  libraries have been a big boost to our community
  however, it’s easy to end up knowing a library but ...
example: end to end
  http request to http response is basic
  but do we understand what happens and when?
  getting a pic...
being pixel retentive




                        25
end-point paranoia (quickdraw)
    coordinate system infinitely thin lines between pixels
 (0,0)                           ...
27
css reset



            28
css frameworks



                 29
YUI
setX(), setY()


                 30
interactive intelligence



                           31
drag and drop
  interesting moments grid
  subtlety of drag & drop




                             32
33
inspired by problems




                       34
35
chasing ideas




                36
belief in creative process




                             37
saying yes




             38
students of beautiful code




                             39
wang calculator
  Find out if the given number was prime
  Instructions: J if 0, J if +, J if <>0, J if Err,
  Store, Reca...
41
macintosh patent for regions

                               42
(0,0)                      (14,0)




                   (9,6)      (14,6)



                                       (20,1...
macpaint
  MC68000 MOVEM   32 32 32 32 32 32 32 32 32 32 32 32 32




                                                    ...
html*



        45
hacker?



          46
event-driven




               47
objects




          48
separation of concerns




                         49
model-view-controller




                        50
style-behavior-logic




                       51
patterns




           52
53
Make it right before you make it fast. Make
 it clear before you make it faster. Keep it
        right when you make it fa...
Where there are two bugs, there is likely
            to be a third.




                                            55
Make sure your code 'does nothing'
            gracefully.




                                     56
Premature optimization is the root of all
                 evil.




                                            57
1978
       58
59
Lessons from the Past
  Importance of Tools
  Proficiency in Debugging
  Understanding the Leaky Abstraction
  Being Pixel ...
Credits
  http://flickr.com/photos/rogersmith/53912456/

  http://flickr.com/photos/threesixes/12169049/

  http://flickr.com...
Upcoming SlideShare
Loading in …5
×

Back To The Future

6,729
-1

Published on

Keynote for the Yahoo! Frontend Developer's Summit 2008 held at the Yahoo! campus in Sunnyvale, CA. Looks at lessons from programming from the past and applies to web developer's today.

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

No Downloads
Views
Total Views
6,729
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
156
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Back To The Future

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×