davidbgk
/
larlet-fr-david
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
285 Révisions
1 Branche
Aborescence: ff64b1d190
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'ff64b1d190'
${ noResults }
larlet-fr-david/david/stream/2019/12/24/index.html

index.html 31KB
Brut Annotations Historique

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>Outils — 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/stream/2019/12/24/">

  30. 

  31. <style>

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

  33. html, body, div, span,

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

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

  36. del, dfn, em, img, ins,

  37. small, strike, strong, tt, var,

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

  39. fieldset, form, label, legend,

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

  41. article, aside, canvas, details, embed,

  42. figure, figcaption, footer, header, hgroup,

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

  44. time, mark, audio, video {

  45.   margin: 0;

  46.   padding: 0;

  47.   border: 0;

  48.   font-size: 100%;

  49.   font: inherit;

  50.   vertical-align: baseline;

  51. }

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

  53. article, aside, details, figcaption, figure,

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

  55. body { line-height: 1; }

  56. blockquote, q { quotes: none; }

  57. blockquote:before, blockquote:after,

  58. q:before, q:after {

  59.   content: '';

  60.   content: none;

  61. }

  62. table {

  63.   border-collapse: collapse;

  64.   border-spacing: 0;

  65. }

  66. 

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

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

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

  70. @font-face {

  71.   font-family: 'EquityTextB';

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

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

  74.   font-weight: 300;

  75.   font-style: normal;

  76.   font-display: swap;

  77. }

  78. @font-face {

  79.   font-family: 'EquityTextB';

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

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

  82.   font-weight: 300;

  83.   font-style: italic;

  84.   font-display: swap;

  85. }

  86. @font-face {

  87.   font-family: 'EquityTextB';

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

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

  90.   font-weight: 700;

  91.   font-style: normal;

  92.   font-display: swap;

  93. }

  94. 

  95. @font-face {

  96.   font-family: 'ConcourseT3';

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

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

  99.   font-weight: 300;

  100.   font-style: normal;

  101.   font-display: swap;

  102. }

  103. 

  104. 

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

  106. body {

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

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

  109.   background-color: #f0f0ea;

  110.   color: #07486c;

  111.   font-kerning: normal;

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

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

  114.   text-rendering: optimizeLegibility;

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

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

  117. }

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

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

  120. }

  121. em {

  122.   font-style: italic;

  123.   color: #323a45;

  124. }

  125. strong {

  126.   font-weight: bold;

  127.   color: black;

  128. }

  129. nav {

  130.   background-color: #323a45;

  131.   color: #f0f0ea;

  132.   display: flex;

  133.   justify-content: space-around;

  134.   padding: 1rem .5rem;

  135. }

  136.   nav:last-child {

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

  138.   }

  139.   nav a {

  140.     color: #f0f0ea;

  141.   }

  142.   nav abbr {

  143.     border-bottom: 1px dotted white;

  144.   }

  145. 

  146. h1 {

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

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

  149.   background-color: #e3e1e1;

  150.   color: #323a45;

  151.   text-align: center;

  152.   padding: 5rem 0 4rem 0;

  153.   width: 100%;

  154.   font-family: 'ConcourseT3';

  155.   display: flex;

  156.   flex-direction: column;

  157. }

  158.   h1.single {

  159.     padding-bottom: 10rem;

  160.   }

  161.   h1 span {

  162.     position: absolute;

  163.     top: 1vh;

  164.     left: 20%;

  165.     line-height: 0;

  166.   }

  167.     h1 span a {

  168.       line-height: 1.7;

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

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

  171.       background: #2d7474;

  172.       font-size: 1.3rem;

  173.       color: white;

  174.       text-decoration: none;

  175.     }

  176. h2 {

  177.   margin: 4rem 0 1rem;

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

  179.   padding-top: 1vh;

  180. }

  181. h3 {

  182.   text-align: center;

  183.   margin: 3rem 0 .75em;

  184. }

  185. hr {

  186.   height: .4rem;

  187.   width: .4rem;

  188.   border-radius: .4rem;

  189.   background: #07486c;

  190.   margin: 2.5rem auto;

  191. }

  192. time {

  193.   display: bloc;

  194.   margin-left: 0 !important;

  195. }

  196. ul, ol {

  197.   margin: 2rem;

  198. }

  199. ul {

  200.   list-style-type: square;

  201. }

  202. a {

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

  204.   text-decoration-thickness: 0.05em;

  205.   text-underline-offset: 0.09em;

  206. }

  207. article {

  208.   max-width: 50rem;

  209.   display: flex;

  210.   flex-direction: column;

  211.   margin: 2rem auto;

  212. }

  213.   article.single {

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

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

  216.     background: #f0f0ea;

  217.     padding: 2rem;

  218.   }

  219.   article p:last-child {

  220.     margin-bottom: 1rem;

  221.   }

  222. p {

  223.   padding: 0 .5rem;

  224.   margin-left: 3rem;

  225. }

  226.   p + p,

  227.   figure + p {

  228.     margin-top: 2rem;

  229.   }

  230. 

  231. blockquote {

  232.   background-color: #e3e1e1;

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

  234.   display: flex;

  235.   flex-direction: column;

  236.   align-items: center;

  237.   padding: 1rem;

  238.   margin: 1.5rem;

  239. }

  240.   blockquote cite {

  241.     font-style: italic;

  242.   }

  243.   blockquote p {

  244.     margin-left: 0;

  245.   }

  246. 

  247. figure {

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

  249.   background-color: #e3e1e1;

  250.   text-align: center;

  251.   padding: 1.5rem 0;

  252.   margin: 1rem 0 0;

  253.   font-size: 1.5rem;

  254.   width: 100%;

  255. }

  256.   figure img {

  257.     max-width: 250px;

  258.     max-height: 250px;

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

  260.     padding: 1px;

  261.   }

  262. figcaption {

  263.   padding: 1rem;

  264.   line-height: 1.4;

  265. }

  266. aside {

  267.   display: flex;

  268.   flex-direction: column;

  269.   background-color: #e3e1e1;

  270.   padding: 1rem 0;

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

  272. }

  273.   aside p {

  274.     max-width: 50rem;

  275.     margin: 0 auto;

  276.   }

  277. 

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

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

  280.   font-size: 1rem;

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

  282. }

  283. h1 {

  284.   font-size: 1.9rem;

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

  286. }

  287. h2 {

  288.   font-size: 1.6rem;

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

  290. }

  291. h3 {

  292.   font-size: 1.35rem;

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

  294. }

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

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

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

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

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

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

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

  302.     margin-left: 0;

  303.   }

  304.   h1 {

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

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

  307.   }

  308.   h2 {

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

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

  311.   }

  312.   h3 {

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

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

  315.   }

  316. }

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

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

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

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

  321.      but if our baseline value was not expressed

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

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

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

  325.     line-height: 1.5em;

  326.   }

  327.   p, li, pre, details {

  328.     margin-left: 3rem;

  329.   }

  330.   h1 {

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

  332.     line-height: 1.2em;

  333.   }

  334.   h2 {

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

  336.     line-height: 1.3em;

  337.   }

  338.   h3 {

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

  340.     line-height: 1.4em;

  341.   }

  342.   figure img {

  343.     max-width: 500px;

  344.     max-height: 500px;

  345.   }

  346. }

  347. 

  348. figure.unsquared {

  349.   margin-bottom: 1.5rem;

  350. }

  351.   figure.unsquared img {

  352.     height: inherit;

  353.   }

  354. 

  355. 

  356. 

  357. @media print {

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

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

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

  361.     text-decoration: underline;

  362.     text-shadow: none !important;

  363.     background-image: none !important;

  364.     background: white;

  365.     color: black;

  366.   }

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

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

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

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

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

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

  373.   img {

  374.     max-width: 250px !important;

  375.     max-height: 250px !important;

  376.   }

  377.   nav, aside { display: none; }

  378. }

  379. 

  380. ul.with_columns {

  381.   column-count: 1;

  382. }

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

  384.   ul.with_columns {

  385.     column-count: 2;

  386.   }

  387. }

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

  389.   ul.with_columns {

  390.     column-count: 3;

  391.   }

  392. }

  393. ul.with_two_columns {

  394.   column-count: 1;

  395. }

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

  397.   ul.with_two_columns {

  398.     column-count: 1;

  399.   }

  400. }

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

  402.   ul.with_two_columns {

  403.     column-count: 2;

  404.   }

  405. }

  406. 

  407. .gallery {

  408.   display: flex;

  409.   flex-wrap: wrap;

  410.   justify-content: space-around;

  411. }

  412.   .gallery figure img {

  413.     margin-left: 1rem;

  414.     margin-right: 1rem;

  415.   }

  416.   .gallery figure figcaption {

  417.     font-family: 'ConcourseT3'

  418.   }

  419. 

  420. footer {

  421.   font-family: 'ConcourseT3';

  422.   display: flex;

  423.   flex-direction: column;

  424.   border-top: 3px solid white;

  425.   padding: 4rem 0;

  426.   background-color: #07486c;

  427.   color: white;

  428. }

  429.   footer > * {

  430.     max-width: 50rem;

  431.     margin: 0 auto;

  432.   }

  433.   footer a {

  434.     color: #f1c40f;

  435.   }

  436.   footer .avatar {

  437.     width: 200px;

  438.     height: 200px;

  439.     border-radius: 50%;

  440.     float: left;

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

  442.     shape-outside: circle();

  443.     margin-right: 2rem;

  444.     padding: 2px 5px 5px 2px;

  445.     background: white;

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

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

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

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

  450.   }

  451. </style>

  452. 

  453. <h1 class="single">

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

  455.   Outils

  456.   <time>Publié le 24 décembre</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Pas mal de trucs perso cette semaine, c’est pas pire d’avoir du temps hors boulot aussi. Ça me laisse le temps de coder un peu. Oh wait.</em></p>

  460. <p>Et la première chose c’est d’avoir enfin rendu publiques les <a href="https://git.larlet.fr/davidbgk">lignes de code</a> qui construisent ce site. Et en fait ça n’est pas tant de l’acte de publication mais celui de l’avoir recodé en Python 3 et avec des <a href="https://github.com/pyrates/">outils</a> que j’affectionne. Et aussi découpé car je ne souhaitais pas que tout devienne accessible. Et aussi migrer des journaux privés. Et aussi revoir le déploiement pour recoller tous les morceaux.</p>

  461. <p><em>Bref, c’était en chantier depuis un moment et ça fait du bien quand ça sort !</em></p>

  462. <hr />

  463. <blockquote>

  464. <p>I frequently wonder if the people who love Lisp or Smalltalk fall into that same broad category: that they don’t “love Lisp” so much as they love <em>their</em> Lisp, the Howl’s Moving Memory Palaces they’ve built for themselves, tailored to the precise cut of their own idiosyncracies. That if you really dig in and ask them you’ll find that <em>other people’s</em> Lisp, obviously, sucks. </p>

  465. <p><cite><em><a href="http://exple.tive.org/blarg/2019/12/17/poor-craft/">Poor Craft</a></em> (<a href="/david/cache/613d27d467c47a4dc1e697a027219434/">cache</a>)</cite></p>

  466. </blockquote>

  467. <p>Merci Karl pour ce petit lien qui pique au niveau du tempo :-). Je plaide à moitié coupable, je trouve qu’une certaine émulation est saine et on a tous des motivations différentes qui aboutissent à des outils différents. Et en même temps je vois le gaspillage, l’égoïsme et le manque d’accessibilité technique de ces outils.</p>

  468. <p><em>Lorsque je mange mes céréales avec une cuillère que j’ai sculptée, elles ont un autre goût.</em></p>

  469. <hr />

  470. <blockquote>

  471. <p>So my proposal is seven unconventional guidelines in how we handle websites designed to be informative, to make them easy to maintain and preserve. The guiding intention is that the maintainer will try to keep the website up for at least 10 years, maybe even 20 or 30 years. These are not controversial views necessarily, but are aspirations that are not mainstream—a manifesto for a long-lasting website. </p>

  472. <p><cite><em><a href="https://jeffhuang.com/designed_to_last/">A Manifesto for Preserving Content on the Web</a></em> (<a href="/david/cache/4e7f48be44adc1ef9e8d4539015fd6ee/">cache</a>)</cite></p>

  473. </blockquote>

  474. <p>Après 15 ans à essayer de conserver mes publications dans le temps, je ne peux qu’acquiescer. Réduire les dépendances au maximum et comprendre chaque étape de la chaîne depuis vos doigts jusqu’à la publication du HTML.</p>

  475. <p>Je me demande encore si je vais pousser ces sources sur Microsoft Github™ le temps qu’elles aillent <a href="https://archiveprogram.github.com/">se les geler en Arctique</a>.</p>

  476. <p><em>Pari facile : que le lien ci-dessus soit un jour une 404. #ironie</em></p>

  477. <hr />

  478. <blockquote>

  479. <p>Here I aim to show how these different disciplinary approaches converge across four scales of maintenance. In “Rust,” we’ll look at the repair of large urban infrastructures, from transportation systems to social networks. In “Dust,” we consider architectural maintenance alongside housework and other forms of caretaking in the domestic and interior realms. In “Cracks,” we study the repair of objects, from television sets to subway signs to cell phones. Finally, in “Corruption,” we turn to the curators who clean and maintain data — a resource that fuels the operation of our digital objects, our networked architectures, and our intelligent cities.</p>

  480. <p>[…]</p>

  481. <p>Across the many scales and dimensions of this problem, we are never far from three enduring truths: (1) Maintainers require care; (2) caregiving requires maintenance; and (3) the distinctions between these practices are shaped by race, gender, class, and other political, economic, and cultural forces. Who gets to organize the maintenance of infrastructure, and who then executes the work? Who gets cared for at home, and who does that tending and mending? Agreements about what things deserve repair — and what “good repair” entails — are always contingent and contextual. If we wish to better support the critical work performed by the world’s maintainers, we must recognize that maintenance encompasses a world of standards, tools, practices, and wisdom. Sometimes it deploys machine learning; other times, a mop.</p>

  482. <p><cite><em><a href="https://placesjournal.org/article/maintenance-and-care/">Maintenance and Care</a></em> (<a href="/david/cache/a8c72cf5a081dac8fcaa67404eda3026/">cache</a>)</cite></p>

  483. </blockquote>

  484. <p>J’ai ce lien depuis un moment dans mon navigateur et il me fournit des clés de lecture lorsqu’on parle de maintenance, à l’intersection entre les privilèges et la technique. Conserver ses privilèges c’est faire aspirer — de moins privilégiés — à une technique dont ils n’auront pas/plus la maîtrise. Se libérer de cette dépendance devient alors un obstacle infranchissable lorsqu’elle est associée à une certaine idée du confort.</p>

  485. <p>Au passage, je trouve le terme de <em>sustainer</em> assez équivoque (<a href="https://sustainoss.org/wp-content/uploads/2019/12/SustainOSS-west-2017-report.pdf">PDF, 400Ko</a> (<a href="/static/david/stream/SustainOSS-west-2017-report.pdf">cache</a>)).</p>

  486. <blockquote>

  487. <p>This world-wide crisis of world-wide institutions can lead to a new consciousness about the nature of tools and to majority action for their control. If tools are not controlled politically, they will be managed in a belated technocratic response to disaster. Freedom and dignity will continue to dissolve into an unprecedented enslavement of man to his tools.</p>

  488. <p><cite><em>Tools for Conviviality</em>, Ivan Illich (1973)</cite></p>

  489. </blockquote>

  490. <p>Voir aussi : <a href="https://calmtech.com/">calmtech</a> (<a href="/david/cache/ab325197a8e81f929de1b10477cce340/">cache</a>).</p>

  491. <hr />

  492. <blockquote>

  493. <p>Ainsi, celui qui occupe une position défavorable à l’intérieur de la structure inégalitaire s’efforcera d’échapper à celle-ci et d’en trouver une autre plus favorable en adoptant l’habitus d’un « gagnant ». À moins que la situation défavorable ne semble si inébranlable et si désespérée, que la position sociale des mieux lotis ne paraisse si inattaignable et si inaccessible, que s’installe un habitus fataliste et que l’action ne vise plus qu’à assurer le strict nécessaire à la survie.</p>

  494. <p>Par ailleurs, la personne qui occupe dans la société une position plus avantageuse veille à maintenir son état relativement privilégié et s’efforce donc, par réflexe d’habitus, de se démarquer des moins bien nantis tout en jetant un coup d’œil vers le haut ou vers les endroits qui, selon la perception sociale généralement admise, promettent une vie (encore) meilleure ou même la meilleure qui soit.</p>

  495. <p>Dans les zones privilégiées de la structure sociale, du point de vue tant objectif que subjectif, se développe alors chez les <em>happy few</em> un habitus de l’évidence ou bien de la supériorité, éventuellement aussi un habitus de l’exclusion et du mépris, lequel s’exprimera dans des comportements quotidiens à l’avenant, allant de l’attitude confiante et naturelle devant sa propre situation de privilégié jusqu’à l’ostentation arrogante et la justification aggressive.</p>

  496. <p><cite><em>À côté de nous le déluge</em>, Stephan Lessenich</cite></p>

  497. </blockquote>

  498. <p>Il faudrait que je prenne le temps de lire Bourdieu un de ces jours <a href="/david/stream/2018/09/23/">quand même</a>. Je disais la même chose <a href="/david/stream/2014/#tw-507621612447727617">il y a cinq ans</a>. Parfois <a href="/david/stream/2018/04/07/">la spirale</a> tourne en rond.</p>

  499. <p>Tiens un des effets de bord des sources publiques, c’est qu’il devrait vous être plus facile de faire des recherches dedans. Ou peut-être que je suis le seul à en avoir besoin afin de réinternaliser un peu de mémoire des fois.</p>

  500. <p>Autre externalité potentiellement positive, j’ai bien envie de jouer avec ma façon de <a href="/david/stream/2019/12/10/">publier</a> des <a href="/david/stream/2018/10/30/">choses</a> l’année prochaine.</p>

  501. <p><em>Un autre rythme ? Un autre format d’exploration des contenus ?</em></p>

  502. </article>

  503. 

  504. 

  505. <nav id="jumpto">

  506.   <p>

  507.     <a rel=prev href="/david/stream/2019/12/17/">← Origines</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/12/27/">Intemporels →</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>