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>Leveling Up Your Organization With System Reviews (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://codeascraft.com/2015/12/21/leveling-up-with-system-reviews/">

<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>
  Leveling Up Your Organization With System Reviews (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://codeascraft.com/2015/12/21/leveling-up-with-system-reviews/">Source originale du contenu</a></h3>
    <p><span style="font-weight: 400;">One of Etsy’s core engineering philosophies has been to push decisions to the edges wherever possible. Rather than making dictatorial style decisions we enable people to make their own choices given the feedback of a group. We use the system review format to tackle organizational challenges that surface from a quickly growing company. A system review is a model that enables a large organization to take action on organizational and cultural issues before they become larger problems. They’re modeled after shared governance meetings – a </span><span style="font-weight: 400;">disciplined yet inclusive format that enables organizational progress and high levels of transparency. This form of leadership values continued hard work, open communication, trust and respect. </span></p>

<p><span style="font-weight: 400;">This idea was introduced by our Learning and Development team, who among other things run our manager training programs, our feedback system, and our dens program (a vehicle for confidential, small group discussions about leadership and challenges at work). A few years ago, we started bringing the engineering leadership group together on a recurring basis, but the agenda and outcome of these meetings were unclear. We always had something to talk about and discuss, but it was difficult to move forward and address issues. We were looking for something that was better facilitated, and for ways to bring our engineering leadership team together to provide the clear outcome of helping solve some of our organizational challenges. L&amp;D provided us with facilitation training and an overview of different meeting formats to use in different situations. Over time we’ve tested out some of these new meeting types, and the system review is one of the many formats we’ve learned to apply. They coached us through facilitating the first series of these new formats in our meetings over the the first several months.  We’re extremely fortunate to have a team of smart, focused individuals that have the background in providing solutions for these types of problems. We are sharing these insights here for the benefit of anyone interested in the topic.</span></p>

<p><span style="font-weight: 400;">These meetings can work well for anything from small groups of 20 up to large groups of 300 people. They may take a few times to get the hang of, but once you get into a rhythm it becomes an efficient format to survey a large group and take action on important issues. They should be held at a regular cadence, such as monthly or quarterly such that it creates a feedback loop of proactively raising new problems to address, while reporting findings and potential solutions to previously discussed topics. </span></p>

<p><span style="font-weight: 400;">When we are reviewing system issues we are looking into the following things: </span></p>

<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Where is there lack of clarity?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Where are people feeling frustrated?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Where are there glitches?</span></li>
</ul>

<p><span style="font-weight: 400;">System review meetings are based around a specific prompt taken from these areas, for example </span><span style="font-weight: 400;">“In what area of the engineering org do you feel there is currently a high degree of confusion or frustration?”.</span></p>

<h2>What does the agenda look like?</h2>

<p><span style="font-weight: 400;">This type of meeting needs to be timed and facilitated. The agenda is pretty straightforward, it’s important that the group observe the timer that the facilitator maintains and respect that they are moving the meeting along within the confines of a one-hour timeframe. </span><span style="font-weight: 400;">Facilitation is really an art in itself, and there are a lot of resources </span><a href="http://www.schoolreforminitiative.org/protocols/"><span style="font-weight: 400;">out there</span></a><span style="font-weight: 400;"> to help with improving the technique. Generally the facilitator should not be emotionally invested in the topic so they can remove themselves from the conversation and focus on moving the meeting forward. They should set and communicate the agenda, and make sure the room is set up to support the format and that the appropriate materials are provided. They should set the stage for the meeting &#8211; let people know why they are there, an overview of what they’ll be doing, and why it’s important. They should manage the agenda and timing. The timing is somewhat flexible within the greater time frame and should be adjusted as necessary based on the discussions taking place. It’s possible that a conversation is deeper than a time slot allows but the facilitator decides on the fly that it is important enough to cut time from another part of the meeting. However, every time the timer is ignored, the group slides away from healthy order and towards bad meeting anarchy, so it’s the facilitator&#8217;s job to keep this in check. To do this effectively, the facilitator needs to be comfortable interrupting the group to keep the meeting on track. And lastly the facilitator should close the meeting on time, summarize any key actions, agreements and next steps. </span></p>

<p><span style="font-weight: 400;">Below is the agenda for the high level format of the meeting. After presenting the prompt chosen for the meeting, the facilitator should divide the attendees into groups of approximately five people. Each member of the group individually generates ideas about it (sticky notes work great to collect these, one idea per sticky). Within these small groups, everyone shares their top two issues and the impact they feel each has. After everyone has shared theirs, the group should vote and tally the top three issues.  </span></p>

<p><span style="font-weight: 400;">The facilitator will then have everyone come back together as the larger group. Each of the subgroups will share the three things that they upvoted. After each round the larger group can ask clarifying questions. It’s a good idea if the facilitator maintains a spreadsheet with all of the ideas so that everyone can refer back to it. It comes in handy because the next phase is for everyone to vote on the issues. Take the top 3 &#8211; 5 issues as something to move forward on investigating.</span></p>

<div style="background-color: #f8f8f8; border: 1px solid #e2e2e2; padding: 0 2em;">
<p style="text-align: center;"><b>Sample Agenda</b></p>
<p><i><span style="font-weight: 400;">Prompt:</span></i><span style="font-weight: 400;">  In what area of the engineering org do you feel there is currently a high degree of confusion or frustration?</span></p>
<p><span style="font-weight: 400;">Small Groups (20 mins timed by facilitator)</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Solo brainstorm (2 mins full group)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Round-robin: share top 2 issues + their impact (2 mins per person)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Group vote: vote and tally top three (5 mins)</span></li>
</ol>
<p><span style="font-weight: 400;">Full Group (30 mins)</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Each group shares their three upvoted (2 mins per group)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Clarifying Questions asked (3 mins per round)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Full vote: Write 3 votes on post-its (3 mins)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Drivers volunteer</span></li>
</ol>
</div>

<h2>Next Steps</h2>

<p><span style="font-weight: 400;">After we have settled on the top issues, we need people in the group that are interested in working on investigating and bringing information back to the group at a later date. Hopefully at least one person is passionate enough about each topic to look into it further, or else it would not have been voted a top issue. Create a </span><a href="https://docs.google.com/spreadsheets/d/1RbHdqUo547vqGPQ5qD_l7SmaV-2NGyErt9_ps5ysA2g/edit?usp=sharing"><span style="font-weight: 400;">spreadsheet</span></a><span style="font-weight: 400;"> to maintain each topic, driver and the due date they propose to bring information back to the group.</span></p>

<p><span style="font-weight: 400;">Each of the drivers should report back on these questions to help the organization begin to understand the issue, report back on the answers they’ve acquired and decide on the next steps. This follow up can happen at the beginning of future meetings. </span></p>

<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Is anyone already on this? If so, where are they at with it &#8212; what roadblocks and small wins have they experienced?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">How wide and deep is the issue? In what ways are people and systems impacted? In what ways are people and systems impacted &#8211; good and bad? Where does the issue seem to originate or hit the hardest?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">If there are communication gaps, what factors seem to be leading to them? What helps or makes the communication gap worse?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">What&#8217;s next? Are there clear next steps coming up? Or are there things already in the works that could be duplicated or expanded? What options are out there? (You don&#8217;t have to propose one, just report back what seems to be the options.)</span></li>
</ul>

<h2>Conclusion</h2>

<p><span style="font-weight: 400;">System reviews are just one format that we can use to build communication, respect and trust across our team and organization. The purpose can be to surface possible glitches in the system, but also to achieve alignment on what the most important problems the group should spend their energy solving and to reach clarity around them. They can also be used to feed a topic into another format called the Decisions Roundtable, which is a similar type of meeting used to drive forward a proposal to make a change. Similar to </span><a href="https://codeascraft.com/2012/05/22/blameless-postmortems/"><span style="font-weight: 400;">post mortems</span></a><span style="font-weight: 400;"> and retrospectives, system reviews can be used to level up the organization and foster a learning culture. Some topics that we’ve explored in the past have been around how we think about hiring managers, why we deviated to using different tools to plan work, how we document things and where that information should live, clarity around career paths, and how we can address diversity and inclusivity in tech management. System reviews are used to help explore topics that may be difficult for some of the people in the group, but </span><span style="font-weight: 400;">as long as the process is handled sensitively, we all come out with better understanding, more empathy for the experiences of others and a stronger organization as a whole.</span></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://codeascraft.com/2015/12/21/leveling-up-with-system-reviews/">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>