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/01/25/index.html

index.html 36KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900 
  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>Auto-diagnostic — 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/01/25/">

  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.   @font-face {

  105.     font-family: 'TriplicateT4c';

  106.     src: url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff2') format('woff2'),

  107.          url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff') format('woff');

  108.     font-weight: 300;

  109.     font-style: normal;

  110.     font-display: swap;

  111.   }

  112. 

  113. 

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

  115. body {

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

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

  118.   background-color: #f0f0ea;

  119.   color: #07486c;

  120.   font-kerning: normal;

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

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

  123.   text-rendering: optimizeLegibility;

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

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

  126. }

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

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

  129. }

  130. em {

  131.   font-style: italic;

  132.   color: #323a45;

  133. }

  134. strong {

  135.   font-weight: bold;

  136.   color: black;

  137. }

  138. nav {

  139.   background-color: #323a45;

  140.   color: #f0f0ea;

  141.   display: flex;

  142.   justify-content: space-around;

  143.   padding: 1rem .5rem;

  144. }

  145.   nav:last-child {

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

  147.   }

  148.   nav a {

  149.     color: #f0f0ea;

  150.   }

  151.   nav abbr {

  152.     border-bottom: 1px dotted white;

  153.   }

  154. 

  155. h1 {

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

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

  158.   background-color: #e3e1e1;

  159.   color: #323a45;

  160.   text-align: center;

  161.   padding: 5rem 0 4rem 0;

  162.   width: 100%;

  163.   font-family: 'ConcourseT3';

  164.   display: flex;

  165.   flex-direction: column;

  166. }

  167.   h1.single {

  168.     padding-bottom: 10rem;

  169.   }

  170.   h1 span {

  171.     position: absolute;

  172.     top: 1vh;

  173.     left: 20%;

  174.     line-height: 0;

  175.   }

  176.     h1 span a {

  177.       line-height: 1.7;

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

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

  180.       background: #2d7474;

  181.       font-size: 1.3rem;

  182.       color: white;

  183.       text-decoration: none;

  184.     }

  185. h2 {

  186.   margin: 4rem 0 1rem;

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

  188.   padding-top: 1vh;

  189. }

  190. h3 {

  191.   text-align: center;

  192.   margin: 3rem 0 .75em;

  193. }

  194. hr {

  195.   height: .4rem;

  196.   width: .4rem;

  197.   border-radius: .4rem;

  198.   background: #07486c;

  199.   margin: 2.5rem auto;

  200. }

  201. time {

  202.   display: bloc;

  203.   margin-left: 0 !important;

  204. }

  205. ul, ol {

  206.   margin: 2rem;

  207. }

  208. ul {

  209.   list-style-type: square;

  210. }

  211. a {

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

  213.   text-decoration-thickness: 0.05em;

  214.   text-underline-offset: 0.09em;

  215. }

  216. article {

  217.   max-width: 50rem;

  218.   display: flex;

  219.   flex-direction: column;

  220.   margin: 2rem auto;

  221. }

  222.   article.single {

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

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

  225.     background: #f0f0ea;

  226.     padding: 2rem;

  227.   }

  228.   article p:last-child {

  229.     margin-bottom: 1rem;

  230.   }

  231. p {

  232.   padding: 0 .5rem;

  233.   margin-left: 3rem;

  234. }

  235.   p + p,

  236.   figure + p {

  237.     margin-top: 2rem;

  238.   }

  239. 

  240. blockquote {

  241.   background-color: #e3e1e1;

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

  243.   display: flex;

  244.   flex-direction: column;

  245.   align-items: center;

  246.   padding: 1rem;

  247.   margin: 1.5rem;

  248. }

  249.   blockquote cite {

  250.     font-style: italic;

  251.   }

  252.   blockquote p {

  253.     margin-left: 0;

  254.   }

  255. 

  256. figure {

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

  258.   background-color: #e3e1e1;

  259.   text-align: center;

  260.   padding: 1.5rem 0;

  261.   margin: 1rem 0 0;

  262.   font-size: 1.5rem;

  263.   width: 100%;

  264. }

  265.   figure img {

  266.     max-width: 250px;

  267.     max-height: 250px;

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

  269.     padding: 1px;

  270.   }

  271. figcaption {

  272.   padding: 1rem;

  273.   line-height: 1.4;

  274. }

  275. aside {

  276.   display: flex;

  277.   flex-direction: column;

  278.   background-color: #e3e1e1;

  279.   padding: 1rem 0;

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

  281. }

  282.   aside p {

  283.     max-width: 50rem;

  284.     margin: 0 auto;

  285.   }

  286. 

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

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

  289.   font-size: 1rem;

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

  291. }

  292. h1 {

  293.   font-size: 1.9rem;

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

  295. }

  296. h2 {

  297.   font-size: 1.6rem;

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

  299. }

  300. h3 {

  301.   font-size: 1.35rem;

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

  303. }

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

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

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

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

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

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

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

  311.     margin-left: 0;

  312.   }

  313.   h1 {

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

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

  316.   }

  317.   h2 {

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

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

  320.   }

  321.   h3 {

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

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

  324.   }

  325. }

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

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

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

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

  330.      but if our baseline value was not expressed

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

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

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

  334.     line-height: 1.5em;

  335.   }

  336.   p, li, pre, details {

  337.     margin-left: 3rem;

  338.   }

  339.   h1 {

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

  341.     line-height: 1.2em;

  342.   }

  343.   h2 {

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

  345.     line-height: 1.3em;

  346.   }

  347.   h3 {

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

  349.     line-height: 1.4em;

  350.   }

  351.   figure img {

  352.     max-width: 500px;

  353.     max-height: 500px;

  354.   }

  355. }

  356. 

  357. figure.unsquared {

  358.   margin-bottom: 1.5rem;

  359. }

  360.   figure.unsquared img {

  361.     height: inherit;

  362.   }

  363. 

  364. 

  365.   /* https://github.com/richleland/pygments-css */

  366.   .codehilite{

  367.       background-color: #fdf6e3;

  368.       margin: 1rem auto;

  369.       padding: 1rem;

  370.       overflow-x:auto;

  371.       box-shadow:inset 0 0 2px rgba(0,0,0,0.2)

  372.   }

  373.   .codehilite .t{color:#586e75}

  374.   .codehilite .w{color:#073642}

  375.   .codehilite .err{color:#cb4b16}

  376.   .codehilite .k{color:#859900}

  377.   .codehilite .kc{color:#2aa198}

  378.   .codehilite .kd{color:#268bd2}

  379.   .codehilite .kn{color:#b58900}

  380.   .codehilite .kp{color:#859900}

  381.   .codehilite .kr{color:#073642}

  382.   .codehilite .kt{color:#b58900}

  383.   .codehilite .n{color:#586e75}

  384.   .codehilite .na{color:#2aa198}

  385.   .codehilite .nb{color:#268bd2}

  386.   .codehilite .nc{color:#268bd2}

  387.   .codehilite .ne{color:#cb4b16}

  388.   .codehilite .no{color:#2aa198}

  389.   .codehilite .nd{color:#2aa198}

  390.   .codehilite .ni{color:#2aa198;font-weight:bold}

  391.   .codehilite .nf{color:#268bd2}

  392.   .codehilite .nn{color:#586e75}

  393.   .codehilite .nt{color:#2aa198;font-weight:bold}

  394.   .codehilite .nv{color:#cb4b16}

  395.   .codehilite .b{color:#859900}

  396.   .codehilite .bp{color:#586e75}

  397.   .codehilite .v{color:#586e75}

  398.   .codehilite .vc{color:#586e75}

  399.   .codehilite .vg{color:#268bd2}

  400.   .codehilite .vi{color:#268bd2}

  401.   .codehilite .m{color:#268bd2}

  402.   .codehilite .mf{color:#268bd2}

  403.   .codehilite .mh{color:#268bd2}

  404.   .codehilite .mi{color:#268bd2}

  405.   .codehilite .mo{color:#268bd2}

  406.   .codehilite .s{color:#2aa198}

  407.   .codehilite .sb{color:#2aa198}

  408.   .codehilite .sc{color:#2aa198}

  409.   .codehilite .sd{color:#2aa198}

  410.   .codehilite .s2{color:#2aa198}

  411.   .codehilite .se{color:#cb4b16}

  412.   .codehilite .sh{color:#2aa198}

  413.   .codehilite .si{color:#cb4b16}

  414.   .codehilite .sx{color:#2aa198}

  415.   .codehilite .sr{color:#cb4b16}

  416.   .codehilite .s1{color:#2aa198}

  417.   .codehilite .ss{color:#cb4b16}

  418.   .codehilite .il{color:#268bd2}

  419.   .codehilite .o{color:#586e75}

  420.   .codehilite .ow{color:#859900}

  421.   .codehilite .p{color:#586e75}

  422.   .codehilite .c{color:#93a1a1;font-style:italic}

  423.   .codehilite .cm{color:#93a1a1}

  424.   .codehilite .cp{color:#93a1a1}

  425.   .codehilite .c1{color:#93a1a1}

  426.   .codehilite .cs{color:#93a1a1}

  427.   .codehilite .hll{background-color:#dc322f}

  428.   .codehilite .g{color:#586e75}

  429.   .codehilite .gd{color:#586e75}

  430.   .codehilite .ge{font-style:italic}

  431.   .codehilite .gr{color:#586e75}

  432.   .codehilite .gh{color:#586e75;font-weight:bold}

  433.   .codehilite .gi{color:#586e75}

  434.   .codehilite .go{color:#586e75}

  435.   .codehilite .gp{color:#586e75}

  436.   .codehilite .gs{font-weight:bold}

  437.   .codehilite .gu{color:#586e75;font-weight:bold}

  438.   .codehilite .gt{color:#586e75}

  439. 

  440. 

  441. @media print {

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

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

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

  445.     text-decoration: underline;

  446.     text-shadow: none !important;

  447.     background-image: none !important;

  448.     background: white;

  449.     color: black;

  450.   }

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

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

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

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

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

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

  457.   img {

  458.     max-width: 250px !important;

  459.     max-height: 250px !important;

  460.   }

  461.   nav, aside { display: none; }

  462. }

  463. 

  464. ul.with_columns {

  465.   column-count: 1;

  466. }

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

  468.   ul.with_columns {

  469.     column-count: 2;

  470.   }

  471. }

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

  473.   ul.with_columns {

  474.     column-count: 3;

  475.   }

  476. }

  477. ul.with_two_columns {

  478.   column-count: 1;

  479. }

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

  481.   ul.with_two_columns {

  482.     column-count: 1;

  483.   }

  484. }

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

  486.   ul.with_two_columns {

  487.     column-count: 2;

  488.   }

  489. }

  490. 

  491. .gallery {

  492.   display: flex;

  493.   flex-wrap: wrap;

  494.   justify-content: space-around;

  495. }

  496.   .gallery figure img {

  497.     margin-left: 1rem;

  498.     margin-right: 1rem;

  499.   }

  500.   .gallery figure figcaption {

  501.     font-family: 'ConcourseT3'

  502.   }

  503. 

  504. footer {

  505.   font-family: 'ConcourseT3';

  506.   display: flex;

  507.   flex-direction: column;

  508.   border-top: 3px solid white;

  509.   padding: 4rem 0;

  510.   background-color: #07486c;

  511.   color: white;

  512. }

  513.   footer > * {

  514.     max-width: 50rem;

  515.     margin: 0 auto;

  516.   }

  517.   footer a {

  518.     color: #f1c40f;

  519.   }

  520.   footer .avatar {

  521.     width: 200px;

  522.     height: 200px;

  523.     border-radius: 50%;

  524.     float: left;

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

  526.     shape-outside: circle();

  527.     margin-right: 2rem;

  528.     padding: 2px 5px 5px 2px;

  529.     background: white;

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

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

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

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

  534.   }

  535. </style>

  536. 

  537. <h1 class="single">

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

  539.   Auto-diagnostic

  540.   <time>Publié le 25 janvier</time>

  541. </h1>

  542. <article class="single">

  543.  <p><em>Cette semaine grosse sortie de ski de fond qui s’apparentait davantage à du ski de rando vu les conditions &lt;3. J’ai passé le cap où je peux réfléchir pendant l’effort dans cette pratique là et c’est chouette (coucou <a href="https://www.youtube.com/watch?v=W3fc5QOWexc">Kilian</a>). Mais penser à quoi ?</em></p>

  544. <blockquote>

  545. <p>Dans quelques jours, je vais passer des tests pour tenter de déterminer si je suis concernée par une forme de trouble du spectre autistique. Forcément, la date approchant, je ne peux pas m’empêcher de remettre en question toute ma démarche et de me demander <em>« mais pourquoi donc est-ce que je crois que je suis peut-être autiste ? Sur quoi est-ce que je me base pour échafauder une telle hypothèse ? »</em>, questions que je retrouve d’ailleurs dans le regard, certes bienveillant mais manifestement incrédule, de mon entourage.</p>

  546. <p><cite><em><a href="http://maiadereva.net/pourquoi-je-crois-que-je-suis-peut-etre-autiste/">Pourquoi je crois que je suis peut-être autiste ?</a></em> (<a href="/david/cache/235129bc3212681976715ada077e7c7e/">cache</a>)</cite></p>

  547. </blockquote>

  548. <p>Maïa Dereva nous parle de sa démarche et de ses attentes. Ça m’a motivé pour re-passer l’Aspie Quiz, <a href="/david/blog/2017/spectre-autisme/">deux ans plus tard</a>, et mon résultat a évolué de manière significative. Je n’arrive pas à identifier si c’est parce que j’accepte davantage certains aspects de ma personnalité ou si je suis dans une spirale d’auto-entraînement qui accentue ma perception. <em>À méditer.</em></p>

  549. <blockquote>

  550. <p>D’ici là, je souhaite recueillir des témoignages d’hommes qui progressent dans une réflexion similaire : avez-vous détecté des mécanismes de défense qui vous empêchent d’écouter quand on vous parle de sexisme ? Quelles en sont les manifestations ? Avez-vous tenté de les déjouer ? Comment ? Et pour quel résultat ?</p>

  551. <p><cite><em><a href="https://ut7.fr/blog/2019/01/15/ce-qui-se-passe-en-moi-quand-une-femme-me-parle-de-sexisme.html">Ce Qui Se Passe En Moi Quand Une Femme Me Parle De Sexisme</a></em> (<a href="/david/cache/7273e8596bbc99a718cd168d83e858e7/">cache</a>)</cite></p>

  552. </blockquote>

  553. <p>Raphaël Pierquin nous décrit son chemin de pensée. Mon mécanisme de défense <a href="/david/stream/2018/11/20/">actuel</a> est d’accepter que ce soit contextuel. Non pas la situation elle-même mais le moment où elle est transmise. Je me sens coupable de ne pas pouvoir en permanence investir l’énergie nécessaire pour cette lutte. Cela demande en premier lieu de réussir à détruire son propre statut, ne plus croire en soi pour être capable de revenir à un ensemble. Ne pas l’identifier comme une perte mais comme un nouveau devenir que l’on espère plus enthousiasmant.</p>

  554. <blockquote>

  555. <p>Le pouvoir est en fait <em>circulatoire</em>, un fait circulatoire même au sens <em>qui circule</em>. […] Autrement dit, le pouvoir, même de souveraineté, n’appartient jamais à un seul individu même divinisé. Le pouvoir de l’un tient toujours par le consentement des autres et par le fait que ce qui n’est pas partagé l’est en fait. Le pouvoir fait machine : il faut ordre, performance, illusion de fonctionnement. La vérité du pouvoir demeure bureaucratique pour être durable.</p>

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

  557. <p>Devenir maître, au sens hégélien, c’est risquer la mort, prendre ce risque que l’esclave se refuse à prendre. Mais demeurer maître, c’est devenir esclave, c’est rentrer dans la circulation du pouvoir, celle qui a besoin du subordonné pour se maintenir. Demeurer maître, c’est finir par croire à son statut de maître. Or, l’individuation est une puissance non corrompue par le pouvoir. <em>S’individuer</em> suppose de ne pas croire, et notamment de ne croire en aucun statut.</p>

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

  559. </blockquote>

  560. <p>Aurélien m’invite à écouter <a href="https://www.franceculture.fr/emissions/les-chemins-de-la-philosophie/sommes-nous-prets-pour-la-fin-du-monde">« Sommes-nous prêts pour la fin du monde ? »</a>. J’ai beaucoup de mal à rester concentré sur une piste audio. Je fais l’effort et il est récompensé. <em>Merci !</em></p>

  561. <p>Côté technique, j’ai appris plusieurs choses à mes dépens :</p>

  562. <ul>

  563. <li>Il n’est pas possible de changer en CSS le <code>fill</code> d’un fichier SVG extérieur lié (pour lui appliquer <code>currentColor</code> par exemple) car il n’est pas présent dans le DOM. C’est logique mais ça m’a pincé les doigts.</li>

  564. <li>SVG encore, il n’est pas possible facilement de modifier un SVG inclus grâce à la balise <code>&lt;use&gt;</code> en JavaScript, c’est bien dommage.</li>

  565. <li>Si vous utilisez <a href="https://github.com/getsentry/responses">responses</a> (le pendant à <a href="http://docs.python-requests.org/en/latest/">request</a>), il faut définir toutes les réponses <em>avant</em> de faire toutes les requêtes, c’est <a href="https://github.com/getsentry/responses#multiple-responses">documenté</a> mais non explicite.</li>

  566. </ul>

  567. <p>J’ai presque compris comment Dat fonctionne <a href="https://datprotocol.github.io/how-dat-works/">grâce à ce tutoriel</a> (<a href="/david/cache/87310ff690bc7663b397af17121a5a09/">cache</a>). J’ai rédigé mes premières <a href="https://jtbd.info/replacing-the-user-story-with-the-job-story-af7cdee10c27">Job stories</a> (<a href="/david/cache/6512ff7a7e315cf4291f831d7bea16f6/">cache</a>) et il faut encore <a href="https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9">que je les affine</a> (<a href="/david/cache/9d00487443d1f2e52c1801c435604b9f/">cache</a>).</p>

  568. <blockquote>

  569. <p>People in my life didn’t have much to say about me leaving Facebook but I did get a few plaintive emails. <em>How will we keep up with you? How will we see photos of your child</em>? The implication was that without Facebook, all would be lost and we would lose contact forever. I’m exaggerating a little but I was legitimately surprised at the sense of finality that some people seemed to feel, as if there would be no other possibilities for us to connect to each other once I left. Sure, Facebook might be the most <em>convenient</em> way to connect but I never thought of convenience as the hallmark of good relationships. That said, there were people I did want to stay in touch with so I came up with a plan: start a very small mailing list via Mailchimp’s Forever Free plan to stay in touch with very close friends and my family. I’ve sent three emails this year and it’s been a great overall experience.</p>

  570. <p><cite><em><a href="https://blog.chaddickerson.com/2019/01/09/replacing-facebook/">Going old school: how I replaced Facebook with email</a></em> (<a href="/david/cache/748b20946a415162902bb1004bfc4542/">cache</a>)</cite></p>

  571. </blockquote>

  572. <p>Intéressant de voir le nombre d’initiatives actuelles pour se réapproprier certains espaces, poussées par la toxicité des foires d’empoignes semi-publiques collectant des données bien privées. J’ai pour ambition de proposer un milieu de publication pour mes proches cette année. Je ne sais pas encore où je vais avec ça, ni en terme de délégation, ni en terme de diffusion.</p>

  573. <p><em>Quelle marque associer à ce lieu ?</em></p>

  574. <blockquote>

  575. <p>Think about an encounter you had lately with a person you met for the first time. Maybe it was at a party? Maybe even a work meeting? What is striking is that what you remembered the day after, was most likely not how that person dressed exactly. Nor was it the precise words she said. What remained though is leftover feelings.</p>

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

  577. <p>Those feelings can be vague sometimes, even hard to put words on. But what is clear is that if we want people to remember brands, we have to feed them something richer than just a logo, a color, a typeface and an interface. Through its inherent richness, digital is the perfect communication medium to help with that.</p>

  578. <p><cite><em><a href="https://thomasbyttebier.be/blog/brands-beyond-the-interface">Beyond the interface</a></em> (<a href="/david/cache/31100a4666f9e5b4b7ec6edd521a6dca/">cache</a>)</cite></p>

  579. </blockquote>

  580. <p>Réflexions intéressantes sur l’uniformité sur le Web, ses sources, ses pièges et ses échappatoires. Quelles légendes perdureront une fois le réseau effondré ? Comment vivre dans un monde qui était inimaginable il y a 100 ans et qui le sera probablement tout autant dans 100 ans aussi ? Peut-être que la somme de ces journaux extimes finira par avoir une valeur, si tant est qu’elle soit préservable sur cette période.</p>

  581. <blockquote>

  582. <p>Le journal permet de passer du « vécu au conçu », de glisser « d’une écriture expérientielle à une écriture théorique ». Il donne la possibilité « d’entrer dans plusieurs phases d’appropriation de de distanciation des savoirs, par le biais du passage d’une écriture pour soi à une écriture pour les autres ». C’est le lieu de la confrontation à ses doutes, à ses questionnements, à son implication : « le journal montre comment l’auteur s’organise dans sa pratique, comment il prépare son travail, quelles sont ses "stratégies techniques", etc. Il raconte souvent ce qui l’amène à prendre une décision donnée dans une situation donnée. Cette dimension est très utile pour aider l’auteur à conscientiser son rapport au métier ».</p>

  583. <p><cite><em><a href="http://www.lettresvives.org/2019/01/24/enseigner-et-tenir-un-journal-de-bord/">Enseigner et tenir un journal de bord</a></em> (<a href="/david/cache/54df7403f9eba01e22ed50dd3d3deb61/">cache</a>)</cite></p>

  584. </blockquote>

  585. <p>Écrire et partager pour s’accepter. Pour mettre des mots sur ses doutes et ses aspirations. Une publication par à-coups. Une thérapie à moindre coût.</p>

  586. <blockquote>

  587. <p>Arriver à s’aimer malgré, puis dans, puis <em>grâce à</em> une pleine lumière qui ne laisse rien  passer. Se savoir insuffisant. Ainsi, échapper à la suffisance. En rire avec le sérieux d’un enfant. Ne pas se satisfaire de ce rire, parce que nous ne sommes plus des enfants.</p>

  588. <p><cite><em><a href="https://latitude77.org/2019/01/19/identites/">Identités</a></em> (<a href="/david/cache/aa4ca3a6aae305bfc36725392b6e671b/">cache</a>)</cite></p>

  589. </blockquote>

  590. <p><em>Parce que l’on a tant besoin que l’on ait besoin de nous ;-).</em></p>

  591. </article>

  592. 

  593. 

  594. <nav id="jumpto">

  595.   <p>

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

  597.   </p>

  598. </nav>

  599. 

  600. <footer>

  601.   <div>

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

  603.     <p>

  604.       Bonjour/Hi!

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

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

  607.     </p>

  608.     <p>

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

  610.     </p>

  611.     

  612.       <p>

  613.         Les dernières publications hebdomadaires sont :

  614.       </p>

  615.       <ul class="with_columns">

  616.         

  617.           <li>

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

  619.           </li>

  620.         

  621.           <li>

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

  623.           </li>

  624.         

  625.           <li>

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

  627.           </li>

  628.         

  629.           <li>

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

  631.           </li>

  632.         

  633.           <li>

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

  635.           </li>

  636.         

  637.           <li>

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

  639.           </li>

  640.         

  641.           <li>

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

  643.           </li>

  644.         

  645.           <li>

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

  647.           </li>

  648.         

  649.           <li>

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

  651.           </li>

  652.         

  653.           <li>

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

  655.           </li>

  656.         

  657.           <li>

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

  659.           </li>

  660.         

  661.           <li>

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

  663.           </li>

  664.         

  665.           <li>

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

  667.           </li>

  668.         

  669.           <li>

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

  671.           </li>

  672.         

  673.           <li>

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

  675.           </li>

  676.         

  677.           <li>

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

  679.           </li>

  680.         

  681.           <li>

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

  683.           </li>

  684.         

  685.           <li>

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

  687.           </li>

  688.         

  689.           <li>

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

  691.           </li>

  692.         

  693.           <li>

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

  695.           </li>

  696.         

  697.           <li>

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

  699.           </li>

  700.         

  701.           <li>

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

  703.           </li>

  704.         

  705.           <li>

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

  707.           </li>

  708.         

  709.           <li>

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

  711.           </li>

  712.         

  713.           <li>

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

  715.           </li>

  716.         

  717.           <li>

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

  719.           </li>

  720.         

  721.           <li>

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

  723.           </li>

  724.         

  725.           <li>

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

  727.           </li>

  728.         

  729.           <li>

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

  731.           </li>

  732.         

  733.           <li>

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

  735.           </li>

  736.         

  737.           <li>

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

  739.           </li>

  740.         

  741.           <li>

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

  743.           </li>

  744.         

  745.           <li>

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

  747.           </li>

  748.         

  749.           <li>

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

  751.           </li>

  752.         

  753.           <li>

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

  755.           </li>

  756.         

  757.           <li>

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

  759.           </li>

  760.         

  761.           <li>

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

  763.           </li>

  764.         

  765.           <li>

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

  767.           </li>

  768.         

  769.           <li>

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

  771.           </li>

  772.         

  773.           <li>

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

  775.           </li>

  776.         

  777.           <li>

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

  779.           </li>

  780.         

  781.           <li>

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

  783.           </li>

  784.         

  785.           <li>

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

  787.           </li>

  788.         

  789.           <li>

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

  791.           </li>

  792.         

  793.           <li>

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

  795.           </li>

  796.         

  797.           <li>

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

  799.           </li>

  800.         

  801.           <li>

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

  803.           </li>

  804.         

  805.           <li>

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

  807.           </li>

  808.         

  809.           <li>

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

  811.           </li>

  812.         

  813.       </ul>

  814.     

  815.     <p>

  816.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  833.     </p>

  834.     <p>

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

  836.     </p>

  837.     <p>

  838.       Je ne traque pas ta navigation mais mon

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

  840.       conserve des logs d’accès.

  841.     </p>

  842.   </div>

  843. </footer>

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

  845.   ;(_ => {

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

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

  848.       e.preventDefault()

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

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

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

  852.     })

  853.   })()

  854. </script>

  855. 

  856.   <script>

  857.   /* Service workers */

  858.   if (navigator.serviceWorker) {

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

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

  861.       function sendLinks (selector) {

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

  863.           return link.getAttribute('href')

  864.         })

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

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

  867.       }

  868.       navigator.serviceWorker.getRegistration()

  869.         .then(function (registration) {

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

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

  872.               .then(navigator.serviceWorker.ready)

  873.               .then(function () {

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

  875.               })

  876.               .catch(console.error.bind(console))

  877.           } else {

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

  879.             sendLinks(selector)

  880.           }

  881.         })

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

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

  884.         sendLinks(selector)

  885.       })

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

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

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

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

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

  891.           

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

  893.           

  894.         }

  895.       })

  896.     })

  897.   } else {

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

  899.   }

  900. </script>