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.
26 Commits
1 Branch
Tree: 9c2d709fb0
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9c2d709fb0'
${ noResults }
larlet-fr-david/david/blog/2014/refonte-2014/index.html

index.html 27KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784 
  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>Refonte 2014 — 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/2014/refonte-2014/">

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

  31.   <meta name="description" content="On commence à vieillir quand on finit d’apprendre." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="On commence à vieillir quand on finit d’apprendre." />

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

  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/2014/refonte-2014/" />

  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/2014/refonte-2014.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.   Refonte 2014

  468.   <time>Publié le 2 février 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>On commence à vieillir quand on finit d’apprendre.</p>

  473. <p><cite><em>Proverbe japonais</em></cite></p>

  474. </blockquote>

  475. <p><strong>J’ai passé le mois de janvier à améliorer de manière incrémentale le confort de lecture (<em>RX</em> pour <em>Reader eXperience</em> ?) et d’interactions de ce site.</strong></p>

  476. <p>Premier gros changement, j’ai transformé <em>geek</em> en <em>penseur</em> dans mon menu car il n’y a plus vraiment de billets techniques sur le blog et j’ai constaté que ce terme pouvait être rébarbatif. J’aurais pu choisir <em>blogueur</em> (mais ma mère ne sait pas ce que ça veut dire) ou <em>écrivain</em> (mais ça faisait pompeux), finalement (petit) penseur me va mieux et j’ai d’ailleurs expliqué ce que j’entendais par ce terme sur <a href="/david/">la page d’accueil</a> qui a été quasi-intégralement réécrite.</p>

  477. <p>Concernant les billets, j’ai changé la police de caractères qui passe à quelque chose d’un peu plus fin et j’ai amélioré l’interlignage. J’ai également ajouté un support de la césure <a href="http://openweb.eu.org/articles/la-gestion-de-la-cesure-en-css">suite à l’article publié sur OpenWeb</a> pour les navigateurs le supportant même si le texte n’est pas justifié je trouve que cela apporte un petit plus. J’ai cédé à la tentation de <em>flat</em>ifier (sic) en enlevant la texture en background et en affinant le titre. Et enfin j’ai ajouté une image en fin d’article (non, pas en <em>header</em> flou par contre) dans le but avoué de (re)mettre à terme mes propres photos, on se motive comme on peut. Du coup j’en ai profité pour refaire aussi <a href="/david/blog/">l’accueil du blog</a>. Les images devraient s’afficher dans une qualité suffisante pour les riches possesseurs de terminaux à haute densité de pixels (Retina™) mais tous les autres payent le prix d’un téléchargement un peu plus long en attendant une meilleure solution.</p>

  478. <p>La tête de page n’a pas encore été retouchée mais il faut que je m’en occupe, notamment car la solution <em>responsive</em> actuelle ne me convient pas avec sa spécificité iPhone™. Le pied de page a pas mal bougé avec l’apparition de boutons de partage pour faciliter les interactions en situation mobile (et car copier/coller une URL n’est pas à la portée de tout le monde, même aujourd’hui). J’ai ajouté des icônes en SVG pour voir ce qu’il était possible de faire avec cette technologie. J’ai aussi ajouté des liens pour continuer l’exploration et offrir des portes de sorties (incluant l’ajout d’un formulaire de <a href="/david/blog/2013/graphes-discussions/">Webmentions</a> pour faciliter l’ajout de liens externes).</p>

  479. <p>Niveau sémantique, j’ai ajouté le support <a href="https://dev.twitter.com/docs/cards">des cartes Twitter</a> pour <a href="https://twitter.com/L_Demontiers/status/429526654420279296">un rendu avec extrait</a> qui viennent compléter les informations de <a href="http://schema.org/">Schema.org</a>. J’ai arrêté d’ajouter du <a href="http://www.w3.org/TR/xhtml-rdfa-primer/">RDFa</a> malheureusement inutilisé.</p>

  480. <p>Rien de révolutionnaire, ça reste relativement minimaliste et permet de se concentrer sur le texte. N’hésitez pas à me faire vos retours à ce sujet !</p>

  481. </article>

  482. 

  483. 

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

  485.     <img src="/static/david/blog/2014/refonte-2014.jpg" alt="" />

  486.   </figure>

  487. 

  488. 

  489. 

  490. <nav id="jumpto">

  491.   <p>

  492.     <a rel=prev href="/david/blog/2014/education-manuelle/">← Éducation manuelle</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/experience-conseils/">Expérience et conseils →</a>

  493.   </p>

  494. </nav>

  495. 

  496. <footer>

  497.   <div>

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

  499.     <p>

  500.       Bonjour/Hi!

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

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

  503.     </p>

  504.     <p>

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

  506.     </p>

  507.     

  508.       <p>

  509.         Les dernières publications hebdomadaires sont :

  510.       </p>

  511.       <ul class="with_columns">

  512.         

  513.           <li>

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

  515.           </li>

  516.         

  517.           <li>

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

  519.           </li>

  520.         

  521.           <li>

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

  523.           </li>

  524.         

  525.           <li>

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

  527.           </li>

  528.         

  529.           <li>

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

  531.           </li>

  532.         

  533.           <li>

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

  535.           </li>

  536.         

  537.           <li>

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

  539.           </li>

  540.         

  541.           <li>

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

  543.           </li>

  544.         

  545.           <li>

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

  547.           </li>

  548.         

  549.           <li>

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

  551.           </li>

  552.         

  553.           <li>

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

  555.           </li>

  556.         

  557.           <li>

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

  559.           </li>

  560.         

  561.           <li>

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

  563.           </li>

  564.         

  565.           <li>

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

  567.           </li>

  568.         

  569.           <li>

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

  571.           </li>

  572.         

  573.           <li>

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

  575.           </li>

  576.         

  577.           <li>

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

  579.           </li>

  580.         

  581.           <li>

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

  583.           </li>

  584.         

  585.           <li>

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

  587.           </li>

  588.         

  589.           <li>

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

  591.           </li>

  592.         

  593.           <li>

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

  595.           </li>

  596.         

  597.           <li>

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

  599.           </li>

  600.         

  601.           <li>

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

  603.           </li>

  604.         

  605.           <li>

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

  607.           </li>

  608.         

  609.           <li>

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

  611.           </li>

  612.         

  613.           <li>

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

  615.           </li>

  616.         

  617.           <li>

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

  619.           </li>

  620.         

  621.           <li>

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

  623.           </li>

  624.         

  625.           <li>

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

  627.           </li>

  628.         

  629.           <li>

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

  631.           </li>

  632.         

  633.           <li>

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

  635.           </li>

  636.         

  637.           <li>

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

  639.           </li>

  640.         

  641.           <li>

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

  643.           </li>

  644.         

  645.           <li>

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

  647.           </li>

  648.         

  649.           <li>

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

  651.           </li>

  652.         

  653.           <li>

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

  655.           </li>

  656.         

  657.           <li>

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

  659.           </li>

  660.         

  661.           <li>

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

  663.           </li>

  664.         

  665.           <li>

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

  667.           </li>

  668.         

  669.           <li>

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

  671.           </li>

  672.         

  673.           <li>

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

  675.           </li>

  676.         

  677.           <li>

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

  679.           </li>

  680.         

  681.           <li>

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

  683.           </li>

  684.         

  685.           <li>

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

  687.           </li>

  688.         

  689.           <li>

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

  691.           </li>

  692.         

  693.           <li>

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

  695.           </li>

  696.         

  697.       </ul>

  698.     

  699.     <p>

  700.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  717.     </p>

  718.     <p>

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

  720.     </p>

  721.     <p>

  722.       Je ne traque pas ta navigation mais mon

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

  724.       conserve des logs d’accès.

  725.     </p>

  726.   </div>

  727. </footer>

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

  729.   ;(_ => {

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

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

  732.       e.preventDefault()

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

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

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

  736.     })

  737.   })()

  738. </script>

  739. 

  740.   <script>

  741.   /* Service workers */

  742.   if (navigator.serviceWorker) {

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

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

  745.       function sendLinks (selector) {

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

  747.           return link.getAttribute('href')

  748.         })

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

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

  751.       }

  752.       navigator.serviceWorker.getRegistration()

  753.         .then(function (registration) {

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

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

  756.               .then(navigator.serviceWorker.ready)

  757.               .then(function () {

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

  759.               })

  760.               .catch(console.error.bind(console))

  761.           } else {

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

  763.             sendLinks(selector)

  764.           }

  765.         })

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

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

  768.         sendLinks(selector)

  769.       })

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

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

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

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

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

  775.           

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

  777.           

  778.         }

  779.       })

  780.     })

  781.   } else {

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

  783.   }

  784. </script>