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>#CivicTech Primer: What is “civic tech”? (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/@grodeska/civictech-primer-what-is-civic-tech-7ea788e766d3">

<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>
  #CivicTech Primer: What is “civic tech”? (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/@grodeska/civictech-primer-what-is-civic-tech-7ea788e766d3">Source originale du contenu</a></h3>
    <p name="7020" id="7020" class="graf--p graf-after--figure">Here in the Second Great Internet Bubble, we’ve come to accept Marc Andreessen’s maxim that “<em class="markup--em markup--p-em">software is eating the world</em>.” The evidence is outstanding for sectors like retail, social, finance and entertainment. And as you read this, software is quickly devouring many more sectors and systems, from transportation to health to energy. But our civic sphere — <a href="https://en.wikipedia.org/wiki/Public_sphere#Definitions_of_the_public_sphere" data-href="https://en.wikipedia.org/wiki/Public_sphere#Definitions_of_the_public_sphere" class="markup--anchor markup--p-anchor" rel="nofollow">the relationships in the public world that gather us together</a> into communities, cities, states and nations — stubbornly resists the advances of software.</p>

<p name="d097" id="d097" class="graf--p graf-after--p">Enter civic tech, a movement that aims to revitalize and transform some of our most fundamental societal institutions. A movement which also happens to account for <a href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" data-href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" class="markup--anchor markup--p-anchor" rel="nofollow">$6.4 billion to be spent in 2015 to connect citizens to services, and to one another</a>.</p>

<h4 name="6f8d" id="6f8d" class="graf--h4 graf-after--p">So What is “Civic Tech”?</h4>

<p name="2767" id="2767" class="graf--p graf-after--h4">For all the recent attention, civic tech remains an amorphous term. <a href="http://techcrunch.com/2015/04/29/civic-tech-is-ready-for-investment/" data-href="http://techcrunch.com/2015/04/29/civic-tech-is-ready-for-investment/" class="markup--anchor markup--p-anchor" rel="nofollow">TechCrunch recently offered a narrow interpretation of civic tech</a> as that used to “<em class="markup--em markup--p-em">empower citizens or help make government more accessible, efficient and effective</em>.” However, <a href="http://www.slideshare.net/knightfoundation/knight-civictech" data-href="http://www.slideshare.net/knightfoundation/knight-civictech" class="markup--anchor markup--p-anchor" rel="nofollow">the Knight Foundation painted a broader picture in their 2013 report on the rise of civic tech</a>, going beyond government to include “<em class="markup--em markup--p-em">residents engaging in their communities, including sharing their time, information and resources</em>.” Yet some draw a wider circle still. Beat reporter <a href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" data-href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" class="markup--anchor markup--p-anchor" rel="nofollow">Alex Howard thinks of civic tech</a> “as any tool or process that people as individuals or groups may use to affect the public arena.” And <a href="https://twitter.com/jedmiller/status/606450379253882881" data-href="https://twitter.com/jedmiller/status/606450379253882881" class="markup--anchor markup--p-anchor" rel="nofollow">Micah Sifry of Personal Democracy Media adds that civic technology “cannot be neutral,”</a> and only technology that is “<em class="markup--em markup--p-em">used for public good and betters the lives of the many, not just the few</em>” can be considered civic.</p>

<p name="cf58" id="cf58" class="graf--p graf-after--p">A brief history lesson may offer some clarity. Civic tech has its roots in government technology, a movement jump started by <a href="http://www.forbes.com/2009/08/10/government-internet-software-technology-breakthroughs-oreilly.html" data-href="http://www.forbes.com/2009/08/10/government-internet-software-technology-breakthroughs-oreilly.html" class="markup--anchor markup--p-anchor" rel="nofollow">Tim O’Reilly’s formative Government 2.0 call to action in 2009</a>. Decrying the “<em class="markup--em markup--p-em">vending machine</em>” model for government in which citizens put in our taxes and get services in return, he argued that we instead need an interoperable, extensible platform for government upon which anyone can build services that increase transparency, efficiency and participation.</p>

<p name="c512" id="c512" class="graf--p graf-after--p">Since that clarion call, a host of organizations like <a href="http://codeforamerica.org/" data-href="http://codeforamerica.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Code for America</a>, a “<em class="markup--em markup--p-em">Peace Corps for Geeks</em>,” have carried the conversation forward, out of government and into the tech sector. Viable business models have developed, like that of <a href="http://change.org/" data-href="http://change.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Change.org</a> and <a href="http://www2.seamlessdocs.com/" data-href="http://www2.seamlessdocs.com/" class="markup--anchor markup--p-anchor" rel="nofollow">SeamlessDocs</a>, and funders like <a href="https://www.omidyar.com/" data-href="https://www.omidyar.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Omidyar Network</a>, <a href="http://www.tumml.org/" data-href="http://www.tumml.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Tumml</a>, and <a href="http://govtechfund.com/" data-href="http://govtechfund.com/" class="markup--anchor markup--p-anchor" rel="nofollow">GovTech Fund</a> are starting to add civic tech to their portfolios. Tech inroads to government are being paved with the adoption of Chief Innovation Officers and open data portals at the local level and ground-breaking outfits like <a href="https://18f.gsa.gov/" data-href="https://18f.gsa.gov/" class="markup--anchor markup--p-anchor" rel="nofollow">18F</a> and the <a href="https://www.whitehouse.gov/digital/united-states-digital-service" data-href="https://www.whitehouse.gov/digital/united-states-digital-service" class="markup--anchor markup--p-anchor" rel="nofollow">U.S. Digital Service</a> at the Federal. This maturation and expansion has led <a href="http://www.knightfoundation.org/blogs/knightblog/2013/12/9/knight-foundations-civic-tech-report-why-it-matters/" data-href="http://www.knightfoundation.org/blogs/knightblog/2013/12/9/knight-foundations-civic-tech-report-why-it-matters/" class="markup--anchor markup--p-anchor" rel="nofollow">Tom Steinberg, founder of longstanding civic technology lab mySociety,</a> to observe that, as a brand name, <a href="http://www.google.com/trends/explore#q=civic%20tech%2C%20edemocracy%2C%20egovernment%2C%20digital%20government%2C%20gov%202.0&amp;geo=US&amp;cmpt=q&amp;tz=Etc%2FGMT%2B7" data-href="http://www.google.com/trends/explore#q=civic%20tech%2C%20edemocracy%2C%20egovernment%2C%20digital%20government%2C%20gov%202.0&amp;geo=US&amp;cmpt=q&amp;tz=Etc%2FGMT%2B7" class="markup--anchor markup--p-anchor" rel="nofollow"><em class="markup--em markup--p-em">“civic tech” has won out</em></a><em class="markup--em markup--p-em"> over past alternatives like “eGovernment” and “Gov 2.0</em>.”</p>

<h4 name="ddf9" id="ddf9" class="graf--h4 graf-after--p">Civic Tech is a Big Tent for Democracy</h4>

<p name="34f9" id="34f9" class="graf--p graf-after--h4">Which leads us to the present. I view civic tech as a new “big tent” movement for democracy that encapsulates many smaller segments, such as gov tech, online campaigning, digital advocacy, and voting tech. I am also a firm believer that “civic” is the operative word, meaning “us” and “we.” That is, people and communities, along with our hopes, dreams and needs, and the decisions that we make together to realize them. <em class="markup--em markup--p-em">With software continually devouring so much of our lives, I see civic tech as an opportunity to embed “we” at the center of our technology</em>. In civic tech, technology is always the means to an end, not the end itself.</p>

<p name="7575" id="7575" class="graf--p graf-after--p">As you can imagine, this perspective presents a civic tech space as wonderfully varied as the communities it aims to serve. Some will continue to be caught up on definitions. Is Facebook civic tech? What about SnapChat? Certainly, these tools can be used for both positive outcomes, like organizing a rally, or negative outcomes, like bullying or illegal surveillance. The dividing line comes back to intention. <em class="markup--em markup--p-em">Was this technology designed to improve the public good and better the lives of the many?</em></p>

<p name="b943" id="b943" class="graf--p graf-after--p">Let’s take a look at some of my favorite civic tech tools to illustrate this criteria in action:</p>

<ul class="postList"><li name="58b4" id="58b4" class="graf--li graf-after--p"><a href="https://neighborland.com/" data-href="https://neighborland.com/" class="markup--anchor markup--li-anchor" rel="nofollow">Neighborland</a>, a public input toolkit that “empowers civic leaders to collaborate with residents in an accessible, participatory, and enjoyable way.”</li><li name="e04f" id="e04f" class="graf--li graf-after--li"><a href="https://www.loomio.org/" data-href="https://www.loomio.org/" class="markup--anchor markup--li-anchor" rel="nofollow">Loomio</a>, a collective decision-making service that helps groups discuss topics, build proposals and make decisions together.</li><li name="66c3" id="66c3" class="graf--li graf-after--li"><a href="http://en.seeclickfix.com/" data-href="http://en.seeclickfix.com/" class="markup--anchor markup--li-anchor" rel="nofollow">SeeClickFix</a>, a communications platform for citizens to report and governments to manage non-emergency issues to foster “transparency, collaboration, and cooperation.</li><li name="7939" id="7939" class="graf--li graf-after--li"><a href="https://handup.org/" data-href="https://handup.org/" class="markup--anchor markup--li-anchor" rel="nofollow">Handup</a>, a charitable giving platform that facilitates direct donations to homeless neighbors in need.</li></ul>

<p name="5f19" id="5f19" class="graf--p graf-after--li">These and many other inspiring projects give me hope that the civic tech movement, and the passionate community behind it, will transform our communities, our workplaces and institutions to be more equitable, resilient, and even more fun. There are obstacles, of course. Some powerful people and institutions would rather not see communities empowered to make self-directed decisions. But I believe that the civic tech movement is putting people at the center of software development so that software doesn’t eat us, too. That’s why I founded <a href="http://civicmakers.org/" data-href="http://civicmakers.org/" class="markup--anchor markup--p-anchor" rel="nofollow">CivicMakers</a>, to highlight the growing array of civic tech solutions helping more people make better decisions together.</p>

<p name="a7e8" id="a7e8" class="graf--p graf-after--p graf--last">This is my first of four posts introducing civic tech to those new to the sector. I hope you follow along. And if you have a tool or project you’d like to share, or just want to know more about civic tech, I’d love to hear from you.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/@grodeska/civictech-primer-what-is-civic-tech-7ea788e766d3">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>