davidbgk
/
larlet-fr-david-cache


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Dear Developer, The Web Isn't About You (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://sonniesedge.co.uk/talks/dear-developer">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Dear Developer, The Web Isn't About You (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://sonniesedge.co.uk/talks/dear-developer">Source originale du contenu</a></h3>
    <p>If you’ve ever wanted to see an old lady’s personal anger and rants about the modern web industry turned into a talk, you’ve come to the right place. </p>

<p>This is Old Lady Shouts At Clouds to the nth degree. </p>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/fabcfb9c9c19e8035e4f3bece7c679e704a7006b/8ccb2/images/talks/dear-developer/history-of-the-web/history.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>History of the Web</h2>
<p>I’m here to talk to you about the single biggest invention in human history. Some might say that invention is fire, or language. Some might say that it’s the printing press, or beer (actually, maybe it is beer). Some might say it’s the invention of electricity, or THE MASTERING OF THE ATOM.

<p>Some others, perhaps less drunk on beer and easily accessible literature, might say that it’s the Internet (lower or uppercase “I”). But no, this talk is about the invention of the World Wide Web. The good old Dub Dub Dub. Or, as we all just call it in the late 2010’s - the Web. </p>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/1d143ab13504b83e6d348e96703737bc9164771c/170b1/images/talks/dear-developer/history-of-the-web/not-a-single-invention.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Not a single invention</h3>
<p>Despite what Tim Berners-Lee claims, the Web wasn’t a single invention <a href="#1">1</a>. Yes, we know that one man <em>says</em> that he invented it (grudging thanks to Tim), but he did so on the back of a thousand other technologies, inspired and enabled to build by their previous work.
<p>The Web is incredible. It’s incredible because it’s stupid. It’s a collection of very stupid, or more accurately, very <em>simple</em>, technologies, all chained together to make something much greater.<a href="#2">2</a>
<p>Let’s take a - very simplified! (and possibly horrendously simplified) - look at the history of the Web, and the simple technologies that allowed it to be built. Oh, and because we don’t want to be going all the way back to Mog hitting Gog over the head with a handy stone, and proclaiming that little patch of scrubland HIS (inadvertently inventing the first nation state) we’re just going to concentrate on the last 100 years.
<aside class="comp-talk__note">
<p id="1">[1] I am totally joking and fully accept Tim’s world-changing single-person invention.
<p id="2">[2] All credit to Jeremy Keith for this notion of the web as a evolutionary product, rather than a single invention - <a href="https://aneventapart.com/news/post/resilience-building-a-robust-web-that-lasts-jeremy-keith-an-event-apart">his talks on this topic are fascinating</a>, and far more relevant and detailed than anything here.
</aside>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/0e50eaa353952af565c17480045a2b50bab0f14d/e1371/images/talks/dear-developer/history-of-the-web/telegraphs.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Telegraphs</h3>
<p>Telegraphs. These things completely changed the face of the planet. A simple electrified wire, down which were sent simple beep beep beep messages.

<p>Before the invention of the telegraph, messages to even the nearest city could take days. Messages to another country would take weeks, while messages to another <em>continent</em> would take months.

<p>With the invention of telegraphs even the trans-continental message deliveries suddenly came down to <em>seconds</em>. Can you imagine how much of a headfuck that must have been? Months to seconds? People must have felt like they were living in science fiction.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/73d67d4b5ecd9793af330b125261ba864d5bef56/39d86/images/talks/dear-developer/history-of-the-web/telephones.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Telephones</h3>
<p>With the invention of telegraphs we had the cultural idea of messaging-at-a-distance-via-electricity. It wasn’t too soon before the same kinda lines were being used to transmit voices. Add a primitive microphone and speaker, replicate that at the other end, and you were suddenly able to talk to people thousands of kilometers away.
<p>Soon after that we would realise that everyone was miserable and that no one actually <em>wanted</em> to talk to each other. But the damage was done.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/5ab6d893f460d73c0e93dc5251b87a6d45b44d60/9a195/images/talks/dear-developer/history-of-the-web/primitive-computer-networking.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Primitive computer networking</h3>
<p>Soon after telephones become commonplace we saw the rise of computers. Almost straight away people thought about getting them to talk to each other instead of humans having to do the boring talking.
<p>This led to the invention of the modem, which as you can see in the slide, was at first a bulky device that you placed your phone speaker and microphone into. The computer would then scream down the phone to another computer, who would
happily scream back, singing the song of their people. Computers could now talk to each other!
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/245e72840278e891f534525ed49aaa688b12c969/bbf00/images/talks/dear-developer/history-of-the-web/standardised-computer-networking.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3> Standardised computer networking</h3>
<p>But bespoke one-on-one chat wasn’t enough for computers. No, they wanted group chats. Within a few years of the first modems the industry had standardised on a routine set of modem commands that allowed any computer to talk to any other computer. This was the <a href="https://en.wikipedia.org/wiki/Bulletin_board_system">Age of the BBS</a> and the invention of TCP/IP.
<p>The TCP/IP specification, incidentally, gave us Postel’s Law, possibly one of the most beautiful Laws ever:
<blockquote>“Be conservative in what you do, be liberal in what you accept from others.”</blockquote>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/aa94954b02752afee59ed12d50ff5a3f60803e6d/1ad4f/images/talks/dear-developer/history-of-the-web/the-internet.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>The Internet</h3>
<p>Eventually all these computer systems and modems reached a critical mass, and they merged together to give us what we now call the Internet.
<p>The <strong>INTER</strong>connected <strong>NET</strong>work of computers.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/564c20cf46966afc9aa779023369a6ccc12c9e99/c1572/images/talks/dear-developer/history-of-the-web/application-protocols.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Application Protocols</h3>
<p>Because the Internet allowed so many different types of things to run on it, it saw the rise of specialised application protocols. Things that we know and use today, and underly so much of what we do: SSH, DHCP, Telnet, FTP, and of course… HTTP.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/ef5363ce77f263b500c5b5491f3a9a56ca7a028d/1f180/images/talks/dear-developer/history-of-the-web/uris.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Common naming conventions</h3>
<p>Once non-technical people started using the Internet they asked the pertinent question of “what the actual fuck are all these numbers and dots about?”.

<p>In response some clever boffin came up with the Domain Name System, while another figured out Email Addresses. These started to consolidate into Uniform Resource Identifiers, and now we’re all quite used to talking about Twitter Dot Com and <a href="mailto:orangefuckface@whitehouse.gov">orangefuckface@whitehouse.gov</a>.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/f24647a6b0b2e01d21831824ed8e44197567a7f9/37148/images/talks/dear-developer/history-of-the-web/html.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>HTML</h3>
<p>Finally, in this simplified chain of inventions, we reach HTML. “Vague, but exciting” as Tim Berners-Lee’s supervisor said, <em>completely</em> being chill about one of the greatest ever inventions, and the thing that provides us all with work as Web Developers.
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/a95c108618564786fe4c7ee91655e3130e3e96ad/898f4/images/talks/dear-developer/the-www-is-strong/the-www-is-strong.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>The WWW is strong</h2>
<p>So why do I mention all these things? Well, I really want to get the point across that the web is <strong>strong</strong>. Enormously, stupidly, strong.
<p>We rarely stop to think about how amazing this is! It’s strong because of these simple, dumb technologies that it is built upon.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/0de79e6106bd5738ec46d5eab0f70e9881b73e2d/72ef3/images/talks/dear-developer/the-www-is-strong/html-is-suggestive.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>HTML is <del>a bit suggestive</del> declarative</h3>
<p>Especially HTML. It is strong because it is such a simple, <a href="https://en.wikipedia.org/wiki/Declarative_programming">declarative language</a>. It <em>requests</em> things from the browser. Flirts with it. It doesn’t <em>demand</em>, like other languages might.

<aside  class="comp-talk__note">
<p>Technically, HTML is a domain-specific markup language that requests an outcome, and doesn’t care how that is accomplished. This is in stark contrast to imperative languages, which explicitly details what a program should do at every moment of its state.
</aside>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide">

<video class="comp-talk__image" poster="https://sonniesedge.co.uk/images/talks/dear-developer/the-www-is-strong/demo.jpeg" src="https://sonniesedge.co.uk/images/talks/dear-developer/the-www-is-strong/demo.mp4" width="300" controls="false" loop="true" autoplay="true">

</div>
<div class="comp-talk__text">
<h3>Robust</h3>
<p>It is this flirty declarative nature makes HTML so incredibly robust. Just look at this video. It shows me pulling chunks out of the Amazon homepage as I browse it, while the page continues to run.
<p>Let’s just stop and think about that, because we take it for granted. I’m pulling chunks of code out of a running computer application, AND IT IS STILL WORKING.
<p>Jut how… INCREDIBLE is that? Can you imagine pulling random chunks of code out of the memory of your iPhone or Windows laptop, and still expecting it to work? Of course not! But with HTML, it’s a given.
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/158274668cbcf94740994a852bcad07222134904/f2266/images/talks/dear-developer/the-www-is-everywhere/the-www-is-everywhere.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>The WWW is everywhere</h2>
<p>It is this <em>robustness</em> of HTML that has made the WWW so incredibly durable. It’s why it dominates the planet. In the conditions that HTML was born and raised in a strict imperative language would have broken 100%.
<p>But HTML is utterly flexible, and survived.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/d346c0923c6e27a157b36cb3ad20c09afa460b6c/97703/images/talks/dear-developer/the-www-is-everywhere/no-restrictions.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>No restrictions</h3>
<p>Of course, it also benefitted from the fact that from the start there was no restrictions on HTML, HTTP, or the Web itself. Anyone could build a browser, and anyone could download a browser. On any machine, and on any Operating System.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/afd64ca59ec503f07bcc6a714dbc1c457fbb87c4/29b62/images/talks/dear-developer/the-www-is-everywhere/anyone-could-publish.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Anyone could publish</h3>
<p>On the early WWW anyone could publish anyting. This meant that from the start the early web was weird as fuck. It was a place of Geocities, Angelfire, and Neopets.
<p>People stuck weird things on there and just didn’t care. Want to declare your love for Justin Beiber? Go ahead! Want to show off your stolen ladies shoe collection? Please, strange man, go for it.
<p>People had never had such a way of easily expressing themselves before, and they jumped on this chance with gusto.
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/2bfacabe61a0d40943e7f0294b0c898041557865/4a388/images/talks/dear-developer/dark-times/dark-times.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>The dark times</h2>
<p>But… this initial golden age of the web wasn’t destined to last.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/6c925f02692d8b9985743a3cbcea0393217bddc7/18ada/images/talks/dear-developer/dark-times/balkanised.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Balkanised</h3>
<p>What used to be free and weird slowly became commercialised and balkanised.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/84aaefdc6bf588beb136b29b8d0e4a61b1127dd0/2fee3/images/talks/dear-developer/dark-times/browser-wars.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Browser wars</h3>
<p>Some of you younger folk might not remember it, but at one point the WWW effectively got split between two browsers: Netscape 4.7 and Internet Explorer 5. People proudly added badges saying “Best viewed with [$BROWSER_OF_LOYALTY]”, and they didn’t have any shame about it. Devs had to build two versions of their site, just so that users of either browser would have an identical experience.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/236c4f79f197d034e17c113ed2447b5fd7f0a172/0e848/images/talks/dear-developer/dark-times/frozen-innovation.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Frozen innovation</h3>
<p>The Browser Wars were one of the most damaging periods of the WWW’s history. Browser development completely froze, and all innovation stopped. Most people took the web to be stagnant at that point. People left the industry in droves.
<p>All was silent and still for eons.
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/69b2f708ae03fa040c81c3d963eae2fd13a4187b/2bf95/images/talks/dear-developer/responsive-web-design/iphone.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>Responsive Web Design</h2>
<p>But then history restarted. And the restart came from an unexpected direction.
<p>Because… the first iPhone appeared. While it wasn’t the first smartphone by any means, it was certainly the first <em>popular</em> smartphone. It completely changed the landscape of the Web.
<p>Because it was our first great lesson in diversity.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/870dd2a1411017341dc422b186c56931e8daed0e/bfbed/images/talks/dear-developer/responsive-web-design/responsive-web-design.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Lessons in Diversity</h3>
<p>Before that we had effectively assumed that a person on the WWW was making use of one of two browsers, on the desktop, using a mouse (and <em>maybe</em> a keyboard).
<p>With the release of the iPhone we suddenly had to deal with a new browser (Safari for iOS), a new screen ratio (portrait, rather than landscape), a new screen size (just 320px across!), a new input interface (touchscreen, rather than a mouse), and everything else that went with using a site on a mobile device.

<p>We <em>had</em> to learn about diversity of people and devices. We were forced to. Maybe not for the right reasons - we did it because we didn’t want to miss out on the market opportunity that mobile devices represented - but certainly with the right effect: we didn’t want to exclude people!
<p>We fell on <a href="https://ethanmarcotte.com/">Ethan Marcotte</a>‘s wonderful Responsive Web Design with the fervour of a drowning man clutching at a lifebelt.

<aside class="comp-talk__note">
<p>Okay, this is another of my Simplistic Explanations. But I’m good at them, no?
</aside>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/01f588c4379ae44e0562e7c781a377ca83c0622b/59afb/images/talks/dear-developer/responsive-web-design/pyramid-of-robustness.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>The Progressively Enhanced Pyramid of Robustness</h3>

<p>This is a period of time that gave us incredibly robust websites. It was a period when we made the <a href="https://en.wikipedia.org/wiki/Separation_of_concerns#HTML,_CSS,_JavaScript">Separation of Concerns</a> a reality.

<p>The Pyramid of Robustness (&copy; C Owen Enterprises Ltd) was a thing that we cared about. We put the things that were the most solid and reliable at the bottom of the pyramid - in this case server-generated HTML. We then added on a presentation layer, and then an interaction layer.
<p>The pyramid ends up with those things that are most fragile, and least <em>essential to the user</em> nearer the top.
<p>The fragile things don’t take the weight of things above, in the same way as we acknowledged that, well, you don’t place the table on top of the delicate vase.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/b09618dcaa1a9356475888d0f188cd5913a4f6fa/80907/images/talks/dear-developer/responsive-web-design/summer-of-love.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Summer of Love</h3>

<p>I’m not an Apple lover (she says, writing this on a Mac, like a good little web developer), but my goodness, the iPhone was a gift to us in that period. Diversity was understood; we loved and embraced different users and devices.

<p>It was the Web’s Summer of Love!
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/f6b5ff84d9c236a3190c3c18e9cd5869a1c990db/6fd3d/images/talks/dear-developer/history-repeating/history-repeating.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>Repeating the errors of the past?</h2>

<p>“That’s a wonderful dollop of nostalgia there, old lady”. But my nostalgia makes me ask: are we starting the dark times cycle again?

<p>Maybe in different ways, and with different technological aspects, but ultimately with the same results: we’re once again choosing to exclude people.
</div>
</section>

<section class="comp-talk__section">

<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/425c711df06ca7ca06aaaba97fb8f24b646ae9c4/2fbc1/images/talks/dear-developer/history-repeating/large-downloads.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Multi megabyte average</h3>
<p>We have got to the point where sites require ~2.5 megabytes to download, and t<a href="https://www.wired.com/2016/04/average-webpage-now-size-original-doom/">he average content-based webpage is now bigger than a copy of Doom</a> (a fully-fledged 3D shooter game).

<p><a href="http://www.heydonworks.com/">Heydon Pickering</a> <a href="https://twitter.com/sonniesedge/status/913282229408866304">reminded me recently</a> that the 90s game Elite II simulated the entire Milky Way galaxy, and was still smaller than today’s average webpage.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, <a href="https://twitter.com/heydonworks?ref_src=twsrc%5Etfw">@heydonworks</a> just reminded me of Elite II and that you could once fit an entire ~galaxy~ into less space than today&#39;s average website. <a href="https://t.co/YbQFe65cF4">pic.twitter.com/YbQFe65cF4</a></p>&mdash; Charlie Owen (@sonniesedge) <a href="https://twitter.com/sonniesedge/status/913282229408866304?ref_src=twsrc%5Etfw">September 28, 2017</a></blockquote>

<p>Most of this size is due to sites not offering srcset variants on their images, and not taking the time to optimise images on those that they do offer. Some of it is due to third-party tracking, advertising, and marketing scripts (marketeers may well be the most script-heavy people in any organisation).

<p>A lot of it (but not most, by any means) is due to JS application bundles and third party scripts used to run a page (such as jQuery - still a major force on most of the web).
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/8dcd4258e736f6e6fc78958398d9043a8959a831/571fc/images/talks/dear-developer/history-repeating/flighty-users.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Site abandonment</h3>
<p>But you might make a phhffftttt noise about a mere 2.5mb.

<p>Yet consider this: we know that <a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/">53% of users leave a site</a> if the time to user interaction is greater than 3 seconds.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/b1c2dfbb54edc6a8e681abd6b1287b5bac533017/0633b/images/talks/dear-developer/history-repeating/long-loading-times.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Site slowness</h3>
<p>Yet we just don’t care about page load times. Does the average site load within 3 seconds? Does yours? We don’t test this regularly. It is not part of our standard metrics in our industry, despite it being so tightly correlated with user satisfaction.
<p>You might say “well, most users are on fast laptops, so it doesn’t matter”.
<p>Nope.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/db825982687e2d6061586d8ae34c689a9f9fff24/1c191/images/talks/dear-developer/history-repeating/most-average-phone.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Most average phone</h3>
<p>They’re on this.
<p><a href="https://building.calibreapp.com/beyond-the-bubble-real-world-performance-9c991dcd5342?gi=d84bafb3e30a">The Moto G4 is the most average device on the planet in early 2018</a>.
<p>It’s no coincidence that this is the phone that I use every day.
<aside class="comp-talk__note">
<p>(Actually, it is sheer fucking coincidence. I just happened to buy a Moto G4 - way before reading the linked post - because it was the best combination of price and performance for me. But it sounds very Thinkfluencer if I claim that.)
</aside>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/40c248b5818cb156fe9f1d7750dae80926f1ecb9/85f87/images/talks/dear-developer/history-repeating/a11y-who.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>A11y-who?</h3>
<p>It’s not just performance where we have inexplicably low industry knowledge. Accessibility is still an unknown to most developers. Personally, this one blows my mind - it is still somehow not a core requirement of being a front end developer. It should be a <em>core skill</em>, the default on any frontend developers resume.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/af910ce1ea50f14873ced507bab6aecfe43688dd/d5111/images/talks/dear-developer/history-repeating/js-by-default.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>JavaScript by default</h3>
<p>And in 2018 we’re at a point where Javascript is being seen as a valid content delivery mechanism. For HTML content! Not interactive applications, not games, but simply long form textual content.
<p>Instead of HTML being generated on, and delivered from, the server, a JS bundle is sent to the client, which is then decompressed and initialised and then requests data, which is then sent from the server (or another server, as now everything is a service) as JSON, where it is then converted on the fly into HTML.
<p>Permit an old lady to rant here…
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/812a7ce98c1d7221c89e3aedff9ded16db131e11/cb1bd/images/talks/dear-developer/history-repeating/commuting-hell.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Commuting hell</h3>
<p>Because to me, this is rather akin to building a Boeing 747 to commute to work.
<p>Bear with me in this analogy. I’m not high, I promise.
<p>It’s technically <em>amazing</em> that you’ve built this Boeing 747. It’s incredible that you’ve somehow squeezed it into your garage, and that you get into it every morning, and taxi out onto the road, and then thunder down your side street until you reach takeoff speed, and then you swoop up up up! into the sky, where you circle for a while until you find a spot at your company car park 2km away, and you then set it down, somehow, magically, into the parking space.
<p><em>But</em>…
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/e370d485fb44164b1068a6cad98e875661837554/03409/images/talks/dear-developer/history-repeating/commuting-fun.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Commuting fun</h3>
<p>Wouldn’t it have been better, in every conceivable, practical, and financial way, to <strong><em>just buy a fucking bicycle?</em></strong>
<p>Yes, it’s technically amazing to build your 747, or have your JS build a content page, but it’s utterly over-engineered and impractical for most occasions.
<p>I’m laying it out here - I’m marking my line in the sand: <strong>JavaScript only when there’s no other choice</strong>. It shouldn’t be the first port of call for building a site.
<p>All of this fascination with doing things JS-first has led to an awful situation of industry fragility.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/6f387b22c487c6ba37bdd006b322d8e967726194/3e45a/images/talks/dear-developer/history-repeating/no-longer-robust.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Sites no longer robust</h3>
<p>Sites are no longer robust! Sites that used to be resilient and tough now die easily.
<p>Bad network conditions, blocked javascript, unexpected Content Security Policies, badly set CORs headers, JS blocked by network administrators (this happens so much more often than most realise), JS inadvertently blocked by adblockers, people <em>turning off JS</em> (Yes people do this. Yes it’s totally valid, and their right as a user).
<p>All of these things can cause a JS-dependent site to fall over and die, 100%. A site that should be robust in the face of all these things, because of the declarative and flexible nature of HTML and CSS, is now fragile and brittle.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/75fb54af1414f1d09bc2bcb17fbedd161c47cdc8/adb7b/images/talks/dear-developer/history-repeating/pyramid-upside-down.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Upside-down Pyramid of Robustness</h3>

<p>In fact, it’s as if we’ve turned the Pyramid of Robustness upside down. We’ve taken the most fragile part, and placed it at the bottom, taking all the weight!

<p>The thing most likely to shatter catastrophically <em>shouldn’t be taking the brunt of the weight</em>.

<p>If you told this to a physical materials engineer, or a construction worker, they would look at you in <em>horror</em>.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/addd17df52b1db766157342cddaa4eb10e14aa81/03c26/images/talks/dear-developer/history-repeating/pyramid.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Upside down pyramid</h3>
<p>They would look at your pyramid of code and say “You do <em>know</em> that you’ve built that thing upside down mate?” and then they would wander off for a smoke, shaking their head and muttering about “fucking muppets”.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/b66a5233bab51e7f4e3c582b88547c100974327e/878c2/images/talks/dear-developer/history-repeating/exciting-tech.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>npm install exciting-tech</h3>

<p>In fact, this is a prime example of how we have a new collective focus. We have entered the Age of Programmerisation (yes, I just made that up, and yes it is terribly named). We now talk about tooling, packaging, and build tools. We talk about the “Modern Ecosystem” and Code Bootcamps. We get excited at the latest article on how Bleeding Edge Developer De Jour has done yet another sexy exciting thing that we must all jump onto doing.
<p>You didn’t jump with the rest? Too bad, you’re now, like, totally uncool.
<p><em>takes more anti-anxiety pills</em>
<p>Don’t get me wrong on this. It’s not like I’m not immersed in this culture myself. I use these things every single day. In my day job I write modularised JavaScript in ES6. I publish npm packages. I worry about state management.
<p>But the cultural focus is on developer happiness, on developer <em>fun</em> and ramping up of code-related skillsets.
<p>“How does this benefit users?” has suddenly gone missing from our vocabulary.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/3914850ed966ff49f2ae7da30336864747abaa0f/c5bde/images/talks/dear-developer/history-repeating/suddenly-exclusionary.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Suddenly exclusionary</h3>
<p>We’re back to building sites that are not for everyone - huge, bloated sites, running fragile imperative code on the users local device. We have started to explicitly say “I think you should have this level of tech, processing power, and bandwidth before I think you’re eligible to use my site”.
<p>Why? Because we want to have our fun with technology. Because we don’t want to think about “edge case” user needs.
<p>“Edge case” is, to be frank, a phrase that should be banned from all developer conversations (and then tattooed onto the forehead of anyone who continues to use it).
<p>When we say “Edge Case” we mean “Stress Case”. In their book, <a href="https://abookapart.com/products/design-for-real-life">Design for Real Life</a>, <a href="https://meyerweb.com/">Eric Meyer</a> &amp; <a href="https://www.sarawb.com/">Sara Wachter-Boettcher</a> point out that what we glibly call an “edge case” is normally an enormously stressful event for a user.
<p>It often accompanies high emotions, stress, physical problems, financial problems, etc. When we discount and dismiss the “edge case”, we’re actually saying “I don’t care about that particular user’s stressful situation”.
<p>n succinct example I saw recently was an American chap trying to use an airline website while holidaying in SE Asia. His flight had been cancelled and he were trying to rebook. However, due to terrible internet connectivity in his location the site just wasn’t loading - it was trying to pull down huge amounts of images and JS that were simply not happening on that connection.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/webperf?src=hash&amp;ref_src=twsrc%5Etfw">#webperf</a> in Cambodia: Yesterday I tried to book a domestic flight through various booking platforms and airline sites. Gave up after an hour and called a travel agent to book at a premium.</p>&mdash; Holger Bartel (@foobartel) <a href="https://twitter.com/foobartel/status/946299864551276544?ref_src=twsrc%5Etfw">December 28, 2017</a></blockquote>

<p>He ended up calling a travel agent via telephone and rebooking. How much of an utter failure is your website if your drive someone off it and into another company’s hands?
<p>Now imagine if that user had been able to disable Javascript and images and just have the HTML delivered. It wouldn’t have been pretty, but it would have <em>worked</em>.
<p>I wondered about this, and went to check out the website in question.It turns out that no, you can’t. The website is fully JS-driven. If you disable JS then you just get a blank page.
<p>On the same theme, here’s another example. An Angular JS app, failing because of flaky airport wifi.

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Your fancy AngularJS apps are all very nice until you&#39;re trying to check in for a flight on flaky wifi: <a href="http://t.co/eTEXHE5XL2">pic.twitter.com/eTEXHE5XL2</a></p>&mdash; Matt Andrews (@mattpointblank) <a href="https://twitter.com/mattpointblank/status/595627536748535808?ref_src=twsrc%5Etfw">May 5, 2015</a></blockquote>

<p>These are real situations, for real people. And these are only the ones that are reported, because the people in the stress situations are web professionals. How many thousands, millions, of interactions occur every day that no one reports because they’re “just” regular users?
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/284d2f1f5b03d4ebed2b54443e16660e3a2a380e/a38bb/images/talks/dear-developer/history-repeating/what-can-we-do.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>What can we do?</h3>

<p>Maybe this is all a bit negative. You can only cope with so much bile can’t you, lovely reader?

<p>What can we actively do, before it’s too late? What can we do to stop this cycle from restarting once again?

<p>What can we do to make the web better?
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/8973325e10bb655bcee61b2b8cb72a5d14fd15cc/438e0/images/talks/dear-developer/lessons-in-humanity/lessons-in-humanity.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>Lessons in Humanity</h2>

<p>If we want to make the web better for people then the most important thing that we can do is to learn the basics. Not of technology, but of our fellow humans.

<p>Because, as we’ve show earlier, empathy is the most important skill that a developer can have.

<p>Our job is 100% about people, about our fellow humans. How can we do an amazing job for them if we don’t understand who we are building for?
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/9e3664a432846c0301551cdbf17ab77b4879270f/5f493/images/talks/dear-developer/lessons-in-humanity/empathy-is-a-learned-skill.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Lesson 0: Empathy is a learned skill</h3>

<p>We somehow have this notion that empathy is something that you’re either born with, or you simply don’t have. Our friend Oppressive Patriarchy tries to tell us that 50% of the planet is incapable of empathy, that they should leave silly soft things like that to the ladies.

<p>Which is of course, absolute bollocks.

<p>The truth is that empathy is a skill, a muscle, that can be exercised and made stronger. If you practise empathy every day and your ability to empathise will only get stronger! So here’s a few exercise lessons for you to take time to think about and practise.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/58a41fb95911ba780670eea4f377ae095cc27d77/f65a7/images/talks/dear-developer/lessons-in-humanity/not-everyone-is-alike.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Lesson 1: Not everyone is alike</h3>

<p>Exercising our empathy allows us to be more aware. More aware that not everyone is like us. Because, let’s face it, if you’re reading this then you’re likely a typical web developer: white, male, under 30 years old. Our entire industry is incredibly biased towards this one group.

<p>But the rest of the world isn’t like you. It’s beautifully, hugely, impossibly diverse! This diversity means that assumptions based upon your own experiences and needs will not easily transfer into the rest of the world!
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/4eb99f24856472ed1b78dddd008d9f560a842c8c/e379c/images/talks/dear-developer/lessons-in-humanity/not-everyone-is-rich.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Lesson 2: Not everyone is rich</h3>

<p>If you’re reading this then you’re likely to be quite rich. Hold on, hold on, read the rest of what I have to say before you storm off.
<p>It’s true, we’re rich. Even compared to our national peers we’re considered at least “well-off”. In comparison to the average person on this planet?: we are fucking <em>rolling</em> in money.
<p>Yes, I know it doesn’t feel like that always. This statement certainly doesn’t account for personal circumstance or other axes of oppression (I will receive tweets about this, I know it). But as a rule of thumb, it’s a valid one. Techies are more well off than most other people.

<p>The way we just buy technology, how we will happily splurge on an Alexa or a new laptop. The way we buy new toys on a whim. Check out the tech apparel of your coworkers next time you see them. This is not normal compared to most people on this planet.

<p>I’m not saying this to make you feel bad. It’s just something that you should bear in mind. If you ever think “ffs, why don’t those users with old laptops and browsers just <em>upgrade</em>??” thentry and think about their circumstances. Ask “can they afford to do so?”, and “will upgrading their laptop or phone mean that they can’t eat this month?”.

<p>Empathy, and kindness, as always.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/588d74517944f8c2cd4bce03e00c8d228cb339fc/0ba9a/images/talks/dear-developer/lessons-in-humanity/not-everyone-is-well-connected.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Lesson 3: Not everyone is well-connected</h3>

<p>I’ve mentioned this a few times, and it is such a glossed-over part of our industry.

<p>We tend to think that a “poor Internet connection” can only occur in a little wooden hut, somewhere in Africa or the Indian subcontinent. We have a hugely racist view that this kind of thing can only occur in rural zones of these continents. “Poor African people,” we think, while filling in our Oxfam donation forms, “How awful for them to not have broadband.”
<aside class="comp-talk__note">
<p>Internet connectivity in Africa and SE Asia is enormously complicated. Please take the time to watch <a href="https://csswizardry.com/">Harry Robert</a>‘s <a href="https://beyondtellerrand.com/events/munich-2018/speakers/harry-roberts">Performance Matters</a> talk to learn more about this.
</aside>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/11aedd263271703880acb2de3aa8613376e606c8/9e002/images/talks/dear-developer/lessons-in-humanity/usa-on-dialup.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>30% of rural USA is on dial-up</h3>

<p>But the reality of poor connections is actually closer to home.
<p>30% of the rural USA is closer to dial-up speeds than broadband speeds.
<p>Yup, you read that right. While urban broadband users are on 3.1 megabytes per second, rural users are lucky to achieve a mere 500 kilobytes per second in comparison.
<p>Guess how long our average webpage from earlier will take to download on this kind of connection? Go on, guess.

<aside class="comp-talk__note">
<ul>
<li><a href="https://www.fcc.gov/reports-research/reports/broadband-progress-reports/2015-broadband-progress-report">https://www.fcc.gov/reports-research/reports/broadband-progress-reports/2015-broadband-progress-report</a>
<li><a href="http://thehill.com/opinion/technology/358839-the-digital-divide-in-rural-america">http://thehill.com/opinion/technology/358839-the-digital-divide-in-rural-america</a>
</ul>
</aside>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__text">
<h3>Download of eons</h3>
<p>Between 60 and 360 seconds, depending on the line quality.
<p>Your website had better be <em>amazing</em> for it to justify that length of download time.
<p>You can see why people might want to disable images and JS if it means a quicker download. You can certainly see why they pop a blood vessel when you send them adverts that they don’t want to view!
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/985a9ef02de76bd1ce1152aac26ba99f18b19340/44baf/images/talks/dear-developer/lessons-in-humanity/not-everyone-is-able-bodied.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Lesson 4: Not everyone is able-bodied, or able-minded</h3>

<p>Our final lesson. Not everyone is able-bodied, or neurotypical.
<p>This is, like connectivity, heavily laden with stereotypes. Able-bodied people assume that a disability will manifest as someone using a wheelchair, or maybe as a completely blind person with a guide-dog.

<p>But the reality is that disability covers a huge gamut of issues. Yes, wheelchair users and blind people are part of that. But a person does not have to be 100% a wheelchair user, nor do they have to be 100% blind. Percentages exist!
<p>Disability also covers things like colour blindness, arthritis, motor control conditions such as Parkinsons or MS. It can be a neurological condition, such as ADHD, autism, or depression.
<p>There are enormous varieties of disabilities. While you do not have to have a medical knowledge of each one, you must be aware of the range of problems.
<p>Most importantly, you must be aware that everything you build could have an effect on any disability.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/489bf1f39536f32dfa1062aca8c9e9f3a5151ac5/374b9/images/talks/dear-developer/lessons-in-humanity/empathy-is-our-job.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Empathy is a fundamental part of our jobs</h3>

<p>Don’t worry if you haven’t thought about these things before. There’s no checklist on the human experiences! You may only just becoming aware of these things as you read this! That’s okay! We all have to start somewhere.

<p>But once you’re aware, once you’re are aware of the diversity of people and experiences, you need to adapt your thinking.

<p>Because, as an industry, we should know these things. We should <em>all</em> know these things. Because our job is about people. About building things for other.

<p>Our job is fundamentally about empathy.
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/d81a184ed1f44452161247e2e2b52e25681fbd0e/cc5c0/images/talks/dear-developer/building-with-empathy/building-with-empathy.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>Building with Empathy</h2>

<p>So, fantastic, you’ve got this far (well done!) and you’re ready to start designing with empathy! But what does empathy, accessibility, performance, etc mean in practise.
<p>Well, let me give you a non-technical practical example.
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/e33747376f62653f164b0d2cbf4e6e82c6cdba5e/00cd6/images/talks/dear-developer/building-with-empathy/doorknobs.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Doorknobs</h3>

<p>Yes, doorknobs. A weird analogy, but once again, please bear with me.
<p>Now, both of these are lovely, beautiful things (as far as doorknobs go). Both of them are made from the same materials, both of them cost the same to manufacture.
<p>However, one of them works for all people, while the other deliberately excludes huge segments of the population.
<p>Such a simple thing, but offering a lever rather than a rotating knob means that the door becomes usable by people with arthritis, people who have hand or arm amputations, or people with hand/arm injuries.

<aside class="comp-talk__notes">
    <p>Blame <a href="https://laurakalbag.com/">Laura Kalbag</a> for the doorknobs analogy - she originally came up with it in her book <a href="https://abookapart.com/products/accessibility-for-everyone">Accessibility for Everyone</a>
</aside>

</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/8bfec8b161f63c7808bc1cd7541d9f3a952cb494/cc8f7/images/talks/dear-developer/building-with-empathy/universal-case.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Universal case</h3>
<p>Designing for this most fundamental case helps a whole host of other use cases.
Think about people carrying a baby, or having both hands full of shopping bags. The lever design helps them too.
<p>So, given that both these doorknobs cost the same and look just as nice… well, what kind of fucking awful person would you be to deliberately <em>not</em> use the accessible version?
<p>Similarly, when we build our websites we can build sites that are absolutely as beautiful as any other site, but we can choose to use techniques that work for everybody, in any condition.
<p>Designing sites universally, designing them so that they work for people in the most stressful or dreadful situations, helps people in <em>all</em> situations.

<aside class="comp-talk__note">
<p>Microsoft’s <a href="https://www.microsoft.com/en-us/design/inclusive">Inclusive Design</a> initiative is well worth reading here. There’s one line in there that sums up this whole mindset beautifully: “Constraints are beautiful”.
</aside>
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/d94640912fd14aa3ed8a2f14cd4cb297af0f5e79/f32c7/images/talks/dear-developer/building-with-empathy/basic-research.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Basic research</h3>

<p>So how do you start on this journey of building products that are robust and universal?
<p>To me the first thing is to figure out your users core journey (or journeys). On every website the user is trying to accomplish <em>something</em>. <a href="#3">3</a>

<p>Take, for example, a site for a new restaurant. What a visual treat to build! We can add sumptous photos of the food, we can add little animated waiters that march across the page, thrusting bowls of pasta into the air, while a full-screen video of the owner pleading with your to visit loads and plays in the background.

<p>But in the end all the user wants to find out on the site is:

<ul>
<li>The address.
<li>The opening times.
<li>The menu options.
</ul>

<p>That’s it.

<p>It’s same for every sector. Find our what your user needs first, then build around that. Developing anything more than that is just… pointless.
<p>Hopefully you’ve got access to UX research for the product that you’re building. <a href="#4">4</a> If you don’t, stop right here and go sort that out before going any further.

<aside class="comp-talk__note">
<p id="3">[3] Well, maybe with the exception of advertising fluff sites - my condolences if that is what you must work on.
<p id="4">[4] Okay, maybe not in your average advertising design agency. But, once again, I’m sorry that that is where you must sell your labour. But everywhere else, with products that have a <em>purpose</em>, you should have that.
</aside>

</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/bbb6bcad60d206b98a3130d50392fa56879ef6ed/022a2/images/talks/dear-developer/building-with-empathy/html.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>HTML</h3>

<p>Now that we know them, get these core journeys quickly into HTML. And yes, I do mean <em>just</em> HTML, delivered fresh from the server.
<p>Test <em>this</em> with your real users. Honestly! I know this may sound horrific to some (“we can’t show the user something <em>this</em> low fidelity!”) but HTML will form the basis your site! By testing the HTML, you’re testing the very foundation of your Robustness Pyramid. You’re testing the pure form - the <em>essence</em> - of your site.

<p>When I say “this HTML will form your site” I mean that also. Don’t treat this as prototype code. Treat it as the first iteration of your website.

<p>By designing with HTML initially you’re testing how your site works on the most fundamental level. You’re testing how it will work from an accessibility point of view. You’re testing how it will look to screenreaders. You’re testing how it will look in poor network conditions.

<p>And you know what? This is 100% universal! Assuming you’ve built it using semantic HTML (and why <em>wouldn’t</em> you do that?) it will be completely accessible.

<p>Now, let’s look at a real world example, from a project I recently worked on. Please prepare yourself, there is some unstyled HTML coming up.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/f3476628bff32f270053903d9c28205df9019b2f/35f16/images/talks/dear-developer/building-with-empathy/universal-html.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Universal HTML</h3>

<p>That’s it. Literally just HTML. It’s ultra basic, but it works on everything.
<p>With no styling, no javascript, and even no images, there is literally nothing to fail, bar the server that generates the HTML and the network that passes it to the server.
<p>You can build this initial iteration using your backend language of choice. I like seeing a variety of backend languages. Diversity of technology is a great thing!
<p>Of course, there’s nothing to stop you componentising everything right now. You don’t have to write raw HTML files by hand to do this! (well, you can - I ain’t here to spoil your masochistic fun). Anything that can compile fragments into HTML is great. :D
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/bd295e095743d80516e24d5004ca2b5e25d92272/39536/images/talks/dear-developer/building-with-empathy/universal-css.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Universal CSS</h3>
<p>Now that we’ve created our universal HTML, let’s create some universal CSS.
<p>Now, this is a slightly more tricky one, as there’s a few ways of delivering CSS that works for everybody. But for this example I’m going to show a two-stage approach. There are other equally valid ways to do this, but I’ll concentrate on the two stage for now.

<p>This means that you initially just add an an ultra basic stylesheet. Call this your Core stylesheet. It’s barely more than styled HTML. Maybe it will add a max-width to your main content to stop it going fluid across wide screens. But no more than that. It’s all flow content, running vertically down your page, with no positioning attempted.

<p>It still works everywhere - it’s still 100% universal!
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/93ec012daac929458ddc1fbef1b01bb082fa2b82/ace0a/images/talks/dear-developer/building-with-empathy/get-creative.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Get creative</h3>
<p>So now we have a working HTML and CSS foundation! The bottom layer (and a bit) of our Robust Pyramid is built!
<p>Now you get to decorate those components that you’ve built. I just know that you’re itching for this! You want to make them look as beautiful as they are practical, don’t you?
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/5977081fbb0f99a1de5333e739fe9cad1bca1a7d/9a518/images/talks/dear-developer/building-with-empathy/what-does-support-mean.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>What does support mean?</h3>

<p>But before we go on, a word from our sponsor, <a href="https://christianheilmann.com/">Chris Heilmann</a>. Take a look at some words that he barfed out:

<blockquote>“It’s not okay to block old browsers, but it’s a waste of time to support them 100%”</blockquote>

<p>Too right, Chris! Because you might think that what I’ve been suggesting is that we support all browsers 100% the same, no matter what. Even IE6!
<p>No no no, nothing is further from the truth. I’m lazy, just like every dev. I’m not going to waste time trying to make things look the same in Firefox or Chrome as a browser that even the manufacturer has left to die in the woods.

<p>No, the trick here is to choose a cut-off point. Especially if you are a large organisation. And the place I work - <a href="http://springernature.com">Springer Nature</a> - is very fucking large.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/fc295d2472909191f14bf122165320a523e42ae5/0d620/images/talks/dear-developer/building-with-empathy/cutting-the-mustard.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Cutting the Mustard</h3>

<p>The BBC were pioneers in this. During their responsive redesign of the BBC News site they developed a novel technique called <a href="http://responsivenews.co.uk/post/18948466399/cutting-the-mustard">Cutting the Mustard</a> (CTM)
<p>What’s this? Well they serve up a core site: their HTML and some basicCSS - just the same as we developed in the previous section.
<p>Then they then check to see what JS capabilities the browser has. It’s just a few simple lines of JS. They use this as decider as to whether the browser is “core” or “advanced”.
<p>If it fails the test, then it’s core, and the user is presented with a fully working, but basically styled site. The styling is so simple, with no layout system, that it works on every browser ever made.
<p>However, if the test passes then a more advanced site is offered. It uses the same HTML and core stylesheet, but on top of that is layered another set of CSS and a large amount of lovely JS.
<p>Why do this? Well, the BBC want everyone to access their site. They are a public service broadcaster and are obligated, not just by <a href="/posts/progressive-enhancement">morals</a> and business sense, but by <a href="https://www.out-law.com/page-330">UK legislation</a> to produce a site that works for all.
<p>So how do you combine 100% universality with the fact that some people have ancient, terrible browsers that it would be a time-sink to support? CTM gives the answer! Only those browsers that are “good enough” receive the advanced features. Those that have poor technology support silently fail the test and receive the core version. No having to support ancient browsers!
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/2b1d3a93ad780ce2ce8e15d3de64e2d431ae1afe/b0bb3/images/talks/dear-developer/building-with-empathy/browser-support-chart.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Springer Nature browser support chart</h3>

<p>Springer Nature (my wage payers) do something similiar to the BBC, but with a key difference. While the BBC do a CTM test based on JavaScript feature support, SN do a test based on a CSS media query.
<p>This media query cuts across very specific browser lines. You can see this in our <a href="https://github.com/springernature/frontend-playbook/blob/master/practices/graded-browser-support.md">graded browser support</a> table. In fact, it’s an exclusionary test, unlike the BBC version. It deliberately excludes those browsers marked as C-grade on our chart.
<p>C-grade browsers receive only our core stylesheet - again, fully working, just without advanced layout styling.
<p>Anything that isn’t C-grade receives our advanced stylesheet, and a much richer visual layout.
<p>So why do we have anything other than Grade C in our support table? Well, this is the part where being a popular site with a global audience comes in. We explicitly offer full support to those browsers that we deem as Grade A: generally the latest version -1.
<p>Grade X… well, grade X are between grade A and C. They probably <em>will</em> work with our advanced styling, but we can’t guarantee it.
<p>So why do we do it this way? Well, for us it’s a matter of stability. Our core audience - scientific and academic researchers - like stability. By fixing our browser support we can say to them <em>explicitly</em> what is supported and isn’t supported, and route any and all bugs/complaints/weirdnesses against that support table.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/2bb5f5586252d8957f6ed4429346ce3fb3584ed6/0187a/images/talks/dear-developer/building-with-empathy/ctm-in-action.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>CTM in action</h3>

<p>Okay, we’ve talked theory on the SN CTM, so here’s that check in action.
<p>Our crafted media query excludes the defunct Grade C browsers and serves up an advanced stylesheet to everything else.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/22cedf873eab9947d1107b668448e85ecf9e0192/0c77b/images/talks/dear-developer/building-with-empathy/add-the-whizz-bang.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Add the whizz bang</h3>

<p>Now that we have a core stylesheet and we have an advanced stylesheet, it’s time to add the lovely Javascript layer. It’s the most fragile layer, so it goes last. But it has the fun aspects and the most potential to dazzle, even on a boring old scientific site.
<p>Now is the point where we upgrade the forms so they post without doing a page refresh. Now is the time when we make pagination work without page reloads. Now is the time that we add in state management to our forms.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/110dc4dad284e72fd81befc14086afa1f9093aae/d5c94/images/talks/dear-developer/building-with-empathy/conditional-js.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Conditional JS</h3>

<p>Our CTM is done via CSS, so how do we replicate that in JS? Turns out that that there is a little-used <code>matchmedia</code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">window property</a>.
<p>It can be fed a media query directly, which is great. But even more usefully it can be fed a media query from your HTML. We therefore hook up our CTM media query to our JS via <code>matchMedia</code>.
<p>If our CTM test passes in CSS, and the CSS file loads, then our JS is loaded. Very neat, and very simple.

<p>Why do it like this? Well, we don’t want our JS to even <em>try</em> to run if it’s an old browser, and we don’t want it to run before our CSS, or if our CSS fails to load. Upgraded Javascript is unlikely to be useful if the associated CSS isn’t there.

<p>Once the JS is progressively loaded then we do lots of things. Add tabs, add animations, handle modal dialogs, etc. On this site the JS was relatively simple (but still modern and modularly written). But there’s no reason that it couldn’t be much more complex. As long as the base HTML site offers the core user journey then your JS can do lots of fancy extra things.

</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/16f5e1e4d1d259650a44ae25b86948fe92bb9afe/3c7eb/images/talks/dear-developer/building-with-empathy/all-progressively-enhanced.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>All progressively enhanced</h3>

<p>There we go, a small, practical example of progressively enhanced universal design. Make a site universal <em>from the start</em> and then upgrade bits of it when necessary.

<p>It works for everybody and it’s robust as hell.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/8df3011857292c79443a92fae75b7d21a90e0b4f/dc5aa/images/talks/dear-developer/building-with-empathy/ultimate-in-agility.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Ultimate in agility</h3>

<p>It’s also the ultimate in Agile software development.
<p>None of this design-first and then try to code it up nonsense. That’s just waterfall with glossy packaging.
<p>No, here you build, and test an MVP right from the start. You iterate, over and over and over, making it better and better each time.
<p>It’s the ultimate in Lean UX.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/9cc655292ca4e168dcb449d300a684e406567cb0/6918e/images/talks/dear-developer/building-with-empathy/labor-saving.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Labour saving</h3>

<p>It’s also the ultimate in labour-saving. For real - you only build what you need. No bootstrapping into expensive frameworks. No taking on other peoples heavy systems.
<p>You only add more advanced things as they are proven necessary by user feedback and testing.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/5386fe27a06798e7a92bc3a183dc92ca919b9e07/1e1de/images/talks/dear-developer/building-with-empathy/fights-fomo.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Fights FOMO</h3>

<p>And because you’re only adding what you <em>need</em> to the page, it’s a lovely FOMO fighting mechanism.
<p>Because we do get awfully excited by latest tech, don’t we?
<p>Rather than asking “does this help my users?”, we drop a lot of crap onto a page because we read about it on hackernews.
<p>I love this deliberate brake on getting over-excited.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/5c30acb04c64ca27fac7d5c2dd20d9945d5297bd/6b88f/images/talks/dear-developer/building-with-empathy/kiss.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>KISS</h3>

<p>Because we really do build things too complex. We desperately try to keep up with the large companies like Facebook and Google, crying ourselves to sleep at night that we’re simply not as good as them. We seem to forget that they’re generally overstaffed with overpaid and underworked techboys, enormous huge engineering departments! For some reason we beat ourselves up for not “keeping up” with them!

<p>Oh, they’ve produced lots of lovely code for us to use. But with complexity comes fragility. They’ve got the resources to debug this stuff to hell. The rest of us generally haven’t. Keep it simple and save yourself the trouble.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/bae53ef0e9e433404027a2fc59d4fa464e6ee21f/5d61e/images/talks/dear-developer/building-with-empathy/limitations.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Limitations?</h3>
<p>“But this can’t cope with modern techniques!” you might say.
<p>Sure it can. The biggest one you’re thinking of is likely state management. We do exactly the same thing as we did before. We make sure our forms work at a basic level in HTML, and then we enhance it.
<p>State management solutions like Redux work perfectly well on vanilla JS sites.
<p>It won’t work with something like React though, and I don’t cry about that.
<p>This is a distinct robust design pattern, which we feel is durable and doesn’t lock us into a limited-life framework that will get replaced by something else in a year or two.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://sonniesedge.co.uk/images/talks/dear-developer/building-with-empathy/excels
.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Excels</h3>

<p>It excels in being robust and universal. It <em>always</em> works. Broken JS, blocked JS, no JS, poor networks, nothing can break this, because it relies on streamed HTML, and not all-or-nothing JS.
<p>It’s lightweight and <em>loves</em> low powered devices.
<p>It excels at being people-first!
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/e849f203cb39637146c8e80d97e5745e7d029259/a9ea5/images/talks/dear-developer/building-with-empathy/what-else.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>What else can you do?</h3>
<p>Even if you feel that lean progressive enhancement is somehow too much to commit to, there’s still plenty of things you can do to upskill your empathy and make you realise what costs there are to coding in certain ways.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/c3fac0a84672d432de6dba8779e74dd8a9294b5f/dd4d0/images/talks/dear-developer/building-with-empathy/3g.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>3G performance</h3>

<p>An incredibly easy one is to start simulating slow network conditions in your browser. You can do this in just one tab of Chrome (other browsers will vary) by opening the Network tab in dev tools and turning on “slow 3G”. Now you get to experience your site as the average person wandering around the average city does!
<p>If you’re not on Chrome then try using <a href="https://www.charlesproxy.com/">Charles Proxy</a>. A similar thing, but for your entire OS.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/9dce379739c1aa214f4fc6dc5603c3c0a1edcca5/849c9/images/talks/dear-developer/building-with-empathy/use-real-hardware.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Use real hardware</h3>

<p>If you can, test on real hardware. Your 3000€ Mac is vastly more than the average computer of most users. The iPhone X that you bought on the first day of sale is infinitely more powerful average phone that most people are making use of.
<p>Don’t assume everyone has these amazingly powerful supercomputers! Make sure that your site runs well on the average Lidl laptop, because <em>someone</em> will be using it on that, and cursing your lack of testing.
<p>Perhaps more relevant to the developer mindset - proving that your site can run on the lowest end computer means that your site will run like a bat out of hell on anything more powerful!
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/3e517c59455f8a158196146ed710db175d037b6b/52e0a/images/talks/dear-developer/building-with-empathy/listen-to-the-web.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Listen to the web</h3>

<p>Turn on your screenreader and start navigating your sites by sound. If you’re on a Mac then it’s as easy as hitting <code>CMD + F5</code>. Just try it now!

<p>There’s a learning curve, and you’ll be embarrassed at first. But if you can learn DOM or framework APIs by heart, then you can do this.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/a26bd197bca19352d0b288751162cab4a2c165f1/dc9e3/images/talks/dear-developer/building-with-empathy/navigate-with-your-keyboard.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Navigate with your keyboard</h3>

<p>Similarly, start to navigate only by keyboard. I bet half of you reading this can already do this with Vim or Emacs. Using the tab and return key is an order of magnitude easier.

<p>You will be amazed at how much better keyboard accessibility can be done when you’re actually using a keyboard every day yourself.
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/66100519009a45a6cbe3e8e03a6258da3ec3b4eb/f2bdb/images/talks/dear-developer/these-are-not-my-users/these-are-not-my-users.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>These aren’t my users!</h2>

<p>Often when I speak about these issues I hear “but these are not my users” from an indignant developer. “I don’t have users like that” he will angrily tell me, apparently knowing each and every one of the users that visit his React-powered website.
<p>“All my users are rich young healthy people, living in metropolitan areas with excellent network coverage” they tell me, gulping furiously they do so.
<p>“These. Are. Not. My Users!”
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/b42e3c788d2635361a73f9dfa63011b3e4f7cc3f/d1071/images/talks/dear-developer/these-are-not-my-users/yes-they-are.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Yes they are</h3>

<p>I will always answer with “Yes they are!”. Because, sweetpea, you simply don’t know a users situation.

<p>Oh, you can guess at it. You can assume that they’re always sitting at their desk, or always on wifi, or have time to concentrate on your task.
<p>But <em>knowing</em> what their situation is? Uh uh, sorry, you don’t know that.


<p>They could be on a borrowed device. They could be using a work computer that they have no control over. They could have suffered a temporary or permanent disability. You simply don’t know!

<p>Look at it this way: you don’t just build cars that only work in the best conditions, do you? Imagine a car that only worked on a sunny day, on a flat road! Oh, how silly that would be. No, you build it so that it works in horrible weather, so that it works when driven over grass or a gravel dirt road. In the same way you don’t just build sites that only work in the best conditions.

<p>You’re a web developer. Your job is to make a site work for everyone, in all conditions.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">&quot;We don&#39;t have any non-JavaScript users&quot; No, all your users are non-JS while they&#39;re downloading your JS</p>&mdash; Jake Archibald (@jaffathecake) <a href="https://twitter.com/jaffathecake/status/207096228339658752?ref_src=twsrc%5Etfw">May 28, 2012</a></blockquote>
</div>
</section>

<hr class="comp-talk__divider">

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/d33f13d1f88b27bc051adb04b0908c112f65e851/62161/images/talks/dear-developer/conclusion/defend-the-robust-web.jpeg" alt=""></div>
<div class="comp-talk__text">
<h2>Conclusion</h2>
<p>The web’s success is built on it being robust.
<p>that robustness has made it work for everybody
<p>As a result, people all over that planet now depend on the web, for their livelihoods, for social interaction, for their health.
<p>It means we have to defend the web for everybody. It’s our job to keep it accessible and usable for all.
</div>
</section>

<section class="comp-talk__section">
<div class="comp-talk__slide"><img class="comp-talk__image" src="https://d33wubrfki0l68.cloudfront.net/e94f5d10fa05271159d523758391129545d83f09/5a472/images/talks/dear-developer/conclusion/the-weird-wild-web-is-for-everyone.jpeg" alt=""></div>
<div class="comp-talk__text">
<h3>Keep it weird</h3>
<p>We need to keep that beauty and weirdness going that first came with the early web.
<p>Because the webs beauty comes from its diversity. A diversity of tech, and a diversity of people.
<p>We’re the enablers and the defenders of that diversity.
<p>So let’s not make it about us. Let’s make it about the wonderfulness of the Weird Wild Web.
<p>Thank you.</p>
</div>
</section>

<p><p>Special thanks for the many photos from <a href="http://www.wocintechchat.com/blog/wocintechphotos">Women of Color in Tech</a>. ❤️</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://sonniesedge.co.uk/talks/dear-developer">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>