davidbgk
/
larlet-fr-david-cache

<!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>Three protocols and a future of the decentralized internet (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://blog.datproject.org/2019/03/22/three-protocols-and-a-future-of-the-decentralized-internet/">

<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>
  Three protocols and a future of the decentralized internet (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://blog.datproject.org/2019/03/22/three-protocols-and-a-future-of-the-decentralized-internet/">Source originale du contenu</a></h3>
    <p>Hi, I'm Darius Kazemi and I'm Code for Science &amp; Society's <a href="https://blog.mozilla.org/blog/2018/08/21/mozilla-announces-25-new-fellows-in-openness-science-and-tech-policy/">Mozilla Fellow</a>. I'm halfway through my fellowship and we thought now would be a good time for me to share some of the things that I've been researching, building, and planning.</p>

<p>I knew coming into this fellowship that I wanted my work to be about the decentralized web as a whole, and not just Dat. CS&amp;S was totally receptive to that and so I've been spending time learning about Dat, but also about <a href="https://www.scuttlebutt.nz/">Secure ScuttleButt</a> and <a href="https://activitypub.rocks/">ActivityPub</a>.</p>

<p>If what we broadly want is for power to be redistributed from the hands of large centralized corporate interests and back into the hands of individual people and small groups, then we already have the technical protocols to do this. No one protocol will enable this shift in power; each protocol has its strengths and weaknesses. What is needed is software that utilizes these protocols for their strengths, which is to say what is needed is developers and designers who are willing to act as bridges between the communities of practice surrounding the protocols.</p>

<h2 id="complementaryprotocolsworkingtogether">Complementary protocols, working together</h2>

<p>I recently attended ScuttleCamp outside of Wellington, New Zealand. A bunch of Secure ScuttleButt community members met up in order to talk about what works and what doesn't with SSB, and where the community would like it to go in the future. It was a great event that I would estimate consisted of equal parts core SSB project team, active users of SSB, and interested outsiders (like me). It was in &quot;unconference&quot; format, so the attendees came up with the schedule on the fly. I was pleasantly surprised to see two Dat sessions pop up, including one on &quot;Bridging Dat and SSB&quot;. There seemed to be a lot of understanding from the SSB team and even users that SSB has its strengths and weaknesses, and it would make sense to use multiple decentralized/distributed protocols to provide great, useful, people-powered software.</p>

<p>In addition to working with and meeting people from the Dat and SSB community, I've been <a href="https://github.com/dariusk/express-activitypub">developing</a> <a href="https://github.com/dariusk/rss-to-activitypub/">software</a> that uses ActivityPub. ActivityPub is yet another protocol that tries to reduce our reliance on tech giants to do the kind of things we want to do with the internet. I <a href="https://hacks.mozilla.org/2018/11/decentralizing-social-interactions-with-activitypub/">wrote an introduction to ActivityPub for the Mozilla Hacks blog</a> that might be a helpful read.</p>

<p>In the course of learning about these three protocols and being inspired by conversations with the people that use them, I've come to see them as fulfilling different, complementary roles.</p>

<p>I'll try and sketch them out here <em>extremely</em> briefly and broadly, and conclude with my thoughts on how we can design better software by bridging these technologies. (I know there are more technologies out there than these three, but these are the three that I know best.)</p>

<h3 id="dat">Dat</h3>

<p>If you're reading this blog, chances are you already know about Dat. Dat was invented to allow researchers to share very large data sets with each other. It's a protocol that powers software like <a href="https://beakerbrowser.com/">Beaker Browser</a>, a web browser that lets you create and publish your own websites without needing a web hosting service.</p>

<p>My basic bullet points:</p>

<ul>
<li>Peer to peer protocol, can share data via your laptop or phone without connecting to some company's server, no out-of-the-box web browser support</li>
<li>All your content is its own hidden island until its URL is sent to someone else; that person can share the URL or even post it somewhere public and now your island is on the map</li>
<li>Good for sharing large files, your friends can consent to re-sharing them if they want</li>
<li>Sends blobs of unstructured data around (you can add your own structure)</li>
<li>Discovering new stuff requires manually sharing links</li>
</ul>

<h3 id="securescuttlebutt">Secure ScuttleButt</h3>

<p>Secure ScuttleButt (SSB) was invented, at least in part, to remove distinctions between frontend and backend software, enabling the &quot;backend&quot; to be carried around by a user, who then owns their own data. SSB is a protocol that, like Dat, powers <a href="https://www.scuttlebutt.nz/applications">a bunch of different decentralized applications</a>. Chief among them is <a href="https://www.scuttlebutt.nz/getting-started">Patchwork</a>, which is a kind of decentralized forum software that lets people have and follow conversations about different topics. SSB is also used for things like <a href="https://github.com/Happy0/ssb-chess-mithril/blob/master/README.md">decentralized chess</a> and <a href="https://github.com/noffle/git-ssb-intro">decentralized GitHub-style code collaboration</a>.</p>

<p>My basic bullet points:</p>

<ul>
<li>Peer to peer protocol, can share data via your laptop or phone without connecting to some company's server, no out-of-the-box web browser support</li>
<li>Automatic publication of content to your friends</li>
<li>Bad for sharing large files; among other things you don't want to force all your friends to store all your large files</li>
<li>Sends blobs of unstructured data around (you can add your own structure)</li>
<li>Discovering new stuff is somewhat automatic; once you are initially connected to a network then you can find friends-of-friends and keep connecting to more people</li>
</ul>

<h3 id="activitypub">ActivityPub</h3>

<p>ActivityPub was designed to solve the problem of &quot;walled gardens&quot; on the internet by providing a common language for websites and apps to speak to each other. Quoting <a href="https://hacks.mozilla.org/2018/11/decentralizing-social-interactions-with-activitypub/">my previous writing on the topic</a>, ActivityPub is a protocol that &quot;enables a decentralized social web, where a network of servers interact with each other on behalf of individual users/clients, very much like email operates at a macro level.&quot; It enables Twitter-style services like <a href="https://joinmastodon.org">Mastodon</a> to talk to Instagram-style services like <a href="https://pixelfed.social/">PixelFed</a> and YouTube-style services like <a href="https://joinpeertube.org/en/">PeerTube</a>. (Brief nerd note: I am referring to the server-to-server portion of the protocol here.)</p>

<p>My basic bullet points:</p>

<ul>
<li>Web protocol, so it works in all desktop and mobile web browsers without special software</li>
<li>Not peer to peer, relies on special network nodes (servers) and an expert class of systems administrators to operate</li>
<li>Since content is &quot;federated&quot; (replicated) between known servers, large files can fill up server hard drives pretty fast</li>
<li>Designed around sending highly structured data</li>
<li>Discovering new stuff can be pretty easy, it's not too different from existing centralized services that way</li>
</ul>

<h2 id="whatthismeans">What this means</h2>

<p>I've started thinking of these three protocols as each solving certain problems in the universe of software design, and when we understand where the protocols fit into the design space, we can start to think of solutions to seemingly intractable problems.</p>

<ul>
<li>
<p>Dat is great for sharing big files (or bundles of small files).</p>
</li>
<li>
<p>Secure ScuttleButt is great for spreading messages organically between connected networks of people or computers.</p>
</li>
<li>
<p>ActivityPub is great for coordinating messages between networks of always-on servers that are actively maintained by specialist systems administrators.</p>
</li>
</ul>

<p>Looking at the software this way gives us a framework to design complex decentralized services.</p>

<p>For example: how can we have a Google Drive style system where a bunch of people can just connect to each other's computers and share files that way, removing the giant tech company in the middle? Maybe we serve the files over Dat, we have a small network of always-on Dat pinning servers that coordinate with each other over ActivityPub to share file serving responsibilities, and perhaps discovery of what files my friends have been posting happens over Secure ScuttleButt. Maybe every pinning server is also a SSB pub, and <em>these</em> coordinate over ActivityPub so there is robust delivery of social data to every user too. That's a very rough example and of course there are lots of problems that would need to be solved but it gives us a starting point for thinking about how to make this thing happen.</p>

<h2 id="conclusion">Conclusion</h2>

<p>All of this points to two major recommendations that I can make.</p>

<p>First, that software developers should not be afraid to mix, match, and layer protocols. There is no rule that says you can't do this, yet I've noticed people picking one protocol and sticking to it out of some kind of loyalty. When really, as a developer, your loyalty should be to your values of an open, decentralized internet, whatever those are. If we view these protocols as tools in a toolbox rather than monolithic solutions or ecosystems, we can build decentralized software that rivals and surpasses in utility anything the big centralized tech giants have to offer.</p>

<p>Second, communities that build and support these protocols need to keep their specific strengths and weaknesses in mind. Instead of trying to make a &quot;kitchen sink&quot; protocol that solves a wide variety of problems, we should acknowledge the limitations of our protocols (and our own resources) and instead support and foster interoperability and collaboration between our communities.</p>

<p>The internet has always been built on a bunch of different technologies filling in the gaps for each other. For example, while web browsers mainly use the TCP protocol for loading web pages, they switch to using UDP when it's convenient for things like video chat. Decentralized web protocols should be no exception to this pattern. The only way we're going to make the internet better is by working together to help each other.</p>

<p><em>Thanks to Joe Hand and <a href="http://eight45.net/">noffle</a> for feedback, and to <a href="https://coolguy.website/">Zach Mandeville</a> and <a href="https://www.cameralibre.cc/">Sam Muirhead</a> for getting me thinking about this in the first place.</em></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://blog.datproject.org/2019/03/22/three-protocols-and-a-future-of-the-decentralized-internet/">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>