worry free web development

56
Worry Free Web Development a.k.a. Web Development 2.0 Ara Pehlivanian, Coder’s Saturday, March 22 2008

Upload: ara-pehlivanian

Post on 06-May-2015

2.588 views

Category:

Technology


0 download

DESCRIPTION

A presentation I gave at "Coder's Saturday" on March 22, 2008 in Montreal, QC

TRANSCRIPT

Page 1: Worry Free Web Development

Worry Free Web Development

a.k.a. Web Development 2.0

Ara Pehlivanian, Coder’s Saturday, March 22 2008

Page 2: Worry Free Web Development

Web 2.0

The glitzy look of Web 2.0 is getting a lot of attention

Page 3: Worry Free Web Development

Web 2.broken

A lot of the technology behind Web 2.0 is still very Web 1.0

Page 4: Worry Free Web Development

Why does it matter?

Well…

Page 5: Worry Free Web Development

The web is like a box of chocolates

You never know what browser you’re going to get.

Page 6: Worry Free Web Development

For example…

• The CEO who hasn’t updated their browser since Netscape 4

Page 7: Worry Free Web Development

For example…

• The CEO who hasn’t updated their browser since Netscape 4

• The growth of mobile

Page 8: Worry Free Web Development

For example…

• The CEO who hasn’t updated their browser since Netscape 4

• The growth of mobile

• Assistive technologies

Page 9: Worry Free Web Development

For example…

• The CEO who hasn’t updated their browser since Netscape 4

• The growth of mobile

• Assistive technologies

• Limited functionality in a corporate setting

Page 10: Worry Free Web Development

Murphy’s Law

“Whatever can go wrong will go wrong, and at the worst possible time, in the worst possible way”

http

://w

ww

.flic

kr.c

om/p

hoto

s/27

4478

77@

N00

/324

2903

/

Page 11: Worry Free Web Development

In an environment like this, “doing your own thing” can

lead to unintended consequences

Page 12: Worry Free Web Development

Unintended consequences

“a negative or a perverse effect,

which may be the opposite

result of what is intended”

http

://w

ww

.flic

kr.c

om/p

hoto

s/kh

awaj

a/15

1777

694/

Page 13: Worry Free Web Development

How do you protect against unintended consequences?

Page 14: Worry Free Web Development

Best practices! They will protect you

http

://w

ww

.flic

kr.c

om/p

hoto

s/m

icke

-fi/8

6932

091/

Page 15: Worry Free Web Development

What are best practices?

“Best practices can be defined as the most efficient and effective way of

accomplishing a task…”

Page 16: Worry Free Web Development

Ignore them at your own risk

http

://w

ww

.flic

kr.c

om/p

hoto

s/88

3117

28@

N00

/254

2759

98/

Page 17: Worry Free Web Development

Today’s best practice:

Layer and enhance

Page 18: Worry Free Web Development

Don’t create dependencies between HTML, CSS and

JavaScript

Page 19: Worry Free Web Development

Your site should work even if it’s deprived of one of these

technologies

Page 20: Worry Free Web Development

Layer: HTML

Page 21: Worry Free Web Development

Build HTML first

It should work 100% on its own

Page 22: Worry Free Web Development

4 simple rules to keep in mind

Page 23: Worry Free Web Development

1) Important content should be present in the markup

Page 24: Worry Free Web Development

1) Important content should be present in the markup

(Search engines won’t crawl your JavaScript only navigation)

Page 25: Worry Free Web Development

2) Inject pure JavaScript markup later

Page 26: Worry Free Web Development

2) Inject pure JavaScript markup later

(If it can’t be relevant without JavaScript, it shouldn’t be in the

markup to begin with)

Page 27: Worry Free Web Development

3) Form elements should be inside forms

Page 28: Worry Free Web Development

3) Form elements should be inside forms

(They’re called form elements

for a reason!)

Page 29: Worry Free Web Development

4) Links should link

Page 30: Worry Free Web Development

4) Links should link

(No brainer right?)

Page 31: Worry Free Web Development

This is not a link

<a href="javascript:doNext()">

Next

</a>

Page 32: Worry Free Web Development

This is a link

<a href="/page2/">

Next

</a>

Page 33: Worry Free Web Development

You can’t “Save as…” this

<a href="javascript:popup(doc.pdf)">

A PDF Document

</a>

Page 34: Worry Free Web Development

You can “Save as…” this

<a href="doc.pdf">

A PDF Document

</a>

Page 35: Worry Free Web Development

Layer: JavaScript

Page 36: Worry Free Web Development

Add JavaScript as an enhancement

(Unobtrusively)

Page 37: Worry Free Web Development

Simple unobtrusive JavaScript

<a href="doc.pdf" id="doc">

A PDF Document

</a>

<script>

var a = document.getElementById("doc");

a.onclick = function () {

window.open(this.href);

return false;

};

</script>

Page 38: Worry Free Web Development

Simple unobtrusive JavaScript

<a href="doc.pdf" id="doc">

A PDF Document

</a>

<script>

var a = document.getElementById("doc");

a.onclick = function () {

window.open(this.href);

return false;

};

</script>

Page 39: Worry Free Web Development

Simple unobtrusive JavaScript

<a href="doc.pdf" id="doc">

A PDF Document

</a>

<script>

var a = document.getElementById("doc");

a.onclick = function () {

window.open(this.href);

return false;

};

</script>

Page 40: Worry Free Web Development

Simple unobtrusive JavaScript

<a href="doc.pdf" id="doc">

A PDF Document

</a>

<script>

var a = document.getElementById("doc");

a.onclick = function () {

window.open(this.href);

return false;

};

</script>

Page 41: Worry Free Web Development

Simple unobtrusive JavaScript

<a href="doc.pdf" id="doc">

A PDF Document

</a>

<script>

var a = document.getElementById("doc");

a.onclick = function () {

window.open(this.href);

return false;

};

</script>

Page 42: Worry Free Web Development

Simple unobtrusive JavaScript

<a href="doc.pdf" id="doc">

A PDF Document

</a>

<script>

var a = document.getElementById("doc");

a.onclick = function () {

window.open(this.href);

return false;

};

</script>

Page 43: Worry Free Web Development

It’s like having a Plan B

Page 44: Worry Free Web Development

Always have a Plan B

http

://s

nurl.

com

/21u

f6

Page 45: Worry Free Web Development

Layer: CSS

Page 46: Worry Free Web Development

Don’t hide things with CSS only to show them with

JavaScript

Page 47: Worry Free Web Development

Flyout menus anyone?

Page 48: Worry Free Web Development

What if JavaScript isn’t available?

Page 49: Worry Free Web Development

Inaccessible content!

http

://w

ww

.flic

kr.c

om/p

hoto

s/ea

sily

amus

ed74

7/17

1184

75/

Page 50: Worry Free Web Development

Solution: Hide with JavaScript and show with JavaScript

Page 51: Worry Free Web Development

But how to avoid content flicker?

JavaScript takes time to kick in!

Page 52: Worry Free Web Development

Here’s how…

<head>

<script>

document.write(

"<link +

href='initial-states.css' +

rel='stylesheet' +

type='text\/css' \/>");

</script>

</head>

Page 53: Worry Free Web Development

Summary

• Seek out and implement best practices(they are your friend!)

Page 54: Worry Free Web Development

Summary

• Seek out and implement best practices(they are your friend!)

• Avoid technology interdependencies(layer and enhance!)

Page 55: Worry Free Web Development

Summary

• Seek out and implement best practices(they are your friend!)

• Avoid technology interdependencies(layer and enhance!)

• Have fun!

Page 56: Worry Free Web Development

Thank You!

Ara Pehlivanian

[email protected]

http://arapehlivanian.com