SlideShare une entreprise Scribd logo
1  sur  63
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
“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
Lessons from the Past
  Importance of Tools
  Proficiency in Debugging
  Understanding the Leaky Abstraction
  Being Pixel Retentive
  Inspired by Problems
  Students of Beautiful Code
my history
importance of tools
importance of tools
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. 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.
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]
browser performance visibility
no real visibility into
  memory consumption
  processing times
   javascript engine
   rendering engine
   reflow times
   page event timing (Episodes, Jiffy)
[episodes slide, jiffy extension & round trip extension]
css refactoring
firebug css panel
dust-me selectors extension
css lint
but no reliable way to clean up CSS
proficiency in debugging
example: netflix Q performance
                      IE 7
                     > 250
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. 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
understanding the leaky
abstraction
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
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
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]();
  
      }
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
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
being pixel retentive
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
css reset
css frameworks
YUI
setX(), setY()
interactive intelligence
drag and drop
  interesting moments grid
  subtlety of drag & drop
inspired by problems
chasing ideas
belief in creative process
saying yes
students of beautiful code
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
macintosh patent for regions
(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)
macpaint
  MC68000 MOVEM   32 32 32 32 32 32 32 32 32 32 32 32 32
html*
hacker?
event-driven
objects
separation of concerns
model-view-controller
style-behavior-logic
patterns
Make it right before you make it fast. Make
 it clear before you make it faster. Keep it
        right when you make it faster.
Where there are two bugs, there is likely
            to be a third.
Make sure your code 'does nothing'
            gracefully.
Premature optimization is the root of all
                 evil.
1978
Lessons from the Past
  Importance of Tools
  Proficiency in Debugging
  Understanding the Leaky Abstraction
  Being Pixel Retentive
  Inspired by Problems
  Students of Beautiful Code
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

Contenu connexe

Similaire à Back To The Future.Key 2

The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
Mark Fayngersh
 
JavaProgrammingForBeginners-Presentation.pdf
JavaProgrammingForBeginners-Presentation.pdfJavaProgrammingForBeginners-Presentation.pdf
JavaProgrammingForBeginners-Presentation.pdf
Sathwika7
 
Operational transformation
Operational transformationOperational transformation
Operational transformation
Matteo Collina
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
Andrew Lovett-Barron
 

Similaire à Back To The Future.Key 2 (20)

He stopped using for/while loops, you won't believe what happened next!
He stopped using for/while loops, you won't believe what happened next!He stopped using for/while loops, you won't believe what happened next!
He stopped using for/while loops, you won't believe what happened next!
 
Y U NO CRAFTSMAN
Y U NO CRAFTSMANY U NO CRAFTSMAN
Y U NO CRAFTSMAN
 
4 Node.js Gotchas: What your ops team needs to know
4 Node.js Gotchas: What your ops team needs to know4 Node.js Gotchas: What your ops team needs to know
4 Node.js Gotchas: What your ops team needs to know
 
Real_World_0days.pdf
Real_World_0days.pdfReal_World_0days.pdf
Real_World_0days.pdf
 
10 Ways To Improve Your Code
10 Ways To Improve Your Code10 Ways To Improve Your Code
10 Ways To Improve Your Code
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 
What Lies Beneath
What Lies BeneathWhat Lies Beneath
What Lies Beneath
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
 
Professional JavaScript: AntiPatterns
Professional JavaScript: AntiPatternsProfessional JavaScript: AntiPatterns
Professional JavaScript: AntiPatterns
 
Mind Control to Major Tom: Is It Time to Put Your EEG Headset On?
Mind Control to Major Tom: Is It Time to Put Your EEG Headset On? Mind Control to Major Tom: Is It Time to Put Your EEG Headset On?
Mind Control to Major Tom: Is It Time to Put Your EEG Headset On?
 
JavaProgrammingForBeginners-Presentation.pdf
JavaProgrammingForBeginners-Presentation.pdfJavaProgrammingForBeginners-Presentation.pdf
JavaProgrammingForBeginners-Presentation.pdf
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
 
Operational transformation
Operational transformationOperational transformation
Operational transformation
 
maXbox Starter 45 Robotics
maXbox Starter 45 RoboticsmaXbox Starter 45 Robotics
maXbox Starter 45 Robotics
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Dernier (20)

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 

Back To The Future.Key 2

  • 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
  • 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
  • 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
  • 7. the web’s slide rule javascript alert. microsoft debugger. document.write(). innerHTML().
  • 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.
  • 9. missing tools simple prototyping visibility into browser engine css layout & refactoring tools
  • 10. prototyping flash world: strong DHTML prototyping: still weak jQuery yui 3.0 protoscript (experimental)
  • 12. browser performance visibility no real visibility into memory consumption processing times javascript engine rendering engine reflow times page event timing (Episodes, Jiffy)
  • 13. [episodes slide, jiffy extension & round trip extension]
  • 14. css refactoring firebug css panel dust-me selectors extension css lint but no reliable way to clean up CSS
  • 16.
  • 17.
  • 18. example: netflix Q performance IE 7 > 250
  • 19. example: gzip breaks safari page weight dropped by 6x outbound network traffic dropped in half
  • 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
  • 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
  • 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
  • 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](); }
  • 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
  • 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
  • 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
  • 29.
  • 34. drag and drop interesting moments grid subtlety of drag & drop
  • 35.
  • 37.
  • 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
  • 43.
  • 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)
  • 46. macpaint MC68000 MOVEM 32 32 32 32 32 32 32 32 32 32 32 32 32
  • 47. html*
  • 55.
  • 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.
  • 57. Where there are two bugs, there is likely to be a third.
  • 58. Make sure your code 'does nothing' gracefully.
  • 59. Premature optimization is the root of all evil.
  • 60. 1978
  • 61.
  • 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
  • 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