Resilience

5ad82c5ba0264363974af89deb743c20?s=47 Jeremy Keith
October 25, 2016

 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.

5ad82c5ba0264363974af89deb743c20?s=128

Jeremy Keith

October 25, 2016
Tweet

Transcript

  1. RESILIENCE

  2. None
  3. None
  4. lo

  5. None
  6. None
  7. None
  8. None
  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

  12. None
  13. None
  14. None
  15. None
  16. None
  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
  33. None
  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.
  39. None
  40. None
  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!
  43. None
  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
  60. None
  61. None
  62. HTTP WWW URLs HTML

  63. URLs

  64. RESILIENCE