Don't Trust Your JavaScript

A talk in JavaScript failing and Progressive Enhancement, for the Meteor Cape Town meetup group (http://www.meetup.com/Meteor-Cape-Town/events/229419968/).

Lots of links at http://naga.co.za/pe

Transcript

1. ಠ_ಠ
2. Don't trust your JavaScript
5. NO! Ѕ(ӈ`ፀȞӈ)ů
6. NO! (ϛಠፅಠ)ϛ୴ˍʓˍ
7. We need to be mindful of the cost of our choices
8. Steve Barnett steve@naga.co.za @maxbarners naga.co.za/pe
9. Agenda 1. JavaScript failing 2. Progressive Enhancement
10. JavaScript is amaze!
11. Rich, fast, experiences
12. Offline with Service Worker
13. But I'm making assumptions
14. Why would my JS fail?
15. Why would my JS fail?
16. Is the file there? Did the user get it? Did it work?
17. Is the file there?
18. file not found
19. CDN down
20. Did the user get it?
21. "We don't have any non- JavaScript users" No, all your users are non-JS while they're downloading your JS
22. JS turned off (probably not. but.)
23. Personal Firewall
24. ISP "Helping"
25. Company Firewall
26. ! connection
27. Did it work?
28. Wonky deploy
29. Tpyo in your JavaScritp
30. Browser extensions
31. Ad blockers
32. Why would my JS fail?
33. Why would my JS succeed?
35. Progressive Enhancement is a better way to build web apps
36. Progressive Enhancement Theory
37. Don't depend on JS for core functionality
38. Make it work Then make it work better
39. Mobile First Responsive Web Design: Progressive Enhancement for layout
40. Support all browsers Optimise for some
41. web sites don't have to look exactly the same in every browser
42. web sites don't have to work exactly the same in every browser
43. web sites don't have to smell exactly the same in every browser
44. web sites don't have to be experienced exactly the same in every browser
45. One Web
46. Progressive Enhancement Practical
48. HTML and CSS are fault tolerant
49. <img src="cat.jpg" alt="A cute cat" />
50. <input type="email" />
51. background-color: purple; background: linear-gradient (135deg, red, blue);
52. JavaScript is not fault tolerant
53. if ('querySelector' in document ) { ... }
54. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { ... }
55. if('querySelector' in document) { ... } if('localStorage' in window) { ... } if('addEventListener' in window) { ... }
56. Feature detection not device detection
57. Progressive Enhancement ❤fest
58. Security blanket ❤
59. Faster initial load time ❤
60. Easier to archive & index ❤
61. Can reach more people ❤
62. Right thing to do for majority world (like here!) ❤
63. Smart(ish)phone
64. Opera Mini
65. In case of conflict, consider users over authors over implementers over specifiers over theoretical purity.
67. UCD-flavoured FED: Progressive Enhancement
68. (‛ƅϪƅ)‛ PE “(ƅϪƅ“)
69. Recap 1. JS failing 2. Progressive Enhancement
70. Don't trust your JavaScript
71. We need to be mindful of the cost of our choices
72. Steve Barnett steve@naga.co.za @maxbarners naga.co.za/pe