davidbgk
/
larlet-fr-david
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Julkaisut 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.
899 Commitit
1 Haara
Puu: 5868f4d086
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '5868f4d086'
${ noResults }
larlet-fr-david/david/blog/2017/web-technique/index.html

index.html 30KB
Raaka Blame Historia

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811 
  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>Web et technique — 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/2017/web-technique/">

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

  31.   <meta name="description" content="Le pouvoir technique, c’est le monopole de la dette légitime." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Le pouvoir technique, c’est le monopole de la dette légitime." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Web et technique" />

  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/2017/web-technique/" />

  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/2017/web-technique.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.   Web et technique

  468.   <time>Publié le 21 juillet 2017</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>L’évolution des objets techniques doit être comprise en ce sens comme la recherche d’un système qui est tel qu’il ne peut être autodestructif. Le système doit pouvoir se maintenir stable le plus longtemps possible. Pour le dire autrement, il s’agit au fond d’augmenter l’espérance de vie de l’objet technique — ce que rend précisément possible l’établissement de directions de convergence. Un objet technique est d’autant plus évolué qu’il n’est pas en lutte avec lui-même. Un objet technique évolué est celui dans lequel aucun effet secondaire ne nuit au fonctionnement de l’ensemble, ou aucun effet secondaire n’est laissé en dehors de ce fonctionnement. Un objet technique se caractérise par le fait de son inscription au sein d’une lignée technique qui augmente à chaque génération son espérance de vie par l’artifice d’une auto-corrélation.</p>

  473. <p><cite><em><a href="https://www.slate.fr/tribune/85761/gilbert-simondon-liberation-par-les-techniques">Gilbert Simondon et la libération par les techniques</a></em> (<a href="/david/cache/18a83df62e9855e9d8c98f6b730620a3/">cache</a>)</cite></p>

  474. </blockquote>

  475. <p>Difficile de ne pas faire un parallèle avec le Web ici, objet technique en lutte permanente avec lui-même. La question est de savoir s’il y a effectivement convergence et augmentation de son espérance de vie au cours du temps. J’en doute de plus en plus. Et de continuer :</p>

  476. <blockquote>

  477. <p>Mais, précisément, est-ce bien un artifice ? L’objet technique est-il artificiel ? Ce qui est frappant, bien plutôt, note Simondon, est que l’objet technique évolué se rapproche du mode d’existence des objets naturels, en ce sens où il tend lui aussi vers la cohérence interne ou la fermeture du système des causes et des effets qui s’exercent circulairement au sein de son enceinte. On estime d’ordinaire que ce qui fait l’artificialité d’un objet ne tient pas seulement à ceci que l’objet considéré a été fabriqué (et non pas produit spontanément par la nature), mais aussi et surtout à ceci que l’intervention de l’homme est nécessaire pour maintenir cet objet dans l’existence en le protégeant contre le monde naturel, en lui donnant ainsi un statut à part d’existence. L’artificialité est ce qui est intérieur à l’action artificialisante de l’homme : est artificiel ce qui requiert le concours de l’homme non seulement pour exister, mais encore pour se maintenir dans l’existence. Or le propre d’un objet technique est justement qu’il requiert de moins en moins l’intervention de l’homme pour se maintenir dans l’existence : c’est un objet artificiel (en tant qu’objet fabriqué) qui a un mode d’existence naturel.</p>

  478. <p><cite><em>Ibid.</em></cite></p>

  479. </blockquote>

  480. <p>Je ne peux m’empêcher de faire le parallèle ici encore avec un Web de plus en plus artificiel de par son <a href="/david/blog/2017/resilient-web-tools/">manque de résilience</a>, son <a href="https://www.offscreenmag.com/blog/the-grip-of-now">rythme effréné</a> (<a href="/david/cache/b53e9d9d0598024ba2524f6dd74f1804/">cache</a>) et <a href="/david/blog/2017/without-javascript/">l’usage abscons de JavaScript</a>. Ce qui m’amène à penser à l’autonomie du code. Si vous ne touchez plus au code de votre produit Web actuel pendant 6 mois, combien de journées seront nécessaires pour le remettre à jour ? <strong>Mettre le doigt sur les causes de son artificialité permet de participer à l’évolution d’un outil technique.</strong> De faciliter son émancipation en réduisant sa <a href="/david/blog/2016/simplicite-defaut/">dépendance aux développeurs</a> tout en <a href="https://www.ultrasaurus.com/2017/06/customer-driven-development/">maximisant les problèmes résolus</a> (<a href="/david/cache/c5ae918d293c87be86d7d9070dec9629/">cache</a>). </p>

  481. <p>Pour paraphraser Max Weber au sujet de l’État qui considérait que <em>« le pouvoir politique, c’est le monopole de la violence légitime »</em> on aurait <em>« le pouvoir technique, c’est le monopole de la dette légitime »</em>. Or qui introduit cette dette aujourd’hui ? Les GAFAM plus que l’État à travers des bibliothèques populaires (React, Angular) qui évoluent très rapidement. Cette dette ne s’arrête pas aux outils mais aussi à leurs usages : en utilisant gratuitement un produit on en devient implicitement redevable.</p>

  482. <p>Est-ce que le logiciel libre est ce « mode d’existence naturel » ? En un sens oui, car il devient théoriquement entretenu par une communauté qui se renouvelle et le fait évoluer itérativement. En pratique malheureusement on est bien loin du compte, il y aurait probablement à piocher dans des principes éloignés du code pour parvenir non pas à la <a href="/david/blog/2013/open-source-conviviale/">convivialité</a> mais peut-être à la résilience :</p>

  483. <blockquote>

  484. <ul>

  485. <li><strong>Homéostasie</strong> : des boucles multiples de rétroaction pour contrer les perturbations et stabiliser le système ; l’homéostasie est la capacité que peut avoir un système quelconque à conserver son équilibre de fonctionnement en dépit des contraintes qui lui sont extérieures.</li>

  486. <li><strong>Omnivore</strong> : la vulnérabilité est réduite par la diversification des ressources et des moyens ; comme dans la nature l’ultra spécialisation entame les potentiels de survie.</li>

  487. <li><strong>Flux rapides</strong> : des mouvements des ressources rapides à travers le système assurent la mobilisation de ces ressources pour faire face aux perturbations.</li>

  488. <li><strong>Niveaux hiérarchiques faibles</strong> : afin de mettre en œuvre rapidement des réponses très locales non standard. Comme chez nos amis les fourmis ou les rats.</li>

  489. <li><strong>Capacité tampon</strong> : capacités centrales sur-dimensionnées de telle sorte que les seuils critiques soient moins susceptibles d’être franchis. C’est ce qui est à l’œuvre dans les végétaux du désert et leur capacité interne en eau.</li>

  490. <li><strong>Redondance</strong> : les fonctions se chevauchent, et un relais peut ainsi être assuré si certaines échouent. Les espèces d’animaux redondantes sont celles qui exercent la même fonction au sein de l’écosystème. Comme les vautours et les hyènes dont les fonctions de découpage des animaux morts sont une même fonction pour deux espèces.</li>

  491. </ul>

  492. <p><cite><em><a href="https://nicolasloubet.gitbooks.io/fork-the-world/content/chapter4/resilience-et-modularite.html">Résilience et modularité</a></em> (<a href="/david/cache/1df55eefb86dd35c0e758fac873bab0a/">cache</a>) — Source : <a href="http://www.nusap.net/downloads/Wardekker_ea_2010_TFS.pdf">PDF en anglais</a> (<a href="/static/david/blog/Wardekker_ea_2010_TFS.pdf">cache</a>)</cite></p>

  493. </blockquote>

  494. <p>Il s’agirait presque de la définition d’un réseau en pair-à-pair comme <a href="/david/blog/2017/confiance-transparence/">SSB</a>. Notez qu’il n’y a pas de référence à la croissance, un écosystème ayant besoin de s’auto-équilibrer pour survivre.</p>

  495. <p><em>Quelques pensées (techniques ?) mal agencées que je vous laisse maintenir en vie :-).</em></p>

  496. </article>

  497. 

  498. 

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

  500.     <img src="/static/david/blog/2017/web-technique.jpg" alt="" />

  501.   </figure>

  502. 

  503. 

  504. 

  505. <nav id="jumpto">

  506.   <p>

  507.     <a rel=prev href="/david/blog/2017/without-javascript/">← Without JavaScript</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2017/besoin-experience/">Besoin et expérience →</a>

  508.   </p>

  509. </nav>

  510. 

  511. <footer>

  512.   <div>

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

  514.     <p>

  515.       Bonjour/Hi!

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

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

  518.     </p>

  519.     <p>

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

  521.     </p>

  522. 

  523.       <p>

  524.         Les dernières publications hebdomadaires sont :

  525.       </p>

  526.       <ul class="with_columns">

  527. 

  528.           <li>

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

  530.           </li>

  531. 

  532.           <li>

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

  534.           </li>

  535. 

  536.           <li>

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

  538.           </li>

  539. 

  540.           <li>

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

  542.           </li>

  543. 

  544.           <li>

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

  546.           </li>

  547. 

  548.           <li>

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

  550.           </li>

  551. 

  552.           <li>

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

  554.           </li>

  555. 

  556.           <li>

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

  558.           </li>

  559. 

  560.           <li>

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

  562.           </li>

  563. 

  564.           <li>

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

  566.           </li>

  567. 

  568.           <li>

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

  570.           </li>

  571. 

  572.           <li>

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

  574.           </li>

  575. 

  576.           <li>

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

  578.           </li>

  579. 

  580.           <li>

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

  582.           </li>

  583. 

  584.           <li>

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

  586.           </li>

  587. 

  588.           <li>

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

  590.           </li>

  591. 

  592.           <li>

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

  594.           </li>

  595. 

  596.           <li>

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

  598.           </li>

  599. 

  600.           <li>

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

  602.           </li>

  603. 

  604.           <li>

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

  606.           </li>

  607. 

  608.           <li>

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

  610.           </li>

  611. 

  612.           <li>

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

  614.           </li>

  615. 

  616.           <li>

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

  618.           </li>

  619. 

  620.           <li>

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

  622.           </li>

  623. 

  624.           <li>

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

  626.           </li>

  627. 

  628.           <li>

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

  630.           </li>

  631. 

  632.           <li>

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

  634.           </li>

  635. 

  636.           <li>

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

  638.           </li>

  639. 

  640.           <li>

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

  642.           </li>

  643. 

  644.           <li>

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

  646.           </li>

  647. 

  648.           <li>

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

  650.           </li>

  651. 

  652.           <li>

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

  654.           </li>

  655. 

  656.           <li>

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

  658.           </li>

  659. 

  660.           <li>

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

  662.           </li>

  663. 

  664.           <li>

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

  666.           </li>

  667. 

  668.           <li>

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

  670.           </li>

  671. 

  672.           <li>

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

  674.           </li>

  675. 

  676.           <li>

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

  678.           </li>

  679. 

  680.           <li>

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

  682.           </li>

  683. 

  684.           <li>

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

  686.           </li>

  687. 

  688.           <li>

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

  690.           </li>

  691. 

  692.           <li>

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

  694.           </li>

  695. 

  696.           <li>

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

  698.           </li>

  699. 

  700.           <li>

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

  702.           </li>

  703. 

  704.           <li>

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

  706.           </li>

  707. 

  708.           <li>

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

  710.           </li>

  711. 

  712.           <li>

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

  714.           </li>

  715. 

  716.           <li>

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

  718.           </li>

  719. 

  720.           <li>

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

  722.           </li>

  723. 

  724.       </ul>

  725. 

  726.     <p>

  727.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  744.     </p>

  745.     <p>

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

  747.     </p>

  748.     <p>

  749.       Je ne traque pas ta navigation mais mon

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

  751.       conserve des logs d’accès.

  752.     </p>

  753.   </div>

  754. </footer>

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

  756.   ;(_ => {

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

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

  759.       e.preventDefault()

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

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

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

  763.     })

  764.   })()

  765. </script>

  766. 

  767.   <script>

  768.   /* Service workers */

  769.   if (navigator.serviceWorker) {

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

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

  772.       function sendLinks (selector) {

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

  774.           return link.getAttribute('href')

  775.         })

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

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

  778.       }

  779.       navigator.serviceWorker.getRegistration()

  780.         .then(function (registration) {

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

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

  783.               .then(navigator.serviceWorker.ready)

  784.               .then(function () {

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

  786.               })

  787.               .catch(console.error.bind(console))

  788.           } else {

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

  790.             sendLinks(selector)

  791.           }

  792.         })

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

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

  795.         sendLinks(selector)

  796.       })

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

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

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

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

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

  802. 

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

  804. 

  805.         }

  806.       })

  807.     })

  808.   } else {

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

  810.   }

  811. </script>