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>Work & Learn Out Loud (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://medium.com/weseek/work-learn-out-loud-bf86dda1cb3c">

<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>
  Work & Learn Out Loud (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://medium.com/weseek/work-learn-out-loud-bf86dda1cb3c">Source originale du contenu</a></h3>
    <div class="section-inner sectionLayout--insetColumn"><p name="3664" id="3664" class="graf graf--p graf-after--figure">As you might have read, we are <a href="https://medium.com/weseek/how-were-turning-our-workplace-into-a-learnplace-c152290c5704" data-href="https://medium.com/weseek/how-were-turning-our-workplace-into-a-learnplace-c152290c5704" class="markup--anchor markup--p-anchor" target="_blank">Turning Our Workplace Into a Learnplace</a>. Definitely take the time to read the whole piece, it’s structural to a lot of what we will share here on <em class="markup--em markup--p-em">We Seek</em> going forward. It started with a question:</p><blockquote name="f791" id="f791" class="graf graf--blockquote graf-after--p">[W]hat if we prioritized learning in everything we do? What if production was a side-benefit of learning, and not the other way around? What if we thought of e180 as a school for its team members, instead of a company? What if, instead of going to work, we were going to learn?</blockquote><p name="88dc" id="88dc" class="graf graf--p graf-after--blockquote">One of the components of this is that we need to learn from each other in the flow of work.<strong class="markup--strong markup--p-strong"> People who are constantly learning and adapting need to draw from the teammates around them, collaborate, and be able to lean on each other. </strong>This involves not only communication between those working on a project but also transparency across the organization so that others can give a hand when projects overlap with their expertise.</p><p name="ea50" id="ea50" class="graf graf--p graf-after--p">Which also helps address some other issues for a growing company:</p><ul class="postList"><li name="7e1e" id="7e1e" class="graf graf--li graf-after--p">In a remote workforce, it’s important to determine how information flows, you can’t simply trust that everyone is there or ‘around.’</li><li name="0e24" id="0e24" class="graf graf--li graf-after--li">Even in the main office, we’ve reached a size where we need to specifically pay attention to keeping people in the loop.</li></ul><p name="959d" id="959d" class="graf graf--p graf-after--li">To achieve this, we are instilling the idea and practice of “Working out Loud.” The topic has been written about for a few years now, it usually means one of two things:</p><p name="c3c4" id="c3c4" class="graf graf--p graf-after--p">On a personal level, it can mean sharing your own work publicly to build a network, a community of practice, and advance your skills with outside help. This is usually done through the use of public social networks, and blogs.</p><blockquote name="ba6b" id="ba6b" class="graf graf--blockquote graf-after--p">It involves putting incomplete thoughts and ideas out into the world and getting feedback. Learning out loud is the cognitive equivalent of learning by doing. It is a proactive and iterative approach that involves making mistakes and adjusting accordingly.<br/> — <a href="https://www.simonwaller.com.au/we-need-to-learn-out-loud/" data-href="https://www.simonwaller.com.au/we-need-to-learn-out-loud/" class="markup--anchor markup--blockquote-anchor" rel="nofollow noopener" target="_blank">Simon Waller, We need to learn out loud</a></blockquote><p name="a94a" id="a94a" class="graf graf--p graf-after--blockquote">On an organizational level, it means making sure your work is available internally and that you communicate what you are working on. This usually involves the use of document sharing and private social networks, like HipChat, Yammer, and Slack. We’ll be focusing on this second angle and especially this useful <a href="https://thebryceswrite.com/2010/11/29/when-will-we-work-out-loud-soon/" data-href="https://thebryceswrite.com/2010/11/29/when-will-we-work-out-loud-soon/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">formula</a>:</p><p name="66a6" id="66a6" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Working Out Loud = Observable Work + Narrating Your Work</em></p><p name="6f7f" id="6f7f" class="graf graf--p graf-after--p">It’s from Bryce Williams and he explains it like this:</p><blockquote name="e237" id="e237" class="graf graf--blockquote graf-after--p">[N]arrating your work is “journaling…what you are doing in an open way.” And making your work observable is “creating/modifying/storing your work in places that others can see it, follow it, and contribute to it <strong class="markup--strong markup--blockquote-strong">in process</strong>.”</blockquote><p name="902d" id="902d" class="graf graf--p graf-after--blockquote">It’s useful because it identifies what is often already done in organizations; making your work observable. Meaning that your documents are available throughout the company (Google Docs for example) and others can access what you are working on. The second part is powerful, new to many, and often forgotten; stating, in an internal forum, what you are working on; the milestones, accomplishments, blockers, pivots, cancellations, successes, and failures (learning opportunities).</p><p name="18bb" id="18bb" class="graf graf--p graf-after--p">Taken together, you have the availability of documents and the communication of what’s going on. An additional advantage of viewing this as two parts is that it can prove less intimidating. WOL can feel like sharing everything and working in front of everyone, something many are hesitant to do. Adding the formula and the concept of ‘narrating’ explicitly splits documenting and explaining.</p><h3 name="6924" id="6924" class="graf graf--h3 graf-after--p">Tacit Knowledge</h3><p name="c63a" id="c63a" class="graf graf--p graf-after--h3">We also have to talk about the need for tacit knowledge — that people are not aware they possess or how it can be valuable to others — to be surfaced and shared. When an organization doesn’t do this intentionally, it loses that knowledge. (The following is quoted from<a href="http://theelearningcoach.com/learning/tacit-knowledge-transfer/" data-href="http://theelearningcoach.com/learning/tacit-knowledge-transfer/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank"> Strategies For Tacit Knowledge Transfer</a>.)</p><ul class="postList"><li name="42c3" id="42c3" class="graf graf--li graf-after--p">When people with expertise leave a job, the organization often loses critical tacit knowledge because it was not passed on to others.</li><li name="4c86" id="4c86" class="graf graf--li graf-after--li">Organizations need ways to glean and disseminate the tacit knowledge of experts for their own preservation. Tacit knowledge transmission is essential to an organization’s future success.</li><li name="1847" id="1847" class="graf graf--li graf-after--li">Without an awareness of it, tacit knowledge can be overwritten and lost. To avoid this, it is important to raise awareness of the organization’s tacit knowledge store and make it explicit through knowledge management strategies.</li></ul><p name="4846" id="4846" class="graf graf--p graf-after--li">A well understood and applied ritual of Working Out Loud goes a long way in expressing and sharing tacit knowledge.</p><h3 name="66b3" id="66b3" class="graf graf--h3 graf-after--p">Learning Out Loud</h3><p name="8781" id="8781" class="graf graf--p graf-after--h3">As mentioned earlier, for us the need for such a practice comes mainly out of a learning intent. First on an incidental level:</p><blockquote name="2f0c" id="2f0c" class="graf graf--blockquote graf-after--p">When exceptions to the workflow occur these can be saved as explicit cases from which to learn. Recording of decisions, including decisions not to do something, ensure that we can go back and reflect upon what we have done, and learn from the past. This becomes a virtuous cycle of implicit to explicit knowledge flows. <br/> — <a href="http://jarche.com/2018/01/a-vision-for-learning/" data-href="http://jarche.com/2018/01/a-vision-for-learning/" class="markup--anchor markup--blockquote-anchor" rel="nofollow noopener" target="_blank">Harold Jarche, A vision for learning</a></blockquote><p name="82df" id="82df" class="graf graf--p graf-after--blockquote">But we also want to be even more intentional and we are attaching this idea to some other programs we are prototyping. We’ll get back to those and to more details about Learning out Loud in upcoming articles but for now, it might look something like this:</p><p name="17d9" id="17d9" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Learning Out Loud = Observable goals and needs + Narrating your progress</em></p><h3 name="35aa" id="35aa" class="graf graf--h3 graf-after--p">Noise &amp; Need</h3><p name="ac17" id="ac17" class="graf graf--p graf-after--h3">Some comments that often come up are “I already have too much information” and “who needs to know about this anyway?” That’s why we are working on establishing some guidelines around:</p><ol class="postList"><li name="9292" id="9292" class="graf graf--li graf-after--p">What should be observable / documented.</li><li name="ca2c" id="ca2c" class="graf graf--li graf-after--li">What should be shared.</li><li name="52a1" id="52a1" class="graf graf--li graf-after--li">Where the information should go.</li></ol><p name="86c2" id="86c2" class="graf graf--p graf-after--li">The process is not about everyone knowing everything. Rather, it’s about being <em class="markup--em markup--p-em">able</em> to without <em class="markup--em markup--p-em">having</em> to. This is why the narrated + observable framing is important.</p><blockquote name="4244" id="4244" class="graf graf--blockquote graf-after--p">By “journaling” your work in this platform, the current information is at the forefront <strong class="markup--strong markup--blockquote-strong">for people that are interested to find</strong>, but the history of those stories is retained and easy to find as well.</blockquote><p name="b891" id="b891" class="graf graf--p graf-after--blockquote">With a habit of narrating and of regularly glancing at the sharing platform, you can have a good idea of what’s going on. When you need to know more, want to know, or can help or participate, you can easily have a closer look and find the right documents.</p><blockquote name="4509" id="4509" class="graf graf--blockquote graf-after--p">By shifting your primary work and communications out of knowledge silos and into observable platforms, anyone following the work can answer those questions or find answers to those questions with little effort.<br/> — <a href="https://thebryceswrite.com/2010/11/29/when-will-we-work-out-loud-soon/" data-href="https://thebryceswrite.com/2010/11/29/when-will-we-work-out-loud-soon/" class="markup--anchor markup--blockquote-anchor" rel="nofollow noopener" target="_blank">Bryce Williams, When will we Work Out Loud? Soon!</a></blockquote><h3 name="3e77" id="3e77" class="graf graf--h3 graf-after--blockquote">Transformation</h3><p name="04fb" id="04fb" class="graf graf--p graf-after--h3">One last piece we want to attach to this practice is the idea of transformation. We have noticed that even if we sit and share findings after a project or write them down in a document, often times that doesn’t actually transform the way we do things. We want to answer questions like; how can we focus on a few key learnings we truly want to activate? How do we go from transparency and observation to next steps, adaptation and transformation?</p><p name="6137" id="6137" class="graf graf--p graf-after--p graf--trailing">This is another part of our process for turning our workplace into a learnplace and we look forward to sharing our conclusions here. In the meantime, we are always very interested to learn more about your own processes, learnings and transformation so do comment below and <a href="mailto:magazine@e-180.com" data-href="mailto:magazine@e-180.com" class="markup--anchor markup--p-anchor" target="_blank">get in touch</a>.</p></div>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/weseek/work-learn-out-loud-bf86dda1cb3c">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>