davidbgk
/
larlet-fr-david
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
896 Révisions
1 Branche
Aborescence: ffaa972798
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'ffaa972798'
${ noResults }
larlet-fr-david/david/stream/2018/04/27/index.html

index.html 20KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=en>

  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>(Pacer)poles review — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

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

  29.   <link rel="canonical" href="https://larlet.fr/david/stream/2018/04/27/">

  30. 

  31. <style>

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

  33. html, body, div, span,

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

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

  36. del, dfn, em, img, ins,

  37. small, strike, strong, tt, var,

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

  39. fieldset, form, label, legend,

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

  41. article, aside, canvas, details, embed,

  42. figure, figcaption, footer, header, hgroup,

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

  44. time, mark, audio, video {

  45.   margin: 0;

  46.   padding: 0;

  47.   border: 0;

  48.   font-size: 100%;

  49.   font: inherit;

  50.   vertical-align: baseline;

  51. }

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

  53. article, aside, details, figcaption, figure,

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

  55. body { line-height: 1; }

  56. blockquote, q { quotes: none; }

  57. blockquote:before, blockquote:after,

  58. q:before, q:after {

  59.   content: '';

  60.   content: none;

  61. }

  62. table {

  63.   border-collapse: collapse;

  64.   border-spacing: 0;

  65. }

  66. 

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

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

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

  70. @font-face {

  71.   font-family: 'EquityTextB';

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

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

  74.   font-weight: 300;

  75.   font-style: normal;

  76.   font-display: swap;

  77. }

  78. @font-face {

  79.   font-family: 'EquityTextB';

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

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

  82.   font-weight: 300;

  83.   font-style: italic;

  84.   font-display: swap;

  85. }

  86. @font-face {

  87.   font-family: 'EquityTextB';

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

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

  90.   font-weight: 700;

  91.   font-style: normal;

  92.   font-display: swap;

  93. }

  94. @font-face {

  95.   font-family: 'TriplicateT4c';

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

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

  98.   font-weight: 300;

  99.   font-style: normal;

  100.   font-display: swap;

  101. }

  102. 

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

  104. body {

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

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

  107.   background-color: #f0f0ea;

  108.   color: #07486c;

  109.   font-kerning: normal;

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

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

  112.   text-rendering: optimizeLegibility;

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

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

  115. }

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

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

  118. }

  119. em {

  120.   font-style: italic;

  121.   color: #323a45;

  122. }

  123. strong {

  124.   font-weight: bold;

  125.   color: black;

  126. }

  127. nav {

  128.   background-color: #323a45;

  129.   color: #f0f0ea;

  130.   display: flex;

  131.   justify-content: space-around;

  132.   padding: 1rem .5rem;

  133. }

  134.   nav:first-child {

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

  136.   }

  137.   nav:last-child {

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

  139.   }

  140.   nav a {

  141.     color: #f0f0ea;

  142.   }

  143.   nav abbr {

  144.     border-bottom: 1px dotted white;

  145.   }

  146. 

  147. h1 {

  148.   border-bottom: .2vh solid #2d7474;

  149.   background-color: #e3e1e1;

  150.   color: #323a45;

  151.   text-align: center;

  152.   padding: 2rem 0 1rem;

  153.   width: 100%;

  154. }

  155. h2 {

  156.   margin: 4rem 0 1rem;

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

  158. }

  159. h3 {

  160.   text-align: center;

  161.   margin: 3rem 0 .75em;

  162. }

  163. hr {

  164.   height: .4rem;

  165.   width: .4rem;

  166.   border-radius: .4rem;

  167.   background: #07486c;

  168.   margin: 2.5rem auto;

  169. }

  170. time {

  171.   display: bloc;

  172.   background-color: #2d7474;

  173.   color: #e3e1e1;

  174.   padding: .29rem 1rem;

  175.   float: right;

  176. }

  177. ul, ol {

  178.   margin: 2rem;

  179. }

  180. ul {

  181.   list-style-type: square;

  182. }

  183. a {

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

  185. }

  186. article {

  187.   max-width: 50rem;

  188.   display: flex;

  189.   flex-direction: column;

  190.   margin: 3rem auto 1rem auto;

  191. }

  192.   article p:last-child {

  193.     margin-bottom: 1rem;

  194.   }

  195. p {

  196.   padding: 0 .5rem;

  197. }

  198.   p + p {

  199.     margin-top: 2rem;

  200.   }

  201. 

  202. blockquote {

  203.   background-color: #e3e1e1;

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

  205.   display: flex;

  206.   flex-direction: column;

  207.   align-items: center;

  208.   padding: 1rem;

  209.   margin: 1.5rem;

  210. }

  211.   blockquote cite {

  212.     font-style: italic;

  213.   }

  214. 

  215. figure {

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

  217.   background-color: #e3e1e1;

  218.   text-align: center;

  219.   padding: 1.5rem 0;

  220.   margin: 1rem 0 0;

  221.   font-size: 1.5rem;

  222.   width: 100%;

  223. }

  224.   figure img {

  225.     width: 250px;

  226.     height: 250px;

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

  228.     padding: 1px;

  229.   }

  230. figcaption {

  231.   padding: 1rem;

  232.   line-height: 1.4;

  233. }

  234. aside {

  235.   display: flex;

  236.   flex-direction: column;

  237.   background-color: #e3e1e1;

  238.   padding: 1rem 0;

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

  240. }

  241.   aside p {

  242.     max-width: 50rem;

  243.     margin: 0 auto;

  244.   }

  245. 

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

  247. p, li, pre, code, kbd, samp, var, tt, time {

  248.   font-size: .95rem;

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

  250. }

  251. h1 {

  252.   font-size: 1.7rem;

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

  254. }

  255. h2 {

  256.   font-size: 1.6rem;

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

  258. }

  259. h3 {

  260.   font-size: 1.35rem;

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

  262. }

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

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

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

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

  267.   p, li, pre, code, kbd, samp, var, tt, time {

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

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

  270.   }

  271.   h1 {

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

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

  274.   }

  275.   h2 {

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

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

  278.   }

  279.   h3 {

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

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

  282.   }

  283. }

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

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

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

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

  288.      but if our baseline value was not expressed

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

  290.   p, li, pre, code, kbd, samp, var, tt, time {

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

  292.     line-height: 1.5em;

  293.   }

  294.   h1 {

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

  296.     line-height: 1.2em;

  297.   }

  298.   h2 {

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

  300.     line-height: 1.3em;

  301.   }

  302.   h3 {

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

  304.     line-height: 1.4em;

  305.   }

  306.   figure img {

  307.     width: 500px;

  308.     height: 500px;

  309.   }

  310.   blockquote {

  311.     margin-left: -1.5rem;

  312.   }

  313. }

  314. 

  315. figure.unsquared {

  316.   margin-bottom: 1.5rem;

  317. }

  318.   figure.unsquared img {

  319.     height: inherit;

  320.   }

  321. 

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

  323. .codehilite{

  324.     background-color: #fdf6e3;

  325.     margin: 1rem auto;

  326.     padding: 1rem;

  327.     overflow-x:auto;

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

  329. }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  396. 

  397. @media print {

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

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

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

  401.     text-decoration: underline;

  402.     text-shadow: none !important;

  403.     background-image: none !important;

  404.     background: white;

  405.     color: black;

  406.   }

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

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

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

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

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

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

  413.   img {

  414.     max-width: 250px !important;

  415.     max-height: 250px !important;

  416.   }

  417.   nav, aside { display: none; }

  418. }

  419. 

  420. /* Dark theme */

  421. [lang=en] body {

  422.   background: #323a45;

  423. }

  424.   [lang=en] article,

  425.   [lang=en] article em,

  426.   [lang=en] article strong {

  427.     color: #f0f0ea;

  428.   }

  429.     [lang=en] article a {

  430.       color: #ffbd2b;

  431.     }

  432.     [lang=en] article a:visited {

  433.       color: #ff6b03;

  434.     }

  435.   [lang=en] blockquote,

  436.   [lang=en] figure {

  437.     background: #111930;

  438.     color: #ccc;

  439.   }

  440. </style>

  441. <nav>

  442.   <p>

  443.     <a href="/david/" title="Profil public">David&nbsp;Larlet</a> partage ses <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et sa <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a>.

  444.   </p>

  445. </nav>

  446. 

  447. <h1>(Pacer)poles review</h1>

  448. <time>2018-04-27</time>

  449. <article>

  450.   <blockquote>

  451. <p>Conventional poles and sticks are not hand specific but offer the same shaped handle for both left and right hands to use – so your joints are awkwardly aligned, adapting to grip the same profile. Trying to compensate for this poor alignment can produce red marks (friction) on the palm and wrist, as your hand imperceptibly twists and rubs against the pole on the ground. This friction is proof of wasted power and effort. When the web sling is used instead then the hand is suspended behind the pole; relying on indirect control of the shaft by having to press down on the strap (tensile and tortional loading) to pull down on the top of the pole for the final thrust is far from efficient - wasting power with every stride. Any one of these actions as well as causing possible discomfort reduces your upper body’s potential to have a real impact on performance. It’s not until you try a different system that you realise what you have been missing - and is why many experienced outdoor folk are converting to Pacerpoles.</p>

  452. <p><cite><em><a href="http://www.pacerpole.com/background/shaping-the-future">Shaping the future</a></em> (<a href="/david/cache/6ce2e739deab896969a4ac4fd786d05c/">cache</a>)</cite></p>

  453. </blockquote>

  454. <p>I bought a pair of <a href="http://www.pacerpole.com/product/carbon-fibre-pacerpole">Pacerpoles 3-section Carbon</a> poles back in February, 2011 to walk along the GR20 in Corsica. They are definitely not the lighter option but they really changed my posture while hiking/snowshoeing/whatever, even when each gram count like alpinism they were good friends. A couple of reasons why I love them:</p>

  455. <ol>

  456. <li>you can push instead of pulling and it uses the same muscles as when I swim freestyle, I end up being way less tired, especially after a few days</li>

  457. <li>there is a grip below the handle allowing to grab it on one side while keeping the other hand on the handle when you are in a steep ascent/descent</li>

  458. <li>you can change the baskets according the ground you will be pushing on, like… snow!</li>

  459. <li>you can adapt the size quickly to be effective both in ascent and descent and crossing a river and so on</li>

  460. <li>you can quickly assemble the security cords given their elasticity to put them across your backpack without even removing it, really useful when there is a climbing section which requires your hand (there used to be an animation on their website but maybe in Flash so I don’t see it anymore? The website hasn’t changed since then! #rustyweb)</li>

  461. <li>after seven years, they did not broke even in pretty harsh conditions, you can order spare pieces though which is great and rare enough to be mentioned</li>

  462. </ol>

  463. <p>Go <a href="http://www.pacerpole.com/">check out their website</a>, there is no affiliation whatsoever, just a good product that lasts :-).</p>

  464. </article>

  465. 

  466. 

  467. <nav>

  468.   <p>

  469.     <a rel=prev href="/david/stream/2018/04/26/">← Issues & labels</a> | <a href="/david/stream/2018/" title="Retour à la liste complète">↑</a> | <a  rel=next href="/david/stream/2018/04/28/">Wood stove →</a>

  470.   </p>

  471. </nav>

  472. 

  473. 

  474. 

  475. <aside>

  476.   <p>

  477.     Other articles in English:

  478.   

  479.     <a href="/david/blog/2018/caching-links/">On caching links</a>,

  480.   

  481.     <a href="/david/blog/2018/bushcraft-retrospective/">Bushcraft retrospective</a>,

  482.   

  483.     <a href="/david/blog/2018/into-the-raft/">Into the Raft</a>,

  484.   

  485.     <a href="/david/blog/2018/into-the-bugs/">Into the Bugs</a>,

  486.   

  487.     <a href="/david/blog/2018/meritocracy-crisis/">Meritocracy crisis</a>,

  488.   

  489.     <a href="/david/blog/2018/seller-teacher-wise/">The Seller, the Teacher and the Wise</a>,

  490.   

  491.     <a href="/david/blog/2018/into-the-good/">Into the Good</a>,

  492.   

  493.     <a href="/david/blog/2018/into-the-mice/">Into the Mice</a>,

  494.   

  495.     <a href="/david/blog/2018/into-the-camp/">Into the Camp</a>,

  496.   

  497.     <a href="/david/blog/2018/into-the-wind/">Into the Wind</a>,

  498.   

  499.     <a href="/david/blog/2018/into-the-snow/">Into the Snow</a>,

  500.   

  501.     <a href="/david/blog/2018/into-the-cold/">Into the Cold</a>,

  502.   

  503.     <a href="/david/blog/2017/async-python-frameworks/">Async Python Frameworks</a>,

  504.   

  505.     <a href="/david/blog/2017/distributed-teams/">Distributed teams</a>,

  506.   

  507.     <a href="/david/blog/2017/into-the-wild/">Into the Wild</a>,

  508.   

  509.     <a href="/david/blog/2017/without-javascript/">Without JavaScript</a>,

  510.   

  511.     <a href="/david/blog/2017/inclusive-python/">Inclusive Python</a>,

  512.   

  513.     <a href="/david/blog/2017/micro-cultures-governance/">Micro-cultures and governance</a>,

  514.   

  515.     <a href="/david/blog/2017/resilient-web-tools/">Resilient Web and Tools</a>,

  516.   

  517.     <a href="/david/blog/2017/bitcoin-energy/">Bitcoin and energy</a>,

  518.   

  519.     <a href="/david/blog/2016/team-building/">Team building</a>,

  520.   

  521.     <a href="/david/blog/2016/inclusive-developer/">Inclusive developer</a>,

  522.   

  523.     <a href="/david/blog/2016/cultural-intimacy/">Cultural Intimacy</a>,

  524.   

  525.     <a href="/david/blog/2016/tools-teams/">Tools and teams</a>,

  526.   

  527.     <a href="/david/blog/2016/senior-developer/">Senior developer</a>,

  528.   

  529.     <a href="/david/blog/2016/slow-data/">Slow Data</a>,

  530.   

  531.     <a href="/david/blog/2016/inclusive-communities/">Inclusive communities</a>,

  532.   

  533.     <a href="/david/blog/2016/delivery-values/">Delivery and value(s)</a>,

  534.   

  535.     <a href="/david/blog/2016/collaboration-debt/">Collaboration debt</a>,

  536.   

  537.     <a href="/david/blog/2016/communities-leadership/">Communities and leadership</a>,

  538.   

  539.     <a href="/david/blog/2016/specifications-apis/">Specifications and APIs</a>.

  540.   

  541.     Oh, and most of <a href="/david/stream/2018/">the 2018 thoughts</a>.

  542.   </p>

  543. </aside>

  544. 

  545. 

  546. <nav>

  547.   <p>

  548.     <abbr title="Lieu de vie et de potentielles rencontres actuel">Montréal</abbr> ·

  549.     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Contact</a> ·

  550.     <a href="http://larlet.com" title="Identité professionnelle">[Travailler ensemble ?]</a> ·

  551.     <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">Hébergeur</abbr> ·

  552.     <a href="/david/log/" title="S’abonner aux publications via RSS">Flux</a>

  553.   </p>

  554. </nav>

  555. 

  556.   <script>

  557.   /* Service workers */

  558.   if (navigator.serviceWorker) {

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

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

  561.       function sendLinks (selector) {

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

  563.           return link.getAttribute('href')

  564.         })

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

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

  567.       }

  568.       navigator.serviceWorker.getRegistration()

  569.         .then(function (registration) {

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

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

  572.               .then(navigator.serviceWorker.ready)

  573.               .then(function () {

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

  575.               })

  576.               .catch(console.error.bind(console))

  577.           } else {

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

  579.             sendLinks(selector)

  580.           }

  581.         })

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

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

  584.         sendLinks(selector)

  585.       })

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

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

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

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

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

  591.           

  592.             link.setAttribute('title', 'Put in cache for offline use')

  593.           

  594.         }

  595.       })

  596.     })

  597.   } else {

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

  599.   }

  600. </script>