Download - Worry Free Web Development
![Page 1: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/2.jpg)
Web 2.0
The glitzy look of Web 2.0 is getting a lot of attention
![Page 3: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/3.jpg)
Web 2.broken
A lot of the technology behind Web 2.0 is still very Web 1.0
![Page 4: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/4.jpg)
Why does it matter?
Well…
![Page 5: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/5.jpg)
The web is like a box of chocolates
You never know what browser you’re going to get.
![Page 6: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/6.jpg)
For example…
• The CEO who hasn’t updated their browser since Netscape 4
![Page 7: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/7.jpg)
For example…
• The CEO who hasn’t updated their browser since Netscape 4
• The growth of mobile
![Page 8: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/11.jpg)
In an environment like this, “doing your own thing” can
lead to unintended consequences
![Page 12: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/13.jpg)
How do you protect against unintended consequences?
![Page 14: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/17.jpg)
Today’s best practice:
Layer and enhance
![Page 18: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/18.jpg)
Don’t create dependencies between HTML, CSS and
JavaScript
![Page 19: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/19.jpg)
Your site should work even if it’s deprived of one of these
technologies
![Page 20: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/20.jpg)
Layer: HTML
![Page 21: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/21.jpg)
Build HTML first
It should work 100% on its own
![Page 22: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/22.jpg)
4 simple rules to keep in mind
![Page 23: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/23.jpg)
1) Important content should be present in the markup
![Page 24: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/24.jpg)
1) Important content should be present in the markup
(Search engines won’t crawl your JavaScript only navigation)
![Page 25: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/25.jpg)
2) Inject pure JavaScript markup later
![Page 26: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/26.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/27.jpg)
3) Form elements should be inside forms
![Page 28: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/28.jpg)
3) Form elements should be inside forms
(They’re called form elements
for a reason!)
![Page 29: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/29.jpg)
4) Links should link
![Page 30: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/30.jpg)
4) Links should link
(No brainer right?)
![Page 31: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/31.jpg)
This is not a link
<a href="javascript:doNext()">
Next
</a>
![Page 32: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/32.jpg)
This is a link
<a href="/page2/">
Next
</a>
![Page 33: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/33.jpg)
You can’t “Save as…” this
<a href="javascript:popup(doc.pdf)">
A PDF Document
</a>
![Page 34: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/34.jpg)
You can “Save as…” this
<a href="doc.pdf">
A PDF Document
</a>
![Page 35: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/35.jpg)
Layer: JavaScript
![Page 36: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/36.jpg)
Add JavaScript as an enhancement
(Unobtrusively)
![Page 37: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/37.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/38.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/39.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/40.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/41.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/42.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/43.jpg)
It’s like having a Plan B
![Page 44: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/44.jpg)
Always have a Plan B
http
://s
nurl.
com
/21u
f6
![Page 45: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/45.jpg)
Layer: CSS
![Page 46: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/46.jpg)
Don’t hide things with CSS only to show them with
JavaScript
![Page 47: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/47.jpg)
Flyout menus anyone?
![Page 48: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/48.jpg)
What if JavaScript isn’t available?
![Page 49: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/49.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/50.jpg)
Solution: Hide with JavaScript and show with JavaScript
![Page 51: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/51.jpg)
But how to avoid content flicker?
JavaScript takes time to kick in!
![Page 52: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/52.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/53.jpg)
Summary
• Seek out and implement best practices(they are your friend!)
![Page 54: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/54.jpg)
Summary
• Seek out and implement best practices(they are your friend!)
• Avoid technology interdependencies(layer and enhance!)
![Page 55: Worry Free Web Development](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/55.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052522/55492ce3b4c9054c498c0b3d/html5/thumbnails/56.jpg)
Thank You!
Ara Pehlivanian
http://arapehlivanian.com