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.
30 Commits
1 Branch
Tree: 78ab58b3bb
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '78ab58b3bb'
${ noResults }
larlet-fr-david/david/blog/2016/apprentissage-autodepreciation/index.html

index.html 28KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791 
  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>Apprentissage et auto-dépréciation — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2016/apprentissage-autodepreciation/">

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

  31.   <meta name="description" content="Toute ma démarche a été de les pousser du comment scolaire au pourquoi professionnel." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Toute ma démarche a été de les pousser du comment scolaire au pourquoi professionnel." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Apprentissage et auto-dépréciation" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2016/apprentissage-autodepreciation/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39.   

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2016/apprentissage-autodepreciation.jpg" />

  41.   

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

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

  51. fieldset, form, label, legend,

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

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

  65. article, aside, details, figcaption, figure,

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   Apprentissage et auto-dépréciation

  468.   <time>Publié le 4 janvier 2016</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>This unfortunately became a trend. I don’t really go to local tech meetups anymore because I don’t feel like I fit in both due to age demographic and the age related comments I get. Usually whenever my age was bought up it was met with shock and awe.</p>

  473. <p>I hated it. I don’t need to be told facts about myself. It didn’t make me feel special or unique, it just made me feel very different and abnormal. Once I had someone harass me for an entire meetup about my age and I ended up going home feeling like shit and crying myself to sleep.</p>

  474. <p>My age was particularly of concern whenever I’d go to the US for work or conferences. The tech industry has a strong drinking culture and not being able to go into bars is very socially isolating. Whenever I go to the US I feel like a child and even get asked at customs why I’m travelling alone.</p>

  475. <p><cite><em><a href="https://medium.com/@sebmck/2015-in-review-51ac7035e272">~2015 in review - Medium</a></em> (<a href="/david/cache/8366ca8b48a7d28c6ed98a090d567052/">cache</a>)</cite></p>

  476. </blockquote>

  477. <p>Le dernier <a href="/david/pro/enseignement/">cours</a> a été l’occasion de faire une restitution d’un travail sur le long terme. Le résultat fut assez terrible principalement car les étudiants ne savaient pas mettre en valeur leurs connaissances. J’essaye toujours de mettre en contexte les évaluations, que ce soit via une <a href="/david/blog/2015/cours-iut-candidature-spontanee/">candidature spontanée</a> ou une <a href="/david/blog/2015/critique-site/">critique de site</a>. Cette fois-ci, il s’agissait de présenter leur travail à une personne rencontrée pendant un événement qui voulait voir de quoi était capable l’étudiant rapidement dans le but de l’embaucher. <strong>Toute ma démarche a été de les pousser du comment scolaire au pourquoi professionnel.</strong> Décrire ce qu’ils ont fait est intuitif pour eux mais prendre du recul et décrire ce qu’ils ont vraiment acquis et comment est-ce qu’il pourraient le mettre en application — voire pourquoi est-ce que c’est une bonne pratique — est beaucoup plus compliqué. Or c’est ce qui me semble pertinent dans un tel contexte.</p>

  478. <p>J’ai du mal à identifier pourquoi est-ce qu’ils arrivent avec un tel manque de confiance en eux à cette étape de leur vie mais c’est vraiment dommageable pour qu’ils réussissent à trouver un emploi s’ils n’arrivent pas à valoriser un minimum ce qu’ils ont appris. Peut-être poussent-ils l’auto-critique et l’humilité trop loin ?</p>

  479. <blockquote>

  480. <p>The reason it’s so difficult to test and improve is that it requires you to acknowledge that your original plan wasn’t perfect. And to have the humility and care to go ahead and fix it.</p>

  481. <p><cite><em><a href="http://sethgodin.typepad.com/seths_blog/2016/01/software-is-testing.html">Software is testing</a></em> (<a href="/david/cache/c0ecb4bba8efbe26c57fa8d0caef4743/">cache</a>)</cite></p>

  482. </blockquote>

  483. <p>Peut-être sont-ils <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4">fatigués d’avance</a> (<a href="/david/cache/f41d0be1b419e16d37b415958dab7339/">cache</a>) par l’ampleur de la tâche qui les attend ? Ou peut-être que leur formation est trop généraliste ? Je vais essayer de leur faire (re)prendre confiance en eux en <a href="/david/blog/2015/javascript-abstraction/">introduisant JavaScript</a> avec le moins d’abstraction possible.</p>

  484. <p>Karl <a href="http://www.la-grange.net/2016/01/06/sens#idfe0f6c72b2">a réagi depuis</a> :</p>

  485. <blockquote>

  486. <p>La confiance est un autre élément culturel socialement teinté. Cela rejoint la prose de l’article précédent découvert par cet article de David. Il est parfois pour certains individus appropriés de ne pas avoir confiance en soi. Nous pouvons appeler cela de l’humilité, de l’empathie pour les autres ou de la volonté de respect. L’équilibre est difficile. Cela peut également être totalement inconscient et être dû à de nombreuses expériences personnelles. La société des médias, de l’école ainsi que le monde professionnel poussent à la compétition, à la place du premier, aux meilleurs résultats, aux performances. Il est alors peut-être nécessaire de déplacer le terrain de la mesure par rapport aux autres sur celui de la réalisation personnelle.</p>

  487. </blockquote>

  488. </article>

  489. 

  490. 

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

  492.     <img src="/static/david/blog/2016/apprentissage-autodepreciation.jpg" alt="" />

  493.   </figure>

  494. 

  495. 

  496. 

  497. <nav id="jumpto">

  498.   <p>

  499.     <a rel=prev href="/david/blog/2016/experience-ecriture/">← Expérience d’écriture</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/javascript-zero/">JavaScript de zéro →</a>

  500.   </p>

  501. </nav>

  502. 

  503. <footer>

  504.   <div>

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

  506.     <p>

  507.       Bonjour/Hi!

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

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

  510.     </p>

  511.     <p>

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

  513.     </p>

  514.     

  515.       <p>

  516.         Les dernières publications hebdomadaires sont :

  517.       </p>

  518.       <ul class="with_columns">

  519.         

  520.           <li>

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

  522.           </li>

  523.         

  524.           <li>

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

  526.           </li>

  527.         

  528.           <li>

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

  530.           </li>

  531.         

  532.           <li>

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

  534.           </li>

  535.         

  536.           <li>

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

  538.           </li>

  539.         

  540.           <li>

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

  542.           </li>

  543.         

  544.           <li>

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

  546.           </li>

  547.         

  548.           <li>

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

  550.           </li>

  551.         

  552.           <li>

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

  554.           </li>

  555.         

  556.           <li>

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

  558.           </li>

  559.         

  560.           <li>

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

  562.           </li>

  563.         

  564.           <li>

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

  566.           </li>

  567.         

  568.           <li>

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

  570.           </li>

  571.         

  572.           <li>

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

  574.           </li>

  575.         

  576.           <li>

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

  578.           </li>

  579.         

  580.           <li>

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

  582.           </li>

  583.         

  584.           <li>

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

  586.           </li>

  587.         

  588.           <li>

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

  590.           </li>

  591.         

  592.           <li>

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

  594.           </li>

  595.         

  596.           <li>

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

  598.           </li>

  599.         

  600.           <li>

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

  602.           </li>

  603.         

  604.           <li>

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

  606.           </li>

  607.         

  608.           <li>

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

  610.           </li>

  611.         

  612.           <li>

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

  614.           </li>

  615.         

  616.           <li>

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

  618.           </li>

  619.         

  620.           <li>

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

  622.           </li>

  623.         

  624.           <li>

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

  626.           </li>

  627.         

  628.           <li>

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

  630.           </li>

  631.         

  632.           <li>

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

  634.           </li>

  635.         

  636.           <li>

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

  638.           </li>

  639.         

  640.           <li>

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

  642.           </li>

  643.         

  644.           <li>

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

  646.           </li>

  647.         

  648.           <li>

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

  650.           </li>

  651.         

  652.           <li>

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

  654.           </li>

  655.         

  656.           <li>

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

  658.           </li>

  659.         

  660.           <li>

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

  662.           </li>

  663.         

  664.           <li>

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

  666.           </li>

  667.         

  668.           <li>

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

  670.           </li>

  671.         

  672.           <li>

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

  674.           </li>

  675.         

  676.           <li>

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

  678.           </li>

  679.         

  680.           <li>

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

  682.           </li>

  683.         

  684.           <li>

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

  686.           </li>

  687.         

  688.           <li>

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

  690.           </li>

  691.         

  692.           <li>

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

  694.           </li>

  695.         

  696.           <li>

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

  698.           </li>

  699.         

  700.           <li>

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

  702.           </li>

  703.         

  704.       </ul>

  705.     

  706.     <p>

  707.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  724.     </p>

  725.     <p>

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

  727.     </p>

  728.     <p>

  729.       Je ne traque pas ta navigation mais mon

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

  731.       conserve des logs d’accès.

  732.     </p>

  733.   </div>

  734. </footer>

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

  736.   ;(_ => {

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

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

  739.       e.preventDefault()

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

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

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

  743.     })

  744.   })()

  745. </script>

  746. 

  747.   <script>

  748.   /* Service workers */

  749.   if (navigator.serviceWorker) {

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

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

  752.       function sendLinks (selector) {

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

  754.           return link.getAttribute('href')

  755.         })

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

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

  758.       }

  759.       navigator.serviceWorker.getRegistration()

  760.         .then(function (registration) {

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

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

  763.               .then(navigator.serviceWorker.ready)

  764.               .then(function () {

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

  766.               })

  767.               .catch(console.error.bind(console))

  768.           } else {

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

  770.             sendLinks(selector)

  771.           }

  772.         })

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

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

  775.         sendLinks(selector)

  776.       })

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

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

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

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

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

  782.           

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

  784.           

  785.         }

  786.       })

  787.     })

  788.   } else {

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

  790.   }

  791. </script>