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

index.html 30KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801 
  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>Mots-serrures — 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/02/08/">

  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.   Mots-serrures

  456.   <time>Publié le 8 février</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Semaine de récupération après un gros rhume qui s’est soldée par la fin de mon projet de couture (super content et j’en ai déjà un autre !). Il faudra que je m’en vante de manière illustrée un de ces jours. Ou pas.</em></p>

  460. <blockquote>

  461. <p>Quand est-ce qu’une personne use d’un privilège de parole ? Quand elle dit "je voudrais <em>juste</em> ajouter…", "rapidement 2-3 points", "j’en profite pour dire que…", etc.</p>

  462. <p><cite><em><a href="https://oncletom.io/2019/ralentir-se-taire-et-ecouter/">Ralentir, se taire et écouter</a></em> (<a href="/david/cache/e5410880dc227f60764d5163a4946826/">cache</a>)</cite></p>

  463. </blockquote>

  464. <p>De <a href="http://bradfrost.com/blog/post/just/">« just »</a> (<a href="/david/cache/82d155c59c84c669832f40bbcfa64052/">cache</a>) à <a href="http://jsomers.net/blog/it-turns-out">« it turns out »</a> (<a href="/david/cache/35f8119708aea7bafec0dc806014572e/">cache</a>), il y a des mots qui activent certaines défenses. Et la <a href="https://twitter.com/ImmyKaur/status/1091994316698980352">liste des expressions</a> (<a href="/static/david/stream/toxic-positivity.jpg">cache, image 50 Ko</a>) peut être longue. Je ne cache pas que j’ai parfois du mal à m’en séparer, par habitude et facilité. J’essaye de faire un effort dans ma transmission familiale avec plus ou moins de succès.</p>

  465. <p>J’aime le HTML pour son côté Pierre de Rosette, à la fois en terme de format pivot et de support d’apprentissage.</p>

  466. <blockquote>

  467. <p>I like to think of Basecamp as a teaching hospital. The care of our users is our first priority, but it’s not the only one. We also take care of the staff running the place, and we try to teach and spread everything we learn. Pledging to protect View Source fits right in with that.</p>

  468. <p>The web is just a marvel of a platform. So unique. So empowering. It’s easy to just fall into the trap of “what can the web do for me, for my business, for my customers”. Some times it’s worth taking a step back and ask yourself: What can I do for the web? One answer: Protect and promote View Source.</p>

  469. <p><cite><em><a href="https://m.signalvnoise.com/paying-tribute-to-the-web-with-view-source/">Paying tribute to the web with View Source</a></em> (<a href="/david/cache/7c01c71a611c823d0d863a79b8fd4676/">cache</a>)</cite></p>

  470. </blockquote>

  471. <p>Là aussi j’essaye de faire mon possible pour commenter la syntaxe afin qu’elle soit compréhensible. Que le fond <em>et</em> la forme permettent de s’enrichir et de redistribuer. Une somme de petites attentions isolées permettra peut-être à ce monde d’être un peu plus beau.</p>

  472. <blockquote>

  473. <p>Pour la France, les données de la Banque mondiale montrent que 62 % des Français appartiennent aux 10 % les plus riches du monde.</p>

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

  475. <p>Au-dessus des 3 % les plus pauvres en France, la situation s’améliore rapidement, de sorte que 97 % des Français appartiennent aux 30 % les plus riches du monde. Puis, 90 % des Français font partie des 20 % les plus riches au monde.</p>

  476. <p><cite><em><a href="https://theconversation.com/gilet-jaune-la-majorite-des-francais-fait-partie-des-10-les-plus-riches-au-monde-110665">« Gilet jaune » ? La majorité des Français fait partie des 10 % les plus riches au monde</a></em> (<a href="/david/cache/86e4ad550c27506c3098c649a00896c5/">cache</a>)</cite></p>

  477. </blockquote>

  478. <p>Quelques chiffres qui donnent une certaine perspective quant à la richesse, à son ruissellement et à <a href="http://partage-le.com/2019/02/bill-gates-affirme-que-la-pauvrete-est-en-baisse-il-ne-pourrait-pas-se-tromper-davantage-par-jason-hickel/">la pauvreté</a> (<a href="/david/cache/a3d2e4613445beeda0b50946ea385671/">cache</a>). Nous sommes les 10 % qui abreuvent les 1 %. Quelle est la légitimité à se battre pour avoir plus ? L’espoir d’être le fer de lance d’un ruissellement social ? Une histoire d’égoïsme, d’ascenseur en panne et de <a href="https://www.novethic.fr/fileadmin/user_upload/Comment_s_aligner_sur_une_trajectoire_1_5_C__1_.png">mesures inespérées</a> (<a href="/static/david/stream/trajectoire.png">cache, image 700 Ko</a>). Voir <a href="http://www.yousustain.com/footprint/howmuchco2?co2=620">aussi</a>.</p>

  479. <p>En ce moment j’essaye de lire tous les articles mentionnant « réchauffement climatique » en lisant « extinction humaine », ça donne une autre perspective à notre aveuglement. Ce n’est pas très gai mais c’est peut-être ça les gilets jaunes : prendre conscience du fait que ses enfants vont vivre moins vieux que soi. Perdre confiance dans un système qui promettait cela. Ne plus accepter de telles inégalités sans garder cet espoir.</p>

  480. <p>Je suis les 10 % et je suis aussi les 18 000 :</p>

  481. <blockquote>

  482. <p>La décision vient d’être annoncée par le ministre de l’Immigration du Québec, Simon Jolin-Barrette, et elle risque de ne pas faire plaisir aux 18 000 candidats qui avaient déposé une demande d’immigration sous l’ancienne plateforme appelée Mon Projet Québec qui avait été mise en place par l’ancien gouvernement.</p>

  483. <p><cite><em><a href="https://www.immigrer.com/elimination-de-tous-les-dossiers-dimmigration-deposes-avant-le-2-aout-2018/">Élimination de tous les dossiers d’immigration déposés avant le 2 août 2018</a></em> (<a href="/david/cache/a67000f8e2409049ccae01a5c709c2e1/">cache</a>)</cite></p>

  484. </blockquote>

  485. <p>Douche froide avec ce <a href="http://www.assnat.qc.ca/fr/travaux-parlementaires/projets-loi/projet-loi-9-42-1.html">projet de loi n°9 : Loi visant à accroître la prospérité socio-économique du Québec et à répondre adéquatement aux besoins du marché du travail par une intégration réussie des personnes immigrantes</a> (<a href="/static/david/stream/projet-loi-immigration-quebec.pdf">cache, PDF 137 Ko</a>) qui ne tient plus compte des demandes en cours. Après deux années d’attente et ce retour à la case départ, il se pourrait que cela mette un terme à cette incursion en milieu québécois et son <a href="http://www.immigration-quebec.gouv.qc.ca/fr/informations/actualites/actualites-2019/nouveau-projet-immigration.html">immigration de plus en plus choisie</a> (<a href="/david/cache/fc9e6e56acf682d7ec7fa4f2d0919056/">cache</a>). Un <a href="https://twitter.com/RaquelGlobal/status/1093589442953007104">« Tinder de l’immigration »</a> 😱.</p>

  486. <p>En accord avec un nomadisme lent…</p>

  487. <blockquote>

  488. <p>L’autorité organise le temps plus que l’espace. Elle ne relève pas du pouvoir mais de la transmission. L’autorité est une vitesse parce qu’elle rend le temps efficace, elle confère au temps sa force opérationnelle. Dès lors, écouter l’autorité, c’est prendre conscience d’un temps propre, d’une temps qui joue pour soi. Si une société a besoin de l’autorité, c’est parce qu’elle lui permet d’assurer sa pérennité. Elle est ce qui assure la continuité des générations, dans la famille, dans la société […] En ce sens, l’autorité est moins ce qui ordonne notre vie ensemble que la condition même de sa possibilité. C’est un « milieu de vie » au sens placentaire du terme.</p>

  489. <p><cite><em>Les irremplaçables</em>, Cynthia Fleury</cite></p>

  490. </blockquote>

  491. <p><em>Cette semaine j’ai aussi découvert le <a href="https://www.hypothermia.fr/2019/01/longing-for-a-calling/">kulning</a> (<a href="/david/cache/9fb532ea0d9f93e3b24ff3fc2764e606/">cache</a>) et les <a href="https://fr.wikipedia.org/wiki/Tardigrada">tardigrades</a> &lt;3.</em></p>

  492. </article>

  493. 

  494. 

  495. <nav id="jumpto">

  496.   <p>

  497.     <a rel=prev href="/david/stream/2019/02/01/">← Sans voie</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/02/15/">Kyriarchie →</a>

  498.   </p>

  499. </nav>

  500. 

  501. <footer>

  502.   <div>

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

  504.     <p>

  505.       Bonjour/Hi!

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

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

  508.     </p>

  509.     <p>

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

  511.     </p>

  512.     

  513.       <p>

  514.         Les dernières publications hebdomadaires sont :

  515.       </p>

  516.       <ul class="with_columns">

  517.         

  518.           <li>

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

  520.           </li>

  521.         

  522.           <li>

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

  524.           </li>

  525.         

  526.           <li>

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

  528.           </li>

  529.         

  530.           <li>

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

  532.           </li>

  533.         

  534.           <li>

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

  536.           </li>

  537.         

  538.           <li>

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

  540.           </li>

  541.         

  542.           <li>

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

  544.           </li>

  545.         

  546.           <li>

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

  548.           </li>

  549.         

  550.           <li>

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

  552.           </li>

  553.         

  554.           <li>

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

  556.           </li>

  557.         

  558.           <li>

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

  560.           </li>

  561.         

  562.           <li>

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

  564.           </li>

  565.         

  566.           <li>

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

  568.           </li>

  569.         

  570.           <li>

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

  572.           </li>

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.           <li>

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

  712.           </li>

  713.         

  714.       </ul>

  715.     

  716.     <p>

  717.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  734.     </p>

  735.     <p>

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

  737.     </p>

  738.     <p>

  739.       Je ne traque pas ta navigation mais mon

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

  741.       conserve des logs d’accès.

  742.     </p>

  743.   </div>

  744. </footer>

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

  746.   ;(_ => {

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

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

  749.       e.preventDefault()

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

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

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

  753.     })

  754.   })()

  755. </script>

  756. 

  757.   <script>

  758.   /* Service workers */

  759.   if (navigator.serviceWorker) {

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

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

  762.       function sendLinks (selector) {

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

  764.           return link.getAttribute('href')

  765.         })

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

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

  768.       }

  769.       navigator.serviceWorker.getRegistration()

  770.         .then(function (registration) {

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

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

  773.               .then(navigator.serviceWorker.ready)

  774.               .then(function () {

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

  776.               })

  777.               .catch(console.error.bind(console))

  778.           } else {

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

  780.             sendLinks(selector)

  781.           }

  782.         })

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

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

  785.         sendLinks(selector)

  786.       })

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

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

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

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

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

  792.           

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

  794.           

  795.         }

  796.       })

  797.     })

  798.   } else {

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

  800.   }

  801. </script>