0
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 <ul><li>You never know what browser you’re going to get. </li></ul>
For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul>
For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul><ul><li>The growth of mobile  </l...
For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul><ul><li>The growth of mobile  </l...
For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul><ul><li>The growth of mobile  </l...
Murphy’s Law <ul><li>“Whatever can go wrong will go wrong, and at the worst possible time, in the worst possible way” </li...
In an environment like this, “doing your own thing” can lead to unintended consequences
Unintended consequences <ul><li>“a negative or a perverse effect,  </li></ul><ul><li>which may be the opposite  </li></ul>...
How do you protect against unintended consequences?
Best practices!  They will protect you http://www.flickr.com/photos/micke-fi/86932091/
What are best practices? <ul><li>“Best practices can be defined as the most efficient and effective way of accomplishing a...
Ignore them at your own risk http://www.flickr.com/photos/88311728@N00/254275998/
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...
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 <ul><li><a href=&quot;javascript:doNext()&quot;> </li></ul><ul><li>Next </li></ul><ul><li></a> </li><...
This  is a link <ul><li><a href=&quot;/page2/&quot;> </li></ul><ul><li>Next </li></ul><ul><li></a> </li></ul>
You can’t “Save as…” this <ul><li><a href=&quot;javascript:popup(doc.pdf)&quot;> </li></ul><ul><li>A PDF Document </li></u...
You  can  “Save as…” this <ul><li><a href=&quot;doc.pdf&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </l...
Layer: JavaScript
Add JavaScript as an enhancement (Unobtrusively)
Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </l...
Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </l...
Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </l...
Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </l...
Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </l...
Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </l...
It’s like having a Plan B
Always have a Plan B http://snurl.com/21uf6
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://www.flickr.com/photos/easilyamused747/17118475/
Solution: Hide with JavaScript and show with JavaScript
But how to avoid  content flicker? JavaScript takes time to kick in!
Here’s how… <ul><li><head> </li></ul><ul><li><script> </li></ul><ul><li>document.write( </li></ul><ul><li>&quot;<link + </...
Summary <ul><li>Seek out and implement best practices (they are your friend!) </li></ul>
Summary <ul><li>Seek out and implement best practices (they are your friend!) </li></ul><ul><li>Avoid technology interdepe...
Summary <ul><li>Seek out and implement best practices (they are your friend!) </li></ul><ul><li>Avoid technology interdepe...
Thank You! <ul><li>Ara Pehlivanian </li></ul><ul><li>[email_address] </li></ul><ul><li>http:// arapehlivanian.com </li></ul>
Upcoming SlideShare
Loading in...5
×

Worry Free Web Development

2,613

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,613
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Worry Free Web Development"

  1. 1. Worry Free Web Development a.k.a. Web Development 2.0 Ara Pehlivanian, Coder’s Saturday, March 22 2008
  2. 2. Web 2.0 The glitzy look of Web 2.0 is getting a lot of attention
  3. 3. Web 2.broken A lot of the technology behind Web 2.0 is still very Web 1.0
  4. 4. Why does it matter? Well…
  5. 5. The web is like a box of chocolates <ul><li>You never know what browser you’re going to get. </li></ul>
  6. 6. For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul>
  7. 7. For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul><ul><li>The growth of mobile </li></ul>
  8. 8. For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul><ul><li>The growth of mobile </li></ul><ul><li>Assistive technologies </li></ul>
  9. 9. For example… <ul><li>The CEO who hasn’t updated their browser since Netscape 4 </li></ul><ul><li>The growth of mobile </li></ul><ul><li>Assistive technologies </li></ul><ul><li>Limited functionality in a corporate setting </li></ul>
  10. 10. Murphy’s Law <ul><li>“Whatever can go wrong will go wrong, and at the worst possible time, in the worst possible way” </li></ul>http://www.flickr.com/photos/27447877@N00/3242903/
  11. 11. In an environment like this, “doing your own thing” can lead to unintended consequences
  12. 12. Unintended consequences <ul><li>“a negative or a perverse effect, </li></ul><ul><li>which may be the opposite </li></ul><ul><li>result of what is intended” </li></ul>http://www.flickr.com/photos/khawaja/151777694/
  13. 13. How do you protect against unintended consequences?
  14. 14. Best practices! They will protect you http://www.flickr.com/photos/micke-fi/86932091/
  15. 15. What are best practices? <ul><li>“Best practices can be defined as the most efficient and effective way of accomplishing a task…” </li></ul>
  16. 16. Ignore them at your own risk http://www.flickr.com/photos/88311728@N00/254275998/
  17. 17. Today’s best practice: Layer and enhance
  18. 18. Don’t create dependencies between HTML, CSS and JavaScript
  19. 19. Your site should work even if it’s deprived of one of these technologies
  20. 20. Layer: HTML
  21. 21. Build HTML first It should work 100% on its own
  22. 22. 4 simple rules to keep in mind
  23. 23. 1) Important content should be present in the markup
  24. 24. 1) Important content should be present in the markup (Search engines won’t crawl your JavaScript only navigation)
  25. 25. 2) Inject pure JavaScript markup later
  26. 26. 2) Inject pure JavaScript markup later (If it can’t be relevant without JavaScript, it shouldn’t be in the markup to begin with)
  27. 27. 3) Form elements should be inside forms
  28. 28. 3) Form elements should be inside forms (They’re called form elements for a reason!)
  29. 29. 4) Links should link
  30. 30. 4) Links should link (No brainer right?)
  31. 31. This is not a link <ul><li><a href=&quot;javascript:doNext()&quot;> </li></ul><ul><li>Next </li></ul><ul><li></a> </li></ul>
  32. 32. This is a link <ul><li><a href=&quot;/page2/&quot;> </li></ul><ul><li>Next </li></ul><ul><li></a> </li></ul>
  33. 33. You can’t “Save as…” this <ul><li><a href=&quot;javascript:popup(doc.pdf)&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul>
  34. 34. You can “Save as…” this <ul><li><a href=&quot;doc.pdf&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul>
  35. 35. Layer: JavaScript
  36. 36. Add JavaScript as an enhancement (Unobtrusively)
  37. 37. Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul><ul><li><script> </li></ul><ul><li>var a = document.getElementById(&quot;doc&quot;); </li></ul><ul><li>a.onclick = function () { </li></ul><ul><li>window.open(this.href); </li></ul><ul><li>return false; </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul>
  38. 38. Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul><ul><li><script> </li></ul><ul><li>var a = document.getElementById(&quot;doc&quot;); </li></ul><ul><li>a.onclick = function () { </li></ul><ul><li>window.open(this.href); </li></ul><ul><li>return false; </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul>
  39. 39. Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul><ul><li><script> </li></ul><ul><li>var a = document.getElementById(&quot;doc&quot;); </li></ul><ul><li>a.onclick = function () { </li></ul><ul><li>window.open(this.href); </li></ul><ul><li>return false; </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul>
  40. 40. Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul><ul><li><script> </li></ul><ul><li>var a = document.getElementById(&quot;doc&quot;); </li></ul><ul><li>a.onclick = function () { </li></ul><ul><li>window.open(this.href); </li></ul><ul><li>return false; </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul>
  41. 41. Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul><ul><li><script> </li></ul><ul><li>var a = document.getElementById(&quot;doc&quot;); </li></ul><ul><li>a.onclick = function () { </li></ul><ul><li>window.open(this.href); </li></ul><ul><li>return false; </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul>
  42. 42. Simple unobtrusive JavaScript <ul><li><a href=&quot;doc.pdf&quot; id=&quot;doc&quot;> </li></ul><ul><li>A PDF Document </li></ul><ul><li></a> </li></ul><ul><li><script> </li></ul><ul><li>var a = document.getElementById(&quot;doc&quot;); </li></ul><ul><li>a.onclick = function () { </li></ul><ul><li>window.open(this.href); </li></ul><ul><li>return false; </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul>
  43. 43. It’s like having a Plan B
  44. 44. Always have a Plan B http://snurl.com/21uf6
  45. 45. Layer: CSS
  46. 46. Don’t hide things with CSS only to show them with JavaScript
  47. 47. Flyout menus anyone?
  48. 48. What if JavaScript isn’t available?
  49. 49. Inaccessible content! http://www.flickr.com/photos/easilyamused747/17118475/
  50. 50. Solution: Hide with JavaScript and show with JavaScript
  51. 51. But how to avoid content flicker? JavaScript takes time to kick in!
  52. 52. Here’s how… <ul><li><head> </li></ul><ul><li><script> </li></ul><ul><li>document.write( </li></ul><ul><li>&quot;<link + </li></ul><ul><li>href='initial-states.css' + </li></ul><ul><li>rel='stylesheet' + </li></ul><ul><li>type='text/css' />&quot;); </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  53. 53. Summary <ul><li>Seek out and implement best practices (they are your friend!) </li></ul>
  54. 54. Summary <ul><li>Seek out and implement best practices (they are your friend!) </li></ul><ul><li>Avoid technology interdependencies (layer and enhance!) </li></ul>
  55. 55. Summary <ul><li>Seek out and implement best practices (they are your friend!) </li></ul><ul><li>Avoid technology interdependencies (layer and enhance!) </li></ul><ul><li>Have fun! </li></ul>
  56. 56. Thank You! <ul><li>Ara Pehlivanian </li></ul><ul><li>[email_address] </li></ul><ul><li>http:// arapehlivanian.com </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×