Resilience

Web browsers have become so powerful that developers are now treating them as if they were a runtime environment as predictable as any other. But the truth is that we still need to deal with many unknown factors that torpedo our assumptions.

The web is where Postel’s Law meets Murphy’s Law, so we can’t treat web development as if it were just another flavor of software. Instead we must work with the grain of the web. There are tried and tested approaches to building for the web that will result in experiences that are robust, flexible, and resilient.

Transcript

1. RESILIENCE
4. lo
9. “Deliver the bits, stupid.” —David Isenberg “Rise of the Stupid Network”
10. email gopher ftp HTTP telnet TCP/IP
11. HTTP WWW URLs HTML
17. The trick... is to make sure that each limited mechanical part of the web, each application, is within itself composed of simple parts that will never get too powerful.” “ —Tim Berners-Lee
18. HTTP WWW URLs HTML
19. HTML
20. HTML tags 21 elements
21. HTML 5 121 elements
22. <div> show me </div>
23. <foo> show me </foo>
24. <main> show me </main>
25. <canvas> hide me </canvas>
26. <img src alt>
27. <img src alt srcset>
28. <picture> <source srcset> <source srcset> <img src alt srcset> </picture>
29. CSS
30. selector { property: value; } OOCSS SMACSS BEM
31. HTML CSS
32. Be conservative in what you send, be liberal in what you accept.” “ —Jon Postel
34. HTML CSS JavaScript declarative imperative resilient fragile
35. XHTML 2 fragile
36. fragile JavaScript
37. <a href="javascript:void(0)"> Download Chrome </a>
38. Anything that can possibly go wrong, will go wrong.” “ —Edward Aloysius Murphy, Jr.
41. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
42. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
44. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
45. <nav> <main> <h1> <p> <article> <header> <footer>
46. <ol> <li> <li> <li> </ol> <input type="text">
47. <input type="file"> <img> <img> <img>
48. <textarea>
49. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
50. layout @font-face
51. ajax websocket
52. CSS filters file API
53. local storage service worker
54. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
55. “This is too easy.”
56. “This is too hard.”
57. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
58. developer convenience user needs
59. 216 colours Times New Roman Arial Verdana Netscape 4 IE 6 Windows XP Android 2.x
62. HTTP WWW URLs HTML
63. URLs
64. RESILIENCE