davidbgk
/
larlet-fr-david
Слідкувати 1
В обрані 0
Форк 0
Код Релізи 0 Активність
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
99 Коміти
1 Гілка
Дерево: 0403fdda24
Гілки Теги
${ item.name }
Створити гілку ${ searchTerm }
з '0403fdda24'
${ noResults }
larlet-fr-david/david/blog/2016/delivery-values/index.html

index.html 27KB
Неформатований Blame Історія

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

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

  3. <html lang=en>

  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>Delivery and value(s) — 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/2016/delivery-values/">

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

  31.   <meta name="description" content="The goal of a group is not only to deliver value but to challenge current values." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="The goal of a group is not only to deliver value but to challenge current values." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Delivery and value(s)" />

  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/2016/delivery-values/" />

  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/2016/delivery-values.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.   Delivery and value(s)

  468.   <time>Publié le 20 septembre 2016</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Edelman said that people tend to trust businesses more than governments, in part because “business gets stuff done” while government is seen as “incapable.” People trust technology companies in particular because “they deliver value.”</p>

  473. <p><cite><em><a href="http://www.appy-geek.com/Web/ArticleWeb.aspx?regionid=1&amp;articleid=67847626">Trust in Government Is Collapsing Around the World</a></em> (<a href="/david/cache/45e0123a3bfc9a640f774aad73cc6fad/">cache</a>)</cite></p>

  474. </blockquote>

  475. <p>I’m working with the French government for more than a year now in a small team where delivery prevails upon meetings and infinite validations. I clearly understand the motivations to push forward what can be achieved by a government. To be inspired by the startup “culture” might be seen as highly positive. At least at first.</p>

  476. <p>The maintenance remains a problem though. Where startups are delivering value as fast as possible in order to be bought or to raise more money, a government doesn’t have these escape plans. A startup joining the dead pool is acceptable, when you remove or neglect a service from a government it will have a direct impact on citizens. Not quite the same responsibility here. You still have the right and duty to kill a product if it doesn’t find its audience but the measurement is harder to define because it’s not purely based on profit.</p>

  477. <p>The more I work on <a href="https://www.data.gouv.fr/fr/">data.gouv.fr</a>, the more I realize that my goal is not (only) to deliver but to challenge the previous processes and cultures. To show that there are other ways to do some things, another angle to see that particular problem and to communicate on its resolutions. New things to experiment both as a team and an <a href="https://github.com/opendatateam">international community</a>.</p>

  478. <p><strong>The goal of a group is not only to deliver value but to challenge current values.</strong></p>

  479. <p>The level of trust within governments should be related to their abilities to question their actions, listen to feedback and adapt. This is way more than to deliver punctually or even continuously value. This is about where we are going. <em>Together.</em></p>

  480. <blockquote>

  481. <p>Optimists explain good things as being personal, general, and permanent, and explain away bad things as being impersonal, specific, and temporary. And if you point out the contradiction in their explanations, they see no contradiction. To them, the bad stuff really isn’t about them, it’s just that one thing that one time.</p>

  482. <p><cite><em><a href="https://github.com/raganwald/presentations/blob/master/optimism.md">Optimism</a></em> (<a href="/david/cache/22e5b23fa989d12fc89fe5d2709760d8/">cache</a>)</cite></p>

  483. </blockquote>

  484. <p>Maybe turning a culture from pessimism to optimism is “just” a matter of making people aware of a new level of consciousness. A level that is not only personal but includes others for heading towards a new vision for this world. Mocking governments for their incapacity is easy, trying to be part of the long-term solution is way more challenging.</p>

  485. <p><strong>Never forget that a nation is a cooperative that scaled.</strong></p>

  486. <p>Trust is clearly broken these days for many reasons but it cannot be restored without a positive attitude and an incredible amount of energy. Working with a government was (and still is!) quite enlightening to me. If you want to change the world and have a big impact (not my ambition but that’s the top reasons given by my peers), think twice before starting/joining a tax-optimized company with no other goal than being bought by a big one. There is a <a href="https://18f.gsa.gov/join/">solution</a> <a href="https://gds.blog.gov.uk/jobs/">probably</a> <a href="http://www.etalab.gouv.fr/">closer</a> and healthier for everybody.</p>

  487. </article>

  488. 

  489. 

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

  491.     <img src="/static/david/blog/2016/delivery-values.jpg" alt="" />

  492.   </figure>

  493. 

  494. 

  495. 

  496. <nav id="jumpto">

  497.   <p>

  498.     <a rel=prev href="/david/blog/2016/collaboration-debt/">← Collaboration debt</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/passion-definition/">Passion et définition →</a>

  499.   </p>

  500. </nav>

  501. 

  502. <footer>

  503.   <div>

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

  505.     <p>

  506.       Bonjour/Hi!

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

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

  509.     </p>

  510.     <p>

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

  512.     </p>

  513. 

  514.       <p>

  515.         Les dernières publications hebdomadaires sont :

  516.       </p>

  517.       <ul class="with_columns">

  518. 

  519.           <li>

  520.             <a href="/david/stream/2019/12/31/">Merci</a>

  521.           </li>

  522. 

  523.           <li>

  524.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  525.           </li>

  526. 

  527.           <li>

  528.             <a href="/david/stream/2019/12/24/">Outils</a>

  529.           </li>

  530. 

  531.           <li>

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

  533.           </li>

  534. 

  535.           <li>

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

  537.           </li>

  538. 

  539.           <li>

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

  541.           </li>

  542. 

  543.           <li>

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

  545.           </li>

  546. 

  547.           <li>

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

  549.           </li>

  550. 

  551.           <li>

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

  553.           </li>

  554. 

  555.           <li>

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

  557.           </li>

  558. 

  559.           <li>

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

  561.           </li>

  562. 

  563.           <li>

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

  565.           </li>

  566. 

  567.           <li>

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

  569.           </li>

  570. 

  571.           <li>

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

  573.           </li>

  574. 

  575.           <li>

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

  577.           </li>

  578. 

  579.           <li>

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

  581.           </li>

  582. 

  583.           <li>

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

  585.           </li>

  586. 

  587.           <li>

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

  589.           </li>

  590. 

  591.           <li>

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

  593.           </li>

  594. 

  595.           <li>

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

  597.           </li>

  598. 

  599.           <li>

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

  601.           </li>

  602. 

  603.           <li>

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

  605.           </li>

  606. 

  607.           <li>

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

  609.           </li>

  610. 

  611.           <li>

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

  613.           </li>

  614. 

  615.           <li>

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

  617.           </li>

  618. 

  619.           <li>

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

  621.           </li>

  622. 

  623.           <li>

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

  625.           </li>

  626. 

  627.           <li>

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

  629.           </li>

  630. 

  631.           <li>

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

  633.           </li>

  634. 

  635.           <li>

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

  637.           </li>

  638. 

  639.           <li>

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

  641.           </li>

  642. 

  643.           <li>

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

  645.           </li>

  646. 

  647.           <li>

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

  649.           </li>

  650. 

  651.           <li>

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

  653.           </li>

  654. 

  655.           <li>

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

  657.           </li>

  658. 

  659.           <li>

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

  661.           </li>

  662. 

  663.           <li>

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

  665.           </li>

  666. 

  667.           <li>

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

  669.           </li>

  670. 

  671.           <li>

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

  673.           </li>

  674. 

  675.           <li>

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

  677.           </li>

  678. 

  679.           <li>

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

  681.           </li>

  682. 

  683.           <li>

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

  685.           </li>

  686. 

  687.           <li>

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

  689.           </li>

  690. 

  691.           <li>

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

  693.           </li>

  694. 

  695.           <li>

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

  697.           </li>

  698. 

  699.           <li>

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

  701.           </li>

  702. 

  703.           <li>

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

  705.           </li>

  706. 

  707.           <li>

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

  709.           </li>

  710. 

  711.           <li>

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

  713.           </li>

  714. 

  715.       </ul>

  716. 

  717.     <p>

  718.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  735.     </p>

  736.     <p>

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

  738.     </p>

  739.     <p>

  740.       Je ne traque pas ta navigation mais mon

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

  742.       conserve des logs d’accès.

  743.     </p>

  744.   </div>

  745. </footer>

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

  747.   ;(_ => {

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

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

  750.       e.preventDefault()

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

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

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

  754.     })

  755.   })()

  756. </script>

  757. 

  758.   <script>

  759.   /* Service workers */

  760.   if (navigator.serviceWorker) {

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

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

  763.       function sendLinks (selector) {

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

  765.           return link.getAttribute('href')

  766.         })

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

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

  769.       }

  770.       navigator.serviceWorker.getRegistration()

  771.         .then(function (registration) {

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

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

  774.               .then(navigator.serviceWorker.ready)

  775.               .then(function () {

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

  777.               })

  778.               .catch(console.error.bind(console))

  779.           } else {

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

  781.             sendLinks(selector)

  782.           }

  783.         })

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

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

  786.         sendLinks(selector)

  787.       })

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

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

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

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

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

  793. 

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

  795. 

  796.         }

  797.       })

  798.     })

  799.   } else {

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

  801.   }

  802. </script>