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

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…

11. In an environment like this, “doing your own thing” can lead to unintended consequences

13. How do you protect against unintended consequences?

14. Best practices! They will protect you http://www.flickr.com/photos/micke-fi/86932091/

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?)

35. Layer: JavaScript

36. Add JavaScript as an enhancement (Unobtrusively)

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!