Tired of writing code that breaks in IE? This session explores strategies that Prototype users can employ to write code that works in the real world.

1. Defsi,
cro-brows codg
wh
.
prototype
.

3. ialm
aly

4. yr co
MSIE

5. T fi ag 
JavaScript grief

6. #1:
“My co wks  Fifox, but
fails eryw else…”
(peciay  IE)

7. Fifox s Fibug,
 crse

8. Safi s
Web Inspecr
& Drosa

9. Opa s
Dragfly
hp://w.opa.com/products/dragfly/

10. Inet Expl s…
★ Vual Stud
★ Microst Script Ed
★ Microst Script Debu

11. Ty a...
★ Suck

12. Debug regi 
IE 6–7:

13. a.
Do “fmal” bug if
’s yr g

14. b.
Use a JavaScript s 
get  tac prompt

15. Jh
hp://w.biyg.com/jh/

16. c.
Use MS Script Debu/
Ed  get ack trac

18. d.
Do old-fhn
“a” bug

19. #2:
“OK, my co wks  IE now,
but  slow 
counicg by tegraph.”

20. Plu:
Use  Fibug prir

21. Pr-m’s prilg:
msu elaps me betwn
y two co pots

22. var Timer = Class.create({
initialize: function() {
this.startTime = new Date().valueOf();
},
end: function() {
var endTime = new Date().valueOf();
return (this.startTime - endTime).toString();
}
});

23. function doSomethingCostly() {
var timer1 = new Timer();
// do something that takes forever...
alert(timer1.end());
}

24. Ce udy:
zebra-ripg a tab

25. Two tts:
1 rows  10 rows

26. Revn 1
var TableStriper = Class.create({
initialize: function(element) {
var timer = new Timer();
this.element = $(element);
this.element.select(quot;tbody > tr:nth-child(even)quot;)
.invoke(quot;addClassNamequot;, quot;row-evenquot;);
this.element.select(quot;tbody > tr:nth-child(odd)quot;)
.invoke(quot;addClassNamequot;, quot;row-oddquot;);
alert(timer.end() + quot;msquot;);
}
});

27. 1 Rows 10 Rows
Safi 14ms 603ms
Fifox 26ms 367ms
IE 341ms 5268ms

28. :-(

29. Revn 2
var TableStriper = Class.create({
initialize: function(element) {
var timer = new Timer();
this.element = $(element);
// Why use two selectors? Use one and loop instead
var trs = this.element.select(quot;tbody > trquot;);
trs.each( function(tr, i) {
tr.addClassName(i % 2 == 0 ?
quot;row-oddquot; : quot;row-evenquot;);
});
alert(timer.end() + quot;msquot;);
}
});

30. 1 Rows 10 Rows
Safi 12ms 123ms
Fifox 14ms 130ms
IE 160ms 3245ms

31. :-(

32. Revn 3
var TableStriper = Class.create({
initialize: function(element) {
var timer = new Timer();
this.element = $(element);
// Eschew CSS selector syntax altogether
var tbodies = this.element.getElementsByTagName(quot;tbodyquot;);
for (var i = 0, tbody, trs; i < tbodies.length; i++) {
tbody = tbodies[i];
trs = tbody.getElementsByTagName(quot;trquot;);
for (var j = 0, tr; j < trs.length; j++) {
tr = trs[j];
// filter out anything that isn't a direct child of the TBODY
if (tr.parentNode !== tbody) continue;
$(tr).addClassName(j % 2 == 0 ? quot;row-oddquot; : quot;row-evenquot;);
}
}
alert(timer.end() + quot;msquot;);
}
});

33. 1 Rows 10 Rows
Safi 5ms 53ms
Fifox 13ms 143ms
IE 160ms 31ms

34. :-(

35. Revn 4
var TableStriper = Class.create({
initialize: function(element) {
var timer = new Timer();
this.element = $(element);
var tbodies = this.element.getElementsByTagName(quot;tbodyquot;);
for (var i = 0, tbody, trs; i < tbodies.length; i++) {
tbody = tbodies[i];
trs = tbody.rows; // there's a pre-defined collection for this
for (var j = 0, tr; j < trs.length; j++) {
tr = trs[j];
// OK, we'll stop quot;extendingquot; elements now
tr.className += j % 2 == 0 ? quot; row-oddquot; : quot; row-evenquot;;
}
}
alert(timer.end() + quot;msquot;);
}
});

36. 1 Rows 10 Rows
Safi 1ms 8ms
Fifox 6ms 64ms
IE 20ms 141ms

37. HOLY CRAP

38. So wt did we n?

39. Ls 1:
Secr/$$ e opmiz, but
wh gh nos   page,
y’ brg   s kns

40. Ls 2:
“Extdg” emts  slow,
 do not sca  lge
no sult sets

41. $  Emt.extd e 
shrk-wrap f syacc sug

42. In morn browss,
Emt.extd do nog; 
IE 6–7  s  copy ce
meods muay

43. A Protype DOM
lps use
Emt.extd tnay

44. Wa —   sayg
“D’t use Protype?”

45. We, y:
Rch tsi
 yr abrac
wn ’s o coly

46. Ls #3:
A lt b  opmizn
go a lg way

47. A few l  n-
Protype co, wrt
ce, c mn huge
pfmce gas

48. As always,
opmizn si 
lps pays f big

49. Ls 4:
Once  “fls” ft… op!

50. #3:
“Now ’s py ft  IE, but
if I a my page op wn I go 
lunch, IE’s froz by  me
I get back.”

51. Memy aks

52. Not ju IE 6.0;
IE 7.0 claims  fix
m, but ’s a li

53. Y c’t be su yr co
 ak-fe uil y try 
  al wld

54. Framewks c lp
a lt, but ’s i
yr probm  sol

55. Drip
hp://fnwe.com/ieak/

56. Load yr page; wch
memy usage ce
(’s nmal)

57. Now load  page; if
memy usage c
aga, ’s bad

58. A y seg expo
no prop 
fce n-primis?
( “circul fce” ak)

59. A y signg es
tsi  Protype’s
e APIs?
(e.g., emt.click)

60. (Protype’s e syem wi
c up aft self, but if y
d’t use , y’  yr own)

61. A y cag Emt.place
 Emt.upde  ctt
wh tacd lts?

62. If so, tach 
lts fir

63. foo.stopObserving(quot;clickquot;, respondToFoo);
// (detaches the respondToFoo listener)
foo.stopObserving(quot;clickquot;);
// (detaches all click listeners on foo)
foo.stopObserving();
// (detaches _all_ listeners on foo)

64. Protype 1.6.[next]
wi lp y t wh 

65.  FAL TT:
L IE rug
ornight

66. #4:
“My a pfms wrfuy
now, but my co lks like
hum suffg.”

67. In or wds:
“How do I kp my co
mataab if  s 
a f a ese
special c?”

68. Wt if we cld kp
a  ugly cks
 e place?

69. Func#wrap

70. Origal func
function getOffsetTop(element) {
return element.offsetTop;
}

71. Modifi func
getOffsetTop = getOffsetTop.wrap(
function(proceed, element) {
// IE will report incorrect values
// unless we give the element quot;layoutquot;
if (!element.currentStyle.hasLayout == -1)
element.style.zoom = 1;
return proceed(element);
}
);

72. Only IE nds  s 
modifi rsn

73. Y c kp 
“wra” funcs 
e place

74. <script src=quot;js/prototype.jsquot;
type=quot;text/javascriptquot;></script>
<script src=quot;js/main.jsquot;
type=quot;text/javascriptquot;></script>
<!--[if IE]>
<script src=quot;js/ie-only.jsquot;
type=quot;text/javascriptquot;></script>
<![endif]-->

75. BUT:
L a lpful cot

76. // NOTE: Redefined in ie-only.js
function getOffsetTop(element) {
return element.offsetTop;
}

77.  ALSO:
Expla why y nd
 wk

78. getOffsetTop = getOffsetTop.wrap(
function(proceed, element) {
// IE will report incorrect values
// unless we give the element quot;layoutquot;
if (!element.currentStyle.hasLayout == -1)
element.style.zoom = 1;
return proceed(element);
}
);

79. In or wds,
co   d...

80. …n wre co
adapts/dgs  do
 quid msagg

81. #5:
“G! My co lks  gd
 I fl. How do I avoid er
vg  do  aga?”

82. EAT YR GETABS
(wre un tts &
funcal tts)

83. “Oh, I’d lo , but I wk   UI lay,
 y c’t ay un-tt 
tface… , yway, we e way
o rapidly  do tt-drin
lopmt… but y’ right, I’ tay
wre a ful  tts  sn  I get
some me…”

84. SPE ME YR
EXCUS

85. Wre un tts f
eryg  c be
aum

86. Protype do ;
script.aculo.us do ;
y c do , o

87. Wre funcal tts 
make  si f
hums  tt  

88. QA wi buy y a py

89. Wre “diy” tts
(row curbas
 yr co)

90. Wt abt Senium?
WIR?
(cd  play hum put)

91. meh.

92. Qus?
hp://wdupt.net
hp://protypejs.g