davidbgk
/
larlet-fr-david
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
79 Commits
1 Branch
Tag: ed213aa943
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de ed213aa943
${ noResults }
larlet-fr-david/david/blog/2019/individuer-ecrire-diversifier/index.html

index.html 31KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832 
  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>Individuer, écrire et se diversifier — 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/2019/individuer-ecrire-diversifier/">

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

  31.   <meta name="description" content="Quelques intentions pour cette année." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Quelques intentions pour cette année." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Individuer, écrire et se diversifier" />

  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/2019/individuer-ecrire-diversifier/" />

  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/2019/individuer-ecrire-diversifier.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.   Individuer, écrire et se diversifier

  468.   <time>Publié le 30 janvier 2019</time>

  469. </h1>

  470. <article class="single">

  471.   <details lang=en>

  472.   <summary>Summary in English</summary>

  473.   <p>My traditionnal January new year intentions.</p>

  474. </details>

  475. 

  476. <p><em>En relisant les dix (!) dernières années de résolutions, je me rends compte qu’il s’agit davantage d’intentions. Elles ne sont pas forcément respectées mais elles me servent parfois de fil rouge quand je doute. Et c’est déjà pas mal.</em></p>

  477. <h2>Individuer</h2>

  478. <blockquote>

  479. <p>Je n’ai pas choisi les gloires patentées. La voie de l’admira­tion a suivi le chemin d’émergence des irremplaçables, de ceux qui tentaient l’aventure de l’irremplaçabilité, qui allaient au­ devant de leur sujet comme on va au­ devant du monde, précisément détachés de leur sujet, car la voie de l’individuation ressemble, sous maints aspects, à celle de la dépersonnalisation. Il ne s’agira pas de devenir une personnalité, une singularité, comme une injonction à la mise en scène de l’ego. L’enjeu est tout autre : il est relationnel. Se lier aux autres, se lier au sens, se lier au Réel, se lier à l’œuvre, l’éternité des liens comme seule vérité.</p>

  480. <p>Refaire lien, donc, avec l’individuation. </p>

  481. <p><cite><em>Les irremplaçables</em>, <a href="http://www.espritcivique.org/index/wp-content/uploads/2016/01/Prologue-_-les-irremplacables.pdf">Prologue</a> (<a href="/static/david/stream/cynthia-fleury-les-irremplacables-prologue.pdf">cache</a>, PDF 500 Ko), Cynthia Fleury</cite></p>

  482. </blockquote>

  483. <p>L’année 2018 aura été l’occasion de prendre conscience d’une responsabilité encore plus accablante. En tant que privilégié, en tant que développeur, en tant que père, en tant qu’humain.</p>

  484. <p>Il ne tient qu’à moi de rendre cela plus léger. En donnant la capacité aux autres de s’exprimer. En exposant certains des chemins explorés pour accepter cet état.</p>

  485. <p>Et surtout en restant enthousiaste vis-à-vis de ce qu’il reste à être.</p>

  486. <h2>Écrire</h2>

  487. <blockquote>

  488. <p>Nous nous trouvons donc à une période charnière. Et pour celles et ceux qui pensent que le livre, comme forme spécifique d’inscription de la pensée, a encore quelque chose à dire et proposer, l’internet est devenu un allié essentiel… et en même temps un nouveau concurrent. Mais cela semble être la position de l’internet dans l’ensemble des champs de la société, n’est-ce pas ?</p>

  489. <p><cite><em><a href="http://bbf.enssib.fr/consulter/bbf-2018-15-0046-006">Éditer à l’ère numérique</a></em> (<a href="/david/cache/0476779bebae9ae41e06c41494a48bd0/">cache</a>)</cite></p>

  490. </blockquote>

  491. <p>J’ai l’impression d’être dans de bonnes dispositions pour écrire davantage, sur des formats plus longs. Mes premières <a href="/david/stream/2019/">itérations hebdomadaires</a> sont encourageantes et je m’en réjouis. Peut-être à un moment aller vers du mensuel pour prendre le temps de creuser davantage ?</p>

  492. <p>Écrire c’est aussi se libérer d’une consommation à sens unique, il serait illusoire de vouloir écrire autant que ce que je lis mais j’ai le sentiment de rééquilibrer ma balance personnelle à ce sujet.</p>

  493. <p>Le lien est ténu entre transférer et proposer sa propre interprétation. Toute la nuance est ici dans ce petit caillou ajouté au passage de cairn.</p>

  494. <h2>Se diversifier</h2>

  495. <blockquote>

  496. <p>Ces derniers mois ont toutefois été plus efficaces, au point que j’arrive à la résumer en une courte phrase : <strong>concevoir les outils dont la société aura besoin demain</strong>. Pour comprendre cette raison d’être, il me paraît important de bien définir ce dont je parle.</p>

  497. <p>Tout d’abord, lorsque je parle de « concevoir [des] outils », je fais le choix conscient de ne pas utiliser le terme de « développer ». Pour moi, <strong>un logiciel n’est pas une fin en soi</strong>. Il y a avant tout une phase d’acquisition des besoins et de réflexion qui peut notamment mener à la conclusion qu’un outil informatique ne serait pas une bonne solution. Cela implique aussi que je dois étendre mes compétences au delà de la technique informatique, en acquérant notamment plus de compétences liées à l’expérience utilisateur.</p>

  498. <p><cite><em><a href="http://next.marienfressinaud.fr/introspection-professionnelle-valeurs-et-raison-detre.html">Introspection professionnelle : valeurs et raison d’être</a></em> (<a href="/david/cache/ae0c05f602dc7c5bd4831aacb1be5eba/">cache</a>)</cite></p>

  499. </blockquote>

  500. <p>Je pense avoir fait le tour de cette <em>full-stack</em> d’ivoire toujours plus élitiste et complexe. J’ai envie d’aller vers plus de <a href="/david/stream/2018/12/12/">polyvalence</a> et de <a href="/david/stream/2018/12/04/">transversalité</a>. C’est là où est la (ma ?) valeur aujourd’hui. S’enfermer dans la technique, c’est accepter des œillères et concentrer mon attention sur la facilité.</p>

  501. <p>Davantage d’empathie et de communication afin de privilégier la pertinence humaine à l’excellence technique. C’est une voie qui semble difficile, particulièrement pour moi, et j’espère trouver des pistes pour surmonter cela.</p>

  502. <p><em>P.S. : j’ai normalement répondu à tous les courriels de 2018 qui m’étaient adressés, si vous êtes en attente d’une réponse de ma part n’hésitez pas à vous re-manifester. Merci à toutes les personnes qui ont pris le temps de me contacter pour diverses raisons, c’est toujours un plaisir d’avoir un retour.</em></p>

  503. <h3>Ces dernières années</h3>

  504. <ul>

  505. <li>2018 : <a href="/david/blog/2018/cheminer-esperer-controler/">Cheminer, espérer et contrôler</a></li>

  506. <li>2017 : <a href="/david/blog/2017/echanger-supprimer-rebondir/">Échanger, supprimer et rebondir</a></li>

  507. <li>2016 : <a href="/david/blog/2016/reduire-experimenter-bouger/">Réduire, expérimenter et bouger</a></li>

  508. <li>2015 : <a href="/david/blog/2015/publier-enseigner-cultiver/">Publier, enseigner et cultiver</a></li>

  509. <li>2014 : <a href="/david/blog/2014/proteger-lacher-prise-rever/">Protéger, lâcher prise et rêver</a></li>

  510. <li>2013 : <a href="/david/blog/2013/cooperer-militer-cacher/">Coopérer, militer et cacher</a></li>

  511. <li>2012 : <a href="/david/biologeek/archives/20120131-resolutions-rediriger-economiser-et-debattre/">Rediriger, économiser et débattre</a></li>

  512. <li>2011 : <a href="/david/biologeek/archives/20110112-resolutions-decouvrir-concretiser-et-transmettre/">Découvrir, concrétiser et transmettre</a></li>

  513. <li>2010 : <a href="/david/biologeek/archives/20100103-resolutions-redistribuer-produire-et-bouger/">Redistribuer, produire et bouger</a></li>

  514. <li>2009 : <a href="/david/biologeek/archives/20090102-bilan-apres-une-annee-de-freelance/">Prendre soin, voyager et partager</a></li>

  515. <li>2008 : <a href="/david/biologeek/archives/20080101-resolutions-etre-aimer-et-faire/">Être, aimer et faire</a></li>

  516. </ul>

  517. </article>

  518. 

  519. 

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

  521.     <img src="/static/david/blog/2019/individuer-ecrire-diversifier.jpg" alt="" />

  522.   </figure>

  523. 

  524. 

  525. 

  526. <nav id="jumpto">

  527.   <p>

  528.     <a rel=prev href="/david/blog/2018/penser-distance/">← Penser à distance</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2019/valeurs-etoiles/">Valeurs et étoiles →</a>

  529.   </p>

  530. </nav>

  531. 

  532. <footer>

  533.   <div>

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

  535.     <p>

  536.       Bonjour/Hi!

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

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

  539.     </p>

  540.     <p>

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

  542.     </p>

  543.     

  544.       <p>

  545.         Les dernières publications hebdomadaires sont :

  546.       </p>

  547.       <ul class="with_columns">

  548.         

  549.           <li>

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

  551.           </li>

  552.         

  553.           <li>

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

  555.           </li>

  556.         

  557.           <li>

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

  559.           </li>

  560.         

  561.           <li>

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

  563.           </li>

  564.         

  565.           <li>

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

  567.           </li>

  568.         

  569.           <li>

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

  571.           </li>

  572.         

  573.           <li>

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

  575.           </li>

  576.         

  577.           <li>

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

  579.           </li>

  580.         

  581.           <li>

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

  583.           </li>

  584.         

  585.           <li>

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

  587.           </li>

  588.         

  589.           <li>

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

  591.           </li>

  592.         

  593.           <li>

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

  595.           </li>

  596.         

  597.           <li>

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

  599.           </li>

  600.         

  601.           <li>

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

  603.           </li>

  604.         

  605.           <li>

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

  607.           </li>

  608.         

  609.           <li>

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

  611.           </li>

  612.         

  613.           <li>

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

  615.           </li>

  616.         

  617.           <li>

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

  619.           </li>

  620.         

  621.           <li>

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

  623.           </li>

  624.         

  625.           <li>

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

  627.           </li>

  628.         

  629.           <li>

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

  631.           </li>

  632.         

  633.           <li>

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

  635.           </li>

  636.         

  637.           <li>

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

  639.           </li>

  640.         

  641.           <li>

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

  643.           </li>

  644.         

  645.           <li>

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

  647.           </li>

  648.         

  649.           <li>

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

  651.           </li>

  652.         

  653.           <li>

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

  655.           </li>

  656.         

  657.           <li>

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

  659.           </li>

  660.         

  661.           <li>

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

  663.           </li>

  664.         

  665.           <li>

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

  667.           </li>

  668.         

  669.           <li>

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

  671.           </li>

  672.         

  673.           <li>

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

  675.           </li>

  676.         

  677.           <li>

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

  679.           </li>

  680.         

  681.           <li>

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

  683.           </li>

  684.         

  685.           <li>

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

  687.           </li>

  688.         

  689.           <li>

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

  691.           </li>

  692.         

  693.           <li>

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

  695.           </li>

  696.         

  697.           <li>

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

  699.           </li>

  700.         

  701.           <li>

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

  703.           </li>

  704.         

  705.           <li>

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

  707.           </li>

  708.         

  709.           <li>

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

  711.           </li>

  712.         

  713.           <li>

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

  715.           </li>

  716.         

  717.           <li>

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

  719.           </li>

  720.         

  721.           <li>

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

  723.           </li>

  724.         

  725.           <li>

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

  727.           </li>

  728.         

  729.           <li>

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

  731.           </li>

  732.         

  733.           <li>

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

  735.           </li>

  736.         

  737.           <li>

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

  739.           </li>

  740.         

  741.           <li>

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

  743.           </li>

  744.         

  745.       </ul>

  746.     

  747.     <p>

  748.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  765.     </p>

  766.     <p>

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

  768.     </p>

  769.     <p>

  770.       Je ne traque pas ta navigation mais mon

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

  772.       conserve des logs d’accès.

  773.     </p>

  774.   </div>

  775. </footer>

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

  777.   ;(_ => {

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

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

  780.       e.preventDefault()

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

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

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

  784.     })

  785.   })()

  786. </script>

  787. 

  788.   <script>

  789.   /* Service workers */

  790.   if (navigator.serviceWorker) {

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

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

  793.       function sendLinks (selector) {

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

  795.           return link.getAttribute('href')

  796.         })

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

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

  799.       }

  800.       navigator.serviceWorker.getRegistration()

  801.         .then(function (registration) {

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

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

  804.               .then(navigator.serviceWorker.ready)

  805.               .then(function () {

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

  807.               })

  808.               .catch(console.error.bind(console))

  809.           } else {

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

  811.             sendLinks(selector)

  812.           }

  813.         })

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

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

  816.         sendLinks(selector)

  817.       })

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

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

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

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

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

  823.           

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

  825.           

  826.         }

  827.       })

  828.     })

  829.   } else {

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

  831.   }

  832. </script>