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 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>
  13. Montre
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-07.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="J’ai une Suunto Ambit Black [archive] achetée il y a une douzaine d’années. (Merci à Suunto de garder une page avec les caractéristiques d’un produit qui n’est plus construit / vendu ! C’est notamment utile pour comparer les spécifications de taille et poids.) Je me demandais si les montres actuelles allaient pouvoir résister à une température inférieure à -20°C et il semblerait que ce ne soit pas le cas, tous les modèles que j’ai consulté spécifient clairement que c’est la limite basse.">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Montre</h1>
  136. <p>Le <time datetime="2024-03-02">2 mars 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/03/01/"
  143. title="Publication précédente : Simple">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/03/03/"
  150. title="Publication suivante : Permanence">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>J’ai une <a data-link-domain="suunto.com" href="https://www.suunto.com/fr-ca/Produits/Montres-de-sport/Suunto-Ambit/Suunto-Ambit-Black/" hreflang="fr"
  154. title="Consultation de l’article">Suunto Ambit Black</a>
  155. <a href="/david/cache/2024/4050651a19400713c8563166e2a9abd5/" hreflang="fr"
  156. data-tippy data-description="La qualifier de simple montre serait un peu réducteur."
  157. data-source="https://www.suunto.com/fr-ca/Produits/Montres-de-sport/Suunto-Ambit/Suunto-Ambit-Black/"
  158. data-date="2024-03-02"
  159. data-favicon="https://www.suunto.com/favicon-16x16.png"
  160. data-domain="suunto.com"
  161. ><svg xmlns="http://www.w3.org/2000/svg"
  162. width="24" height="24" viewBox="0 0 24 24" fill="none"
  163. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  164. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  165. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  166. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  167. </svg>
  168. <span class="sr-only">[archive]</span></a> achetée il y a une douzaine d’années. (Merci à Suunto de garder une page avec les caractéristiques d’un produit qui n’est plus construit / vendu&#8239;! C’est notamment utile pour comparer les spécifications de taille et poids.) Je me demandais si les montres actuelles allaient pouvoir résister à une <a href="/david/2024/02/24/" title="Jour 1">température inférieure à -20°C</a> et il semblerait que ce ne soit pas le cas, tous les modèles que j’ai consulté spécifient clairement que c’est la limite&nbsp;basse.</p>
  169. <figure>
  170. <a href="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"
  171. title="Cliquer pour une version haute résolution">
  172. <img
  173. src="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png"
  174. width="2390" height="1306"
  175. srcset="/static/david/2024/2024-03-02-coros-apex-2-temperatures.png 2390w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 660w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 990w, /static/david/2024/2024-03-02-coros-apex-2-temperatures.png 1320w"
  176. sizes="min(100vw, calc(100vh * 2390 / 1306))"
  177. loading="lazy"
  178. decoding="async"
  179. alt="Capture d’écran pour la Coros Apex 2&nbsp;qui va de -20°C à 50°C.">
  180. </a>
  181. <figcaption>Même Kiki a du mal par -20°C&nbsp;!</figcaption>
  182. </figure>
  183. <p><em>Détail marrant&nbsp;: Kilian Jornet était déjà sur les photos de promotion de la Suunto Ambit Black et on le retrouve sur la Coros Apex 2&nbsp;Pro&nbsp;d’aujourd’hui.</em></p>
  184. <p>Au-delà de l’aspect scientifique d’envisager une montre qui résiste aux températures locales, il y a une <a href="/david/2024/01/27/" title="Jour 1">situation récente</a> qui me reste en tête aussi (ce n’est <a href="/david/2020/12/18/">pas la première fois</a>, et ce ne sera certainement pas la dernière). Une position GPS précise aurait certainement pu m’aider dans ce cas là, si je n’avais pas été trop entêté pour ne pas la consulter. J’envisage aussi des <a href="/david/2024/01/06/" title="Objectif">objectifs</a> sur lesquels j’ai besoin de me rassurer / entraîner spécifiquement en ayant une idée des distances que je pourrais parcourir dans un contexte donné que j’envisage plus rapide que ce que j’ai l’habitude de&nbsp;faire.</p>
  185. <p>Je cherche en priorité une montre qui affiche un fond de carte, ce n’est pas tant ma trace programmée que ce qu’il y a autour qui m’intéresse dans d’autres contextes exploratoires. Sur ma montre actuelle, je ne pouvais qu’enregistrer une trace à suivre qui m’indiquait les déviations mais <em>pour ma pratique</em> ce n’était pas très intéressant. Savoir qu’il y a un lac / chemin forestier à proximité peut changer ma sortie. Difficile de savoir <em>a priori</em> si les données pour mes lieux de balade seront à jour ou suffisamment&nbsp;détaillées.</p>
  186. <p>J’ai regardé l’Apple Watch Ultra 2, la Suunto Vertical Titanium Solar, des Garmin d’«&nbsp;aventure&nbsp;» et finalement la Coros Apex 2 (Pro). Dans tous les cas, ce sont de grosses montres et j’ai un poignet fin. Dans tous les cas, le <em>marketing</em> est complètement délirant&nbsp;🙃. Sans compter le prix. La Coros semble être la moins chère (!) qui réponde à l’ensemble de mes attentes, la version Pro ayant une meilleure précision GPS et autonomie, ce qui m’importe&nbsp;beaucoup.</p>
  187. <p>Ah, <a href="/david/2024/02/07/#hr-69">aussi</a>. Difficile à justifier, même amortie sur la prochaine décennie… et c’est d’ailleurs là où j’ai de sérieux doutes en terme d’obsolescence programmée, ce qui a duré 10&nbsp;ans ne durera probablement plus 10&nbsp;ans. Triste réalité. J’essaye de ne pas trop me demande si <em>je</em> vais être capable de passer encore une décennie à arpenter la&nbsp;forêt.</p>
  188. <p><strong>Montre</strong> moi tes peurs et je te dirai comment les&nbsp;acheter.</p>
  189. <p><em>P.S.&nbsp;: j’ai un petit truc qui me gratte aussi dans le fait de ne pas être utilisateur régulier de <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a>, ce qui est un manque à différents niveaux. Avoir davantage de données me motiverait certainement à jouer avec. Il y a des lieux que je veux garder intimes et d’autres qui sont déjà bien publics. J’ai une vieille envie de pouvoir raconter mes sorties sur un fond de carte à la <a data-link-domain="storymap.knightlab.com" href="https://storymap.knightlab.com/">StoryMap</a> (<a data-link-domain="github.com" href="https://github.com/slead/leaflet-storymap">avec Leaflet&#8239;?</a>) pour agrémenter les récits de sons et images correspondants aux lieux&nbsp;parcourus.</em></p>
  190. <nav>
  191. <p>
  192. <a href="/david/2024/dependance/"
  193. title="Liste de tous les articles 2024 associés à cette étiquette"
  194. rel="tag">#dépendance</a>
  195. <a href="/david/2024/sport/"
  196. title="Liste de tous les articles 2024 associés à cette étiquette"
  197. rel="tag">#sport</a>
  198. <a href="/david/2024/technique/"
  199. title="Liste de tous les articles 2024 associés à cette étiquette"
  200. rel="tag">#technique</a>
  201. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  202. </p>
  203. </nav>
  204. <nav>
  205. <p>
  206. <a rel="prev"
  207. href="/david/2024/03/01/"
  208. title="Publication précédente : Simple">← Précédent</a> •
  209. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  210. • <a rel="next"
  211. href="/david/2024/03/03/"
  212. title="Publication suivante : Permanence">Suivant →</a>
  213. </p>
  214. </nav>
  215. <form action="/david/recherche/" method="get">
  216. <fieldset>
  217. <legend>Recherche</legend>
  218. <label for="input-search">Termes de votre recherche :</label>
  219. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  220. <input type="submit" value="Chercher">
  221. <p id="indexation-infos">
  222. <small>
  223. Seuls les contenus de ces 8 dernières années sont indexés.
  224. </small>
  225. </p>
  226. </fieldset>
  227. </form>
  228. <aside>
  229. <theme-toggle></theme-toggle>
  230. </aside>
  231. </article>
  232. <hr>
  233. <footer>
  234. <p>
  235. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  236. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  237. <a href="http://larlet.com"
  238. title="Go to my English profile"
  239. data-instant>Pro</a>
  240. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  241. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  242. </p>
  243. <template id="theme-selector">
  244. <form>
  245. <style type="text/css">
  246. fieldset div {
  247. text-align: center;
  248. }
  249. </style>
  250. <fieldset>
  251. <legend>Thème</legend>
  252. <div>
  253. <label>
  254. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  255. Auto
  256. </label>
  257. <label>
  258. <input type="radio" value="dark" name="chosen-color-scheme">
  259. Foncé
  260. </label>
  261. <label>
  262. <input type="radio" value="light" name="chosen-color-scheme">
  263. Clair
  264. </label>
  265. </div>
  266. </fieldset>
  267. </form>
  268. </template>
  269. </footer>
  270. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  271. <script>
  272. class ThemeToggle extends HTMLElement {
  273. constructor() {
  274. super()
  275. const themeSelectorTemplate = document.querySelector('#theme-selector')
  276. const form = themeSelectorTemplate.content.firstElementChild
  277. this.attachShadow({ mode: 'open' })
  278. this.shadowRoot.appendChild(form.cloneNode(true))
  279. }
  280. connectedCallback() {
  281. const form = this.shadowRoot.querySelector('form')
  282. form.addEventListener('change', (e) => {
  283. const chosenColorScheme = e.target.value
  284. localStorage.setItem('theme', chosenColorScheme)
  285. toggleTheme(chosenColorScheme)
  286. })
  287. const selectedTheme = localStorage.getItem('theme')
  288. if (selectedTheme && selectedTheme !== 'undefined') {
  289. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  290. }
  291. }
  292. }
  293. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  294. window.addEventListener('load', () => {
  295. let colorsLayer = undefined
  296. let hasDarkRules = false
  297. for (const styleSheet of Array.from(document.styleSheets)) {
  298. let mediaRules = []
  299. for (const layerRule of styleSheet.cssRules) {
  300. if (!(layerRule instanceof CSSLayerBlockRule)) {
  301. continue
  302. }
  303. if (layerRule.name === 'colors') {
  304. colorsLayer = layerRule
  305. }
  306. for (const cssRule of layerRule.cssRules) {
  307. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  308. continue
  309. }
  310. // WARNING: Safari does not have/supports `conditionText`.
  311. if (cssRule.conditionText) {
  312. if (cssRule.conditionText !== prefersColorSchemeDark) {
  313. continue
  314. }
  315. } else {
  316. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  317. continue
  318. }
  319. }
  320. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  321. }
  322. }
  323. // WARNING: do not try to insert a Rule to a styleSheet you are
  324. // currently iterating on, otherwise the browser will be stuck
  325. // in a infinite loop…
  326. for (const mediaRule of mediaRules) {
  327. // Safari requires the `0` second parameter (even if default).
  328. colorsLayer.insertRule(mediaRule.cssText, 0)
  329. hasDarkRules = true
  330. }
  331. }
  332. if (hasDarkRules) {
  333. if ('customElements' in window && !customElements.get('theme-toggle')) {
  334. customElements.define('theme-toggle', ThemeToggle)
  335. }
  336. }
  337. })
  338. </script>
  339. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  340. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  341. <script>
  342. tippy('[data-tippy]', {
  343. content(reference) {
  344. reference.addEventListener('click', (e) => e.preventDefault())
  345. return `
  346. <h3 lang="fr">
  347. <img src="${reference.dataset.favicon}" loading="lazy">
  348. <a href="${reference.dataset.source}"
  349. >Article sur ${reference.dataset.domain}</a></h3>
  350. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  351. <div class="tippy-links" lang="fr">
  352. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  353. </div>
  354. `
  355. },
  356. allowHTML: true,
  357. interactive: true,
  358. delay: [150, 700],
  359. hideOnClick: false
  360. })
  361. </script>
  362. </body>
  363. </html>