$30 off During Our Annual Pro Sale. View Details »

Resilience

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.

Jeremy Keith

October 25, 2016
Tweet

More Decks by Jeremy Keith

Other Decks in Design

Transcript

  1. RESILIENCE

    View Slide

  2. View Slide

  3. View Slide

  4. lo

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. “Deliver the bits, stupid.”
    —David Isenberg
    “Rise of the Stupid Network”

    View Slide

  10. email
    gopher
    ftp
    HTTP
    telnet
    TCP/IP

    View Slide

  11. HTTP
    WWW
    URLs
    HTML

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  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

    View Slide

  18. HTTP
    WWW
    URLs
    HTML

    View Slide

  19. HTML

    View Slide

  20. HTML tags
    21 elements

    View Slide

  21. HTML 5
    121 elements

    View Slide


  22. show me

    View Slide


  23. show me

    View Slide


  24. show me

    View Slide


  25. hide me

    View Slide


  26. View Slide


  27. View Slide






  28. View Slide

  29. CSS

    View Slide

  30. selector {
    property: value;
    }
    OOCSS
    SMACSS
    BEM

    View Slide

  31. HTML
    CSS

    View Slide

  32. Be conservative in what you send,
    be liberal in what you accept.”

    —Jon Postel

    View Slide

  33. View Slide

  34. HTML
    CSS
    JavaScript
    declarative
    imperative
    resilient
    fragile

    View Slide

  35. XHTML 2
    fragile

    View Slide

  36. fragile
    JavaScript

    View Slide


  37. Download Chrome

    View Slide

  38. Anything that can possibly go wrong,
    will go wrong.”

    —Edward Aloysius Murphy, Jr.

    View Slide

  39. View Slide

  40. View Slide

  41. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!

    View Slide

  42. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!

    View Slide

  43. View Slide

  44. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!

    View Slide






  45. View Slide







  46. View Slide





  47. View Slide


  48. View Slide

  49. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!

    View Slide

  50. layout
    @font-face

    View Slide

  51. ajax
    websocket

    View Slide

  52. CSS filters
    file API

    View Slide

  53. local storage
    service
    worker

    View Slide

  54. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!

    View Slide

  55. “This is too easy.”

    View Slide

  56. “This is too hard.”

    View Slide

  57. 1. Identify core functionality.
    2. Make that functionality
    available using the simplest
    technology.
    3. Enhance!

    View Slide

  58. developer convenience
    user needs

    View Slide

  59. 216 colours
    Times New Roman
    Arial
    Verdana
    Netscape 4
    IE 6
    Windows XP
    Android 2.x

    View Slide

  60. View Slide

  61. View Slide

  62. HTTP
    WWW
    URLs
    HTML

    View Slide

  63. URLs

    View Slide

  64. RESILIENCE

    View Slide