Back To The Future

52 %
48 %
Information about Back To The Future

Published on October 8, 2008

Author: billwscott



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.

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

“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

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

my history 4

importance of tools 5

importance of tools 5

the web’s slide rule javascript alert. microsoft debugger. document.write(). innerHTML(). 6

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

missing tools simple prototyping visibility into browser engine css layout & refactoring tools 8

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

[protoscript slide] 10

browser performance visibility no real visibility into memory consumption processing times javascript engine rendering engine reflow times page event timing (Episodes, Jiffy) 11

[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 13

proficiency in debugging 14



example: netflix Q performance IE 7 > 250 16

example: gzip breaks safari page weight dropped by 6x outbound network traffic dropped in half 17

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 7. check the plug 8. get a fresh view 9. if you didn't fix It, it ain't fixed 18

understanding the leaky abstraction 19

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

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

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

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

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

being pixel retentive 25

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


css reset 28

css frameworks 29

YUI setX(), setY() 30

interactive intelligence 31

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


inspired by problems 34


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, Recall, Mark, Search, Set PC, Indir Sieve of Eratosthenes 40


macintosh patent for regions 42

(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

macpaint MC68000 MOVEM 32 32 32 32 32 32 32 32 32 32 32 32 32 44

html* 45

hacker? 46

event-driven 47

objects 48

separation of concerns 49

model-view-controller 50

style-behavior-logic 51

patterns 52


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

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


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

Credits 61

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages :: News

Die Seite zum Back-To-Future- Festival/Glaubitz Open-Air, dem Punk Rock Festival in Sachsen mit einer stattlichen Anzahl internationaler Punk Rock ...
Read more

Back to the Future - Wikipedia

Back to the Future is a 1985 American science fiction adventure comedy film directed by Robert Zemeckis and written by Zemeckis and Bob Gale. It ...
Read more

Back to the Future (1985) - IMDb

With Michael J. Fox, Christopher Lloyd, Lea Thompson, Crispin Glover. Marty McFly, a 17-year-old high school student, is accidentally sent 30 years into ...
Read more

Zurück in die Zukunft – Wikipedia

Zurück in die Zukunft (im englischen Original: Back to the Future) ist der Name einer Science-Fiction-Film-Trilogie aus den Jahren 1985, 1989 und 1990.
Read more


BACK TO FUTURE, Glaubitz. Gefällt 5.944 Mal · 294 Personen sprechen darüber. It was born in 1996 with a legendary chaos show. But over the years it grow...
Read more

Back to the Future™ | The Official Site

A worldwide cultural phenomenon and the highest-grossing film of 1985, Back to the Future launched one of the most successful franchises in Universal's ...
Read more


BACK TO FUTURE, Glaubitz, Germany. 5,944 likes · 306 talking about this. It was born in 1996 with a legendary chaos show. But over the years it grow up...
Read more Wörterbuch :: back :: Deutsch-Englisch-Übersetzung

Englisch-Deutsch-Übersetzung für back im Online-Wörterbuch (Deutschwörterbuch).
Read more

Zurück in die Zukunft (Film) – Wikipedia

Zurück in die Zukunft (Originaltitel: Back to the Future) ist eine Science-Fiction-Filmkomödie des Regisseurs Robert Zemeckis, die am 3. Juli 1985 in die ...
Read more

back - Englisch ⇔ Deutsch Wörterbuch -

Im Web und als App. Übersetzung für 'back' im Englisch-Deutsch Wörterbuch. Loading ... Englisch ⇔ Deutsch: Forum: Trainer: Kurse ...
Read more