Resilience

A presentation at An Event Apart Orlando: Special Edition 2016 in October 2016 in Orlando, FL, USA by Jeremy Keith

Slide 1

Slide 1

R E S ILIE N C E

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

It is a triumph more glorious,

because far more useful to mankind,

than was ever won by conqueror

on the field of battle. ” “ — President James Buchanan to Q ueen Victoria

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

lo

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

“Deli v er the bits, stupid. ” — David Isenberg “ Rise of the Stupid Network ”

Slide 25

Slide 25

email gopher f tp H T TP telnet TCP/IP

Slide 26

Slide 26

H T TP WWW URLs HTML

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

e trick... is to make sure that each limited mechanical part of the web,

each application, is within itself

composed of simple parts that will

ne v er get too powerful. ” “ — Tim Berners-Lee

Slide 34

Slide 34

H T TP WWW URLs HTML

Slide 35

Slide 35

HTML

Slide 36

Slide 36

HTML tags 21 elements

<ul>

Slide 37

Slide 37

HTML 5 121 elements <wbr>

Slide 38

Slide 38

<div> show me </div>

Slide 39

Slide 39

<foo> show me </foo>

Slide 40

Slide 40

<main> show me </main>

Slide 41

Slide 41

<canvas> hide me </canvas>

Slide 42

Slide 42

<img src alt>

Slide 43

Slide 43

<img src alt srcset>

Slide 44

Slide 44

<picture> <source srcset> <source srcset> <img src alt srcset> </picture>

Slide 45

Slide 45

CSS

Slide 46

Slide 46

selector {

prope rt y : value ;

} OOCSS SMACSS BEM

Slide 47

Slide 47

HTML CSS

Slide 48

Slide 48

Be conservative in what you send, be liberal in what you accept.” “ — Jon Postel

Slide 49

Slide 49

Slide 50

Slide 50

HTML CSS JavaScript declarative imperative resilient fragile

Slide 51

Slide 51

X HTML 2 fragile

Slide 52

Slide 52

fragile JavaScript

Slide 53

Slide 53

<a href=" javascript:void(0) "> Download Chrome </a>

Slide 54

Slide 54

Anything that can possibly go wrong,

will go wrong. ” “ —Edward Aloysius Murphy, Jr.

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!

Slide 58

Slide 58

Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!

Slide 59

Slide 59

Slide 60

Slide 60

Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!

Slide 61

Slide 61

<nav> <main> <h1> <p> <article> <header> <footer>

Slide 62

Slide 62

<ol> <li> <li> <li> </ol> <input type=“text”>

Slide 63

Slide 63

<input type=“file”> <img> <img> <img>

Slide 64

Slide 64

<textarea>

Slide 65

Slide 65

Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!

Slide 66

Slide 66

layout @font-face

Slide 67

Slide 67

ajax websocket

Slide 68

Slide 68

CSS filters file API

Slide 69

Slide 69

local storage service worker

Slide 70

Slide 70

Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!

Slide 71

Slide 71

is is too easy. ”

Slide 72

Slide 72

is is too hard. ”

Slide 73

Slide 73

Identify core functionality . 2. Make that functionality available using the simplest technolog y. 3. Enhance!

Slide 74

Slide 74

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

— gov.uk Government Service Design Manual If you build pages with the idea that parts other than html are optional, you will create a better and stronger web page.” “

Slide 78

Slide 78

developer convenience user needs

Slide 79

Slide 79

Ninety percent of everything is crud.” “ — " eodore Sturgeon

Slide 80

Slide 80

" e tragedy of the commons

Slide 81

Slide 81

640 800 1024

Slide 82

Slide 82

2 1 6

c o l o u r s Times New Roman Arial Verdana Netscape 4 IE 6 Windows XP Android 2.x

Slide 83

Slide 83

Slide 84

Slide 84

With that movie 2001, you’re projecting us into the 21st century. I brought along my son Jonathan who in the year 2001 will be the same age as I am now. Maybe he will be better adjusted to this kind of world that you’re trying to portray. " e big difference when he grows up in fact if we wanted to wait until the year 2001 is that he will have in his own house not a computer as big as this but at least a console through which he can talk to his friendly local computer and get all the information he needs for his everyday life like his bank statements his theatre reservations all the information you need in the course of living in our complex modern society. " is will be in a compact form in his own house. He’ll have a television screen like these here and a keyboard and he’ll talk to the computer and get information from it and he’ll take it as much for granted as we take the telephone.

Slide 85

Slide 85

Any su ffi ciently advanced technolog y is indistinguishable % om magic.” “ — Arthur C. Clarke

Slide 86

Slide 86

Slide 87

Slide 87

H T TP WWW URLs HTML

Slide 88

Slide 88

URLs

Slide 89

Slide 89

Cool URIs don’t change.” “ — Tim Berners-Lee

Slide 90

Slide 90

Slide 91

Slide 91

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

R E S ILIE N C E