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.

index.html 29KB

5 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852
  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>Into the sled — 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. <!-- Canonical URL for SEO purposes -->
  28. <link rel="canonical" href="https://larlet.fr/david/blog/2019/into-the-sled/">
  29. <!-- SEO/Semantic metadata -->
  30. <meta name="description" content="That sled turned me into a slave." />
  31. <meta name="twitter:description" property="og:description" itemprop="description" content="That sled turned me into a slave." />
  32. <meta name="twitter:title" property="og:title" itemprop="name" content="Into the sled" />
  33. <meta name="twitter:card" content="summary" />
  34. <meta name="twitter:creator" content="@davidbgk" />
  35. <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2019/into-the-sled/" />
  36. <meta property="og:type" content="article" />
  37. <meta property="og:site_name" content="David Larlet (@davidbgk)" />
  38. <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2019/into-the-sled.jpg" />
  39. <style>
  40. /* http://meyerweb.com/eric/tools/css/reset/ */
  41. html, body, div, span,
  42. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  43. a, abbr, address, big, cite, code,
  44. del, dfn, em, img, ins,
  45. small, strike, strong, tt, var,
  46. dl, dt, dd, ol, ul, li,
  47. fieldset, form, label, legend,
  48. table, caption, tbody, tfoot, thead, tr, th, td,
  49. article, aside, canvas, details, embed,
  50. figure, figcaption, footer, header, hgroup,
  51. menu, nav, output, ruby, section, summary,
  52. time, mark, audio, video {
  53. margin: 0;
  54. padding: 0;
  55. border: 0;
  56. font-size: 100%;
  57. font: inherit;
  58. vertical-align: baseline;
  59. }
  60. /* HTML5 display-role reset for older browsers */
  61. article, aside, details, figcaption, figure,
  62. footer, header, hgroup, menu, nav, section { display: block; }
  63. body { line-height: 1; }
  64. blockquote, q { quotes: none; }
  65. blockquote:before, blockquote:after,
  66. q:before, q:after {
  67. content: '';
  68. content: none;
  69. }
  70. table {
  71. border-collapse: collapse;
  72. border-spacing: 0;
  73. }
  74. /* http://practicaltypography.com/equity.html */
  75. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  76. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: normal;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  89. font-weight: 300;
  90. font-style: italic;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'EquityTextB';
  95. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  96. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  97. font-weight: 700;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. @font-face {
  102. font-family: 'ConcourseT3';
  103. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  104. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  105. font-weight: 300;
  106. font-style: normal;
  107. font-display: swap;
  108. }
  109. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  110. body {
  111. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  112. font-family: "EquityTextB", Palatino, serif;
  113. background-color: #f0f0ea;
  114. color: #07486c;
  115. font-kerning: normal;
  116. -moz-osx-font-smoothing: grayscale;
  117. -webkit-font-smoothing: subpixel-antialiased;
  118. text-rendering: optimizeLegibility;
  119. font-variant-ligatures: common-ligatures contextual;
  120. font-feature-settings: "kern", "liga", "clig", "calt";
  121. }
  122. pre, code, kbd, samp, var, tt {
  123. font-family: 'TriplicateT4c', monospace;
  124. }
  125. em {
  126. font-style: italic;
  127. color: #323a45;
  128. }
  129. strong {
  130. font-weight: bold;
  131. color: black;
  132. }
  133. nav {
  134. background-color: #323a45;
  135. color: #f0f0ea;
  136. display: flex;
  137. justify-content: space-around;
  138. padding: 1rem .5rem;
  139. }
  140. nav:last-child {
  141. border-bottom: 1vh solid #2d7474;
  142. }
  143. nav a {
  144. color: #f0f0ea;
  145. }
  146. nav abbr {
  147. border-bottom: 1px dotted white;
  148. }
  149. h1 {
  150. border-top: 1vh solid #2d7474;
  151. border-bottom: .2vh dotted #2d7474;
  152. background-color: #e3e1e1;
  153. color: #323a45;
  154. text-align: center;
  155. padding: 5rem 0 4rem 0;
  156. width: 100%;
  157. font-family: 'ConcourseT3';
  158. display: flex;
  159. flex-direction: column;
  160. }
  161. h1.single {
  162. padding-bottom: 10rem;
  163. }
  164. h1 span {
  165. position: absolute;
  166. top: 1vh;
  167. left: 20%;
  168. line-height: 0;
  169. }
  170. h1 span a {
  171. line-height: 1.7;
  172. padding: 1rem 1.2rem .6rem 1.2rem;
  173. border-radius: 0 0 6% 6%;
  174. background: #2d7474;
  175. font-size: 1.3rem;
  176. color: white;
  177. text-decoration: none;
  178. }
  179. h2 {
  180. margin: 4rem 0 1rem;
  181. border-top: .2vh solid #2d7474;
  182. padding-top: 1vh;
  183. }
  184. h3 {
  185. text-align: center;
  186. margin: 3rem 0 .75em;
  187. }
  188. hr {
  189. height: .4rem;
  190. width: .4rem;
  191. border-radius: .4rem;
  192. background: #07486c;
  193. margin: 2.5rem auto;
  194. }
  195. time {
  196. display: bloc;
  197. margin-left: 0 !important;
  198. }
  199. ul, ol {
  200. margin: 2rem;
  201. }
  202. ul {
  203. list-style-type: square;
  204. }
  205. a {
  206. text-decoration-skip-ink: auto;
  207. text-decoration-thickness: 0.05em;
  208. text-underline-offset: 0.09em;
  209. }
  210. article {
  211. max-width: 50rem;
  212. display: flex;
  213. flex-direction: column;
  214. margin: 2rem auto;
  215. }
  216. article.single {
  217. border-top: .2vh dotted #2d7474;
  218. margin: -6rem auto 1rem auto;
  219. background: #f0f0ea;
  220. padding: 2rem;
  221. }
  222. article p:last-child {
  223. margin-bottom: 1rem;
  224. }
  225. p {
  226. padding: 0 .5rem;
  227. margin-left: 3rem;
  228. }
  229. p + p,
  230. figure + p {
  231. margin-top: 2rem;
  232. }
  233. blockquote {
  234. background-color: #e3e1e1;
  235. border-left: .5vw solid #2d7474;
  236. display: flex;
  237. flex-direction: column;
  238. align-items: center;
  239. padding: 1rem;
  240. margin: 1.5rem;
  241. }
  242. blockquote cite {
  243. font-style: italic;
  244. }
  245. blockquote p {
  246. margin-left: 0;
  247. }
  248. figure {
  249. border-top: .2vh solid #2d7474;
  250. background-color: #e3e1e1;
  251. text-align: center;
  252. padding: 1.5rem 0;
  253. margin: 1rem 0 0;
  254. font-size: 1.5rem;
  255. width: 100%;
  256. }
  257. figure img {
  258. max-width: 250px;
  259. max-height: 250px;
  260. border: .5vw solid #323a45;
  261. padding: 1px;
  262. }
  263. figcaption {
  264. padding: 1rem;
  265. line-height: 1.4;
  266. }
  267. aside {
  268. display: flex;
  269. flex-direction: column;
  270. background-color: #e3e1e1;
  271. padding: 1rem 0;
  272. border-bottom: .2vh solid #07486c;
  273. }
  274. aside p {
  275. max-width: 50rem;
  276. margin: 0 auto;
  277. }
  278. /* https://fvsch.com/code/css-locks/ */
  279. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  280. font-size: 1rem;
  281. line-height: calc( 1.5em + 0.2 * 1rem );
  282. }
  283. h1 {
  284. font-size: 1.9rem;
  285. line-height: calc( 1.2em + 0.2 * 1rem );
  286. }
  287. h2 {
  288. font-size: 1.6rem;
  289. line-height: calc( 1.3em + 0.2 * 1rem );
  290. }
  291. h3 {
  292. font-size: 1.35rem;
  293. line-height: calc( 1.4em + 0.2 * 1rem );
  294. }
  295. @media (min-width: 20em) {
  296. /* The (100vw - 20rem) / (50 - 20) part
  297. resolves to 0-1rem, depending on the
  298. viewport width (between 20em and 50em). */
  299. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  300. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  301. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  302. margin-left: 0;
  303. }
  304. h1 {
  305. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. h2 {
  309. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  310. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  311. }
  312. h3 {
  313. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  314. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  315. }
  316. }
  317. @media (min-width: 50em) {
  318. /* The right part of the addition *must* be a
  319. rem value. In this example we *could* change
  320. the whole declaration to font-size:2.5rem,
  321. but if our baseline value was not expressed
  322. in rem we would have to use calc. */
  323. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  324. font-size: calc( 1rem + .6 * 1rem );
  325. line-height: 1.5em;
  326. }
  327. p, li, pre, details {
  328. margin-left: 3rem;
  329. }
  330. h1 {
  331. font-size: calc( 1.9rem + 1.5 * 1rem );
  332. line-height: 1.2em;
  333. }
  334. h2 {
  335. font-size: calc( 1.5rem + 1.5 * 1rem );
  336. line-height: 1.3em;
  337. }
  338. h3 {
  339. font-size: calc( 1.35rem + 1.5 * 1rem );
  340. line-height: 1.4em;
  341. }
  342. figure img {
  343. max-width: 500px;
  344. max-height: 500px;
  345. }
  346. }
  347. figure.unsquared {
  348. margin-bottom: 1.5rem;
  349. }
  350. figure.unsquared img {
  351. height: inherit;
  352. }
  353. @media print {
  354. body { font-size: 100%; }
  355. a:after { content: " (" attr(href) ")"; }
  356. a, a:link, a:visited, a:after {
  357. text-decoration: underline;
  358. text-shadow: none !important;
  359. background-image: none !important;
  360. background: white;
  361. color: black;
  362. }
  363. abbr[title] { border-bottom: 0; }
  364. abbr[title]:after { content: " (" attr(title) ")"; }
  365. img { page-break-inside: avoid; }
  366. @page { margin: 2cm .5cm; }
  367. h1, h2, h3 { page-break-after: avoid; }
  368. p3 { orphans: 3; widows: 3; }
  369. img {
  370. max-width: 250px !important;
  371. max-height: 250px !important;
  372. }
  373. nav, aside { display: none; }
  374. }
  375. ul.with_columns {
  376. column-count: 1;
  377. }
  378. @media (min-width: 20em) {
  379. ul.with_columns {
  380. column-count: 2;
  381. }
  382. }
  383. @media (min-width: 50em) {
  384. ul.with_columns {
  385. column-count: 3;
  386. }
  387. }
  388. ul.with_two_columns {
  389. column-count: 1;
  390. }
  391. @media (min-width: 20em) {
  392. ul.with_two_columns {
  393. column-count: 1;
  394. }
  395. }
  396. @media (min-width: 50em) {
  397. ul.with_two_columns {
  398. column-count: 2;
  399. }
  400. }
  401. .gallery {
  402. display: flex;
  403. flex-wrap: wrap;
  404. justify-content: space-around;
  405. }
  406. .gallery figure img {
  407. margin-left: 1rem;
  408. margin-right: 1rem;
  409. }
  410. .gallery figure figcaption {
  411. font-family: 'ConcourseT3'
  412. }
  413. footer {
  414. font-family: 'ConcourseT3';
  415. display: flex;
  416. flex-direction: column;
  417. border-top: 3px solid white;
  418. padding: 4rem 0;
  419. background-color: #07486c;
  420. color: white;
  421. }
  422. footer > * {
  423. max-width: 50rem;
  424. margin: 0 auto;
  425. }
  426. footer a {
  427. color: #f1c40f;
  428. }
  429. footer .avatar {
  430. width: 200px;
  431. height: 200px;
  432. border-radius: 50%;
  433. float: left;
  434. -webkit-shape-outside: circle();
  435. shape-outside: circle();
  436. margin-right: 2rem;
  437. padding: 2px 5px 5px 2px;
  438. background: white;
  439. border-left: 1px solid #f1c40f;
  440. border-top: 1px solid #f1c40f;
  441. border-right: 5px solid #f1c40f;
  442. border-bottom: 5px solid #f1c40f;
  443. }
  444. </style>
  445. <h1 class="single">
  446. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  447. Into the sled
  448. <time>Publié le 2 décembre 2019</time>
  449. </h1>
  450. <article class="single">
  451. <details lang=fr>
  452. <summary>Résumé en français</summary>
  453. <p>Le traîneau c’est sûrement pratique mais il ne faut pas oublier les caribous volants qui vont avec. <a href="/david/stream/2019/12/03/">Voir aussi.</a></p>
  454. </details>
  455. <p>Once in a <a href="/david/stream/2018/02/14/">while</a>, I’m trying something new. This time again, it was somehow a <del>failure</del> new learning! I wanted to try out the sled we have for having family fun in the snow for a very long time. Two ropes, two PVC tubes and a belt later, there we are, super cheap (see post’s picture). So I went for two nights <a href="/david/bushcraft/">in the forest</a> with all my equipment <em>behind</em> me, it was super cold and I still enjoyed the moment… despite the sled in itself.</p>
  456. <h2>Earn or learn</h2>
  457. <ul>
  458. <li><em>earn</em> : I went to a place I saw during a previous spotting trip wondering if that would be a nice winter camp, and it was.</li>
  459. <li><em>learn</em> : In my memory, it was relatively flat to go there, a few hills in the forest but nothing crazy. Well, when you are hauling a sled, you better stay on a frozen lake. For the record, here is what my track looked like:</li>
  460. </ul>
  461. <figure class="unsquared">
  462. <a href="/static/david/media/2019/20191202-path-sled.jpg">
  463. <img src="/static/david/media/2019/thumbnails/20191202-path-sled.jpg" alt="Path with dead trees and uphill" />
  464. </a>
  465. <figcaption>
  466. And I am not even mentioning when the path in itself is not flat (in cant?).
  467. </figcaption>
  468. </figure>
  469. <ul>
  470. <li><em>earn</em> : I kept all my fingers. It was below -20°C that night, my sleeping bag was full of ice around my head (or what was left of it still outside) due to my breathing when I woke up. The interior of my tipi was super icy too. Still I felt warm with the strategy to put a boiling water bottle when I went sleeping in the sleeping bag plus a thermos (still warm in the morning!).</li>
  471. <li><em>learn</em> : once you break the ice around the zipper of your sleeping bag to be able to open it, put your gloves <em>before</em> rushing out of it (because you did not pee for the last twelve hours and you are close to your 40 :-P), at that temperature your fingers full of moisture will freeze in a breath. And you still have to make a fire…</li>
  472. </ul>
  473. <figure class="unsquared">
  474. <a href="/static/david/media/2019/20191202-fire-morning.jpg">
  475. <img src="/static/david/media/2019/thumbnails/20191202-fire-morning.jpg" alt="A fire in front of a tipi with the sun rising." />
  476. </a>
  477. <figcaption>
  478. A fire, a tipi, now time for a hot tea!
  479. </figcaption>
  480. </figure>
  481. <ul>
  482. <li><em>earn</em> : I tried to make a fire which would last the whole night and keep some embers for the morning, you can achieve that with a parallel log fire (same principle as a Swedish torch) and it kind of worked. I was not able to get the fire going without a lighter but it surely helped given the temperature to still have dry and hot wood around.</li>
  483. <li><em>learn</em> : I spent the whole day trying to figure out a way to get back <em>in time</em> to the rented car with the sled and the two bags on the next morning. I trimmed down my poles and put one of the two backpacks directly on my back. It was still better but I had to double-carry for more than half of my way back. Not ideal. Hopefully I woke up at 5 that morning.</li>
  484. </ul>
  485. <figure class="unsquared">
  486. <a href="/static/david/media/2019/20191202-sunrise.jpg">
  487. <img src="/static/david/media/2019/thumbnails/20191202-sunrise.jpg" alt="A cold sunrise in the forest full of snow." />
  488. </a>
  489. <figcaption>
  490. One of these magical moments.
  491. </figcaption>
  492. </figure>
  493. <ul>
  494. <li><em>earn</em> : I was able to eat correctly, even when all was frozen (olive oil, camembert, you name it). When it is cold, eating fat makes you hot. Especially prior to go to bed. Keeping a fire running is really a matter of enjoying the trip or not (to be soft).</li>
  495. <li><em>learn</em> : every drop of water will freeze, your saw is hot don’t put it in the snow, a few drips of water are running out of your thermos don’t put it on clothes, the snow is melting besides you when you sleep don’t forget to turn your sleeping bag when you wake up, and so on.</li>
  496. </ul>
  497. <figure class="unsquared">
  498. <a href="/static/david/media/2019/20191202-iced-stream.jpg">
  499. <img src="/static/david/media/2019/thumbnails/20191202-iced-stream.jpg" alt="A stream in the forest, totally iced." />
  500. </a>
  501. <figcaption>
  502. Can I have tap water please?
  503. </figcaption>
  504. </figure>
  505. <ul>
  506. <li><em>earn</em> : by chance, I was very close to a stream still not frozen the first day, I just had to break the ice on the morning. It is really a game changer to be able to boil down water instead of (so much) snow!</li>
  507. <li><em>learn</em> : I brought too much food and I did not use my <a href="/david/stream/2018/04/28/">wood stove</a>, a lot of extra weight. Same with the wool blanket which was super heavy and useless. Without these extra items, maybe the sled would have been easier to deal with…</li>
  508. <li><em>earn</em> : I was able to fall asleep while wolves were still howling in the background, it was almost pleasant given the estimated distance. Next morning, there were tracks everywhere not far (enough) from the camp!</li>
  509. </ul>
  510. <p>It was probably my last time in the woods this year. This trip gave me a lot of confidence in my abilities and my knowledge, that was fun to some extent besides the struggle with the ride. Best of all, I did not break the sled and avoid a family drama, yay!</p>
  511. <p><em>Winter camping is (c|g)old.</em></p>
  512. </article>
  513. <figure class="image" property="schema:image">
  514. <img src="/static/david/blog/2019/into-the-sled.jpg" alt="" />
  515. </figure>
  516. <nav id="jumpto">
  517. <p>
  518. <a rel=prev href="/david/blog/2019/faire-famille/">← Faire famille</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a>
  519. </p>
  520. </nav>
  521. <footer>
  522. <div>
  523. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  524. <p>
  525. Bonjour/Hi!
  526. 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>
  527. 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>).
  528. </p>
  529. <p>
  530. 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>.
  531. </p>
  532. <p>
  533. Les dernières publications hebdomadaires sont :
  534. </p>
  535. <ul class="with_columns">
  536. <li>
  537. <a href="/david/stream/2019/12/31/">Merci</a>
  538. </li>
  539. <li>
  540. <a href="/david/stream/2019/12/27/">Intemporels</a>
  541. </li>
  542. <li>
  543. <a href="/david/stream/2019/12/24/">Outils</a>
  544. </li>
  545. <li>
  546. <a href="/david/stream/2019/12/17/">Origines</a>
  547. </li>
  548. <li>
  549. <a href="/david/stream/2019/12/10/">Publier</a>
  550. </li>
  551. <li>
  552. <a href="/david/stream/2019/12/03/">En forêt</a>
  553. </li>
  554. <li>
  555. <a href="/david/stream/2019/11/26/">Ecocentric</a>
  556. </li>
  557. <li>
  558. <a href="/david/stream/2019/11/19/">Se livrer</a>
  559. </li>
  560. <li>
  561. <a href="/david/stream/2019/11/12/">Dépendances</a>
  562. </li>
  563. <li>
  564. <a href="/david/stream/2019/11/05/">Positif</a>
  565. </li>
  566. <li>
  567. <a href="/david/stream/2019/10/29/">Dettes</a>
  568. </li>
  569. <li>
  570. <a href="/david/stream/2019/10/22/">Privilèges</a>
  571. </li>
  572. <li>
  573. <a href="/david/stream/2019/10/15/">Discrétion</a>
  574. </li>
  575. <li>
  576. <a href="/david/stream/2019/10/08/">Désespérance</a>
  577. </li>
  578. <li>
  579. <a href="/david/stream/2019/10/01/">Présent</a>
  580. </li>
  581. <li>
  582. <a href="/david/stream/2019/09/24/">Manifester</a>
  583. </li>
  584. <li>
  585. <a href="/david/stream/2019/09/17/">Arpenter</a>
  586. </li>
  587. <li>
  588. <a href="/david/stream/2019/09/10/">Nostalgie</a>
  589. </li>
  590. <li>
  591. <a href="/david/stream/2019/09/03/">Déconstruire</a>
  592. </li>
  593. <li>
  594. <a href="/david/stream/2019/08/27/">Documenter</a>
  595. </li>
  596. <li>
  597. <a href="/david/stream/2019/08/20/">Frustration</a>
  598. </li>
  599. <li>
  600. <a href="/david/stream/2019/08/13/">Holisme</a>
  601. </li>
  602. <li>
  603. <a href="/david/stream/2019/08/06/">1%</a>
  604. </li>
  605. <li>
  606. <a href="/david/stream/2019/07/30/">Exemplarité</a>
  607. </li>
  608. <li>
  609. <a href="/david/stream/2019/07/23/">Timelines</a>
  610. </li>
  611. <li>
  612. <a href="/david/stream/2019/07/16/">Écoute</a>
  613. </li>
  614. <li>
  615. <a href="/david/stream/2019/07/02/">Anxiété</a>
  616. </li>
  617. <li>
  618. <a href="/david/stream/2019/06/21/">À lier</a>
  619. </li>
  620. <li>
  621. <a href="/david/stream/2019/06/14/">Pauvreté</a>
  622. </li>
  623. <li>
  624. <a href="/david/stream/2019/06/07/">Amateur</a>
  625. </li>
  626. <li>
  627. <a href="/david/stream/2019/05/31/">Pollution</a>
  628. </li>
  629. <li>
  630. <a href="/david/stream/2019/05/24/">Apaisement</a>
  631. </li>
  632. <li>
  633. <a href="/david/stream/2019/05/10/">Folie</a>
  634. </li>
  635. <li>
  636. <a href="/david/stream/2019/05/03/">Sympathie</a>
  637. </li>
  638. <li>
  639. <a href="/david/stream/2019/04/12/">Péremption</a>
  640. </li>
  641. <li>
  642. <a href="/david/stream/2019/04/05/">Définitions</a>
  643. </li>
  644. <li>
  645. <a href="/david/stream/2019/03/29/">Acceptation</a>
  646. </li>
  647. <li>
  648. <a href="/david/stream/2019/03/22/">Dissonance</a>
  649. </li>
  650. <li>
  651. <a href="/david/stream/2019/03/15/">Reconnaissance</a>
  652. </li>
  653. <li>
  654. <a href="/david/stream/2019/03/08/">Lecture</a>
  655. </li>
  656. <li>
  657. <a href="/david/stream/2019/03/01/">Journaux</a>
  658. </li>
  659. <li>
  660. <a href="/david/stream/2019/02/22/">Écriture</a>
  661. </li>
  662. <li>
  663. <a href="/david/stream/2019/02/15/">Kyriarchie</a>
  664. </li>
  665. <li>
  666. <a href="/david/stream/2019/02/08/">Mots-serrures</a>
  667. </li>
  668. <li>
  669. <a href="/david/stream/2019/02/01/">Sans voie</a>
  670. </li>
  671. <li>
  672. <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
  673. </li>
  674. <li>
  675. <a href="/david/stream/2019/01/18/">Agilité</a>
  676. </li>
  677. <li>
  678. <a href="/david/stream/2019/01/11/">Métaphores</a>
  679. </li>
  680. <li>
  681. <a href="/david/stream/2019/01/04/">Balbutiements</a>
  682. </li>
  683. </ul>
  684. <p>
  685. Voici quelques articles choisis :
  686. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  687. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  688. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  689. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  690. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  691. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  692. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  693. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  694. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  695. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  696. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  697. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  698. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  699. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  700. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  701. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  702. </p>
  703. <p>
  704. 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>.
  705. </p>
  706. <p>
  707. Je ne traque pas ta navigation mais mon
  708. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  709. conserve des logs d’accès.
  710. </p>
  711. </div>
  712. </footer>
  713. <script type="text/javascript">
  714. ;(_ => {
  715. const jumper = document.getElementById('jumper')
  716. jumper.addEventListener('click', e => {
  717. e.preventDefault()
  718. const anchor = e.target.getAttribute('href')
  719. const targetEl = document.getElementById(anchor.substring(1))
  720. targetEl.scrollIntoView({behavior: 'smooth'})
  721. })
  722. })()
  723. </script>
  724. <script>
  725. /* Service workers */
  726. if (navigator.serviceWorker) {
  727. window.addEventListener('load', function () {
  728. var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
  729. function sendLinks (selector) {
  730. var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
  731. return link.getAttribute('href')
  732. })
  733. links.push(location.pathname) // Put the current page in cache too.
  734. navigator.serviceWorker.controller.postMessage({ links: links })
  735. }
  736. navigator.serviceWorker.getRegistration()
  737. .then(function (registration) {
  738. if (!registration || !navigator.serviceWorker.controller) {
  739. return navigator.serviceWorker.register('/serviceworker.js')
  740. .then(navigator.serviceWorker.ready)
  741. .then(function () {
  742. console.log('[ServiceWorker] Ready to go!')
  743. })
  744. .catch(console.error.bind(console))
  745. } else {
  746. console.log('[ServiceWorker] Send links via registration')
  747. sendLinks(selector)
  748. }
  749. })
  750. navigator.serviceWorker.addEventListener('controllerchange', function () {
  751. console.log('[ServiceWorker] Send links via controller change')
  752. sendLinks(selector)
  753. })
  754. navigator.serviceWorker.addEventListener('message', function (event) {
  755. var link = document.querySelector('a[href="' + event.data.link + '"]')
  756. if (event.data.status && link) {
  757. link.style.backgroundColor = '#2d7474'
  758. link.style.color = '#f0f0ea'
  759. link.setAttribute('title', 'En cache pour consultation sans connexion')
  760. }
  761. })
  762. })
  763. } else {
  764. console.warn('[ServiceWorker] No cache for old browsers.')
  765. }
  766. </script>