R E S ILIE N C E

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

lo

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

email gopher f tp H T TP telnet TCP/IP

H T TP WWW URLs HTML

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

H T TP WWW URLs HTML

HTML

HTML tags 21 elements

<ul>

HTML 5 121 elements <wbr>

<div> show me </div>

<foo> show me </foo>

<main> show me </main>

<canvas> hide me </canvas>

<img src alt>

<img src alt srcset>

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

CSS

selector {

prope rt y : 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

X HTML 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.

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

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

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

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

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

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

<textarea>

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

layout @font-face

ajax websocket

CSS filters file API

local storage service worker

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

“

is is too easy. ”

“

is is too hard. ”

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

— 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.” “

developer convenience user needs

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

" e tragedy of the commons

640 800 1024

2 1 6

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

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.

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

H T TP WWW URLs HTML

URLs

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

R E S ILIE N C E