worry free web development
DESCRIPTION
A presentation I gave at "Coder's Saturday" on March 22, 2008 in Montreal, QCTRANSCRIPT
Worry Free Web Development
a.k.a. Web Development 2.0
Ara Pehlivanian, Coder’s Saturday, March 22 2008
Web 2.0
The glitzy look of Web 2.0 is getting a lot of attention
Web 2.broken
A lot of the technology behind Web 2.0 is still very Web 1.0
Why does it matter?
Well…
The web is like a box of chocolates
You never know what browser you’re going to get.
For example…
• The CEO who hasn’t updated their browser since Netscape 4
For example…
• The CEO who hasn’t updated their browser since Netscape 4
• The growth of mobile
For example…
• The CEO who hasn’t updated their browser since Netscape 4
• The growth of mobile
• Assistive technologies
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
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
/
In an environment like this, “doing your own thing” can
lead to unintended consequences
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/
How do you protect against unintended consequences?
Best practices! They will protect you
http
://w
ww
.flic
kr.c
om/p
hoto
s/m
icke
-fi/8
6932
091/
What are best practices?
“Best practices can be defined as the most efficient and effective way of
accomplishing a task…”
Ignore them at your own risk
http
://w
ww
.flic
kr.c
om/p
hoto
s/88
3117
28@
N00
/254
2759
98/
Today’s best practice:
Layer and enhance
Don’t create dependencies between HTML, CSS and
JavaScript
Your site should work even if it’s deprived of one of these
technologies
Layer: HTML
Build HTML first
It should work 100% on its own
4 simple rules to keep in mind
1) Important content should be present in the markup
1) Important content should be present in the markup
(Search engines won’t crawl your JavaScript only navigation)
2) Inject pure JavaScript markup later
2) Inject pure JavaScript markup later
(If it can’t be relevant without JavaScript, it shouldn’t be in the
markup to begin with)
3) Form elements should be inside forms
3) Form elements should be inside forms
(They’re called form elements
for a reason!)
4) Links should link
4) Links should link
(No brainer right?)
This is not a link
<a href="javascript:doNext()">
Next
</a>
This is a link
<a href="/page2/">
Next
</a>
You can’t “Save as…” this
<a href="javascript:popup(doc.pdf)">
A PDF Document
</a>
You can “Save as…” this
<a href="doc.pdf">
A PDF Document
</a>
Layer: JavaScript
Add JavaScript as an enhancement
(Unobtrusively)
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>
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>
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>
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>
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>
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>
It’s like having a Plan B
Always have a Plan B
http
://s
nurl.
com
/21u
f6
Layer: CSS
Don’t hide things with CSS only to show them with
JavaScript
Flyout menus anyone?
What if JavaScript isn’t available?
Inaccessible content!
http
://w
ww
.flic
kr.c
om/p
hoto
s/ea
sily
amus
ed74
7/17
1184
75/
Solution: Hide with JavaScript and show with JavaScript
But how to avoid content flicker?
JavaScript takes time to kick in!
Here’s how…
<head>
<script>
document.write(
"<link +
href='initial-states.css' +
rel='stylesheet' +
type='text\/css' \/>");
</script>
</head>
Summary
• Seek out and implement best practices(they are your friend!)
Summary
• Seek out and implement best practices(they are your friend!)
• Avoid technology interdependencies(layer and enhance!)
Summary
• Seek out and implement best practices(they are your friend!)
• Avoid technology interdependencies(layer and enhance!)
• Have fun!
Thank You!
Ara Pehlivanian
http://arapehlivanian.com