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.
263 Commits
1 Branch
Tree: 02a2a92b21
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '02a2a92b21'
${ noResults }
larlet-fr-david/david/blog/2016/rencontres-conviviales/index.html

index.html 27KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803 
  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>Rencontres conviviales — 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/rencontres-conviviales/">

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

  31.   <meta name="description" content="Un acte plus fort que celui d’acheter un ticket." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Un acte plus fort que celui d’acheter un ticket." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Rencontres conviviales" />

  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/rencontres-conviviales/" />

  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/rencontres-conviviales.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.   Rencontres conviviales

  468.   <time>Publié le 18 février 2016</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Pourtant, un code de conduite n’a pas beaucoup de valeur intrinsèque : ce sont des mots sur un site en ligne ou sur un bout de papier. Il faut bien plus que ça pour arrêter les mauvais comportements, et il nous faudra bien plus que des CoC open-source pour améliorer la situation générale. C’est un long travail, que les communautés effectuent avec plus ou moins de réussites.</p>

  473. <p>J’aimerais que nous n’oubliions pas pourquoi nous avons besoin d’écrire des CoC, et j’aimerais que nous ne perdions pas de vu que, ce qui compte bien plus, c’est d’appliquer les intentions que nous mettons derrière. Que nos organisateurs soient préparés à gérer tous les cas de figure, et que nos participants soient alertés des problèmes de sexisme, de racisme, et autres problèmes de discrimination ou de harcèlement.</p>

  474. <p><cite><em><a href="http://blog.exirel.me/les-rencontres-conviviales">Les rencontres conviviales</a></em> (<a href="/david/cache/977ab756b80d64eba9ecba449060a338/">cache</a>)</cite></p>

  475. </blockquote>

  476. <p>Florian s’attaque à un problème complexe. Les <a href="http://fr.confcodeofconduct.com/">codes de conduite</a> dans leurs formes actuelles sont insatisfaisants :</p>

  477. <ul>

  478. <li>ils essayent de décrire explicitement l’ensemble des échanges dégradants qui peuvent intervenir entre deux individus ou plus alors que la complexité de ces interactions est beaucoup plus fine ;</li>

  479. <li>ils donnent une illusion de sécurité en se reposant sur des organisateurs qui ne sont pas forcément les meilleurs interlocuteurs pour avoir une réaction à chaud, qui ne sont ni juges, ni policiers ;</li>

  480. <li>ils sont en marge de la conférence et le fait d’encourager à copier-coller un texte rédigé par d’autres ressemble à du <em>conduct-washing</em> sans s’interroger sur les fondements et les réactions à avoir pour la communauté en question ;</li>

  481. <li>chaque interaction pouvant être interprétée arbitrairement, ils génèrent un climat malsain de peur qui tend à regrouper les personnes se ressemblant, ce qui est justement le contraire de l’inclusion souhaitée.</li>

  482. </ul>

  483. <p><em>Je ne dis pas pour autant qu’ils servent à rien, ils permettent au moins d’avoir ce type de débat dans les communautés. Et c’est déjà énorme.</em></p>

  484. <p>Transversalement, on assiste ici à un problème <a href="/david/thoughts/#communities">d’échelle des communautés</a> avec une conférence qui <a href="/david/blog/2016/coorganisation-conferences/">n’est pas l’œuvre de tous</a> ce qui introduit une hiérarchie de plus dans le groupe. Le faire ensemble permettrait de découvrir les singularités de l’autre et de prendre conscience de ses émotions.</p>

  485. <p>Une suggestion pour améliorer la situation serait d’aller plus loin dans ma proposition de <a href="/david/blog/2016/coorganisation-conferences/">créer une association</a> en rédigeant ensemble les statuts qui définissent les raisons d’être de la communauté pour cet évènement. <strong>Devenir membre de l’association devient alors un acte plus fort que celui d’acheter un ticket</strong> car il demanderait de prendre le temps de jardiner les statuts et d’en connaître l’historique et les membres. L’association pourrait avoir un comité directeur élu démocratiquement qui soit en charge de faire respecter les statuts et qui ne soit pas forcément composé des organisateurs.</p>

  486. <p><em>Par contre, je considère qu’il est de la responsabilité des organisateurs de réduire au maximum <a href="http://hintjens.com/blog:108">les situations d’insécurité</a> (<a href="/david/cache/b4fad64766f0e89a1d1d76589fc70b79/">cache</a>) au cours d’un évènement.</em></p>

  487. <p>Voilà l’avis de quelqu’un qui n’a jamais eu de problème pendant une conférence, à la fois en tant que participant et/ou organisateur à de multiples reprises. J’espère qu’il reste tout de même <a href="https://n.survol.fr/n/de-la-difficulte-devoquer-le-feminisme">légitime</a> (<a href="/david/cache/5998b87320adbde9874ba1c381915d89/">cache</a>) et que l’on pourra en discuter de manière dépassionnée.</p>

  488. </article>

  489. 

  490. 

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

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

  493.   </figure>

  494. 

  495. 

  496. 

  497. <nav id="jumpto">

  498.   <p>

  499.     <a rel=prev href="/david/blog/2016/coorganisation-conferences/">← Co-organisation de conférences</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/minimalisme-esthetique/">Minimalisme et esthétique →</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/31/">Merci</a>

  522.           </li>

  523. 

  524.           <li>

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

  526.           </li>

  527. 

  528.           <li>

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

  530.           </li>

  531. 

  532.           <li>

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

  534.           </li>

  535. 

  536.           <li>

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

  538.           </li>

  539. 

  540.           <li>

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

  542.           </li>

  543. 

  544.           <li>

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

  546.           </li>

  547. 

  548.           <li>

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

  550.           </li>

  551. 

  552.           <li>

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

  554.           </li>

  555. 

  556.           <li>

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

  558.           </li>

  559. 

  560.           <li>

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

  562.           </li>

  563. 

  564.           <li>

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

  566.           </li>

  567. 

  568.           <li>

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

  570.           </li>

  571. 

  572.           <li>

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

  574.           </li>

  575. 

  576.           <li>

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

  578.           </li>

  579. 

  580.           <li>

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

  582.           </li>

  583. 

  584.           <li>

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

  586.           </li>

  587. 

  588.           <li>

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

  590.           </li>

  591. 

  592.           <li>

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

  594.           </li>

  595. 

  596.           <li>

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

  598.           </li>

  599. 

  600.           <li>

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

  602.           </li>

  603. 

  604.           <li>

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

  606.           </li>

  607. 

  608.           <li>

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

  610.           </li>

  611. 

  612.           <li>

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

  614.           </li>

  615. 

  616.           <li>

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

  618.           </li>

  619. 

  620.           <li>

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

  622.           </li>

  623. 

  624.           <li>

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

  626.           </li>

  627. 

  628.           <li>

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

  630.           </li>

  631. 

  632.           <li>

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

  634.           </li>

  635. 

  636.           <li>

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

  638.           </li>

  639. 

  640.           <li>

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

  642.           </li>

  643. 

  644.           <li>

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

  646.           </li>

  647. 

  648.           <li>

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

  650.           </li>

  651. 

  652.           <li>

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

  654.           </li>

  655. 

  656.           <li>

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

  658.           </li>

  659. 

  660.           <li>

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

  662.           </li>

  663. 

  664.           <li>

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

  666.           </li>

  667. 

  668.           <li>

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

  670.           </li>

  671. 

  672.           <li>

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

  674.           </li>

  675. 

  676.           <li>

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

  678.           </li>

  679. 

  680.           <li>

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

  682.           </li>

  683. 

  684.           <li>

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

  686.           </li>

  687. 

  688.           <li>

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

  690.           </li>

  691. 

  692.           <li>

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

  694.           </li>

  695. 

  696.           <li>

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

  698.           </li>

  699. 

  700.           <li>

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

  702.           </li>

  703. 

  704.           <li>

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

  706.           </li>

  707. 

  708.           <li>

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

  710.           </li>

  711. 

  712.           <li>

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

  714.           </li>

  715. 

  716.       </ul>

  717. 

  718.     <p>

  719.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  736.     </p>

  737.     <p>

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

  739.     </p>

  740.     <p>

  741.       Je ne traque pas ta navigation mais mon

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

  743.       conserve des logs d’accès.

  744.     </p>

  745.   </div>

  746. </footer>

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

  748.   ;(_ => {

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

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

  751.       e.preventDefault()

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

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

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

  755.     })

  756.   })()

  757. </script>

  758. 

  759.   <script>

  760.   /* Service workers */

  761.   if (navigator.serviceWorker) {

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

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

  764.       function sendLinks (selector) {

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

  766.           return link.getAttribute('href')

  767.         })

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

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

  770.       }

  771.       navigator.serviceWorker.getRegistration()

  772.         .then(function (registration) {

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

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

  775.               .then(navigator.serviceWorker.ready)

  776.               .then(function () {

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

  778.               })

  779.               .catch(console.error.bind(console))

  780.           } else {

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

  782.             sendLinks(selector)

  783.           }

  784.         })

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

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

  787.         sendLinks(selector)

  788.       })

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

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

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

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

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

  794. 

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

  796. 

  797.         }

  798.       })

  799.     })

  800.   } else {

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

  802.   }

  803. </script>