Do Try This at HomeAjax 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 areWalled gardens

vs.ecosystems

5

Where we areOpen Web

vs.Closed Web

Jonathan Zittrain

6

Where we areAjaxvs.

Flash/Flexvs.

Silverlight

7

Where we arePrototype/Scriptaculous

vs.MooTools

vs.Dojo/Dijit/Dojox

vs.jQuery/jQuery UI

vs.YUI & Ext

8

Where we areWeb standards

vs."embrace,

extend, then innovate"

9

Where we areInternet 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's theright thing

to do?

What should I do?

16

What's theright thing

to do?

How should Iinvest my time?

What should I do?

17

The future liesin the tension

betweenemerging 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 specsare cool ...

21

Draft specsare 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 determiningthe 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 determiningthe 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

Build plugins for popular frameworks.Solve a little problem well while looking to HTML 5.

How to be part of the conversation

32

Participate actively in open-source projects.You don’t need to build a Gears module to use one.

How to be part of the conversation

33

Get down and dirty with beta browsers.File bug reports. Join forums. Blog about it.

How to be part of the conversation

34

Read and comment on draft specs

How to be part of the conversation

35

Read and comment on draft specs... just not late at night.

How to be part of the conversation

36

Vote with your feet.Use technologies whose philosophy you support.

How to be part of the conversation

37

Become a beat reporter.

Tools for participating

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

Frequent browser vendor websites

Tools for participating

40

Browser sites• Internet Explorer 8

• Readiness toolkit/developer forum

• Firefox 3

• Bug tracker

• Opera 9.5

• Bug tracker

• Safari 3

• Bug tracker

41

Debuggers for everyone...not just Firefox & Firebug

Tools for participating

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

Standards body websites

Tools for participating

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