Your SlideShare is downloading. ×
Worry Free Web Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Worry Free Web Development

2,564
views

Published on

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

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,564
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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