davidbgk
/
larlet-fr-david
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
188 коммитов
1 ветка
Дерево: 10aef64f75
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '10aef64f75'
${ noResults }
larlet-fr-david/david/stream/2019/08/06/index.html

index.html 31KB
Исходник Blame История

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

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

  3. <html lang=fr>

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

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

  6. <meta charset=utf-8>

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

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

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

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

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

  12. <title>1% — 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/08/06/">

  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.   1%

  456.   <time>Publié le 6 août</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Essayer d’être à l’écoute de soi avant de pouvoir être à l’écoute des autres. Devenir le 1% de sa vie, prendre conscience des 99 autres. Savoir décliner lorsqu’on n’est pas en forme. Prendre soin de ma propre attente.</em></p>

  460. <hr />

  461. <blockquote>

  462. <p>We should direct our attention to find ways to solve problems affecting our own health, our environment, the world we live in. A good example of action for developers is <a href="https://fixathon.io/">the world’s first online hackathon to help fix the climate</a>, running between today and end of August.</p>

  463. <p><cite><em><a href="https://wdrl.info/archive/270">WDRL 270</a></em> (<a href="/david/cache/203650d02bde8c120ff702cf04ebd853/">cache</a>)</cite></p>

  464. </blockquote>

  465. <p>J’apprends via l’une de mes publications préférées l’existence de ce hackathon. J’aurais presque envie de participer avec un truc qui germe depuis quelques semaines. <em>Merci Anselm.</em></p>

  466. <p>Au passage, pourquoi préféré ? En partie pour la forme : aucun traçage des liens sur lesquels j’ai cliqué.</p>

  467. <blockquote>

  468. <p>Once subscribed, you’ll receive newsletter emails; the opening of the message or clicks on the links are not tracked (though sometimes, the links included may be non-public links, which allows to count overall clicks from the newsletter; such links are the same for all subscribers, hence not connected to your identity).</p>

  469. <p><cite><em><a href="https://wdrl.info/privacy">Privacy Policy</a></em> (<a href="/david/cache/f5477e30821b38530e76be1cea167dd6/">cache</a>)</cite></p>

  470. </blockquote>

  471. <p>C’est tellement inhabituel dans ce milieu. Apprendre à remercier les 1% qui m’inspirent et qui me permettent de garder l’espoir d’un monde moins noir.</p>

  472. <hr />

  473. <blockquote>

  474. <p>But those 1% do have to recognise - we ALL have to recognise - that they are enormously privileged. That they are lucky to be able to do what they do. That they have won a grand industry prize that allows them to ignore all the things that most teams have to deal with.</p>

  475. <p>For most teams are not able to just do what they want. They are constrained by the organisation that they exist within. They must produce code that will reliably work and be easily maintained over the next several years. They can’t afford to retain someone who will innovate a new codebase and then move on, leaving others to puzzle over it. They can’t hire a 10x Engineer Ninja who will reimplement a brochure-ware website in a client-side framework and then ignore those users who are excluded by it.</p>

  476. <p>No, most teams are very boring. I’m really glad about that. We need boring. Boring is what gives stability. Boring is what allows web teams to concentrate on building robust websites, and focussing on user needs. Boring is what allows teams to produce elegant long-life solutions that do not need to be babysat and stroked by a magical engineering gnome.</p>

  477. <p><cite><em><a href="https://www.sonniesedge.net/posts/real-dark-web/">The Real Dark Web</a></em> (<a href="/david/cache/c402e68f592c57e1e60552481a838839/">cache</a>)</cite></p>

  478. </blockquote>

  479. <p>La réalité est plus complexe, il existe tout un spectre de technologies ennuyantes et à maintenir. Différents niveaux d’acceptation, de souffrances aussi. Et parfois d’accomplissement, s’il y a de la maintenance c’est probablement qu’il y a un usage.</p>

  480. <p><em>Ce qui manque parfois cruellement aux 1% qui en parlent le plus…</em></p>

  481. <hr />

  482. <blockquote>

  483. <p>Whatever works for you, invest in that. It’s more important than ever before because once they get to know you better than you know yourself, it’s game over for you. They can manipulate you and control you and you will not even realize this is happening. Because they have hacked you.</p>

  484. <p><cite><em><a href="https://www.fastcompany.com/90381354/exclusive-video-yuval-harari-on-social-inequality-and-the-naivete-of-tech-ceos">Yuval Harari on social inequality and the naivete of tech CEOs</a></em></cite></p>

  485. </blockquote>

  486. <p>Se connaître mieux qu’un algorithme afin d’être en capacité de pouvoir résister.</p>

  487. <p><em>Introspection vs. algospection.</em></p>

  488. <hr />

  489. <blockquote>

  490. <p>Le récit de la croissance verte a donc le même statut que le climato-scepticisme aux États-Unis : un discours de légitimation qui permet aux dirigeants de dissimuler l’égoïsme de leur action et aux citoyens de continuer à vivre comme si de rien n’était. Un anthropologue extraterrestre qui viendrait nous étudier, ou un historien du futur qui s’intéresserait à notre époque, ne verraient pas de différence de fonction entre les deux ; seulement deux variantes géographiquement situées du même récit de légitimation. Le citoyen européen qui mord à la croissance verte n’est pas différent du climato-sceptique américain, dont pourtant il se moque. Et, du point de vue de l’anthropologue extraterrestre ou de l’historien du futur, un journaliste français qui se félicite de voir le gouvernement promouvoir les éoliennes ne commet pas un crime moins grand que le journaliste de Fox News qui explique que le réchauffement climatique est un complot des chinois.</p>

  491. <p><cite><em><a href="https://www.partage-le.com/2019/07/zad-nature-culture-et-recomposition-des-mondes-un-entretien-avec-alessandro-pignocchi/">ZAD, nature, culture et recomposition des mondes : un entretien avec Alessandro Pignocchi</a></em> (<a href="/david/cache/4eb6e7269f426d89fe6df030f6e2df6a/">cache</a>)</cite></p>

  492. </blockquote>

  493. <p>Tout est dit. La paille dans l’œil du voisin est peut-être en plastique mais on se retrouve avec le même champ de vision une fois qu’on se ballade avec une en inox.</p>

  494. <p><em>Ces illustrations &lt;3</em></p>

  495. <hr />

  496. <blockquote>

  497. <p>Tl;dr : je me lance dans une nouvelle expérimentation pour tenter de réduire l’éco-anxiété et le surplus de charge mentale que je ressens trop fortement depuis quelques semaines en faisant une pause "réseaux sociaux" d’un mois et demi environ.</p>

  498. <p><cite><em><a href="https://mcgodwin.com/articles/pause">Pause</a></em> (<a href="/david/cache/58bcdfc949f761457536462e32ded69c/">cache</a>)</cite></p>

  499. </blockquote>

  500. <p>Idem ici, de manière définitive. Il y aura probablement moins de liens au dehors. Plus de liens en dedans.</p>

  501. <p><em>Les réponses sont en nous, tout ça.</em></p>

  502. <hr />

  503. <blockquote>

  504. <p>We continue to feel incredibly uncomfortable about playing the role of content arbiter and do not plan to exercise it often.</p>

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

  506. <p>Cloudflare is not a government. While we’ve been successful as a company, that does not give us the political legitimacy to make determinations on what content is good and bad. Nor should it. Questions around content are real societal issues that need politically legitimate solutions. We will continue to engage with lawmakers around the world as they set the boundaries of what is acceptable in their countries through due process of law. And we will comply with those boundaries when and where they are set.</p>

  507. <p><cite><em><a href="https://blog.cloudflare.com/terminating-service-for-8chan/">Terminating Service for 8Chan</a></em> (<a href="/david/cache/3bcbe6b5623dd86a60e96ac45554d7f8/">cache</a>)</cite></p>

  508. </blockquote>

  509. <p>C’est peu de dire que je ne porte pas dans mon cœur un service qui centralise autant et j’ai conscience du jesaispasquoiwashing qu’il y a dans ce billet. Toujours est-il qu’il me semble approprié et bénéfique dans le signal porté. Oui, il est possible de refuser des clients lorsqu’on opère un service.</p>

  510. <p><em>N’oubliez pas que <a href="https://medium.com/@tobi/in-support-of-free-speech-275d62670203">Shopify</a> (<a href="/david/cache/91f08ca21219c531188f89a550bc673d/">cache</a>) n’a pas du tout la même vision des choses…</em></p>

  511. <hr />

  512. <p>Citation de la semaine :</p>

  513. <blockquote>

  514. <p>1% today is better than 50% tomorrow or some distant and impossible far-flung future.</p>

  515. <p><cite><em><a href="https://www.robinrendle.com/notes/1percent-better">1% Better</a></em> (<a href="/david/cache/ded4988675cc0492e08546e4aa307f50/">cache</a>)</cite></p>

  516. </blockquote>

  517. </article>

  518. 

  519. 

  520. <nav id="jumpto">

  521.   <p>

  522.     <a rel=prev href="/david/stream/2019/07/30/">← Exemplarité</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/08/13/">Holisme →</a>

  523.   </p>

  524. </nav>

  525. 

  526. <footer>

  527.   <div>

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

  529.     <p>

  530.       Bonjour/Hi!

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

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

  533.     </p>

  534.     <p>

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

  536.     </p>

  537.     

  538.       <p>

  539.         Les dernières publications hebdomadaires sont :

  540.       </p>

  541.       <ul class="with_columns">

  542.         

  543.           <li>

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

  545.           </li>

  546.         

  547.           <li>

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

  549.           </li>

  550.         

  551.           <li>

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

  553.           </li>

  554.         

  555.           <li>

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

  557.           </li>

  558.         

  559.           <li>

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

  561.           </li>

  562.         

  563.           <li>

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

  565.           </li>

  566.         

  567.           <li>

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

  569.           </li>

  570.         

  571.           <li>

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

  573.           </li>

  574.         

  575.           <li>

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

  577.           </li>

  578.         

  579.           <li>

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

  581.           </li>

  582.         

  583.           <li>

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

  585.           </li>

  586.         

  587.           <li>

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

  589.           </li>

  590.         

  591.           <li>

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

  593.           </li>

  594.         

  595.           <li>

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

  597.           </li>

  598.         

  599.           <li>

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

  601.           </li>

  602.         

  603.           <li>

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

  605.           </li>

  606.         

  607.           <li>

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

  609.           </li>

  610.         

  611.           <li>

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

  613.           </li>

  614.         

  615.           <li>

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

  617.           </li>

  618.         

  619.           <li>

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

  621.           </li>

  622.         

  623.           <li>

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

  625.           </li>

  626.         

  627.           <li>

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

  629.           </li>

  630.         

  631.           <li>

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

  633.           </li>

  634.         

  635.           <li>

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

  637.           </li>

  638.         

  639.           <li>

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

  641.           </li>

  642.         

  643.           <li>

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

  645.           </li>

  646.         

  647.           <li>

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

  649.           </li>

  650.         

  651.           <li>

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

  653.           </li>

  654.         

  655.           <li>

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

  657.           </li>

  658.         

  659.           <li>

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

  661.           </li>

  662.         

  663.           <li>

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

  665.           </li>

  666.         

  667.           <li>

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

  669.           </li>

  670.         

  671.           <li>

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

  673.           </li>

  674.         

  675.           <li>

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

  677.           </li>

  678.         

  679.           <li>

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

  681.           </li>

  682.         

  683.           <li>

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

  685.           </li>

  686.         

  687.           <li>

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

  689.           </li>

  690.         

  691.           <li>

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

  693.           </li>

  694.         

  695.           <li>

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

  697.           </li>

  698.         

  699.           <li>

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

  701.           </li>

  702.         

  703.           <li>

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

  705.           </li>

  706.         

  707.           <li>

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

  709.           </li>

  710.         

  711.           <li>

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

  713.           </li>

  714.         

  715.           <li>

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

  717.           </li>

  718.         

  719.           <li>

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

  721.           </li>

  722.         

  723.           <li>

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

  725.           </li>

  726.         

  727.           <li>

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

  729.           </li>

  730.         

  731.           <li>

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

  733.           </li>

  734.         

  735.           <li>

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

  737.           </li>

  738.         

  739.       </ul>

  740.     

  741.     <p>

  742.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  759.     </p>

  760.     <p>

  761.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  762.     </p>

  763.     <p>

  764.       Je ne traque pas ta navigation mais mon

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

  766.       conserve des logs d’accès.

  767.     </p>

  768.   </div>

  769. </footer>

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

  771.   ;(_ => {

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

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

  774.       e.preventDefault()

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

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

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

  778.     })

  779.   })()

  780. </script>

  781. 

  782.   <script>

  783.   /* Service workers */

  784.   if (navigator.serviceWorker) {

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

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

  787.       function sendLinks (selector) {

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

  789.           return link.getAttribute('href')

  790.         })

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

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

  793.       }

  794.       navigator.serviceWorker.getRegistration()

  795.         .then(function (registration) {

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

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

  798.               .then(navigator.serviceWorker.ready)

  799.               .then(function () {

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

  801.               })

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

  803.           } else {

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

  805.             sendLinks(selector)

  806.           }

  807.         })

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

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

  810.         sendLinks(selector)

  811.       })

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

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

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

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

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

  817.           

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

  819.           

  820.         }

  821.       })

  822.     })

  823.   } else {

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

  825.   }

  826. </script>