davidbgk
/
larlet-fr-david
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Julkaisut 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.
667 Commitit
1 Haara
Puu: 1fec8b3e8a
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '1fec8b3e8a'
${ noResults }
larlet-fr-david/david/blog/2014/triathlon/index.html

index.html 29KB
Raaka Blame Historia

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797 
  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>Triathlon — 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/triathlon/">

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

  31.   <meta name="description" content="Après tout le mal que j’avais lu des triathlètes, il fallait que je me fasse mon propre avis." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Après tout le mal que j’avais lu des triathlètes, il fallait que je me fasse mon propre avis." />

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

  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/triathlon/" />

  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/triathlon.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.   Triathlon

  468.   <time>Publié le 5 octobre 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Ils y sont donc surmontés par le Triathlon, synthèse idéale, trinité dont la perfection tend vers le divin, et dont les trois disciplines consubstantielles épousent parfaitement les trois cotés du triangle sacré formant le sommet de la Grande Pyramide. Car si à l’image des Vrais Sports, le Triathlon forge de par son exigence un mental d’acier pour ses pratiquants les plus aguerris, il est également le seul sport qui réussit à réconcilier et synthétiser les exigences et idiosyncrasies antagonistes des trois Vrais Sports majeurs, nous faisant tendre vers le modèle de l’Athlète Idéal, celui de l’Honnête homme, idéal de modération et d’équilibre dans l’usage de toutes ses facultés, aux proportions harmonieuses et exemptes d’excès. Ultime satisfaction, l’exigence extrême de ce sport garantit sa relative confidentialité, ce qui le sauve, en éloignant irrémédiablement le spectre de l’argent facile, et en garantissant une pratique noble et désintéressée, pour le pur goût de l’effort, et dans le mépris des valeurs matérielles inhérentes à ce siècle.</p>

  473. <p><cite><em><a href="http://silberblog.graphz.fr/pyramide-des-sports/">La pyramide des sports</a></em></cite></p>

  474. </blockquote>

  475. <p><cite>Les copines de boulot vont faire un triathlon, t’es motivé ?</cite> Mmh, pourquoi pas. A priori rien ne m’attire dans cet univers : esprit de compétition, culte de soi et atteinte de ses limites. Mais il y a tout de même des côtés à creuser : expérimentations au niveau matériel, sports complémentaires et gestion de l’effort. <em>Challenge accepté.</em> Me voilà embarqué dans la préparation d’un triathlon en 2 mois sans savoir nager le crawl… mais avec une petite base en trail et quelques tours occasionnels en vélo.</p>

  476. <p><strong>Après tout le mal que j’avais lu des triathlètes, il fallait que je me fasse mon propre avis :-)</strong></p>

  477. <p>Tatoué, pucé, étiquetté, on se retrouve dans un parc à vélos tous plus affûtés les uns que les autres (je parle des vélos bien entendu). L’ambiance est plutôt tendue mais la sono à fond permet de faire le vide en enfilant la combinaison qui doit m’aider à ne pas me noyer. Je laisse partir les hors-bords et je me jette doucement à l’eau avec une brasse sacrément lente, conséquence des 6 petites séances en piscine (finalement cette combi me freine plus qu’autre chose !). Je n’ai pas fait 100m que je sens déjà la puce accrochée à ma cheville qui se fait la malle — oups — demi-tour pour finalement l’accrocher au poignet et me rendre compte qu’il n’y a plus grand monde derrière moi :-D</p>

  478. <p>Arrivé enfin sur la plage, je m’extirpe tant bien que mal de la combinaison avant de me rendre compte que je ne suis pas devant mon vélo — re-oups — changement de rangée et je perds 30 sec à enfiler des chaussettes avec les pieds mouillés. J’enfourche mon vélo pour 10 kilomètres de montée qui n’en finissent pas. Toute la difficulté est de ne pas rester dans le rythme imposé pour remonter les nombreuses places perdues lors de la natation. J’y arrive tant bien que mal mais je suis surpris par la longueur, j’aurais mieux fait de repérer un brin le parcours avant… ou d’emporter un compteur mais calculer c’est tricher™. C’est parti pour la descente où je force autant que faire se peut en oubliant de m’hydrater. Je prends pas mal de plaisir à enchaîner les virages avec vue sur le lac lorsque je ne baisse pas la tête dans le guidon pour ressembler à un coureur. J’essaye de rester dans ma course malgré les motos, les voitures, les drones, les accidents, les fausses indications des spectateurs, etc. J’ai les épaules qui tétanisent un peu à force d’être crispé sur la guidoline mais je sais que je n’en aurais pas besoin pour la suite. </p>

  479. <p>La transition vers la course est celle que j’appréhendais le plus mais elle se passe finalement mieux que prévu et je continue à jouer à <em>pacman</em> avec les coureurs me précédant. Je me rends compte que j’arrive au niveau d’une des amies faisant le triathlon avec moi, génial on va pouvoir finir ensemble ! J’essaye d’être moteur le kilomètre suivant et c’est là où ça se gâte, je sens le muscle de ma cuisse droite qui se contracte un peu trop dans les montée et il reste un escalier… <em>[J’apprendrais un peu trop tard que les guidons de triathlètes qui permettent de poser les coudes servent justement à éviter ce genre de crampes.]</em> Je monte avec peine mais j’arrive quand même à reprendre la course et à finir à bonne allure en duo \o/\o/ 1h45 d’effort pour un objectif à moins de 2h, plutôt content.</p>

  480. <p>Au final, c’est une expérience bien différente des challenges que j’ai pu <a href="/david/blog/2013/mont-blanc/">m’imposer</a> par <a href="/david/thoughts/#fujisan">le passé</a>. L’univers de la compétition n’est définitivement pas fait pour moi mais ça reste intéressant en termes de logistique. À refaire. Peut-être. <em>Ou pas.</em> Je préfère quand même de loin me retrouver seul ou en petit comité pour me faire plaisir. <strong>Et les triathlètes ?</strong> Ils ont l’air de trouver ça marrant sans faire trop de dégâts. À part peut-être dans leur livret A. Pourquoi pas après tout.</p>

  481. <p>Il va vraiment falloir que j’écrive ce billet sur les pyramides.</p>

  482. </article>

  483. 

  484. 

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

  486.     <img src="/static/david/blog/2014/triathlon.jpg" alt="" />

  487.   </figure>

  488. 

  489. 

  490. 

  491. <nav id="jumpto">

  492.   <p>

  493.     <a rel=prev href="/david/blog/2014/dix-ans/">← 10 ans</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/rapatriement-articles/">Rapatriement d’articles →</a>

  494.   </p>

  495. </nav>

  496. 

  497. <footer>

  498.   <div>

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

  500.     <p>

  501.       Bonjour/Hi!

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

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

  504.     </p>

  505.     <p>

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

  507.     </p>

  508. 

  509.       <p>

  510.         Les dernières publications hebdomadaires sont :

  511.       </p>

  512.       <ul class="with_columns">

  513. 

  514.           <li>

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

  516.           </li>

  517. 

  518.           <li>

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

  520.           </li>

  521. 

  522.           <li>

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

  524.           </li>

  525. 

  526.           <li>

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

  528.           </li>

  529. 

  530.           <li>

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

  532.           </li>

  533. 

  534.           <li>

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

  536.           </li>

  537. 

  538.           <li>

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

  540.           </li>

  541. 

  542.           <li>

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

  544.           </li>

  545. 

  546.           <li>

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

  548.           </li>

  549. 

  550.           <li>

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

  552.           </li>

  553. 

  554.           <li>

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

  556.           </li>

  557. 

  558.           <li>

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

  560.           </li>

  561. 

  562.           <li>

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

  564.           </li>

  565. 

  566.           <li>

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

  568.           </li>

  569. 

  570.           <li>

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

  572.           </li>

  573. 

  574.           <li>

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

  576.           </li>

  577. 

  578.           <li>

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

  580.           </li>

  581. 

  582.           <li>

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

  584.           </li>

  585. 

  586.           <li>

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

  588.           </li>

  589. 

  590.           <li>

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

  592.           </li>

  593. 

  594.           <li>

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

  596.           </li>

  597. 

  598.           <li>

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

  600.           </li>

  601. 

  602.           <li>

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

  604.           </li>

  605. 

  606.           <li>

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

  608.           </li>

  609. 

  610.           <li>

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

  612.           </li>

  613. 

  614.           <li>

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

  616.           </li>

  617. 

  618.           <li>

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

  620.           </li>

  621. 

  622.           <li>

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

  624.           </li>

  625. 

  626.           <li>

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

  628.           </li>

  629. 

  630.           <li>

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

  632.           </li>

  633. 

  634.           <li>

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

  636.           </li>

  637. 

  638.           <li>

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

  640.           </li>

  641. 

  642.           <li>

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

  644.           </li>

  645. 

  646.           <li>

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

  648.           </li>

  649. 

  650.           <li>

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

  652.           </li>

  653. 

  654.           <li>

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

  656.           </li>

  657. 

  658.           <li>

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

  660.           </li>

  661. 

  662.           <li>

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

  664.           </li>

  665. 

  666.           <li>

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

  668.           </li>

  669. 

  670.           <li>

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

  672.           </li>

  673. 

  674.           <li>

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

  676.           </li>

  677. 

  678.           <li>

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

  680.           </li>

  681. 

  682.           <li>

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

  684.           </li>

  685. 

  686.           <li>

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

  688.           </li>

  689. 

  690.           <li>

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

  692.           </li>

  693. 

  694.           <li>

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

  696.           </li>

  697. 

  698.           <li>

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

  700.           </li>

  701. 

  702.           <li>

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

  704.           </li>

  705. 

  706.           <li>

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

  708.           </li>

  709. 

  710.       </ul>

  711. 

  712.     <p>

  713.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  730.     </p>

  731.     <p>

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

  733.     </p>

  734.     <p>

  735.       Je ne traque pas ta navigation mais mon

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

  737.       conserve des logs d’accès.

  738.     </p>

  739.   </div>

  740. </footer>

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

  742.   ;(_ => {

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

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

  745.       e.preventDefault()

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

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

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

  749.     })

  750.   })()

  751. </script>

  752. 

  753.   <script>

  754.   /* Service workers */

  755.   if (navigator.serviceWorker) {

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

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

  758.       function sendLinks (selector) {

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

  760.           return link.getAttribute('href')

  761.         })

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

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

  764.       }

  765.       navigator.serviceWorker.getRegistration()

  766.         .then(function (registration) {

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

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

  769.               .then(navigator.serviceWorker.ready)

  770.               .then(function () {

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

  772.               })

  773.               .catch(console.error.bind(console))

  774.           } else {

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

  776.             sendLinks(selector)

  777.           }

  778.         })

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

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

  781.         sendLinks(selector)

  782.       })

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

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

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

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

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

  788. 

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

  790. 

  791.         }

  792.       })

  793.     })

  794.   } else {

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

  796.   }

  797. </script>