davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790
							<!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>2016 in Review (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://rauchg.com/2017/2016-in-review">

<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>
  2016 in Review (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://rauchg.com/2017/2016-in-review">Source originale du contenu</a></h3>
    <p data-jsx="1856858372" data-reactid="13">January 6, 2017 â  <span class="false" data-jsx="1856858372" data-reactid="17">7,721 views</span></p>

<p data-jsx="206172832" data-reactid="21">What follows is a brief summary of my year organized by different categories.</p>

<p data-jsx="206172832" data-reactid="24">This classification is certainly arbitrary, but it gives me model that I can use every year to look back and reflect on what's changed.</p>

<p data-jsx="206172832" data-reactid="35">In November 2015 I started a new company called <a href="https://zeit.co/" target="_blank" data-reactid="37"><span data-jsx="2659563860" data-reactid="38">▲ZEIT</span></a>, with my friends<a href="#f1" id="s1" data-jsx="1207990548" data-reactid="42">[1]</a> and brilliant engineers <a href="https://twitter.com/tonykovanen" target="_blank" data-reactid="48">Tony Kovanen</a> and  <a href="https://twitter.com/nkzawa" target="_blank" data-reactid="51">Naoyuki Kanezawa.</a></p>

<p data-jsx="206172832" data-reactid="53">It aims to make deployment and hosting of applications in the cloud simple, instant and global.</p>

<p data-jsx="206172832" data-reactid="56">Our mission is to empower the individual. At home or inside companies and teams. Go directly to production without barriers.</p>

<p data-jsx="206172832" data-reactid="65">Back in April we <a href="https://zeit.co/blog/why-now" target="_blank" data-reactid="67">announced</a> our flagship product: <a href="https://zeit.co/now" target="_blank" data-reactid="70">now</a>. Once you <a href="https://zeit.co/download" data-reactid="72">install</a> it, you can deploy any project to the cloud with <em data-reactid="74">just one command</em>: <b data-reactid="76"><code data-jsx="2804940771" data-reactid="77">now</code></b>.</p>

<p data-jsx="206172832" data-reactid="82">We take the <code data-jsx="2804940771" data-reactid="84">package.json</code>, <code data-jsx="2804940771" data-reactid="88">Dockerfile</code>, or static files, build them in the cloud and serve them securely and scalably under HTTP/2.</p>

<p data-jsx="206172832" data-reactid="93">Each deployment is <b data-reactid="95">immutable</b> and has its own unique URL. They look like this: <code data-jsx="2804940771" data-reactid="97">https://rauchg-blog-hhafwnefgw.now.sh/</code>. This model has a lot of benefits that are not immediately obvious.</p>

<p data-jsx="206172832" data-reactid="102">One is that the same system gives you development, staging and production all in one. You can deploy to build, test and iterate during development. You can <em data-reactid="104">stage</em> by simply sharing these links to your co-workers or clients, before you make them live.</p>

<p data-jsx="206172832" data-reactid="107">To go to production, you just <em data-reactid="109">alias</em> them. With one command, obviously: <code data-jsx="2804940771" data-reactid="111">now alias rauchg-blog-hhafwnefgw.now.sh rauchg.com</code> is what I ran for you to be reading these words now. Zero-downtime.</p>

<p data-jsx="206172832" data-reactid="116">Some milestones we've reached:</p>

<ul data-jsx="640692889" data-reactid="119"><li data-jsx="950968043" data-reactid="120"><b data-reactid="121">2 billion+</b> requests served</li><li data-jsx="950968043" data-reactid="124">Users have deployed over <b data-reactid="126">40,000</b> times</li><li data-jsx="950968043" data-reactid="129">Usage nearly doubled in the past two months alone</li><li data-jsx="950968043" data-reactid="132">Being used in government, health care, non-profits, tourism, education (hacking schools, hackathons, and IVY league classrooms), many Fortune 500 companies and even parents teaching their kids how to code :)</li><li data-jsx="950968043" data-reactid="135">Grew the <a href="https://zeit.co/about#team" target="_blank" data-reactid="137">team</a> to 8 amazing individuals</li></ul>

<div data-jsx="4086980413" data-reactid="141"><a href="https://zeit.co/now" target="_blank" data-jsx="4086980413" data-reactid="142"/><p data-jsx="4086980413" data-reactid="146">An overview of our deployment options</p></div>

<p data-jsx="206172832" data-reactid="154">Dealing with SSL certificates, domains and DNS records is a very tedious process.</p>

<p data-jsx="206172832" data-reactid="157">It's tedious for the individual but it's also tedious for teams. I've been in too many companies where you depend on a specific  <em data-reactid="160">person or team</em> to manage this stuff.</p>

<p data-jsx="206172832" data-reactid="163">Processes like that kill productivity and create invisible barriers for product engineers. Worse yet, after a while you just get used to it.</p>

<p data-jsx="206172832" data-reactid="166">To solve this problem, we launched <a href="https://zeit.co/world" target="_blank" data-reactid="168"><b data-reactid="169"><span data-jsx="2659563860" data-reactid="170">â²ZEIT</span> World</b></a>, a free global DNS solution.</p>

<p data-jsx="206172832" data-reactid="176">When you use the <code data-jsx="2804940771" data-reactid="178">alias</code> command above with a new domain, we check if it's using our nameservers. If it is, we configure the records automatically.</p>

<p data-jsx="206172832" data-reactid="183">Like I said above, we want to make cloud deployment <b data-reactid="185">global</b>. A cloud where you choose regions is not living up to its name.</p>

<p data-jsx="206172832" data-reactid="194">I believe the command-line (CLI) to be a perfect combination of elegance and productivity.</p>

<p data-jsx="206172832" data-reactid="197">Why elegant? Most CLI programs adhere to the <a target="_blank" href="https://en.wikipedia.org/wiki/Unix_philosophy" data-reactid="199">Unix Philosophy</a>. Unlike most apps and websites, it's hard for these programs to bloat. They tend to do one thing well. They compose. They are easy to replace.</p>

<p data-jsx="206172832" data-reactid="202">Why productive? Because <a href="http://graydon2.dreamwidth.org/193447.html" target="_blank" data-reactid="204">text is king</a>. Text is low-bandwidth. Text is fast to input. Text is searchable. If you use <a href="http://forthedeveloper.com/2008/terminal-sweetness-reverse-i-search/" target="_blank" data-reactid="206"><code data-jsx="2804940771" data-reactid="207">ctrl+r</code></a>, you know what I'm talking about.</p>

<p data-jsx="206172832" data-reactid="212"><a href="https://hyper.is" target="_blank" data-reactid="213">Hyper</a> is the <a href="https://atom.io" target="_blank" data-reactid="215">Atom</a> of terminals. Written with and extensible with web technologies. Open Source.</p>

<div data-jsx="4086980413" data-reactid="218"><a href="https://hyper.is" target="_blank" data-jsx="4086980413" data-reactid="219"/><p data-jsx="4086980413" data-reactid="223">Showing off Hyper's simple UI, config and plugin installation</p></div>

<p data-jsx="206172832" data-reactid="225">Since it's built on Electron, we're able to render URLs as sandboxed <code data-jsx="2804940771" data-reactid="227">&lt;webview&gt;</code> tags. For some people, this could develop into an interesting <a href="https://zeit.co/blog/the-hyper-plan" target="_blank" data-reactid="231">standalone computing environment</a></p>

<div data-jsx="4086980413" data-reactid="233"><a href="https//hyper.is" target="_blank" data-jsx="4086980413" data-reactid="234"><p data-jsx="3096302833" data-reactid="235"><video autoplay="" loop="" src="https://video.twimg.com/tweet_video/CxvaQGQXcAUTxCV.mp4" data-jsx="3096302833" data-reactid="236"/></p></a><p data-jsx="4086980413" data-reactid="238">Side-by-side terminal and web browser with hot code reloading</p></div>

<p data-jsx="206172832" data-reactid="240">Some milestones we've reached:</p>

<p data-jsx="206172832" data-reactid="291">Now doesn't offer the so-called <b data-reactid="293">function as a service</b>, because we think HTTP/2 is a more adequate abstraction.</p>

<p data-jsx="206172832" data-reactid="296">It doesn't require re-inventing the wheel and thinking up new proprietary protocols and specificiations for what the request and response objects should look like.</p>

<p data-jsx="206172832" data-reactid="299">However, I do love the <em data-reactid="301">simplicity</em> of the approach, which solves many common use cases. To that end, I wrote <a href="https://github.com/zeit/micro" target="_blank" data-reactid="303">micro</a>, a Node.js microservice framework.</p>

<p data-jsx="206172832" data-reactid="306">Write your <code data-jsx="2804940771" data-reactid="308">index.js</code> file that <b data-reactid="312">exports a function</b>:</p>

<pre data-jsx="921496120" data-reactid="315"><code data-jsx="921496120" data-reactid="316">module.exports = async (req, res) =&gt; {
  await authorizeUser(req)
  const { users } = await getSomeData()
  return { name: users[0].name }
}</code></pre>

<p data-jsx="206172832" data-reactid="318">And with one command it gets served as a Node.js HTTP server: <code data-jsx="2804940771" data-reactid="320">micro</code>.</p>

<p data-jsx="206172832" data-reactid="325">Anything you <em data-reactid="327">return</em> gets sent as a JSON response, but you retain the flexibility to serve out entire websites, APIs and even <a href="https://github.com/timneutkens/micro-graphql" target="_blank" data-reactid="329">GraphQL endpoints</a>!</p>

<p data-jsx="206172832" data-reactid="338"><a href="https://github.com/zeit/next.js" target="_blank" data-reactid="339">Next.js</a> is a minimalist framework for server-rendered (universal) React applications.</p>

<p data-jsx="206172832" data-reactid="342">It brings back some of the good ideas that came with writing PHP sites: no setup, start with the filesystem, automatic routing, the server outputs pre-compiled HTML instead of a blank page.</p>

<p data-jsx="206172832" data-reactid="345">You start by writing a <code data-jsx="2804940771" data-reactid="347">./pages/index.js</code> that exports a function (stateless component) or a <code data-jsx="2804940771" data-reactid="351">class</code> that inherits from <code data-jsx="2804940771" data-reactid="356">React.Component</code>:</p>

<pre data-jsx="921496120" data-reactid="361"><code data-jsx="921496120" data-reactid="362">export default () =&gt; (
  &lt;div&gt;
    Welcome to &lt;b&gt;Next.js&lt;/b&gt;!
  &lt;/div&gt;
)
</code></pre>

<p data-jsx="206172832" data-reactid="364">And then just type in <code data-jsx="2804940771" data-reactid="366">next</code> and head to <code data-jsx="2804940771" data-reactid="370">http://localhost/</code>.</p>

<p data-jsx="206172832" data-reactid="375">A few years ago I wrote about <a href="/2014/7-principles-of-rich-web-applications" data-reactid="377">7 principles</a> that made for great UX in the web. This tool enables those.</p>

<p data-jsx="206172832" data-reactid="380">Each <em data-reactid="382">"page"</em> is a webpack entry-point. Each section of your application thus becomes its own <em data-reactid="384">bundle</em> of code based on its <code data-jsx="2804940771" data-reactid="386">import</code> statements. No need to ship several megabytes of JS code with each page anymore.</p>

<p data-jsx="206172832" data-reactid="391">React's declarative nature allows us to pre-fetch <code data-jsx="2804940771" data-reactid="393">&lt;Link&gt;</code> tags in the background in a <code data-jsx="2804940771" data-reactid="397">ServiceWorker</code>, which is why this blog or <a href="https://zeit.co" target="_blank" data-reactid="401">zeit.co</a> feel so snappy!</p>

<p data-jsx="206172832" data-reactid="404">Next.js is therefore a <b data-reactid="406">generalization</b> of the <em data-reactid="408">site vs app</em> paradigms.</p>

<p data-jsx="206172832" data-reactid="411">Websites tend to <em data-reactid="413">pre-render markup</em> and download code <em data-reactid="415">lazily</em>. Apps tend to download <em data-reactid="417">everything</em> in advance, and therefore tend to feel faster afterwards.</p>

<p data-jsx="206172832" data-reactid="420">Now we're showing you can do both.</p>

<p data-jsx="206172832" data-reactid="429">What follows is a series of ideas that had a profound impact on me. Some are fairly new and exciting. Some are very old, but I have only recently assimilated their wisdom.</p>

<p data-jsx="206172832" data-reactid="438">Many of us have already marveled at Tesla's tremendous foresight when he accurately described the iPhone <a href="http://www.tfcbooks.com/tesla/1926-01-30.htm" target="_blank" data-reactid="441">in an interview</a> nearly <b data-reactid="443">90 years ago</b>:</p>

<blockquote data-jsx="897081423" data-reactid="446"><p data-jsx="897081423" data-reactid="447">Not only this, but through television and telephony we shall see and hear one another as perfectly as though we were face to face, despite intervening distances of thousands of miles; and <b data-reactid="449">the instruments through which we shall be able to do his will be amazingly simple compared with our present telephone. A man will be able to carry one in his vest pocket</b>.<br data-jsx="897081423" data-reactid="451"/></p></blockquote>

<p data-jsx="206172832" data-reactid="453">But there's more. Inside that paper I found a wonderful analogy that I've kept coming back to when thinking about modern human societies:</p>

<blockquote data-jsx="897081423" data-reactid="456"><p data-jsx="897081423" data-reactid="457">When wireless is perfectly applied the whole earth will be converted into a huge brain, which in fact it is, all things being particles of a real and rhythmic whole<br data-jsx="897081423" data-reactid="459"/></p></blockquote>

<p data-jsx="206172832" data-reactid="461">The effectiveness of this mega-brain is a function of the ability of the "individual sub-brains", or neurons, to communicate.</p>

<p data-jsx="206172832" data-reactid="464">Astonishing evidence of this is given to us by <a href="https://en.wikipedia.org/wiki/Terence_Tao" target="_blank" data-reactid="466">Terence Tao</a>, Fields Medal winner, in the particular way he found the proof to the <a href="https://en.wikipedia.org/wiki/Sign_sequence#Erd.C5.91s_discrepancy_problem" target="_blank" data-reactid="468">ErdÅs discrepancy problem</a> in  <a href="http://www.nature.com/news/maths-whizz-solves-a-master-s-riddle-1.18441" target="_blank" data-reactid="471">late 2015</a>:</p>

<blockquote data-jsx="897081423" data-reactid="474"><p data-jsx="897081423" data-reactid="475">Tao had been working on a different problem early in September, when <b data-reactid="477">a timely comment on his blog</b> suggested that the problem might be related to the ErdÅs conjecture. âAt first, I thought the connection was only superficial,â says Tao. But he quickly realized that combining the commenter's fresh insight with previous results could lead to a solution. He submitted his paper less than two weeks later and included an acknowledgement thanking the commenter, Uwe Stroinski, a maths instructor in Reutlingen, Germany.<br data-jsx="897081423" data-reactid="479"/></p></blockquote>

<p data-jsx="206172832" data-reactid="481">And just like that, a comment on a blog by a stranger leads to the solution to a long-standing problem in number theory. The whole is decidedly greater than the sum of its parts.</p>

<p data-jsx="206172832" data-reactid="484">From this perspective, the role and importance of any given individual is clearly diminished. Nothing but a cog in a giant unpredictable machine, which  Nick Szabo appropriately dubs a <a href="http://unenumerated.blogspot.com/2006/11/wet-code-and-dry.html" target="_blank" data-reactid="486">rolling singularity</a>:</p>

<blockquote data-jsx="897081423" data-reactid="489"><p data-jsx="897081423" data-reactid="490">Computers and humans will continue to co-evolve with computers making the faster progress but falling far short of apocalyptic predictions of "Singularity," <b data-reactid="492">except to the extent that much of civilization is already a rolling singularity. For example people can't generally predict what's going to happen next in markets or which new startups will succeed in the long run</b>.<br data-jsx="897081423" data-reactid="494"/></p></blockquote>

<p data-jsx="206172832" data-reactid="496">Finally, if we accept this analogy, we can't underestimate the impact that fast, free, UI-less (imagine global unlimited LTE) and unrestricted internet will have in our world. Exciting times are ahead of us.</p>

<p data-jsx="206172832" data-reactid="505">One of the obvious objections to Bitcoin has been that the consensus mechanism based on proof-of-work (PoW) is <b data-reactid="507">wasteful</b>.</p>

<p data-jsx="206172832" data-reactid="510">Critics typically point out that the whole ordeal is <em data-reactid="513">hashes to ashes</em>, that the electricity consumption is equivalent to the total of a small country, and so on.</p>

<p data-jsx="206172832" data-reactid="516">If one works the constraint into the system (as Satoshi did) of having <em data-reactid="518">no trusted third-party</em>, it follows that the system must be backed by a <em data-reactid="520">universally verifiable</em>  reality.</p>

<p data-jsx="206172832" data-reactid="524">That's what the anchoring to physical energy expenditure provides, in the form of electricity used for solving <a href="https://en.wikipedia.org/wiki/Hashcash" target="_blank" data-reactid="526">Hashcash</a> puzzles.</p>

<p data-jsx="206172832" data-reactid="529">Furthermore, this consensus mechanism is remarkably <em data-reactid="531">simple</em>. You can be in complete isolation from the rest of the world, even in a <a href="https://gist.github.com/oleganza/8cc921e48f396515c6d6" target="_blank" data-reactid="533">bunker</a>, and follow very basic rules and efficient verifications to arrive to the universal view of the database.</p>

<p data-jsx="206172832" data-reactid="536">The cost of running Bitcoin is the exact cost of running a system that puts all its trust in a network without privileged nodes.</p>

<p data-jsx="206172832" data-reactid="539">Investing in the security of the network until now required subscribing to this philosophy, to a large extent. But another incentive that I hadn't previously contemplated was elucidated by a fascinating interview to Chandler Guo, a Chinese miner.</p>

<p data-jsx="206172832" data-reactid="542">If you produce surplus electricity, then <b data-reactid="544">Bitcoin mining is your battery</b>:</p>

<div data-jsx="4086980413" data-reactid="547"><p data-jsx="4086980413" data-reactid="552">Changler Guo describes the Bitcoin Battery (2:55)</p></div>

<p data-jsx="206172832" data-reactid="554">Adam Back, inventor of HashCash, has suggested in an interesting  <a href="https://bitcointalk.org/index.php?topic=911339.msg10007339#msg10007339" target="_blank" data-reactid="557">thought experiment</a> that one can think of Bitcoin as an <b data-reactid="559">universal element that represents proof-of-joules spent</b>.</p>

<p data-jsx="206172832" data-reactid="562">The combination of the above ideas might bring to fruition the vision held by the likes of Henry Ford and Thomas Edison of the <b data-reactid="564">energy dollar</b>:</p>

<div data-jsx="3589857281" data-reactid="579"><h3 data-reactid="580"><span data-jsx="3589857281" data-reactid="581"><a href="#accessibility" id="accessibility" data-jsx="3589857281" data-reactid="582">#</a></span>Accessibility is the Mother of Invention</h3></div>

<p data-jsx="206172832" data-reactid="585">A completely new perspective on the role of accessibility in technology was opened to me by this TED talk by IBM Fellow Chieko Asakawa:</p>

<div data-jsx="4086980413" data-reactid="588"><p data-jsx="4086980413" data-reactid="593">How New Technology Helps Blind People Explore the World</p></div>

<p data-jsx="206172832" data-reactid="595">Some interesting facts she mentions:</p>

<ul data-jsx="640692889" data-reactid="598"><li data-jsx="950968043" data-reactid="599">Braille went digital many years before consumers had digital books on their tablets.</li><li data-jsx="950968043" data-reactid="602">The telephone was invented while building a device for the hearing-impaired.</li><li data-jsx="950968043" data-reactid="605">Keyboards were developed early on for people with disabilities.</li><li data-jsx="950968043" data-reactid="608">The blind community were some of the earliest adopters of internet discussion forums.</li></ul>

<p data-jsx="206172832" data-reactid="612">The argument is very convincing. The demo of the app she's working on seems taken straight out of a <a href="http://www.imdb.com/title/tt1798709/" target="_blank" data-reactid="614">sci-fi movie</a>.</p>

<p data-jsx="206172832" data-reactid="617">No excuses anymore for disregarding accessibility!</p>

<div data-jsx="3589857281" data-reactid="620"><h3 data-reactid="621"><span data-jsx="3589857281" data-reactid="622"><a href="#truth" id="truth" data-jsx="3589857281" data-reactid="623">#</a></span>Just a Shadow of the Truth</h3></div>

<blockquote data-jsx="897081423" data-reactid="626"><p data-jsx="897081423" data-reactid="627">The Tao that can be told is not the eternal Tao;<br data-reactid="629"/>The name that can be named is not the eternal name<br data-jsx="897081423" data-reactid="631"/></p></blockquote>

<p data-jsx="206172832" data-reactid="633">I'm philosophically inclined to think that we should take joy in the unknown, in the relativity of it all, in our ability to access <b data-reactid="635">nothing but a shadow of the truth</b>, as Terence McKenna puts it:</p>

<blockquote data-jsx="897081423" data-reactid="638"><p data-jsx="897081423" data-reactid="639">It's amazing to me, I mean, if you were to meet a termite who stated that his or her goal in life was the perfect modeling of the cosmos. You would think it was quite a funny undertaking, and yet how different are we that we should presume more than a shadow of the truth?<br data-jsx="897081423" data-reactid="641"/></p></blockquote>

<p data-jsx="206172832" data-reactid="643"><b data-reactid="644">True enough</b> is as true as can be gotten.</p>

<blockquote data-jsx="897081423" data-reactid="647"><p data-jsx="897081423" data-reactid="648">The beginning of wisdom, I believe, is our ability to accept an inherent messiness in our explanation of what's going on. Nowhere is it written that human minds should be able to give a full accounting of creation in all dimensions and on all levels. <b data-reactid="650">Ludwig Wittgenstein had the idea that philosophy should be what he called "true enough." I think that's a great idea. True enough is as true as can be gotten</b>. The imagination is chaos. New forms are fetched out of it. The creative act is to let down the net of human imagination into the ocean of chaos on which we are suspended and then to attempt to bring out of it ideas.<br data-jsx="897081423" data-reactid="652"/>â Rupert Sheldrake</p></blockquote>

<p data-jsx="206172832" data-reactid="661">I came across a fascinating new take on the idea of consciousness and the evolutionary origin of perception by means of natural selection by Donald Hoffman:</p>

<div data-jsx="4086980413" data-reactid="664"><p data-jsx="4086980413" data-reactid="669">Do we see reality as it is?</p></div>

<p data-jsx="206172832" data-reactid="671">The central idea is that our reality is basically a set of <em data-reactid="673">evolutionary hacks</em> that confered a fitness advantage to our ancestors.</p>

<p data-jsx="206172832" data-reactid="676">An amusing example is given of an Australian Beetle attempts to mate with a beer bottle because it satisfied its primitive heuristics. It had to be brown, translucent and large. Oops.</p>

<div data-jsx="4086980413" data-reactid="679"><p data-jsx="4086980413" data-reactid="683">"I could have sworn it was a beetle"</p></div>

<p data-jsx="206172832" data-reactid="685">Notice that I used the word <em data-reactid="687">hack</em> to describe these adaptations to the environment. I actually took that from the presentation itself.</p>

<p data-jsx="206172832" data-reactid="690">Despite Hoffman's specialty being the cognitive sciences, the explanation is peppered with symbols found in the computer science lingo.</p>

<p data-jsx="206172832" data-reactid="693">I find this collision between seemingly disparate worlds to be entirely <em data-reactid="695">uncoincidental</em> and just as fascinating.</p>

<p data-jsx="206172832" data-reactid="698">Confusing perception with reality, he says, is like thinking that the reality of a computer is the icons and buttons on the screen, instead of the code and machinery behind it.</p>

<p data-jsx="206172832" data-reactid="701">From this lens, even the study of physics, while useful, might not get us closer to understanding reality. Inspecting a button on a screen and finding pixels doesn't tell us much about how the GPU and CPU work. And the same would be true for confirming the existence of the <a href="https://en.wikipedia.org/wiki/Higgs_boson" target="_blank" data-reactid="703">Higgs boson</a>, with regards to its underlying machinery.</p>

<p data-jsx="206172832" data-reactid="706">What we normally call reality is just the <b data-reactid="708">interface to reality</b> that evolution has given us.</p>

<p data-jsx="206172832" data-reactid="711">The takeaway: don't mistake the UI for the reality of the <a href="http://www.simulation-argument.com/simulation.html" target="_blank" data-reactid="713">computer behind it</a>.</p>

<div data-jsx="3589857281" data-reactid="716"><h3 data-reactid="717"><span data-jsx="3589857281" data-reactid="718"><a href="#" id="" data-jsx="3589857281" data-reactid="719">#</a></span>Turing Paper vs Quantum Paper</h3></div>

<p data-jsx="206172832" data-reactid="722">A quantum computer is <em data-reactid="724">just</em> an endless series of symbols written in different universes that interfere with one another. A beautiful description by <a href="https://en.wikipedia.org/wiki/David_Deutsch" target="_blank" data-reactid="726">David Deutsch</a>:</p>

<blockquote data-jsx="897081423" data-reactid="729"><p data-jsx="897081423" data-reactid="730">Turing hoped that his abstracted-paper-tape model was so simple, so transparent and well defined, that it would not depend on any assumptions about physics that could conceivably be falsified, and therefore that it could become the basis of an abstract theory of computation that was independent of the underlying physics. âHe thought,â as Feynman once put it, âthat he understood paper.â But he was mistaken. Real, quantum-mechanical paper is wildly different from the abstract stuff that the Turing machine uses. The Turing machine is entirely classical, and does not allow for the possibility the paper might have different symbols written on it in different universes, and that those might interfere with one another<br data-jsx="897081423" data-reactid="732"/>â David Deutsch</p></blockquote>

<div data-jsx="3589857281" data-reactid="735"><h2 data-reactid="736"><span data-jsx="3589857281" data-reactid="737"><a href="#works" id="works" data-jsx="3589857281" data-reactid="738">#</a></span>Essays, Interviews, Presentations</h2></div>

<p data-jsx="206172832" data-reactid="747">The only essay I wrote this year is called <a href="/2016/addressable-errors" data-reactid="749">Addressable Errors</a>.</p>

<p data-jsx="206172832" data-reactid="752">Inspired by React's excellent warnings, I decided that every time I write an error out to a terminal or console, I'll attach a URL to it.</p>

<p data-jsx="206172832" data-reactid="755">Instead of having our users Google error messages or codes, we can point them to a resource we can update over time and others can comment on!</p>

<p data-jsx="206172832" data-reactid="796">I gave a presentation on Now and Next.js at Nodevember in Nashville, Tennesse:</p>

<p data-jsx="206172832" data-reactid="806">I introduced Next.js in Vienna</p>

<p data-jsx="206172832" data-reactid="816">And a few other talks </p>

<p data-jsx="206172832" data-reactid="858">In the <a href="http://hyperdiscordia.crywalt.com/library_of_babel.html" target="_blank" data-reactid="860">Library of Babel</a>, Borges draws a beautiful comparison between the vastness of the Universe and an imaginary Library.</p>

<p data-jsx="206172832" data-reactid="863">Inside it you can find every book that could possibly be conceived, including a book that indexes all the others. An <a href="https://en.wikipedia.org/wiki/Georg_Cantor" target="_blank" data-reactid="865">infinity of infinities</a>, so to speak.</p>

<blockquote data-jsx="897081423" data-reactid="868"><p data-jsx="897081423" data-reactid="869">From these two incontrovertible premises he deduced that the Library is total and that its shelves register all the possible combinations of <b data-reactid="871">the twenty-odd orthographical symbols (a number which, though extremely vast, is not infinite)</b>: Everything: the minutely detailed history of the future, the archangels' autobiographies, the faithful catalogues of the Library, thousands and thousands of false catalogues, the demonstration of the fallacy of those catalogues, the demonstration of the fallacy of the true catalogue, the Gnostic gospel of Basilides, the commentary on that gospel, the commentary on the commentary on that gospel, the true story of your death, the translation of every book in all languages, the interpolations of every book in all books.<br data-jsx="897081423" data-reactid="873"/></p></blockquote>

<p data-jsx="206172832" data-reactid="875">Does it ring a bell? There are about <code data-jsx="2804940771" data-reactid="877">2 * 10^46</code> <a href="https://what-if.xkcd.com/34/" target="_blank" data-reactid="881">meaningfully different English tweets</a>, which is a lot, but I still see people making remarkably similar observations or even puns (many of which I suspect are "borrowed") on a daily basis.</p>

<p data-jsx="206172832" data-reactid="884">This observation led me to the creation of <a href="https://thoughtcomplete.now.sh/" target="_blank" data-reactid="886"><b data-reactid="887">thoughtcomplete</b></a>, autocompletion for your thoughts based on querying the <a href="https://dev.twitter.com/rest/public" target="_blank" data-reactid="889">Twitter API</a>.</p>

<p data-jsx="206172832" data-reactid="892">Needless to say, the suggestions it makes can be pretty amusing. I promise it will take you to places you didn't think you'd go to. Twitter's <a href="https://dev.twitter.com/rest/public/rate-limiting" target="_blank" data-reactid="894">rate-limiting</a> permitting.</p>

<p data-jsx="206172832" data-reactid="897">In the realm of programming languages, it <a href="https://twitter.com/rauchg/status/778679671936262144" target="_blank" data-reactid="899">occured to me</a> that JavaScript's library, <a href="https://npmjs.com" target="_blank" data-reactid="901">npm</a>, gets the closest:</p>

<div data-jsx="4086980413" data-reactid="904"><p data-jsx="4086980413" data-reactid="908">Need a module to compare versions? How about all the possible ones?</p></div>

<div data-jsx="3589857281" data-reactid="910"><h3 data-reactid="911"><span data-jsx="3589857281" data-reactid="912"><a href="#avatars" id="avatars" data-jsx="3589857281" data-reactid="913">#</a></span>Beautiful Default Avatars</h3></div>

<p data-jsx="206172832" data-reactid="916">I created a hashing scheme for our customers' unique IDs that yields beautiful gradients, demonstrated here by typing in my emails:</p>

<div data-jsx="4086980413" data-reactid="919"><p data-jsx="3096302833" data-reactid="920"><video autoplay="" loop="" src="https://video.twimg.com/tweet_video/C0vRamkVEAAr3Dl.mp4" data-jsx="3096302833" data-reactid="921"/></p><p data-jsx="4086980413" data-reactid="923">Makes it easy to tell multiple accounts apart!</p></div>

<p data-jsx="206172832" data-reactid="925">The technique involves hashing the UID, obtaining a number and calculating its <code data-jsx="2804940771" data-reactid="927">mod 360</code> (which is the highest value for the HUE in the <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank" data-reactid="931">HSL</a> color space).</p>

<p data-jsx="206172832" data-reactid="934">Since HSL is a cylindrical geometry, we just <em data-reactid="936">evenly spin</em> it to find harmonic colors:</p>

<div data-jsx="4086980413" data-reactid="939"><p data-jsx="4086980413" data-reactid="943">I opted for Triadic colors, with very pleasing results</p></div>

<div data-jsx="3589857281" data-reactid="945"><h2 data-reactid="946"><span data-jsx="3589857281" data-reactid="947"><a href="#bad-ideas" id="bad-ideas" data-jsx="3589857281" data-reactid="948">#</a></span>Things that Seemed like Bad Ideas</h2></div>

<p data-jsx="206172832" data-reactid="951">Here are some things I had initial negative reactions to (that I can recall<a href="#f2" id="s2" data-jsx="1207990548" data-reactid="953">[2]</a>) but I was completely wrong aboutâ¦</p>

<p data-jsx="206172832" data-reactid="966">As seen in <a href="http://www.theverge.com/2015/7/9/8916347/slack-emoji-reactions" target="_blank" data-reactid="968">Slack</a>, later on <a href="https://www.wired.com/2016/02/facebook-reactions-totally-redesigned-like-button/" target="_blank" data-reactid="970">Facebook</a> and finally <a href="https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments" target="_blank" data-reactid="972">GitHub</a>.</p>

<p data-jsx="206172832" data-reactid="975">I though they'd be an annoying gimmick (specially for work), but they turned out to be quite the opposite.</p>

<p data-jsx="206172832" data-reactid="978">Emojis are one of the best tools for conveying nuance and emotion over this medium. Reactions allow for them to flow more naturally and are shown inline without creating clutter.</p>

<p data-jsx="206172832" data-reactid="981">They create <em data-reactid="983">an opportunity to supply more information</em> to the channel. Without reactions, you might stay quiet and not share how you feel.</p>

<p data-jsx="206172832" data-reactid="992">With, for example, <a href="https://github.com/feross/standard" target="_blank" data-reactid="994">standard</a> for JavaScript.</p>

<p data-jsx="206172832" data-reactid="997">Yes, I don't use semicolons anymore. I'm very glad to not spend any time at all coordinating or even debating code styling decisions!</p>

<p data-jsx="206172832" data-reactid="1000">I look forward to applying this mindset to every language my teams and I develop with.</p>

<div data-jsx="1042520118" data-reactid="1003"><p data-jsx="206172832" data-reactid="1004">1. <a href="#s1" id="f1" data-jsx="4221070331" data-reactid="1008">^</a> If there's a way to <a href="https://en.wikipedia.org/wiki/Hedge_(finance)" target="_blank" data-reactid="1011"><em data-reactid="1012">hedge</em></a> the risky personal investment of launching a startup company, it surely must be to do it with people you love and respect.</p><p data-jsx="206172832" data-reactid="1016">2. <a href="#s2" id="f2" data-jsx="4221070331" data-reactid="1020">^</a> I think this section is particularly useful to analyze our own biases. I'll try to more diligently assemble it during 2017.</p></div>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://rauchg.com/2017/2016-in-review">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>