Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESILIENCE
The trick... is to make sure that each
limited mechanical part of the web,
each application, is within itself
composed of ...
HTTP
WWW
URLs
HTML
HTML
HTML tags
21 elements
HTML 5
121 elements
<div>
show me
</div>
<foo>
show me
</foo>
<main>
show me
</main>
<canvas>
hide me
</canvas>
CSS
selector {
property: value;
}
OOCSS
SMACSS
BEM
HTML
CSS
Be conservative in what you send,
be liberal in what you accept.”
“
—Jon Postel
HTML
CSS
JavaScript
declarative
imperative
resilient
fragile
XHTML 2
fragile
fragile
JavaScript
<a href="javascript:void(0)">
Download Chrome
</a>
Anything that can possibly go wrong,
will go wrong.”
“
—Edward Aloysius Murphy, Jr.
1. Identify core functionality.
2. Make that functionality
available using the simplest
technology.
3. Enhance!
1. Identify core functionality.
2. Make that functionality
available using the simplest
technology.
3. Enhance!
1. Identify core functionality.
2. Make that functionality
available using the simplest
technology.
3. Enhance!
<nav>
<main>
<h1>
<p>
<article> <header> <footer>
<ol>
<li>
<li>
<li>
</ol>
<input type="text">
<input type="file">
<img>
<img>
<img>
<textarea>
1. Identify core functionality.
2. Make that functionality
available using the simplest
technology.
3. Enhance!
layout
@font-face
ajax
websocket
CSS filters
file API
local storage
service
worker
1. Identify core functionality.
2. Make that functionality
available using the simplest
technology.
3. Enhance!
developer convenience
user needs
216 colours
Times New Roman
Arial
Verdana
Netscape 4
IE 6
Windows XP
Android 2.x
HTTP
WWW
URLs
HTML
URLs
RESILIENCE
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Jeremy Keith: Resilience
Upcoming SlideShare
Loading in …5
×

Jeremy Keith: Resilience

430 views

Published on

Mozilla's View Source 2016 in Berlin

Published in: Technology
  • Be the first to comment

Jeremy Keith: Resilience

  1. 1. RESILIENCE
  2. 2. 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
  3. 3. HTTP WWW URLs HTML
  4. 4. HTML
  5. 5. HTML tags 21 elements
  6. 6. HTML 5 121 elements
  7. 7. <div> show me </div>
  8. 8. <foo> show me </foo>
  9. 9. <main> show me </main>
  10. 10. <canvas> hide me </canvas>
  11. 11. CSS
  12. 12. selector { property: value; } OOCSS SMACSS BEM
  13. 13. HTML CSS
  14. 14. Be conservative in what you send, be liberal in what you accept.” “ —Jon Postel
  15. 15. HTML CSS JavaScript declarative imperative resilient fragile
  16. 16. XHTML 2 fragile
  17. 17. fragile JavaScript
  18. 18. <a href="javascript:void(0)"> Download Chrome </a>
  19. 19. Anything that can possibly go wrong, will go wrong.” “ —Edward Aloysius Murphy, Jr.
  20. 20. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
  21. 21. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
  22. 22. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
  23. 23. <nav> <main> <h1> <p> <article> <header> <footer>
  24. 24. <ol> <li> <li> <li> </ol> <input type="text">
  25. 25. <input type="file"> <img> <img> <img>
  26. 26. <textarea>
  27. 27. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
  28. 28. layout @font-face
  29. 29. ajax websocket
  30. 30. CSS filters file API
  31. 31. local storage service worker
  32. 32. 1. Identify core functionality. 2. Make that functionality available using the simplest technology. 3. Enhance!
  33. 33. developer convenience user needs
  34. 34. 216 colours Times New Roman Arial Verdana Netscape 4 IE 6 Windows XP Android 2.x
  35. 35. HTTP WWW URLs HTML
  36. 36. URLs
  37. 37. RESILIENCE

×