The document discusses progressive enhancement in web development, emphasizing the importance of ensuring functionality across various browsers and networks. It highlights key principles like using HTML for content, CSS for presentation, and JavaScript for behaviors while addressing common pitfalls and performance issues. The author, Zach Leatherman, provides various resources and insights into modern practices, including the use of responsive design and feature detection over user agent sniffing.

1. Progressive
Enhancement

2. Hello.
Zach Leatherman
Front End Engineer est. 1998
UI “Architect” at Union Pacific Railroad
Web 3.0, 6 Bladed Razors, 7 Minute Abs:
849K Pageviews, 1.3K RSS subscribers
BigText jQuery Plugin Author
Omaha Startup Weekend: GiftBright and CallSpinner
No affiliation:
@zachleat http://zachleat.com

3. Problem?

5. WEB BROWSERS

6. 3.6, 4, 5

7. Fennec

8. Camino

9. Flock SeaMonkey
K-Meleon

10. MicroB

11. 4, 5
http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html

12. 11, 12

13. Konqueror

21. (NetFront)

22. (NetFront)

23. RockMelt Shiira
SkyFire
iCab OmniWeb

24. 11
Mini 4, 5, 6

25. Internet Channel

26. 6

27. 7, 8

28. 9

29. Maxthon Avant Browser

33. SPECIFICATIONS

34. Design Documents

36. HTML2 HTML5
76 pages 500 pages
http://html5.hadw.com/

37. UNRELIABLE or
SLOW NETWORKS

38. Cheap shot

39. IMPERFECT CODE

40. <a href=”#”
onclick=”throw Error(‘Whoops’)”>
GO TO NEXT PAGE
</a>

43. You’re unit
testing, right?

44. P.E.

45. I need my space
HTML JavaScript
CSS

46. HTML Content
CSS Presentation
JavaScript Behaviors

47. HTML First
CSS Second
JavaScript Third

48. Example

49. HTML

50. Ajax Target HTML

51. CSS

52. Modify Ajax Target

53. JavaScript

54. Choose Your
Weapons Wisely
http://www.flickr.com/photos/29503348@N03/4915763648/

55. Performance

56. Accessibility

60. Common Mistakes

61. <noscript>

62. HTML5 Boilerplate

63. What to P.E.

64. Text
Images alt=”Text”
CSS Defaults
JavaScript No Ajax
No Behaviors

65. Text
Images
Flash Video Transcripts
Still Images

66. Text Telegraph
1838
Images1865 Telefax
Audio1876 Telephone
1896 Radio
Video 1927 Television
1930 Videophone

67. Inclusive
One Web,
Mobile First Two Web
JavaScript IE Only
Exclusive
Required Web WebKit Only

68. Layouts
Responsive Design & Text
http://blog.andyhume.net/responsive-by-default

69. Interactions
Keyboard > Mouse > Touch

72. NetMag
Issue 208
http://issuu.com/curtisbrenneman/docs/net208

73. Pragmatism

78. Who to P.E.

79. http://developer.yahoo.com/yui/articles/gbs/

80. http://jquerymobile.com/gbs/

81. Ok, but how does this
help me?

82. IE6 and Blackberry 4.x
still have CSS, JavaScript
support

84. Three Ways To Fork
http://allyoucanleet.com/2011/02/05/the-cost-of-feature-testing/

85. User Agent Sniffing
Bad.
“Mozilla”
“Like Gecko”

86. Weak Inference
Not much better.

87. Feature Detection
Good.

92. Tool Snobbery

94. Warning Signs

95. APIs are
JavaScript Only

96. Clientside
JavaScript
Templating

97. Mobile
Component
Frameworks

99. Good, Bad, & Ugly

100. Retrofit Existing Code

101. Requires Thought

102. Slightly Larger
Code Base

103. Tool Snobbery

104. Thanks!
Zach Leatherman
@zachleat
http://zachleat.com