davidbgk
/
larlet-fr-david-cache
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Laidieni 0 Aktivitāte
A place to cache linked articles (think custom and personal wayback machine)
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
39 Revīzijas
1 Atzars
Koks: 7028afa6f7
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no '7028afa6f7'
${ noResults }
larlet-fr-david-cache/cache/869f00aa0f07c61d938a153665e.../index.html

index.html 66KB
Neapstrādāts Vainot Vēsture

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>The First 100 Years (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://idlewords.com/talks/web_design_first_100_years.htm">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   The First 100 Years (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://idlewords.com/talks/web_design_first_100_years.htm">Source originale du contenu</a></h3>

  463.     <table>

  464. 

  465. <tr>

  466.     <td><a href="https://static.pinboard.in/w100/w100.002.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.002.jpg"/></a></td>

  467. 

  468.     <td>

  469.     <p>Designers! I am a San Francisco computer programmer, but I come in peace!

  470. 

  471.     </p><p>I would like to start with a parable about airplanes.</p>

  472.     <p>In 1981, my mother and I flew from Warsaw to New York City in this airplane, an <a href="https://en.wikipedia.org/wiki/Ilyushin_Il-62">Ilyushin-62</a>. 

  473. 

  474. 

  475.      </p></td>

  476. </tr>

  477. <tr>

  478.     <td><a href="https://static.pinboard.in/w100/w100.003.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.003.jpg"/></a></td>

  479.     <td><p>The Il-62 exemplifies a Soviet design approach I like to think of as "add engines until airborne". 

  480. 

  481.     </p><p>Soviet engineers lacked the computers to calculate all the bending and wiggling the wings would do if you hung the engines under them, so they just strapped engines on the back. 

  482. 

  483.     </p><p>This plane actually used a little kickstand when it was parked empty, to keep it from tipping over and pointing up like a rocket.</p>

  484. 

  485.     </td>

  486. </tr>

  487. <tr>

  488.     <td><a href="https://static.pinboard.in/w100/w100.004.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.004.jpg"/></a></td>

  489.     <td>

  490.     <p>In those days, Warsaw had maybe ten flights a day. It was a big deal to spot a plane in the sky.  The airport itself was a tiny concrete building not much bigger than this conference room, so my mom and I were completely overwhelmed on arrival at JFK airport, with its maze of gates. To top it off, neither of us spoke English.

  491. 

  492.     </p><p> We ran around the airport, out of breath, until we finally found our way to a waiting room where other passengers were sitting and waiting for the Pan Am flight to Houston.  We sat down to wait, too.  And then, without warning, the waiting room took off.  

  493. 

  494.     </p><p>That was my introduction to the Boeing 747.

  495. 

  496.     </p></td>

  497. </tr>

  498. <tr>

  499.     <td><a href="https://static.pinboard.in/w100/w100.005.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.005.jpg"/></a></td>

  500.     <td>

  501.     <p>The 747 is a masterpiece of industrial design. Everything we think of as normal about air travel, for better or worse, was invented for this airplane and its immediate predecessor, the 707.  That includes seats on rails, overhead bins, drink trolleys, sliding window shades, the little fan above your seat—you name it.

  502. 

  503.     </p><p>There are so many wonderful stories about the 747. It was two and a half times bigger than the largest passenger jet ever built.  They had to make a special factory to assemble it, and they were still building the factory as the first planes came off the line.  They were also still tinkering with the design. Engineers would run out onto the shop floor waving amended drawings, and annoyed foremen on the production line would cuss them out.

  504. </p></td>

  505. </tr>

  506. 

  507. <tr>

  508.     <td><a href="https://static.pinboard.in/w100/w100.006.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.006.jpg"/></a></td>

  509.     <td>

  510.     <p>The 747 required over 75,000 technical drawings. All of them were done by hand. There was no computer aided design to help engineers figure out how to put everything together, just a massive filing system.

  511. 

  512.     </p><p>Boeing had to build a full-scale plywood model of the plane from these drawings to make sure everything fit together, and that multiple systems weren't trying to occupy the same space.

  513. 

  514. 

  515. 

  516.     </p></td>

  517. </tr>

  518. 

  519. <tr>

  520.     <td><a href="https://static.pinboard.in/w100/w100.007.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.007.jpg"/></a></td>

  521.     <td><p>My favorite fact about the 747 is that it was built by the company's B team, Boeing's version of the Bad News Bears. All the top engineers, and the ambitious up and comers, had gotten themselves assigned to Boeing's prestige project, a plane called the <a href="https://en.wikipedia.org/wiki/Boeing_2707">2707</a>, or supersonic transport.

  522. 

  523. 

  524.    </p><p>The SST was going to fly at almost three times the speed of sound, about 2900 kilometers an hour.  It had swing wings. And it was the first-ever widebody design. Everyone believed that the SST was the future of jet travel.

  525.     </p><p>

  526. 

  527. 

  528.    </p></td>

  529. </tr>

  530. 

  531. <tr>

  532.     <td><a href="https://static.pinboard.in/w100/w100.009.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.009.jpg"/></a></td>

  533.     <td>The 747 was meant to be a stopgap. It was supposed to serve the airlines until the SST entered service in the 1970's, at which point it would be demoted to a freighter.

  534. 

  535.     <p>This is a Pan Am advertisement from the period, showcasing the 'planes of tomorrow' that were 'just over the horizon'.

  536.     </p><p>

  537.     </p></td>

  538. </tr>

  539. 

  540. <tr>

  541.     <td><a href="https://static.pinboard.in/w100/w100.010.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.010.jpg"/></a></td>

  542.     <td>

  543.     <p>In fact, that famous hump on the 747 is there specifically to make it easier to load freight.  This was not a plane with a glamorous future.

  544. 

  545.     </p><p> It wasn't just Boeing working to build an SST. The Europeans were developing the Concorde, and the Soviet Union was hard at work on their own version.

  546.     </p></td>

  547. </tr>

  548. 

  549. <tr>

  550.     <td><a href="https://static.pinboard.in/w100/w100.011.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.011.jpg"/></a></td>

  551.     <td>

  552.     <p>This was a giddy time for aviation. Pan Am even started <a href="http://backstoryradio.org/2013/08/19/pan-am-and-the-waiting-list-for-the-moon/">taking reservations</a> for commercial flights to the Moon! They had a waiting list with over 90,000 names.

  553. 

  554.     </p><p>The point of my parable is this: imagine if you could travel back in time and offer to show one of those Boeing engineers what air travel would look like in 2014, fifty years on.

  555. 

  556.     </p><p> What might he have expected to see?

  557.     </p></td><td>

  558. 

  559. 

  560. 

  561.     </td>

  562. </tr>

  563. 

  564. <tr>

  565.     <td><a href="https://static.pinboard.in/w100/w100.012.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.012.jpg"/></a></td>

  566.     <td>

  567. <p>Keep in mind that in 1965, the Gemini project had just started.  Astronauts were in earth orbit, testing the technology and procedures needed for getting to the Moon.  The Space Race was in full swing.  

  568. 

  569. </p><p>The Soviets and Europeans were both developing a giant supersonic airliner. 

  570. 

  571. </p><p>As this period chart shows, transportation speed was increasing at an exponential rate, and we were just about to head up that steep slope towards interstellar travel. Though the underlying technologies kept changing, the overall trend was as clear as it was unstoppable.

  572. 

  573.     </p></td>

  574. </tr>

  575. 

  576. <tr>

  577.     <td><a href="https://static.pinboard.in/w100/w100.013.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.013.jpg"/></a></td>

  578.     <td>

  579.   <p>One thing the engineer might have expected to see in 2014 was a radioactive wasteland.  The Cold War was a grim reality, and many people expected it to end in disaster.

  580. 

  581.   </p><p>But if we had not killed ourselves, he would have expected moon bases, maybe a Mars base.  He wouldn't be surprised to see flying cars everywhere, or atomic airplanes with unlimited range.  

  582. 

  583.   </p><p>Without question there would be routine supersonic travel at unimaginable speed and comfort between any two cities in the world. 

  584.     </p></td>

  585. </tr>

  586. 

  587. <tr>

  588.     <td><a href="https://static.pinboard.in/w100/w100.014.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.014.jpg"/></a></td>

  589.     <td>

  590. 

  591.    Consider what that engineer had seen happen in his own lifetime. The first attempts at  powered flight took place right around the time he was born.

  592. 

  593.     </td>

  594. </tr>

  595. <tr>

  596.     <td><a href="https://static.pinboard.in/w100/w100.016.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.016.jpg"/></a></td>

  597.     <td>

  598. In the twenties, when he was a boy, airliners like the <a href="https://en.wikipedia.org/wiki/Junkers_G_24">Junkers G-24</a> could fly 14 passengers at 170 kph.

  599.     </td>

  600. </tr>

  601. 

  602. <tr>

  603.     <td><a href="https://static.pinboard.in/w100/w100.017.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.017.jpg"/></a></td>

  604.     <td>

  605. The 1930's brought the all-metal <a href="https://en.wikipedia.org/wiki/Douglas_DC-3">DC-3</a>. It could fly 30 people at 333 kph.

  606.     </td>

  607. </tr>

  608. 

  609. <tr>

  610.     <td><a href="https://static.pinboard.in/w100/w100.018.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.018.jpg"/></a></td>

  611.     <td>

  612. That was also the era of the famous <a href="https://en.wikipedia.org/wiki/Boeing_314_Clipper">Boeing Clippers</a>.  They had luxurious sleeper berths and took six days to get from San Francisco to Hong Kong.

  613.     </td>

  614. </tr>

  615. 

  616. <tr>

  617.     <td><a href="https://static.pinboard.in/w100/w100.019.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.019.jpg"/></a></td>

  618.     <td>

  619.    <p>In the 1940's, Boeing introduced the <a href="https://en.wikipedia.org/wiki/Boeing_377_Stratocruiser">Stratocruiser</a>, a pressurized plane that could fly at 480 kph. 

  620. 

  621. 

  622. 

  623. 

  624.     </p></td>

  625. </tr>

  626. <tr>

  627.     <td><a href="https://static.pinboard.in/w100/w100.020.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.020.jpg"/></a></td>

  628.     <td>

  629.    <p>Finally, in the 50's, Boeing ushered in the Jet Age with the <a href="https://en.wikipedia.org/wiki/Boeing_707">Boeing 707</a>, which could cross the Atlantic ocean at nearly 1,000 kph.

  630. 

  631. 

  632. 

  633. 

  634.     </p></td>

  635. </tr>

  636. 

  637. <tr>

  638.     <td><a href="https://static.pinboard.in/w100/w100.021.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.021.jpg"/></a></td>

  639.     <td>

  640. 

  641.    <p>I submit to you that the last thing that Boeing engineer would expect to see in 2014 is what actually happened. Here is today's most advanced passenger aircraft, the Boeing 787.

  642. 

  643.     </p></td>

  644. </tr>

  645. 

  646. <tr>

  647.     <td><a href="https://static.pinboard.in/w100/w100.024.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.024.jpg"/></a></td>

  648.     <td>

  649.     <p>Unless you are an airplane nerd, you would be hard pressed to distinguish the 787 from its grandfather.

  650. 

  651.     </p><p>And in fact, this revolutionary new plane flies slower than the 707.

  652. 

  653. 

  654. 

  655. </p><p>The basic configuration of an airliner has not changed in sixty years. You have a long tube, swept wings with multiple engines mounted underneath, and a top speed of around 900 kph. 

  656. 

  657. </p><p>So what happened to the future? 

  658.   </p></td>

  659. </tr>

  660. 

  661. <tr>

  662.     <td><a href="https://static.pinboard.in/w100/w100.025.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.025.jpg"/></a></td>

  663.     <td>

  664. 

  665.     <p>It's not that the technology failed. We built, tested and flew giant planes that could cruise at over three times the speed of sound.

  666. 

  667.     </p><p>This is the <a href="https://en.wikipedia.org/wiki/North_American_XB-70_Valkyrie">Valkyrie</a>, a massive strategic bomber painted white so that it won't catch fire from the flash of its own nuclear bombs. This plane was test flown in 1965 and nearly made it into production.

  668. 

  669. </p></td>

  670. </tr>

  671. 

  672. <tr>

  673.     <td><a href="https://static.pinboard.in/w100/w100.026.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.026.jpg"/></a></td>

  674.     <td>

  675. 

  676. <p>The SR-71 Blackbird, another Mach 3 plane, did make it into production, and flew for decades. It still holds all the speed records.

  677. 

  678. 

  679. </p></td>

  680. </tr>

  681. 

  682. <tr>

  683.     <td><a href="https://static.pinboard.in/w100/w100.027.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.027.jpg"/></a></td>

  684.     <td>

  685.     <p>We even got supersonic airliners!  The Concorde entered commercial service and safely ferried douchebags across the Atlantic for 25 years.  If you're my age, you may remember seeing one taxi past you at the airport. 

  686. 

  687.     </p><p>The Russians got in on it too, with a plane derisively called the Concordeski.  This proved too loud and unreliable for passenger service, so it ended up being a transport jet. It carried fruits and vegetables from Central Asia at twice the speed of sound.

  688. 

  689.     </p><p>My favorite line from <a href="https://en.wikipedia.org/wiki/Tupolev_Tu-144">the Wikipedia article</a> is that the plane was so loud, "you couldn't hear the passenger two seats away from you screaming".  He had to pass you a note saying "aaaaaaugh".  

  690. 

  691.     </p><p>The first time they took journalists up on this thing, there were so many alarms going off that the pilot had to borrow a pillow from the passengers to stuff into the alarm klaxon. But it flew!

  692. 

  693. </p></td>

  694. </tr>

  695. 

  696. <tr>

  697.     <td><a href="https://static.pinboard.in/w100/w100.028.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.028.jpg"/></a></td>

  698.     <td>

  699.   <p>And it's not like the space program was a failure.  We landed men on the Moon not once, but six times. 

  700. 

  701.   </p><p>Because we're Americans, we didn't just put men on the moon—we put cars on the Moon, three of them. 

  702. 

  703. 

  704.    </p></td>

  705. </tr>

  706. 

  707. <tr>

  708.     <td><a href="https://static.pinboard.in/w100/w100.029.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.029.jpg"/></a></td>

  709.     <td>

  710. 

  711. <p>We even had a dude play golf up there.  

  712. 

  713. </p><p>Our poor engineer had every right to assume that the breakthroughs he'd seen over his entire working life were on track to continue.  He lived at a time of accelerating technological change, where in ten years we had gone from propeller planes to lunar exploration.

  714. 

  715. </p><p>The next generation of technology was not just a dream; it was already in the prototype stage.

  716. 

  717. </p><p>But it all just kind of stopped.  

  718.  </p></td>

  719. </tr>

  720. 

  721. 

  722. 

  723. 

  724. 

  725. <tr>

  726.     <td><a href="https://static.pinboard.in/w100/w100.030.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.030.jpg"/></a></td>

  727.     <td>  

  728.      <p>We have a space station in 2014, but it's too embarrassing to talk about.  Sometimes we send Canadians up there.

  729. 

  730. </p><p>Never mind the Moon—we can't even launch astronauts into orbit anymore.  If we want to go to our sad-sack space station, we have to ask the Russians, and they're mean to us.  

  731. 

  732. </p><p>Can you imagine the look in that engineer's eyes?

  733. 

  734. 

  735. </p><p>The technology was pointing in one direction, the future was clear and inevitable. And then it never happened. Why?

  736. 

  737. </p><p>First, we ran into diminishing returns. As these planes got faster, they got  more expensive to design and operate.  Pushing all that air out of the way required exotic materials and vast amounts of fuel.

  738. 

  739. </p><p>The space program was even worse. Those rockets used a lot of public money that could be better spent on bombing Vietnam.

  740. 

  741. </p><p>Second, there were unexpected drawbacks. Economists have that great word, "externalities", for anything they find doesn't fit their model of the world. One externality of supersonic planes was the sonic boom.  The Air Force spent <a href="https://en.wikipedia.org/wiki/Oklahoma_City_sonic_boom_tests">six months flying supersonic over Oklahoma City</a> to convince itself that the constant noise bothered people.

  742. 

  743. 

  744. 

  745. 

  746. 

  747. 

  748. 

  749. 

  750. 

  751.    </p></td>

  752. </tr>

  753. 

  754. 

  755. 

  756. <tr>

  757.     <td><a href="https://static.pinboard.in/w100/w100.031.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.031.jpg"/></a></td>

  758.     <td>  

  759. 

  760.     <p>Another externality was that exhaust from SSTs damaged the ozone layer.  

  761. 

  762. </p><p>Boeing was genuinely surprised that people cared about this stuff. What does it matter if the sun is coming through your shattered window and burning your skin, if you can have a supersonic airliner?  But it wasn't worth it! 

  763. 

  764. 

  765. 

  766. 

  767. 

  768. 

  769.    </p></td>

  770. </tr>

  771. 

  772. 

  773. 

  774. 

  775. 

  776. <tr>

  777.     <td><a href="https://static.pinboard.in/w100/w100.032.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.032.jpg"/></a></td>

  778.     <td>  

  779.     <p>Because the technologies we had were good enough.  It turned out that very few people needed to cross an ocean in three hours instead of six hours.  On my way to this conference, I flew from Switzerland to San Francisco. It took eleven hours and cost me around a thousand dollars. It was a long flight and kind of uncomfortable and boring.  But I crossed the planet in half a day!  

  780. 

  781. </p><p>Being able to get anywhere in the world in a day is really good enough.  We complain about air travel but consider that for a couple of thousand dollars, you can go anywhere, overnight.

  782. 

  783. </p><p>The people designing the planes of tomorrow got so caught up in the technology that they forgot to ask the very important question, “what are we building this for?”

  784. 

  785. 

  786.    </p></td>

  787. </tr>

  788. 

  789. <tr>

  790.     <td><a href="https://static.pinboard.in/w100/w100.033.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.033.jpg"/></a></td>

  791.     <td>  

  792.     <p>Today I hope to persuade you that the same thing that happened to aviation is happening with the Internet. Here we are, fifty years into the computer revolution, at what feels like our moment of greatest progress. The outlines of the future are clear, and oh boy is it futuristic. </p>

  793. 

  794. <p>But we're running into physical and economic barriers that aren't worth crossing.

  795. 

  796. </p><p>We're starting to see that putting everything online has real and troubling social costs.

  797. 

  798. </p><p>And the devices we use are becoming 'good enough', to the point where we can focus on making them cheaper, more efficient, and accessible to everyone.

  799. 

  800. </p><p>So despite appearances, despite the feeling that things are accelerating and changing faster than ever, I want to make the shocking prediction that the Internet of 2060 is going to look recognizably the same as the Internet today. 

  801. 

  802. </p><p>Unless we screw it up. 

  803. 

  804. </p><p>And I want to convince you that this is the best possible news for you as designers, and for us as people.

  805. 

  806. 

  807. 

  808. 

  809.    </p></td>

  810. </tr>

  811. 

  812. <tr>

  813.     <td><a href="https://static.pinboard.in/w100/w100.034.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.034.jpg"/></a></td>

  814.     <td>  

  815. 

  816. 

  817.    <p>The defining feature of our industry since the invention of the transistor has been exponential growth.  

  818. 

  819. </p><p>Exponential growth is one of those buzzwords that has an exact technical meaning.  It just means that something keeps doubling, over and over again. Pop science authors never get tired of telling us that we have poor intuitions for exponential growth.  

  820. 

  821. </p><p>    For example, here is Britney Gallivan posing with a sheet of paper folded 11 times. 

  822. 

  823.     </p><p>If she could fold that sheet 50 times, the paper stack would reach nearly to the Sun. And it would be half a proton in diameter.  

  824. 

  825.     </p><p>(It's folding that last proton that's really hard.)

  826. 

  827. </p><p>This example illustrates the two things you need to know about exponential growth: it lets you get to large numbers very quickly.  And it always runs into physical barriers.

  828.    </p></td>

  829. </tr>

  830. 

  831. <tr>

  832.     <td><a href="https://static.pinboard.in/w100/w100.035.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.035.jpg"/></a></td>

  833.     <td>  

  834.     I'm sure you have heard of Moore's Law.  In its original form, it says "the number of transistors we can mass-produce on a silicon wafer doubles" every year or two.   Moore made this observation in 1965, and it's held up ever since.

  835. 

  836. <p>There's a popular understanding of Moore's Law, too, which says that "computers always get faster and more capable".

  837.    </p></td>

  838. </tr>

  839. 

  840. 

  841. <tr>

  842.     <td><a href="https://static.pinboard.in/w100/w100.036.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.036.jpg"/></a></td>

  843.     <td>  

  844.    For fifty years we've ridden that wave.  If you were active in the 1990's or 2000's, you may remember the feeling. You would buy a new computer, and a few months later there would be a better model, twice as fast, for the same price.  

  845.    </td>

  846. </tr>

  847. 

  848. <tr>

  849.     <td><a href="https://static.pinboard.in/w100/w100.037.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.037.jpg"/></a></td>

  850.     <td>  

  851. In those days there was an arms race between Intel and AMD, the main consumer chip manufacturers. Intel would release a 1 GHz processor, and AMD would follow with a 1.1 GHz rival.  

  852. 

  853. <p>CPUs were defined by clock speed. The speeds kept going up. Until suddenly, around 2005, there was a hitch.

  854.    </p></td>

  855. </tr>

  856. <tr>

  857.     <td><a href="https://static.pinboard.in/w100/w100.038.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.038.jpg"/></a></td>

  858.     <td>  

  859.    Intel had been working on a monster 7 GHz chip.  The problem was how much heat this chip generated, 150 watts, or as much as an E-Z Bake oven. 

  860. 

  861.    <p>150 watts is the kind of light bulb that you get in trouble for having in college, because it threatens to set your Bob Marley poster on fire.  

  862.    </p></td>

  863. </tr>

  864. 

  865. <tr>

  866.     <td><a href="https://static.pinboard.in/w100/w100.039.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.039.jpg"/></a></td>

  867.     <td>  

  868.    Deterred by all this heat, Intel changed strategy. Instead of making the CPUs smaller, hotter, and faster, they would just start putting more of them on each wafer. 

  869. 

  870.    <p>Suddenly we had 'cores'. Your software didn't just automatically get faster with each generation anymore.  Now it had to be written in a way that could use these 'cores', which programmers are still grappling with. 

  871. 

  872.  </p><p>So while Moore's Law still technically holds—the number of transistors on a chip keeps increasing—its spirit is broken. Computers don't necessarily get faster with time. In fact, they're  getting slower!

  873. 

  874.    </p></td>

  875. </tr>

  876. 

  877. <tr>

  878.     <td><a href="https://static.pinboard.in/w100/w100.040.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.040.jpg"/></a></td>

  879.     <td>  

  880.    This is because we're moving from desktops to laptops, and from laptops to smartphones.  Some people are threatening to move us to wristwatches. 

  881. 

  882.    <p>In terms of capability, these devices are a step into the past.  Compared to their desktop brethren, they have limited memory, weak processors, and barely adequate storage.

  883. 

  884. </p><p>And nobody cares, because the advantages of having a portable, lightweight connected device are so great. And for the purposes of taking pictures, making calls, and surfing the internet, they've crossed the threshold of 'good enough'.  </p><p>What people want from computers now is better displays, better battery life and above all, a better Internet connection. 

  885.    </p></td>

  886. </tr>

  887. 

  888. <tr>

  889.     <td><a href="https://static.pinboard.in/w100/w100.041.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.041.jpg"/></a></td>

  890.     <td>  

  891.    Something similar happened with storage, where the growth rate was even faster than Moore's Law. I remember the state-of-the-art 1MB hard drive in our computer room in high school. It cost a thousand dollars.  

  892. 

  893.    <p>Here's a photo of a multi-megabyte hard drive from the seventies. I like to think that the guy in the picture didn't have to put on the bunny suit, it was just what he liked to wear.

  894. 

  895.     </p><p>Modern hard drives are a hundred times smaller, with a hundred times the capacity, and they cost a pittance. Seagate recently released an 8TB consumer hard drive. 

  896. 

  897. </p><p>But again, we've chosen to go backwards by moving to solid state storage, like you find in smartphones and newer laptops. Flash storage sacrifices capacity for speed, efficiency and durability.   

  898. 

  899. </p><p>Or else we put our data in 'the cloud', which has vast capacity but is orders of magnitude slower.

  900. 

  901. </p><p>These are the victories of good enough. This stuff is fast enough.

  902. 

  903. </p><p>Intel could probably build a 20 GHz processor, just like Boeing can make a Mach 3 airliner.  But they won't.   There's a corrollary to Moore's law, that every time you double the number of transistors, your production costs go up.  Every two years, Intel has to build a completely new factory and production line for this stuff.  And the industry is turning away from super high performance,  because most people don't need it.

  904. 

  905. </p><p>The hardware is still improving, but it's improving along other dimensions, ones where we are already up against hard physical limits and can't use the trick of miniaturization that won us all that exponential growth.

  906. 

  907. </p><p>Battery life, for example. The limits on energy density are much more severe than on processor speed. And it's really hard to make progress.  So far our advances have come from making processors more efficient, not from any breakthrough in battery chemistry.  

  908. 

  909. </p><p>Another limit that doesn't grow exponentially is our ability to move information.   There's no point in having an 8 TB hard drive if you're trying to fill it over an AT&amp;T network.  Data constraints hit us on multiple levels.  There are limits on how fast cores can talk to memory, how fast the computer can talk to its peripherals, and above all how quickly computers can talk to the Internet.  We can store incredible amounts of information, but we can't really move it around.

  910. 

  911. </p><p>So the world of the near future is one of power constrained devices in a bandwidth-constrained environment. It's very different from the recent past, where hardware performance went up like clockwork, with more storage and faster CPUs every year.

  912. 

  913. </p><p>And as designers, you should be jumping up and down with relief, because hard constraints are the midwife to good design. The past couple of decades have left us with what I call an exponential hangover.

  914.    </p></td>

  915. </tr>

  916. 

  917. <tr>

  918.     <td><a href="https://static.pinboard.in/w100/w100.042.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.042.jpg"/></a></td>

  919.     <td>  

  920.    Our industry is in complete denial that the exponential sleigh ride is over.  Please, we'll do anything! Optical computing, quantum computers, whatever it takes. We'll switch from silicon to whatever you want. Just don't take our toys away.

  921. 

  922. <p>But all this exponential growth has given us terrible habits.  One of them is to discount the present.

  923. 

  924. </p><p>When things are doubling, the only sane place to be is at the cutting edge. By definition, exponential growth means the thing that comes next will be equal in importance to everything that came before.  So if you're not working on the next big thing, you're nothing.

  925.    </p></td>

  926. </tr>

  927. 

  928. 

  929. 

  930. <tr>

  931.     <td><a href="https://static.pinboard.in/w100/w100.043.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.043.jpg"/></a></td>

  932.     <td>

  933. This leads to a contempt for the past.  Too much of what was created in the last fifty years is gone because no one took care to preserve it. 

  934. 

  935. <p>Since I run a bookmarking site for a living, I've done a little research on link rot myself.  Bookmarks are different from regular URLs, because presumably anything you've bookmarked was once worth keeping.   What I've learned is, about 5% of this disappears every year, at a pretty steady rate.   A customer of mine just posted how 90% of what he saved in 1997 is gone.  This is unfortunately typical.

  936. 

  937. </p><p>We have heroic efforts like the Internet Archive to preserve stuff, but that's like burning down houses and then cheering on the fire department when it comes to save what's left inside. It's no way to run a culture.  We take better care of scrap paper than we do of the early Internet, because at least we look at scrap paper before we throw it away. 

  938. 

  939.   </p></td>

  940. </tr>

  941. 

  942. 

  943. <tr>

  944.     <td><a href="https://static.pinboard.in/w100/w100.044.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.044.jpg"/></a></td>

  945.     <td>

  946. 

  947. <p>This contempt for the past also ignores the reality of our industry, which is that we work almost exclusively with legacy technologies.  

  948. 

  949. </p><p>The operating system that runs the Internet is 45 years old. 

  950. </p><p>The protocols for how devices talk to each other are 40 years old. 

  951. </p><p>Even what we think of as the web is nearing its 25th birthday.

  952. </p><p>Some of what we use is downright ancient—flat panel displays were invented in 1964, the keyboard is 150 years old.

  953. 

  954. </p><p> The processor that's the model for modern CPUs dates from 1976.

  955. </p><p> Even email, which everyone keeps trying to reinvent, is nearing retirement age.

  956. 

  957. </p><p>I cheated by calling this talk 'Web Design: The First 100 years' because we're already nearly halfway there. However dismissive we are of this stuff, however much we insist that it will get swept away by a new generation of better technology, it stubbornly refuses to go.  Our industry has deep roots in the past that we should celebrate and acknowledge.

  958.   </p></td>

  959. </tr>

  960. 

  961. 

  962. 

  963. <tr>

  964.     <td><a href="https://static.pinboard.in/w100/w100.046.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.046.jpg"/></a></td>

  965.     <td>

  966. 

  967. The flip side of our disregard for the past is a love of gratuitous change.  Any office worker who uses Microsoft products knows this pain.  At some point fairly early on, Microsoft Office became good enough. Windows became good enough. 

  968. 

  969. <p>But that hasn't stopped Microsoft from constantly releasing new versions, and forcing people to upgrade.  I pick on Microsoft because so many of us have experience with their software, but this holds true for any software vendor.  

  970. 

  971. 

  972.   </p></td>

  973. </tr>

  974. 

  975. <tr>

  976.     <td><a href="https://static.pinboard.in/w100/w100.047.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.047.jpg"/></a></td>

  977.     <td>

  978. Consider the war Microsoft is waging against XP users. After years of patching, XP became a stable, beloved, and useful operating system. A quarter of desktops still run it. 

  979. 

  980. <p>This is considered a national crisis.  

  981. 

  982. </p><p>Rather than offer users persuasive reasons to upgrade software, vendors insist we look on upgrading as our moral duty.  The idea that something might work fine the way it is has no place in tech culture.

  983. 

  984.   </p></td>

  985. </tr>

  986. 

  987. <tr>

  988.     <td><a href="https://static.pinboard.in/w100/w100.048.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.048.jpg"/></a></td>

  989.     <td>

  990. <p>A further symptom of our exponential hangover is bloat. As soon as a system shows signs of performance, developers will add enough abstraction to make it borderline unusable.  Software forever remains at the limits of what people will put up with. Developers and designers together create overweight systems in hopes that the hardware will catch up in time and cover their mistakes. 

  991. 

  992. </p><p>We complained for years that browsers couldn't do layout and javascript consistently. As soon as that got fixed, we got busy writing libraries that reimplemented the browser within itself, only slower.

  993. 

  994. </p><p>It's 2014, and consider one hot blogging site, Medium.  On a late-model computer it takes me ten seconds for a Medium page (which is literally a formatted text file) to load and render.  This experience was faster in the sixties.

  995. 

  996. </p><p>The web is full of these abuses, extravagant animations and so on, forever a step ahead of the hardware, waiting for it to catch up.  

  997. 

  998. 

  999.   </p></td>

  1000. </tr>

  1001. <tr>

  1002.     <td><a href="https://static.pinboard.in/w100/w100.049.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.049.jpg"/></a></td>

  1003.     <td>

  1004.     <p>This exponential hangover leads to a feeling of exponential despair.</p>

  1005.  <p>   

  1006. What's the point of pouring real effort into something that is going to disappear or transform in just a few months? The restless sense of excitement we feel that something new may be around the corner also brings with it a hopelessness about whatever we are working on now, and a dread that we are missing out on the next big thing.

  1007. 

  1008. 

  1009.   </p></td>

  1010. </tr><tr>

  1011.     <td><a href="https://static.pinboard.in/w100/w100.050.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.050.jpg"/></a></td>

  1012.     <td>

  1013. <p>The other part of our exponential hangover is how we build our businesses.  The cult of growth denies the idea that you can build anything useful or helpful unless you're prepared to bring it to so-called "Internet scale".   There's no point in opening a lemonade stand unless you're prepared to take on PepsiCo.

  1014. 

  1015. </p><p>I always thought that things should go the other way. Once you remove the barriers of distance, there's room for all sorts of crazy niche products to find a little market online.  People can eke out a living that would not be possible in the physical world.  Venture capital has its place, as a useful way to fund  long-shot projects, but not everything fits in that mold. 

  1016. 

  1017. </p><p>The cult of growth has led us to a sterile, centralized web.   And having burned through all the easy ideas within our industry, we're convinced that it's our manifest destiny to start disrupting everyone else.

  1018. 

  1019. 

  1020.   </p></td>

  1021. </tr>

  1022. 

  1023. <tr>

  1024.     <td><a href="https://static.pinboard.in/w100/w100.051.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.051.jpg"/></a></td>

  1025.     <td>

  1026.     I think it's time to ask ourselves a very designy question: "What is the web actually for?"

  1027. 

  1028.     <p>I will argue that there are three competing visions of the web right now.  The one we settle on will determine whether the idiosyncratic, fun Internet of today can survive.

  1029. 

  1030.   </p></td>

  1031. </tr>

  1032. 

  1033. 

  1034. <tr>

  1035.     <td><a href="https://static.pinboard.in/w100/w100.052.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.052.jpg"/></a></td>

  1036.     <td>

  1037. 

  1038. <p>Vision 1: <b>CONNECT KNOWLEDGE, PEOPLE, AND CATS</b>. 

  1039. 

  1040. </p><p>This is the correct vision.</p>

  1041. 

  1042. <p>The Web erases the barrier of distance between people, and it puts all of human knowledge at our fingertips.  It also allows us to look at still images and videos of millions of cats, basically all of it for free, from our homes or a small device we carry in our pocket. 

  1043. 

  1044. </p><p>No one person owns it, no one person controls it, you don't need permission to use it. And the best part is, you are encouraged to contribute right back. You can post your own cat pictures.

  1045. 

  1046. </p><p>Why is this not enough?

  1047. 

  1048.   </p></td>

  1049. </tr>

  1050. 

  1051. <tr>

  1052.     <td><a href="https://static.pinboard.in/w100/w100.053.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.053.jpg"/></a></td>

  1053.     <td>

  1054. 

  1055. <p>The feline vision of the Internet is fundamentally a humble one, because it does not presume that developers and designers know what they are doing.  There are no limits on what people (and cats) can get up to once you link them together.  On a planet of seven billion people and millions of cats, the chance that you are going to be able to think of all the best ideas is zero.  Someone is always going to come up with something you never expected. A web that connects people in a way where they can contribute gives its authors a chance to be surprised.

  1056. 

  1057. </p><p>We've seen this play out time and again, in that the most productive and revolutionary aspects of web culture came out of left field. The idea of a free, universally editable encyclopedia sounded insane. The idea that a free operating system could run half the Internet was insane.  That <a href="http://polymathprojects.org">volunteers in blog comments</a> could write collaborative math papers with some of the most brilliant mathematicians in the world sounded insane.

  1058. 

  1059. </p><p>A currency based entirely on cryptographic hashing still sounds insane, but it sure is interesting.  

  1060. 

  1061. </p><p>Even the world wide web itself is the product of a physics nerd winging it, and convincing his colleagues to try out something new.

  1062. 

  1063. </p><p>The Internet is full of projects big and small whose defining trait is that they came out of nowhere and captured people's imaginations. It's also full of awesome cat videos.  The key part of this vision is that the Internet succeeds by remaining open and participatory. No one acts as gatekeeper, and it is not just a channel for mindless consumption.

  1064. 

  1065.   </p></td>

  1066. </tr>

  1067. 

  1068. 

  1069. <tr>

  1070.     <td><a href="https://static.pinboard.in/w100/w100.054.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.054.jpg"/></a></td>

  1071.     <td>

  1072. 

  1073. <p>Vision 2: <b>FIX THE WORLD WITH SOFTWARE</b></p>

  1074. 

  1075. <p>This is the prevailing vision in Silicon Valley.

  1076. 

  1077. </p><p>The world is just one big hot mess, an accident of history. Nothing is done as efficiently or cleverly as it could be if it were designed from scratch

  1078. by California programmers.  The world is a crufty legacy system crying out to be  optimized.

  1079. 

  1080. </p><p>If you have spent any time using software, you might recognize this as an appalling idea. Fixing the world with software is like giving yourself a haircut with a lawn mower.  It works in theory, but there's no room for error in the implementation.

  1081. 

  1082.   </p></td>

  1083. </tr>

  1084. 

  1085. <tr>

  1086.     <td><a href="https://static.pinboard.in/w100/w100.055.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.055.jpg"/></a></td>

  1087.     <td>

  1088. 

  1089. <p>This vision holds that the Web is only a necessary first step to a brighter future. In order to fix the world with software, we have to put software hooks into people's lives.  Everything must be instrumented, quantified, and networked.   All devices, buildings, objects, and even our bodies must become "smart" and net-accessible.

  1090. 

  1091. </p><p>Then we can get working on optimizing the hell out of life.

  1092.   </p></td>

  1093. </tr>

  1094. <tr>

  1095.     <td><a href="https://static.pinboard.in/w100/w100.056.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.056.jpg"/></a></td>

  1096.     <td>

  1097. 

  1098. <p>Marc Andreessen has this arresting quote, that ‘software is eating the world.’  He is happy about it. The idea is that industry after industry is going to fall at the hands of programmers who automate and rationalize it. 

  1099. 

  1100. </p><p>We started with music and publishing. Then retailing. Now we're apparently doing taxis.    We're going to move a succession of industries into the cloud, and figure out how to do them better.  Whether we have the right to do this, or whether it's a good idea, are academic questions that will be rendered moot by the unstoppable forces of Progress.  It's a kind of software Manifest Destiny.

  1101. 

  1102.   </p></td>

  1103. </tr>

  1104. <tr>

  1105.     <td><a href="https://static.pinboard.in/w100/w100.057.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.057.jpg"/></a></td>

  1106.     <td>

  1107. 

  1108. <p>To achieve this vision, we must have software intermediaries in every human interaction, and in our physical environment.   

  1109. 

  1110. </p><p>But what if after software eats the world, it turns the world to shit?

  1111. 

  1112.   </p></td>

  1113. </tr>

  1114. <tr>

  1115.     <td><a href="https://static.pinboard.in/w100/w100.058.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.058.jpg"/></a></td>

  1116.     <td>

  1117. 

  1118. Consider how fundamentally undemocratic this vision of the Web is. Because the Web started as a technical achievement,  technical people are the ones who get to call the shots.  We decide how to change the world, and the rest of you have to adapt.

  1119. 

  1120. <p>There is something quite colonial, too, about collecting data from users and repackaging it to sell back to them. I think of it as the White Nerd's Burden. 

  1121. 

  1122. 

  1123.   </p></td>

  1124. </tr>

  1125. 

  1126. 

  1127. 

  1128. 

  1129. 

  1130. <tr>

  1131.     <td><a href="https://static.pinboard.in/w100/w100.059.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.059.jpg"/></a></td>

  1132.     <td>

  1133.     <p>Technological Utopianism has been tried before and led to some pretty bad results. There's no excuse for not studying the history of positivism, scientific Marxism and other attempts to rationalize the world, before making similar promises about what you will do with software.

  1134. 

  1135. 

  1136.     </p><p>Like everything in tech, there is prior art!</p>

  1137. 

  1138.     <p>And then there's the third vision of the Internet:

  1139. 

  1140. 

  1141. </p></td>

  1142. </tr>

  1143. 

  1144. <tr>

  1145.     <td><a href="https://static.pinboard.in/w100/w100.060.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.060.jpg"/></a></td>

  1146.     <td>

  1147. 

  1148. <p>Vision 3: <b>BECOME AS GODS, IMMORTAL CREATURES OF PURE ENERGY LIVING IN A CRYSTALLINE PARADISE OF OUR OWN CONSTRUCTION</b></p>

  1149. 

  1150. <p>This is the insane vision.  I'm a little embarrassed to talk about it, because it's so stupid. But circumstances compel me.</p>

  1151. 

  1152. <p>In this vision, the Internet and web are just the first rung of a ladder that leads to neural implants, sentient computers, nanotechnology and eventually the Singularity, that mystical moment when progress happens so quickly that all of humanity's problems disappear and are replaced, presumably, with problems beyond our current understanding.

  1153. 

  1154. </p><p>This is the vision of 'accelerating returns', very reminiscent to that hockey stick graph I showed earlier, where we were supposed to have interstellar travel by 2010.

  1155. 

  1156. </p><p>This Apocalyptic vision of the Internet and technical progress has captured the imaginations of some of the most influential people in our industry.

  1157. 

  1158.    </p></td>

  1159. </tr>

  1160. 

  1161. <tr>

  1162.     <td><a href="https://static.pinboard.in/w100/w100.061.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.061.jpg"/></a></td>

  1163.     <td>

  1164.   <p>Grown adults, people who can tie their own shoes and are allowed to walk in traffic, seriously believe that we're walking a tightrope between existential risk and immortality.

  1165. 

  1166.   </p><p> Some of them are the most powerful figures in our industry, people who can call up Barack Obama about the dangers of nanotechnology, and Obama has to say “Michelle, I need to take this.”

  1167. 

  1168.   </p><p>“Barack, it is three o'clock in the morning."

  1169. 

  1170.   </p><p>“I know, but this guy is scared of sentient artificial intelligence and he's a huge contributor.”

  1171. 

  1172.   </p><p>And then Obama just has to sit there and listen to this shit.

  1173. 

  1174.    </p></td>

  1175. </tr>

  1176. 

  1177. <tr>

  1178.     <td><a href="https://static.pinboard.in/w100/w100.062.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.062.jpg"/></a></td>

  1179.     <td>

  1180. <p>So because powerful people in our industry read bad scifi as children, we now confront a stupid vision of the web as gateway to robot paradise.

  1181. 

  1182. </p><p>Here's Ray Kurzweil, a man who honestly and sincerely believes he is never going to die.  He works at Google.  Presumably he stays at Google because he feels it advances his agenda.  

  1183. 

  1184. </p><p>Google works on some loopy stuff in between plastering the Internet with ads.

  1185. 

  1186.    </p></td>

  1187. </tr>

  1188. 

  1189. <tr>

  1190.     <td><a href="https://static.pinboard.in/w100/w100.064.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.064.jpg"/></a></td>

  1191.     <td>

  1192. 

  1193. <p>And here is Elon Musk, the founder of PayPal, builder of rockets and electric cars.  Musk has his suitcase packed for the robot rebellion:

  1194. 

  1195. </p><p>“The risk of something seriously dangerous happening is in the five year timeframe. 10 years at most.”

  1196. 

  1197. </p><p>“With artificial intelligence we are summoning the demon. In all those stories where there’s the guy with the pentagram and the holy water, it’s like – yeah, he’s sure he can control the demon. Doesn’t work out.”

  1198. 

  1199. </p><p>“We need to be super careful with AI. Potentially more dangerous than nukes.”

  1200. 

  1201. </p><p>“Hope we're not just the biological boot loader for digital superintelligence. Unfortunately, that is increasingly probable.”

  1202. 

  1203.    </p></td>

  1204. </tr>

  1205. 

  1206. <tr>

  1207.     <td><a href="https://static.pinboard.in/w100/w100.065.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.065.jpg"/></a></td>

  1208.     <td>

  1209.     Let me give you a little context here. This little fellow is <i>Caenorhabditis elegans </i>, a nematode worm that has 302 neurons.  The absolute state of the art in simulating intelligence is this worm.  We can <a href="http://www.openworm.org">simulate its brain</a> on supercomputers and get it to wiggle and react, althogh not with full fidelity. 

  1210. 

  1211. <p>And here I'm talking just about our ability to simulate. We don't even know where to start when it comes to teaching this virtual <i>c. elegans</i> to bootstrap itself into being a smarter, better nematode worm.

  1212. 

  1213. 

  1214.  </p></td>

  1215. </tr>

  1216. 

  1217. <tr>

  1218.     <td><a href="https://static.pinboard.in/w100/w100.066.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.066.jpg"/></a></td>

  1219.     <td>

  1220.     <p>In fact, forget about worms—we barely have computers powerful enough to <a href="http://arstechnica.com/gaming/2011/08/accuracy-takes-power-one-mans-3ghz-quest-to-build-a-perfect-snes-emulator/">emulate the hardware of a Super Nintendo</a>. 

  1221. 

  1222. </p><p>If you talk to anyone who does serious work in artificial intelligence (and it's significant that the people most afraid of AI and nanotech have the least experience with it) they will tell you that progress is slow and linear, just like in other scientific fields.

  1223. 

  1224. </p><p>But since unreasonably fearful people helm our industry and have the ear of government, we have to seriously engage their stupid vision.

  1225. 

  1226. 

  1227. 

  1228. 

  1229.  </p></td>

  1230. </tr>

  1231. 

  1232. <tr>

  1233.     <td><a href="https://static.pinboard.in/w100/w100.067.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.067.jpg"/></a></td>

  1234.     <td> 

  1235.     <p>I've taken the liberty of illustrating Musk's greatest fear. 

  1236. 

  1237.     </p><p>At best, having the the top tiers of our industry include figures who believe in fairy tales is a distraction. At worst, it promotes a kind of messianic thinking and apocalyptic Utopianism that can make people do dangerous things with all their money.

  1238. 

  1239. 

  1240. 

  1241. 

  1242.  </p></td>

  1243. </tr>

  1244. 

  1245. <tr>

  1246.     <td><a href="https://static.pinboard.in/w100/w100.068.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.068.jpg"/></a></td>

  1247.     <td>

  1248.     <p>These three visions lead to radically different worlds.

  1249. 

  1250.   </p><p>If you think the Web is a way to <b>CONNECT KNOWLEDGE, PEOPLE, AND CATS</b>, then your job is to get the people and cats online, put a decent font on the knowledge, and then stand back and watch the magic happen.  

  1251. 

  1252. 

  1253.  </p></td>

  1254. </tr>

  1255. <tr>

  1256.     <td><a href="https://static.pinboard.in/w100/w100.069.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.069.jpg"/></a></td>

  1257.     <td>

  1258. If you think your job is to <b>FIX THE WORLD WITH SOFTWARE</b>, then the web is just the very beginning. There's a lot of work left to do. Really you're going to need sensors in every house, and it will  help if everyone looks through special goggles, and if every refrigerator can talk to the Internet and confess its contents.

  1259. 

  1260. 

  1261. <p>You promise to hook up all this stuff up for us, and in return, we give you the full details of our private lives. And we don't need to worry about people doing bad things with it, because your policy is for that not to happen. 

  1262.  </p></td>

  1263. </tr>

  1264. <tr>

  1265.     <td><a href="https://static.pinboard.in/w100/w100.070.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.070.jpg"/></a></td>

  1266.     <td>

  1267. And if you think that the purpose of the Internet is to <b>BECOME AS GODS, IMMORTAL CREATURES OF PURE ENERGY LIVING IN A CRYSTALLINE PARADISE OF OUR OWN INVENTION</b>, then your goal is total and complete revolution.  Everything must go.

  1268. 

  1269. <p>The future needs to get here as fast as possible, because your biological clock is ticking!

  1270. 

  1271. </p><p>The first group wants to CONNECT THE WORLD. 

  1272. </p><p>The second group wants to EAT THE WORLD. 

  1273. 

  1274. </p><p>And the third group wants to END THE WORLD.

  1275. 

  1276. </p><p>These visions are not compatible.

  1277. 

  1278.  </p></td>

  1279. </tr>

  1280. <tr>

  1281.     <td><a href="https://static.pinboard.in/w100/w100.071.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.071.jpg"/></a></td>

  1282.     <td>

  1283. 

  1284. 

  1285. <p>I realize this all sounds a little grandiose.You came here to hear about media selectors, not aviation and eschatology.  

  1286. 

  1287. 

  1288. </p><p>But you all need to pick a side.  

  1289. 

  1290. </p><p>Right now there's a profound sense of irreality in the tech industry.  All problems are to be solved with technology, especially the ones that have been caused with previous technology. The new technologies will fix it. 

  1291. 

  1292. </p><p> We see businesses that don't produce anything and run at an astonishing loss valued in the billions of dollars.  

  1293. 

  1294. </p><p>We see a whole ecosystem of startups and businesses that seem to exist only to serve one other, or the needs of very busy and very rich tech workers in a tiny sliver of our world.    

  1295. 

  1296. 

  1297. 

  1298.  </p></td>

  1299. </tr>

  1300. <tr>

  1301.     <td><a href="https://static.pinboard.in/w100/w100.072.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.072.jpg"/></a></td>

  1302.     <td>

  1303.     <p>At the same time, we hear grandiose promises about how technology will fundamentally improve the lives of every person on Earth, even though that  contradicts our own experience of the last thirty years.

  1304.     </p><p>There is something fishy about all this promised progress. The engine is revving faster and faster, we can see that the accelerator is pegged, but somehow the view out the window never changes.

  1305. 

  1306. </p><p>When we point out that Silicon Valley doesn't seem to be engaging the real world, that wages have been flat for thirty years, that Utopia seems further away than it's been in a generation, we get impatient excuses.  

  1307. 

  1308. </p><p>Tech culture is like a deadbeat who lives on your basement sofa.  You ask him:

  1309. 

  1310. </p><p>“When are you going to do all those things you promised?”

  1311. 

  1312. </p><p>“Oh, wait until everyone has a computer.”

  1313. 

  1314. </p><p>“They do.”

  1315. 

  1316. </p><p>“Okay, I mean wait until they're all online. ”

  1317. 

  1318. </p><p>“They are. Why isn't the world better?”

  1319. 

  1320. </p><p>“Well, wait until they all have smartphones... and wearable devices,” and the excuses continue.

  1321. 

  1322. </p><p>The real answer is, technology hasn't changed the world because we haven't cared enough to change it.

  1323. 

  1324.  </p></td>

  1325. </tr>

  1326. 

  1327. <tr>

  1328.     <td><a href="https://static.pinboard.in/w100/w100.074.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.074.jpg"/></a></td>

  1329.     <td>

  1330.     There's a William Gibson quote that Tim O'Reilly likes to repeat: "the future is here, it's just not evenly distributed yet."

  1331. 

  1332. <p>O'Reilly takes this to mean that if we surround ourselves with the right people, it can give us a sneak peek at coming attractions.  

  1333. 

  1334. 

  1335. </p><p>I like to interpret this quote differently, as a call to action.  Rather than waiting passively for technology to change the world, let's see how much we can do with what we already have.  

  1336. 

  1337. </p><p>Let's reclaim the web from technologists who tell us that the future they've imagined is inevitable, and that our role in it is as consumers. 

  1338. 

  1339. 

  1340. 

  1341. 

  1342. 

  1343. 

  1344.    </p></td>

  1345. </tr>

  1346. 

  1347. <tr>

  1348.     <td><a href="https://static.pinboard.in/w100/w100.075.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.075.jpg"/></a></td>

  1349.     <td>

  1350. 

  1351. 

  1352.   <p>The Web belongs to us all, and those of us in this room are going to spend the rest of our lives working there.  So we need to make it our home.

  1353. 

  1354.    </p><p>We live in a world now where not millions but billions of people work in rice fields, textile factories, where children grow up in appalling poverty. Of those billions, how many are the greatest minds of our time?   How many deserve better than they get?  What if instead of dreaming about changing the world with tomorrow's technology, we used today's technology and let the world change us?  Why do we need to obsess on artificial intelligence, when we're wasting so much natural intelligence?

  1355. 

  1356.    </p></td>

  1357. </tr>

  1358. <tr>

  1359.     <td><a href="https://static.pinboard.in/w100/w100.076.jpg"><img src="https://static.pinboard.in/w100/thumbs/w100.076.jpg"/></a></td>

  1360.     <td>

  1361.     <p>When I talk about a hundred years of web design, I mean it as a challenge.  There's no law that says that things are guaranteed to keep getting better.

  1362. 

  1363.     </p><p>The web we have right now is beautiful. It shatters the tyranny of distance.  It opens the libraries of the world to you. It gives you a way to bear witness to people half a world away, in your own words.   It is full of cats. We built it by accident, yet already we're taking it for granted. We should fight to keep it!

  1364.     <br/><br/><br/>

  1365.     </p><p>TUMULTUOUS, SUSTAINED APPLAUSE</p>

  1366.  </td>

  1367. </tr>

  1368. 

  1369. 

  1370. </table>

  1371.   </article>

  1372. </section>

  1373. 

  1374. 

  1375. <nav id="jumpto">

  1376.   <p>

  1377.     <a href="/david/blog/">Accueil du blog</a> |

  1378.     <a href="http://idlewords.com/talks/web_design_first_100_years.htm">Source originale</a> |

  1379.     <a href="/david/stream/2019/">Accueil du flux</a>

  1380.   </p>

  1381. </nav>

  1382. 

  1383. <footer>

  1384.   <div>

  1385.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  1386.     <p>

  1387.       Bonjour/Hi!

  1388.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  1389.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  1390.     </p>

  1391.     <p>

  1392.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  1393.     </p>

  1394.     

  1395.     <p>

  1396.       Voici quelques articles choisis :

  1397.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  1398.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  1399.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  1400.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  1401.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  1402.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  1403.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  1404.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  1405.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  1406.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  1407.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  1408.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  1409.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  1410.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  1411.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  1412.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  1413.     </p>

  1414.     <p>

  1415.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  1416.     </p>

  1417.     <p>

  1418.       Je ne traque pas ta navigation mais mon

  1419.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  1420.       conserve des logs d’accès.

  1421.     </p>

  1422.   </div>

  1423. </footer>

  1424. <script type="text/javascript">

  1425.   ;(_ => {

  1426.     const jumper = document.getElementById('jumper')

  1427.     jumper.addEventListener('click', e => {

  1428.       e.preventDefault()

  1429.       const anchor = e.target.getAttribute('href')

  1430.       const targetEl = document.getElementById(anchor.substring(1))

  1431.       targetEl.scrollIntoView({behavior: 'smooth'})

  1432.     })

  1433.   })()

  1434. </script>