Do Try This at Home
Ajax Bookmarking, Cross-site Scripting
and Other Web 2.0 Browser Hacks
Brian Dillard, Ajax R&D, Pathfinder Development
1

About this talk
1. Not too much code
2. The high-level stuff
3. The practical stuff
4. The uplifting finale
2

Where we are
It’s a really exciting time to be
a web developer. Cool stuff is
coming out every single day.
3

Where we are
... but it’s hard to get too
excited about technologies
that aren’t yet ready for prime
time. How best to participate?
4

Where we are
Walled gardens
vs.
ecosystems
5

Where we are
Open Web
vs.
Closed Web
Jonathan Zittrain
6

Where we are
Ajax
vs.
Flash/Flex
vs.
Silverlight
7

Where we are
Prototype/Scriptaculous
vs.
MooTools
vs.
Dojo/Dijit/Dojox
vs.
jQuery/jQuery UI
vs.
YUI & Ext
8

Where we are
Web standards
vs.
\"embrace,
extend, then
innovate\"
9

Where we are
Internet Explorer 8
vs.
Firefox 3
vs.
Safari 3.1
vs.
Opera 9.5
10

“ To get a better future, not only do we need a return to
'the browser wars,' we need to applaud and use the hell
out of 'non-standard' features until such time as there’s
a standard to cover equivalent functionality. Non-
standard features are the future, and suggesting that
they are somehow 'bad' is to work against your own
self-interest.
Alex Russell, President, Dojo Foundation
11

CSS masks!
12

CSS variables!
13

But ... Webkit? Safari?
14

What should I do?
15

What should I do?
What's the
right thing
to do?
16

What should I do?
What's the
right thing
to do?
How should I
invest my time?
17

The future lies
in the tension
between
emerging standards
and de facto standards
18

Today's technologies grew in the wild
• xmlHttpRequest
• DOMContentLoaded
• Selectors API
• Canvas supplanted SVG
• HTML5 Ajax Navigation
• Microformats
19

Tomorrow’s will grow ... in committees?
• HTML 5 in two dialects, HTML and XML
• XHTML 2
• ECMAScript 4 a.k.a. JavaScript 2
• CSS 3
• CSS Layout Module
• CSSOM
• DOM storage/client-side database storage
• Web Forms 2.0
20

Draft specs
are cool ...
21

Draft specs
are cool ...
but live
implementations
are cooler.
22

“ The Gears project started because a group of
developers at Google were frustrated by the slow
march of web browsers. Competition and standards
were producing fantastic results, but it took a long time
to get implementations on every browser. In some
cases, we still don’t have compatible implementations,
years after the standards were finalized.
Aaron Boodman, Gears Engineer
23

Who will play a role in determining
the shape of tomorrow’s web?
• Proprietary runtimes set the pace for
multimedia and native UI integration
• Standards bodies & browser vendors
do their little dance
• Ajax libraries & browser plugins paper
over the differences
24

Who will play a role in determining
the shape of tomorrow’s web?
So what about individual developers?
25

Build cool stuff!
26

Offline storage
• Dojo Storage
• Flash LSOs (Local Shared Objects)
• IE userData
• Form field auto-save
• Google Gears
• DOM storage: sessionStorage/globalStorage
• Client database storage
27

Ajax history and bookmarking
• Dojo Toolkit
• Various Ajax frameworks, including GWT
• Really Simple History
• dsHistory
• IE8 and Ajax Navigation
28

Cross-site scripting
• Doom and gloom from Crockford
• But XSS !== malware
• FF3 cross-window messaging with HTML 5
postMessage API
• xssinterface - a library that uses
postMessage, Gears or a cookie hack
29

Other possibilities
• CSSOM
• CSSOM View Module
• elementFromPoint for drag/drop
• Web Forms 2.0
• 2 projects in suspended animation
• Dust them off?
30

Best practices?
• If you’re doing something simple, try to use the
draft-standard API itself.
• If you’re building a higher-level abstraction, use
draft standards when they’re available.
• If you’re going for the big hack, follow the
conventions of successful libraries.
• If you don’t need to rely on a specific JavaScript
framework, don’t.
• Make informed choices about joining the fray.
31

How to be part of the conversation
Build plugins for popular frameworks.
Solve a little problem well while looking to HTML 5.
32

How to be part of the conversation
Participate actively in open-source projects.
You don’t need to build a Gears module to use one.
33

How to be part of the conversation
Get down and dirty with beta browsers.
File bug reports. Join forums. Blog about it.
34

How to be part of the conversation
Read and comment on draft specs
35

How to be part of the conversation
Read and comment on draft specs
... just not late at night.
36

How to be part of the conversation
Vote with your feet.
Use technologies whose philosophy you support.
37

Tools for participating
Become a beat reporter.
38

Research tools
• RSS: NetNewsWire/FeedDemon/GReader
• Oversubscribe
• labs.pathf.com/ajax/web20expo/
• Or just bookmark trusted sites
• ajaxian.com
• quirksmode.org
• crockford.com
39

Tools for participating
Frequent browser vendor websites
40

Browser sites
• Internet Explorer 8
• Readiness toolkit/developer forum
• Firefox 3
• Bug tracker
• Opera 9.5
• Bug tracker
• Safari 3
• Bug tracker
41

Tools for participating
Debuggers for everyone...
not just Firefox & Firebug
42

Debuggers
• Firefox
• Firebug
• Web developer toolbar
• Safari
• Develop menu
• Web Inspector
43

Debuggers
• IE8 Developer Tools
• Finally built in
• Opera Developer Console
• Just a bookmarklet
44

Tools for participating
Standards body websites
45

Standards bodies
• WC3
• http://www.w3.org/
• WHATWG
• http://www.whatwg.org/
• ECMAScript
• http://www.ecmascript.org/
46

“ Neither the CSS WG nor the HTML 5 WG nor, indeed,
any W3C working group can define the future. They can
only round off the sharp edges once the future
becomes the past and that’s all we should ever expect
of them. ... [T]he W3C cannot save us.
Alex Russell, President, Dojo Foundation
47

If you wait for Google,
Prototype, the WC3 and
Adobe to solve your
problems, then you’re
missing out.
48

About me
• San Francisco: Reflect.com
• Chicago: United Airlines, Orbitz Worldwide
• Now: Pathfinder Development
• R&D: Playing with shiny new toys
• Blog: Agile Ajax (blogs.pathf.com/agileajax)
49

Please rate me!
50

Please rate me!
51

Please rate me!
52