This was the slide accompaniment to a workshop I led at the Indian Institute of Technology in Kanpur in February 2009, as part of FOSSKriti. I reused these slides for different purposes, including talks I gave at GNUnify 2009 in Pune at the Symbiosis Institute.

1. Hacking The Open Web
Arun Ranganathan
Seth Bindernagel
Mozilla Corporation
IIT Kanpur, Feb. 2009

2. Mozilla is...

3. Mozilla is...
• a global effort to promote choice &
innovation on the Internet

4. Mozilla is...
• a global effort to promote choice &
innovation on the Internet
• foremost, an advocate for users on the Web

5. Mozilla is...
• a global effort to promote choice &
innovation on the Internet
• foremost, an advocate for users on the Web
• an open source project with thousands of
contributors

6. Mozilla is...
• a global effort to promote choice &
innovation on the Internet
• foremost, an advocate for users on the Web
• an open source project with thousands of
contributors
• the maker of the Firefox Web browser and
the Thunderbird email client

7. Mozilla is...
• a global effort to promote choice &
innovation on the Internet
• foremost, an advocate for users on the Web
• an open source project with thousands of
contributors
• the maker of the Firefox Web browser and
the Thunderbird email client
• A Platform for Other Applications

9. K'iche Itza
Islenskur
EsperantoDeutsch
English Afrikaans
Frizona Italiano
Magyar
isiZulu Tagalog
Polski
Portuguese
Sranankondre Arbërisht Català
Español
Føroyskur
Svensk
Suomalainen Papiamento Dansk Yucatec
Français
Российская
český
Nederlands Pomân
Nors Ελληνικά
‫ﺭﺑﻴﻚ‬
Turkish )‫ﺳﻮﺍﺣﻠﻲ‬

10. The Open Web Is:

11. The Open Web Is:
• A Collection of (Mostly) Unencumbered, Cross-
Platform, Interoperable Standards

12. The Open Web Is:
• A Collection of (Mostly) Unencumbered, Cross-
Platform, Interoperable Standards
• Available on different devices (Mobile, Desktop)

13. The Open Web Is:
• A Collection of (Mostly) Unencumbered, Cross-
Platform, Interoperable Standards
• Available on different devices (Mobile, Desktop)
• Open Source/Free Software Implementations

14. The Open Web Is:
• A Collection of (Mostly) Unencumbered, Cross-
Platform, Interoperable Standards
• Available on different devices (Mobile, Desktop)
• Open Source/Free Software Implementations
•Distributed Extensibility

15. The Open Web Is:
• A Collection of (Mostly) Unencumbered, Cross-
Platform, Interoperable Standards
• Available on different devices (Mobile, Desktop)
• Open Source/Free Software Implementations
•Distributed Extensibility
•No “Single Vendor” Lock In.

16. What Is NOT Open?

17. What Is NOT Open?
• Flash, Adobe Air

18. What Is NOT Open?
• Flash, Adobe Air
• Silverlight (Microsoft’s WPF)

19. What Is NOT Open?
• Flash, Adobe Air
• Silverlight (Microsoft’s WPF)
• Optimizations for One Browser (Works
Best on One Browser)

20. What Is NOT Open?
• Flash, Adobe Air
• Silverlight (Microsoft’s WPF)
• Optimizations for One Browser (Works
Best on One Browser)
• You can help us with this!

21. What Is NOT Open?

23. The Breakdown of Modern Web Development

24. Some Visual Demos
• SVG
• Video (HTML5)
• Transformations
• Mixtures
See https://library.mozilla.org/ for Web
Graphics demos

26. Fast JavaScript

30. Text

31. Text

32. Text

33. Concepts: Canvas 2D
• Unlike SVG, Canvas is entirely procedural.
All graphics in JavaScript. Immediate Mode
Graphics
• Introduced in HTML5
• Has seen some very powerful applications
built on it.

38. =
+
Sophisticated Grid-based
Canvas
Layout

40. No start-up delay

41. No start-up delay
Available on mobile devices today

42. No start-up delay
Available on mobile devices today
Rendering fidelity with browser
(especially important for typography)

43. No start-up delay
Available on mobile devices today
Rendering fidelity with browser
(especially important for typography)
No bridges necessary

44. No start-up delay
Available on mobile devices today
Rendering fidelity with browser
(especially important for typography)
No bridges necessary
Not a plug-in

49. Beta
1.0 a
Alph
Beta
Chrome’s V8 Safari’s SquirrelFish Extreme Firefox’s TraceMonkey Opera's Carakan

51. Jakob Nielsen
Noted Usability Expert

52. “0.1 second is about the limit for
having the user feel that the system is
reacting instantaneously, meaning
that no special feedback is necessary
except to display the result.
Jakob Nielsen
Noted Usability Expert
quot;1.0 second is about the limit for the
user's ow of thought to stay
uninterrupted, even though the user
will notice the delay.

53. “0.1 second is about the limit for
having the user feel that the system is
reacting instantaneously, meaning
that no special feedback is necessary
except to display the result.
Jakob Nielsen
Noted Usability Expert
quot;1.0 second is about the limit for the
user's ow of thought to stay
uninterrupted, even though the user
will notice the delay.
0.1 second
1 second

54. “0.1 second is about the limit for
having the user feel that the system is
reacting instantaneously, meaning
that no special feedback is necessary
except to display the result.
Jakob Nielsen
Noted Usability Expert
quot;1.0 second is about the limit for the
user's ow of thought to stay
uninterrupted, even though the user
will notice the delay.
0.1 second
1 second

55. “0.1 second is about the limit for
having the user feel that the system is
reacting instantaneously, meaning
that no special feedback is necessary
except to display the result.
Jakob Nielsen
Noted Usability Expert
quot;1.0 second is about the limit for the
user's ow of thought to stay
uninterrupted, even though the user
will notice the delay.
0.1 second
1 second

56. Introduction to Bespin
• Discussion of IDEs in general
• Audience: Who Uses What, and Why?

61. The Editor of Our Dreams

62. The Editor of Our Dreams
Accessible from anywhere
Any device in any location

63. The Editor of Our Dreams
Accessible from anywhere
Any device in any location
Simple to Use, like TextMate
An editor, not an IDE

64. The Editor of Our Dreams
Accessible from anywhere
Any device in any location
Simple to Use, like TextMate
An editor, not an IDE
Very fast
Performance, performance, performance

65. The Editor of Our Dreams
Accessible from anywhere
Any device in any location
Simple to Use, like TextMate
An editor, not an IDE
Very fast
Performance, performance, performance
Rock-solid real-time collaboration, like
It just works
SubEthaEdit

66. The Editor of Our Dreams
Accessible from anywhere
Any device in any location
Simple to Use, like TextMate
An editor, not an IDE
Very fast
Performance, performance, performance
Rock-solid real-time collaboration, like
It just works
SubEthaEdit
Integrated command-line, like Emacs or vi
Fun like Quicksilver, social like Ubiquity

67. The Editor of Our Dreams
Accessible from anywhere
Any device in any location
Simple to Use, like TextMate
An editor, not an IDE
Very fast
Performance, performance, performance
Rock-solid real-time collaboration, like
It just works
SubEthaEdit
Integrated command-line, like Emacs or vi
Fun like Quicksilver, social like Ubiquity
“Self-hosted” environment, like Emacs
For extreme extensibility, but with JavaScript!

74. Expensive Server-side Code
Analysis

75. Expensive Server-side Code
Analysis dynamic language
Crack the
nut?

76. Expensive Server-side Code
Analysis dynamic language
Crack the
nut?
Extreme code intelligence

80. Dave Thomas
Noted Software Expert,
Author, and Publisher

81. “Programmers, like poets,
constantly start with a blank sheet
Dave Thomas
Noted Software Expert,
Author, and Publisher
of paper and they construct things
purely out of their imagination.
It’s difficult work; if you don’t love
your tools, you’re going to start
resenting what you’re doing, and
that will show in your work.

82. Dave Thomas
Noted Software Expert,
Author, and Publisher
“You must love your so ware
tools.”

83. Live Coding Samples
Canvas Indian Flag
var ctx = canvas.getContext(quot;2dquot;);
ctx.fillStyle = rgb(_, _, _);
ctx.fillRect(x, y, width, height);
// ctx.clearRect(x, y, width, height);
// Bonus: make the Ashoka Chakra

84. Live Coding: jQuery
// Everything is selected
$(“.article .thebody”).hide();
//or
$
(this).parents(“ul”).prev(“.thebody”).toggle

85. Reference
• Demos: http://arunranga.com/
presentations/2009/IndiaFeb/
• Code: http://developer.mozilla.org/ (do a
search for stuff)
• Bespin: http://bespin.mozilla.com/
Text
• jQuery: http://jquery.com/
• More jQuery: http://simonwillison.net/2007/
Aug/15/