davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 Commits
1 Branch
Tree: cb5ea599a9
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'cb5ea599a9'
${ noResults }
larlet-fr-david/david/blog/2018/startup-nation/index.html

index.html 34KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Start-up nation — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2018/startup-nation/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Les Startups d’État sont différentes !" />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Les Startups d’État sont différentes !" />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Start-up nation" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2018/startup-nation/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39.   

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2018/startup-nation.jpg" />

  41.   

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

  79. /* http://practicaltypography.com/equity.html */

  80. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  81. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  82. @font-face {

  83.   font-family: 'EquityTextB';

  84.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  85.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

  92.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  93.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

  100.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  101.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

  109.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  110.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

  117. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  118. body {

  119.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  120.   font-family: "EquityTextB", Palatino, serif;

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

  124.   -moz-osx-font-smoothing: grayscale;

  125.   -webkit-font-smoothing: subpixel-antialiased;

  126.   text-rendering: optimizeLegibility;

  127.   font-variant-ligatures: common-ligatures contextual;

  128.   font-feature-settings: "kern", "liga", "clig", "calt";

  129. }

  130. pre, code, kbd, samp, var, tt {

  131.   font-family: 'TriplicateT4c', monospace;

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

  149.     border-bottom: 1vh solid #2d7474;

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

  159.   border-top: 1vh solid #2d7474;

  160.   border-bottom: .2vh dotted #2d7474;

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

  181.       padding: 1rem 1.2rem .6rem 1.2rem;

  182.       border-radius: 0 0 6% 6%;

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

  190.   border-top: .2vh solid #2d7474;

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

  215.   text-decoration-skip-ink: auto;

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

  226.     border-top: .2vh dotted #2d7474;

  227.     margin: -6rem auto 1rem auto;

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

  245.   border-left: .5vw solid #2d7474;

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

  260.   border-top: .2vh solid #2d7474;

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

  271.     border: .5vw solid #323a45;

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

  283.   border-bottom: .2vh solid #07486c;

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

  290. /* https://fvsch.com/code/css-locks/ */

  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  292.   font-size: 1rem;

  293.   line-height: calc( 1.5em + 0.2 * 1rem );

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

  297.   line-height: calc( 1.2em + 0.2 * 1rem );

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

  301.   line-height: calc( 1.3em + 0.2 * 1rem );

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

  305.   line-height: calc( 1.4em + 0.2 * 1rem );

  306. }

  307. @media (min-width: 20em) {

  308.   /* The (100vw - 20rem) / (50 - 20) part

  309.      resolves to 0-1rem, depending on the

  310.      viewport width (between 20em and 50em). */

  311.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  312.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  313.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  314.     margin-left: 0;

  315.   }

  316.   h1 {

  317.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  318.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  319.   }

  320.   h2 {

  321.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  322.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  323.   }

  324.   h3 {

  325.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  326.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  327.   }

  328. }

  329. @media (min-width: 50em) {

  330.   /* The right part of the addition *must* be a

  331.      rem value. In this example we *could* change

  332.      the whole declaration to font-size:2.5rem,

  333.      but if our baseline value was not expressed

  334.      in rem we would have to use calc. */

  335.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  336.     font-size: calc( 1rem + .6 * 1rem );

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

  343.     font-size: calc( 1.9rem + 1.5 * 1rem );

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

  347.     font-size: calc( 1.5rem + 1.5 * 1rem );

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

  351.     font-size: calc( 1.35rem + 1.5 * 1rem );

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

  370.   body { font-size: 100%; }

  371.   a:after { content: " (" attr(href) ")"; }

  372.   a, a:link, a:visited, a:after {

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

  379.   abbr[title] { border-bottom: 0; }

  380.   abbr[title]:after { content: " (" attr(title) ")"; }

  381.   img { page-break-inside: avoid; }

  382.   @page { margin: 2cm .5cm; }

  383.   h1, h2, h3 { page-break-after: avoid; }

  384.   p3 { orphans: 3; widows: 3; }

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

  395. @media (min-width: 20em) {

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

  400. @media (min-width: 50em) {

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

  408. @media (min-width: 20em) {

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

  413. @media (min-width: 50em) {

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

  453.     -webkit-shape-outside: circle();

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

  458.     border-left: 1px solid #f1c40f;

  459.     border-top: 1px solid #f1c40f;

  460.     border-right: 5px solid #f1c40f;

  461.     border-bottom: 5px solid #f1c40f;

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

  466.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  467.   Start-up nation

  468.   <time>Publié le 12 juin 2018</time>

  469. </h1>

  470. <article class="single">

  471.   <details lang=en>

  472.   <summary>Summary in English</summary>

  473.   <p>Please stop messing around with start-up nation and Startups d’État names. These concepts are really different.</p>

  474. </details>

  475. 

  476. <blockquote>

  477. <p>Et pour cela, un seul modèle tout prêt à l’emprunt, celui des plates-formes et des start-ups. On aurait pu penser que « l’état plate-forme » serait devenu le slogan de Macron et de toute l’administration, sous l’influence de l’élite économique et des réseaux de consultants qui gravitent autour de lui. J’avais signalé comment l’ouvrage de Colin et Verdier sur « l’âge de la multitude » vantait de façon quasi obscène la performance des plates-formes, à l’époque (2012) où Uber émergeait avec la philosophie de barbare qu’on connait (et dont les auteurs se réjouissaient puisque cela allait enfin bousculer toutes les rentes) et où les GAFA devenaient les maitres du monde, les nouveaux suzerains auprès desquels tous les gouvernements faisaient figure de vassaux.</p>

  478. <p><cite><em><a href="https://blogs.mediapart.fr/dominique-g-boullier/blog/070618/le-dogme-de-la-startup-nation-l-attaque-du-service-public">Le dogme de la "startup nation" à l’attaque du service public</a></em> (<a href="/david/cache/ee1a15eed46e2fd9cef9b41ee81036cb/">cache</a>)</cite></p>

  479. </blockquote>

  480. <p><em>Avertissement : je participe aux Startups d’État depuis 3 ans où j’ai contribué à 3 produits différents. Les propos qui suivent sont le fruit d’une réflexion personnelle.</em></p>

  481. <p>Il y a beaucoup de choses qui se mélangent dans cet article, à commencer par <a href="https://twitter.com/emmanuelmacron/status/852561494810251264?lang=en">start-up nation</a> et <a href="https://beta.gouv.fr/apropos/">Startups d’État</a> (<a href="/david/cache/86939b13f2cea3d1ffbaa5b544fe5e45/">cache</a>) qui sont deux concepts que je considère être aux antipodes mais qui ne cessent d’être associés dans mon entourage. Je vais tenter de clarifier en répondant point par point :</p>

  482. <h2>Recette 1: table rase</h2>

  483. <blockquote>

  484. <p>Ressources étonnantes qui ne figurent pas dans les méthodes innovantes proposées : une histoire, une mémoire, une généalogie, une trace de tout ce qui a été tenté et de tout ce qu’on peut apprendre, des réussites comme des échecs. Voilà un des syndromes de l’idéologie startupiste […] : l’inculture historique</p>

  485. </blockquote>

  486. <p>Le programme <a href="https://entrepreneur-interet-general.etalab.gouv.fr/">Entrepreneur.e d’Intérêt Général</a> c’est justement de recruter quelqu’un de l’extérieur pour être en binôme avec un agent qui a la connaissance de l’irritant, qui a déjà tenté des choses et qui est une mémoire vivante de la problématique.</p>

  487. <p>Il s’agit aussi d’une acculturation à double sens qui est nécessaire pour établir un lien d’empathie avec les personnes affectées au quotidien par le problème. L’attitude que j’observe n’est pas de nature conquérante mais bien au contraire compréhensive et bienveillante. Il ne s’agit pas de disrupter mais d’accompagner.</p>

  488. <h2>Recette 2: créativité oui! controverse non!</h2>

  489. <blockquote>

  490. <p>Car on peut développer une interface géniale et très « user friendly » d’une application et avoir des retours très satisfaits de ces clients futurs ou réels alors même que l’application crée un désastre économique […], écologique […] ou moral […]. Où se trouve la boite à outils des controverses, des débats publics, du bien commun qui exige débat, contradiction et souci, souci constant des développeurs eux-mêmes à propos de la finalité de leur travail. Car oui, même les geeks et startupers sont responsables et se rendent compte qu’on leur fait parfois produire des dispositifs d’asservissement. […] La disparition du politique, voici le second syndrome du dogme startupiste.</p>

  491. </blockquote>

  492. <p>La pensée politique se décline à plusieurs échelles :</p>

  493. <ul>

  494. <li>à titre personnel, je pense que l’on a tous nos propres tiraillements et pour ma part <a href="/david/stream/2018/04/25/">je ne les cache pas</a> et <a href="/david/stream/2018/06/06/">je me rassure comme je peux</a> ;</li>

  495. <li>à titre d’équipe, il faut considérer ces startups comme des espaces de collaboration et de réflexion sur un sujet donné, les échanges sont nombreux et loin d’être restreints à la technique ;</li>

  496. <li>à titre de communauté, les startups ne sont pas isolées entre elles et communiquent de manière transverse pour échanger leurs pratiques mais aussi leurs craintes et leurs doutes ;</li>

  497. <li>à titre de mouvement, il y a des initiatives dans tous les pays et les <a href="/david/stream/2018/05/22/">questionnements sont proches</a>.</li>

  498. </ul>

  499. <p>Ces différents niveau de réflexion me semblent être suffisants pour que la controverse existe. Sans compter que les personnes externes (dont je fais partie) sont aussi là en tant que citoyens plus ou moins engagés.</p>

  500. <h2>Recette 3: passage à l’acte</h2>

  501. <blockquote>

  502. <p>Ils verraient alors à quel point les cultures politiques ont disparu pour faire place à un impératif quasi fusionnel autour des promesses de la technologie et surtout au passage à l’acte, celui du producteur de code. Il s’agit bien d’un passage à l’acte au sens psychanalytique, qui suspend toute élaboration du désir pour lui substituer la réactivité de la pulsion, dont on ne peut produire aucune réflexivité et qui ne supporte pas l’idée même d’un débat, d’un colloque, soit-il singulier. […] C’est dire à quel point le sens politique du débat, pourtant vital pour la démocratie, a été perdu au profit d’un modèle du confessionnal. On peut donc continuer à passer à l’acte à condition de s’excuser, ce qui revient à ajouter un nouveau terme au slogan du monde numérique « rough consensus, running code… and apologies » !</p>

  503. </blockquote>

  504. <p>Je vois une certaine naïveté dans cette pensée qu’il n’y a pas un humain derrière ce <em>producteur de code</em> qui est lui-même un citoyen (potentiellement usager de son propre outil au passage). Il ne faut pas croire également que les startups sont développées complètement hors-sol, au contraire, il s’agit de s’intégrer dans un écosystème existant et de coopérer avec les différents groupes afin de se coordonner et d’aller dans la même direction. Celle qui semble correspondre aux besoins des citoyens.</p>

  505. <h2>Recette 4: court-termisme (quick wins en français)</h2>

  506. <blockquote>

  507. <p>Une dernière dimension me parait totalement absente des discours sur l’adaptation des services publics, celle de la vision. Elle est en quelque sorte le contre point de la mémoire et de la table rase. On pourrait en effet rester indulgent devant le mépris de la mémoire (et donc du passé) si la vision du futur était assez puissante et convaincante. </p>

  508. </blockquote>

  509. <p>Ici, je dois avouer que je reste pour l’instant sur ma faim. La vision se dessine au fur et à mesure de l’avancée du projet mais il manque parfois un cap clair dans ce qui est produit et pour quelles finalités. Les externalités sont toujours nombreuses et c’est là où les choix politiques ont leur importance pour orienter et donner de la valeur à l’une plutôt qu’à l’autre.</p>

  510. <p>En revanche, là où la <em>proposition du futur</em> me semble enthousiasmante c’est de montrer qu’une petite équipe est en capacité de réduire un petit irritant. Et que cela puisse donner de l’espoir et de l’envie à d’autres, façon colibris.</p>

  511. <h2>Recette 5: metoo (l’autre!) et tyrannie du retard</h2>

  512. <blockquote>

  513. <p>Or, l’impératif de vision à long terme et de « devenir avec » (les usagers, les talents et les envies des agents) est au cœur du service public et si l’on considère qu’il est absent, ce n’est certainement pas en installant une dénégation de la responsabilité à long terme et de vision, attribuée aux start-ups, que l’on va remédier à la situation. Au bout du compte, c’est avant tout la pression de l’innovation <strong>technologique</strong> qui semble être le seul moteur d’innovation.</p>

  514. </blockquote>

  515. <p>Plus j’acquiers de l’expérience et plus je me rends compte que l’innovation au cœur des Startups d’État n’est pas tant dans la technologie que dans le fait de montrer que des interactions entre ministères sont possibles, que la donnée gagne à être partagée avec tous, que les agents peuvent produire un bien commun plus qu’un bien politique (au sens de <em>Politikè</em> et non de <em>Politeia</em>). Plus que des produits innovants, ce sont les produits inspirants qui m’animent.</p>

  516. <h2>Un design organisationnel pluriel et coopératif est possible</h2>

  517. <blockquote>

  518. <p>Les agents des services publics connaissent les points de blocage et se focaliseront plus facilement sur cette créativité organisationnelle parce qu’ils sont à l’intérieur des services et savent qu’on ne peut pas repartir de zéro. Comment leur redonne-t-on confiance dans leur propre esprit d’initiative, alors qu’on a passé des années à les décourager pour des raisons de procédure, pour des rivalités de clocher ou pour des réductions de moyens systématiques ? Que peuvent-nous dire les pratiques des start-ups pour changer cela ? Quasiment rien, car leur objet, leur situation, leurs cultures, leurs contraintes ne sont pas du tout de cet ordre.</p>

  519. </blockquote>

  520. <p>J’espère avoir montré qu’il y a peut-être une alternative. Pour l’anecdote, je ne suis peut-être pas un statupers pur souche mais j’ai quand même évolué dans quelques-unes et mon contact avec le service public me permet aujourd’hui justement d’appréhender cette culture différente et ces contraintes associées. Les divergences culturelles ne peuvent être forcées de manière unilatérale, cela passe forcément par un échange et une compréhension de l’autre, fut-il agent, citoyen ou ministre. Sans ce contact, je n’aurais probablement pas exploré les <a href="/david/blog/2017/donnees-communs/">communs</a>, les <a href="/david/blog/2017/algorithmes-public-relations/">algorithmes</a> ou <a href="/david/blog/2016/delivery-values/">l’importance de la maintenance</a> et de la <a href="/david/blog/2016/simplicite-defaut/">simplicité requise</a> pour y accéder.</p>

  521. <p>C’est ce qui me motive aujourd’hui : être au contact d’autres cultures afin d’être toujours en capacité de pouvoir changer. De la nécessité d’une certaine entropie pour pouvoir continuer à évoluer. Ne plus être acteur du changement mais porter en soi le changement.</p>

  522. <p><em>Et que ce changement ait fortuitement des répercussions positives…</em></p>

  523. </article>

  524. 

  525. 

  526.   <figure class="image" property="schema:image">

  527.     <img src="/static/david/blog/2018/startup-nation.jpg" alt="" />

  528.   </figure>

  529. 

  530. 

  531. 

  532. <nav id="jumpto">

  533.   <p>

  534.     <a rel=prev href="/david/blog/2018/seller-teacher-wise/">← The Seller, the Teacher and the Wise</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2018/meritocracy-crisis/">Meritocracy crisis →</a>

  535.   </p>

  536. </nav>

  537. 

  538. <footer>

  539.   <div>

  540.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  541.     <p>

  542.       Bonjour/Hi!

  543.       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>

  544.       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>).

  545.     </p>

  546.     <p>

  547.       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>.

  548.     </p>

  549.     

  550.       <p>

  551.         Les dernières publications hebdomadaires sont :

  552.       </p>

  553.       <ul class="with_columns">

  554.         

  555.           <li>

  556.             <a href="/david/stream/2019/12/17/">Origines</a>

  557.           </li>

  558.         

  559.           <li>

  560.             <a href="/david/stream/2019/12/10/">Publier</a>

  561.           </li>

  562.         

  563.           <li>

  564.             <a href="/david/stream/2019/12/03/">En forêt</a>

  565.           </li>

  566.         

  567.           <li>

  568.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  569.           </li>

  570.         

  571.           <li>

  572.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  573.           </li>

  574.         

  575.           <li>

  576.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  577.           </li>

  578.         

  579.           <li>

  580.             <a href="/david/stream/2019/11/05/">Positif</a>

  581.           </li>

  582.         

  583.           <li>

  584.             <a href="/david/stream/2019/10/29/">Dettes</a>

  585.           </li>

  586.         

  587.           <li>

  588.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  589.           </li>

  590.         

  591.           <li>

  592.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  593.           </li>

  594.         

  595.           <li>

  596.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  597.           </li>

  598.         

  599.           <li>

  600.             <a href="/david/stream/2019/10/01/">Présent</a>

  601.           </li>

  602.         

  603.           <li>

  604.             <a href="/david/stream/2019/09/24/">Manifester</a>

  605.           </li>

  606.         

  607.           <li>

  608.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  609.           </li>

  610.         

  611.           <li>

  612.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  613.           </li>

  614.         

  615.           <li>

  616.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  617.           </li>

  618.         

  619.           <li>

  620.             <a href="/david/stream/2019/08/27/">Documenter</a>

  621.           </li>

  622.         

  623.           <li>

  624.             <a href="/david/stream/2019/08/20/">Frustration</a>

  625.           </li>

  626.         

  627.           <li>

  628.             <a href="/david/stream/2019/08/13/">Holisme</a>

  629.           </li>

  630.         

  631.           <li>

  632.             <a href="/david/stream/2019/08/06/">1%</a>

  633.           </li>

  634.         

  635.           <li>

  636.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  637.           </li>

  638.         

  639.           <li>

  640.             <a href="/david/stream/2019/07/23/">Timelines</a>

  641.           </li>

  642.         

  643.           <li>

  644.             <a href="/david/stream/2019/07/16/">Écoute</a>

  645.           </li>

  646.         

  647.           <li>

  648.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  649.           </li>

  650.         

  651.           <li>

  652.             <a href="/david/stream/2019/06/21/">À lier</a>

  653.           </li>

  654.         

  655.           <li>

  656.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  657.           </li>

  658.         

  659.           <li>

  660.             <a href="/david/stream/2019/06/07/">Amateur</a>

  661.           </li>

  662.         

  663.           <li>

  664.             <a href="/david/stream/2019/05/31/">Pollution</a>

  665.           </li>

  666.         

  667.           <li>

  668.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  669.           </li>

  670.         

  671.           <li>

  672.             <a href="/david/stream/2019/05/10/">Folie</a>

  673.           </li>

  674.         

  675.           <li>

  676.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  677.           </li>

  678.         

  679.           <li>

  680.             <a href="/david/stream/2019/04/12/">Péremption</a>

  681.           </li>

  682.         

  683.           <li>

  684.             <a href="/david/stream/2019/04/05/">Définitions</a>

  685.           </li>

  686.         

  687.           <li>

  688.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  689.           </li>

  690.         

  691.           <li>

  692.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  693.           </li>

  694.         

  695.           <li>

  696.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  697.           </li>

  698.         

  699.           <li>

  700.             <a href="/david/stream/2019/03/08/">Lecture</a>

  701.           </li>

  702.         

  703.           <li>

  704.             <a href="/david/stream/2019/03/01/">Journaux</a>

  705.           </li>

  706.         

  707.           <li>

  708.             <a href="/david/stream/2019/02/22/">Écriture</a>

  709.           </li>

  710.         

  711.           <li>

  712.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  713.           </li>

  714.         

  715.           <li>

  716.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  717.           </li>

  718.         

  719.           <li>

  720.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  721.           </li>

  722.         

  723.           <li>

  724.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  725.           </li>

  726.         

  727.           <li>

  728.             <a href="/david/stream/2019/01/18/">Agilité</a>

  729.           </li>

  730.         

  731.           <li>

  732.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  733.           </li>

  734.         

  735.           <li>

  736.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  737.           </li>

  738.         

  739.       </ul>

  740.     

  741.     <p>

  742.       Voici quelques articles choisis :

  743.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  744.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  745.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  746.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  747.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  748.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  749.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  750.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  751.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  752.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  753.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  754.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  755.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  756.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  757.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  758.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  759.     </p>

  760.     <p>

  761.       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>.

  762.     </p>

  763.     <p>

  764.       Je ne traque pas ta navigation mais mon

  765.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  766.       conserve des logs d’accès.

  767.     </p>

  768.   </div>

  769. </footer>

  770. <script type="text/javascript">

  771.   ;(_ => {

  772.     const jumper = document.getElementById('jumper')

  773.     jumper.addEventListener('click', e => {

  774.       e.preventDefault()

  775.       const anchor = e.target.getAttribute('href')

  776.       const targetEl = document.getElementById(anchor.substring(1))

  777.       targetEl.scrollIntoView({behavior: 'smooth'})

  778.     })

  779.   })()

  780. </script>

  781. 

  782.   <script>

  783.   /* Service workers */

  784.   if (navigator.serviceWorker) {

  785.     window.addEventListener('load', function () {

  786.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  787.       function sendLinks (selector) {

  788.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  789.           return link.getAttribute('href')

  790.         })

  791.         links.push(location.pathname)  // Put the current page in cache too.

  792.         navigator.serviceWorker.controller.postMessage({ links: links })

  793.       }

  794.       navigator.serviceWorker.getRegistration()

  795.         .then(function (registration) {

  796.           if (!registration || !navigator.serviceWorker.controller) {

  797.             return navigator.serviceWorker.register('/serviceworker.js')

  798.               .then(navigator.serviceWorker.ready)

  799.               .then(function () {

  800.                 console.log('[ServiceWorker] Ready to go!')

  801.               })

  802.               .catch(console.error.bind(console))

  803.           } else {

  804.             console.log('[ServiceWorker] Send links via registration')

  805.             sendLinks(selector)

  806.           }

  807.         })

  808.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  809.         console.log('[ServiceWorker] Send links via controller change')

  810.         sendLinks(selector)

  811.       })

  812.       navigator.serviceWorker.addEventListener('message', function (event) {

  813.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  814.         if (event.data.status && link) {

  815.           link.style.backgroundColor = '#2d7474'

  816.           link.style.color = '#f0f0ea'

  817.           

  818.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  819.           

  820.         }

  821.       })

  822.     })

  823.   } else {

  824.     console.warn('[ServiceWorker] No cache for old browsers.')

  825.   }

  826. </script>