davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>(Dé)possession virtuelle (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.hypothermia.fr/2020/08/depossession-virtuelle/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>(Dé)possession virtuelle</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://www.hypothermia.fr/2020/08/depossession-virtuelle/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>Cela fait quelques mois que mon royaume virtuel se désagrège au bord de l’effondrement, et je ne sais que faire pour le réparer. Pour une raison que j’ignore, Hypothermia a décidé de ne pas digérer la dernière mise à jour de WordPress – à moins que ça soit une nouvelle version de PHP. Si les apparences sont sauvées, elles sont aussi trompeuses : je rédige mes articles sur une interface minuscule aux briques défaillantes et au goût d’obsolescence programmée. Je me demande chaque semaine quand mon site va définitivement cesser de fonctionner.</p>

<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/screenshot-1024x265.png" alt="" class="alignnone size-large wp-image-16015" data-srcset="https://www.hypothermia.fr/media/2020/08/screenshot-1024x265.png 1024w, https://www.hypothermia.fr/media/2020/08/screenshot-768x199.png 768w, https://www.hypothermia.fr/media/2020/08/screenshot.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/screenshot-1024x265.png" alt="" class="alignnone size-large wp-image-16015" srcset="https://www.hypothermia.fr/media/2020/08/screenshot-1024x265.png 1024w, https://www.hypothermia.fr/media/2020/08/screenshot-768x199.png 768w, https://www.hypothermia.fr/media/2020/08/screenshot.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px"/></noscript></figure>

<p class="legend">La pointe de l’ergonomie.</p>

<p>Il y a des jours où je me réjouis que le blog ait enfin un problème suffisamment gros pour que j’arrête de le rafistoler à bouts de scotch : je fantasme alors sur une idée de refonte qui en assainirait le code depuis les fondations. Moins de dépendances, plus de contrôle : la mode des sites statiques me séduit, sans doute par la nostalgie de mes débuts de publications sur le web il y a plus de vingt ans.</p>

<p>Il y a des jours plus réalistes où je désespère. Réparer le blog, c’est la promesse de dizaines et dizaines d’heures immergée dans des lignes de code – mettons le double si je décide de le transférer sur une nouvelle plateforme. En envisageant la montagne de boulot qui m’attend, j’ai parfois envie de tout plaquer et de me libérer de ce qui me donne l’impression d’avoir un travail parallèle à mi-temps.</p>

<p>La majorité de ma vie s’écoule déjà devant un écran. Le cœur de mon <em>« vrai »</em> travail réside dans des lignes de commande, des scripts à compiler, des jeux de données à analyser. J’ai basé une grande partie de mon métier sur ce qui était au départ une passion adolescente. Avec le prix à payer de la transformer en travail : une fois de retour chez moi le soir, j’ai tout le mal du monde à m’installer sur l’ordinateur pour faire avancer mes projets personnels. À ma droite, la fenêtre qui donne vue sur la forêt où j’ai envie de me balader. À ma gauche, Olaf qui réclame jeux et grattouilles et le canapé où K m’attend pour regarder un film. Mon cœur refuse de se concentrer sur ce qui m’attend devant moi : un clavier, un écran, un tunnel.</p>

<p>J’ai eu un goût doux-amer de cette immersion virtuelle ces derniers jours, lorsque j’ai voulu avancer sur mon souhait de <a href="https://www.hypothermia.fr/2019/08/david-vs-goliath/">retrouver le contrôle de mes données privées en ligne</a>. Atteignant les limites de mon hébergement mutualisé et me laissant entraîner par l’enthousiasme de quelques geeks dans mon entourage, j’ai acheté un Raspberry Pi que je comptais transformer en petit serveur autohébergé.</p>

<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/raspberry.jpg" alt="" class="alignnone size-full wp-image-15991" data-srcset="https://www.hypothermia.fr/media/2020/08/raspberry.jpg 1200w, https://www.hypothermia.fr/media/2020/08/raspberry-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/raspberry-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/raspberry-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/raspberry.jpg" alt="" class="alignnone size-full wp-image-15991" srcset="https://www.hypothermia.fr/media/2020/08/raspberry.jpg 1200w, https://www.hypothermia.fr/media/2020/08/raspberry-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/raspberry-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/raspberry-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/></noscript></figure>

<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/microsd.jpg" alt="" class="alignnone size-full wp-image-15989" data-srcset="https://www.hypothermia.fr/media/2020/08/microsd.jpg 1200w, https://www.hypothermia.fr/media/2020/08/microsd-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/microsd-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/microsd-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/microsd.jpg" alt="" class="alignnone size-full wp-image-15989" srcset="https://www.hypothermia.fr/media/2020/08/microsd.jpg 1200w, https://www.hypothermia.fr/media/2020/08/microsd-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/microsd-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/microsd-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/></noscript></figure>

<p class="legend">Mon petit Raspberry avec sa carte mémoire d’une capacité environ 3000 fois supérieure à son ancêtre :</p>

<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/ibm_ramac.jpg" alt="" class="alignnone size-full wp-image-15995" data-srcset="https://www.hypothermia.fr/media/2020/08/ibm_ramac.jpg 1280w, https://www.hypothermia.fr/media/2020/08/ibm_ramac-1024x568.jpg 1024w, https://www.hypothermia.fr/media/2020/08/ibm_ramac-768x426.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/ibm_ramac.jpg" alt="" class="alignnone size-full wp-image-15995" srcset="https://www.hypothermia.fr/media/2020/08/ibm_ramac.jpg 1280w, https://www.hypothermia.fr/media/2020/08/ibm_ramac-1024x568.jpg 1024w, https://www.hypothermia.fr/media/2020/08/ibm_ramac-768x426.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px"/></noscript></figure>

<p class="legend">L’IBM RAMAC 305, premier ordinateur à disque dur (5Mb) commercialisé en 1956.</p>

<p>L’idée était plutôt simple : je comptais rapatrier plusieurs des services que j’utilise encore en ligne (calendriers, contacts, lecteur de flux, archivage d’articles, cloud de fichiers, …) sur mon mini serveur à la maison accessible des quatre coins du monde. Il est vrai que j’aime énormément l’idée d’avoir tous ces éléments dans <a href="https://www.hypothermia.fr/search/memorabilia">une petite boîte physique que je conserve dans mon chez moi.</a> Au programme ? Une instance <a href="https://nextcloud.com/">Nextcloud</a> bien huilée, un <a href="https://www.wallabag.it/en">Wallabag</a> et <a href="https://miniflux.app/">Miniflux</a> pour commencer.</p>

<p>Allez, au maximum un weekend et ça serait bouclé ? Quelle naïveté. J’ai passé des soirées bien trop longues les mains dans le cambouis à essayer de configurer la bête. Sous la main, une trentaine d’onglets Internet ouverts chacun m’indiquant une marche à suivre différente digne d’une adaptation de recette dans les commentaires d’un blog de cuisine. Je me faisais insulter par la ligne de commande à chaque étape, n’ayant aucune idée de comment décrypter la plupart des messages d’erreur, lançant la majorité des commandes à l’aveuglette en priant pour que les étoiles s’alignent et que mon système fonctionne.</p>

<p>Cerise sur le gâteau, plus je lisais de tutoriels dans l’espoir de trouver des instructions qui m’aideraient, plus je lisais de mises en gardes sur l’extrême importance de tout maîtriser et de parfaitement tout configurer sans quoi de petits hackers chinois de 13 ans allaient s’infiltrer dans mon réseau, prendre mes données en otage et kidnapper mes ressources virtuelles pour les mettre au service du Dark Web. Après une dernière insulte du terminal à une heure bien trop avancée, de rage j’ai tout débranché, je me suis servie une grenadine, un bol de pâtes et j’ai boulotté une saison de <em>Selling Sunset</em> pour me calmer <a href="https://www.youtube.com/watch?v=DXdO0Revllc"><span class="smaller">(ne me jugez pas)</span></a>.</p>

<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/terminal.jpg" alt="" class="alignnone size-full wp-image-15992" data-srcset="https://www.hypothermia.fr/media/2020/08/terminal.jpg 1200w, https://www.hypothermia.fr/media/2020/08/terminal-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/terminal-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/terminal-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/terminal.jpg" alt="" class="alignnone size-full wp-image-15992" srcset="https://www.hypothermia.fr/media/2020/08/terminal.jpg 1200w, https://www.hypothermia.fr/media/2020/08/terminal-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/terminal-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/terminal-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/></noscript></figure>

<p class="legend">ON S’AMUSE (non).</p>

<p>Même si je ne me considère pas comme une geekette de pointe, je suis pourtant loin d’être une tanche dans le domaine. Autodidacte certes, mais bidouilleuse de guerre quand il s’agit d’arriver à mes fins. Au fil des jours et malgré ma frustration, j’ai réussi à construire un système à peu près utilisable : tout n’est pas encore installé, tout n’est sans doute pas hyper sécurisé, mais je commence à m’en servir au quotidien ce qui est un bon signe. Je regrette toutefois que l’alternative aux solutions clef-en-un-si-pratiques-en-plus-gratuites-mais-peu-respectueuses-de-la-vie-privée passe forcément par la case <em>« bidouilles intenses à la sueur de votre front, ne passez pas par la case départ et ne sauvez pas 20000 heures de votre temps libre »</em>. Il y a un côté ironiquement frustrant, à avoir suffisamment de compétences pour comprendre l’étendue du problème sans pour autant être en capacité de le résoudre.</p>

<p>Prenons l’exemple <a href="https://evernote.com/intl/fr/">Evernote</a>. Je me suis servie de ses services durant des années pour collecter et organiser tout type d’information : de mes recettes préférées à des idées d’articles en passant par l’organisation de mes voyages et les codes d’accès à mon centre des impôts. Peu à l’aise avec <a href="https://www.reddit.com/r/Evernote/comments/6itd9c/what_do_you_store_in_evernote_and_do_you_trust/djapgia/">leur changement de position constant sur la confidentialité de mes données</a>, j’ai recherché une alternative qui me rendrait plus confortable sans pour autant sacrifier les fonctionnalités dont j’ai besoin.</p>

<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-scaled.jpg" alt="" class="alignnone size-full wp-image-16003" data-srcset="https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-scaled.jpg 2560w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-1024x652.jpg 1024w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-768x489.jpg 768w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-1536x978.jpg 1536w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-2048x1304.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-scaled.jpg" alt="" class="alignnone size-full wp-image-16003" srcset="https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-scaled.jpg 2560w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-1024x652.jpg 1024w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-768x489.jpg 768w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-1536x978.jpg 1536w, https://www.hypothermia.fr/media/2020/08/pannitas_dashboard-2048x1304.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px"/></noscript></figure>

<p class="legend">Notion, porteur de flambeau du bullet journal en ligne. <a href="https://korpannita.wordpress.com/2019/03/25/notion-vs-evernote/">Source : Notion VS Evernote, Pannita’s toy box</a></p>

<p><a href="https://www.notion.so/">Notion</a> a actuellement le vent en poupe et correspond parfaitement à mes critères : applications sur toutes les plateformes et interface web, personnalisation pointue, interface sexy, grande flexibilité, et en prime depuis peu la gratuité pour les utilisateurs particuliers… Ce qui devrait mettre la puce à l’oreille. En effet. En farfouillant un peu, je constate qu’il est <a href="https://www.reddit.com/r/Notion/comments/eqvrz0/end_to_end_encryption_is_must/">impossible de chiffrer les information qu’on y stocke</a>. Ce qui veut dire que les serveurs de Notion contiennent de façon claire tous les éléments que vous y publiez, lisibles de ce fait par quiconque y a accès (ou quiconque à qui Notion les partage…) La preuve ? Le service de hotline peut consulter toutes vos données – mais ne vous inquiétez pas, <a href="https://www.reddit.com/r/Notion/comments/egai5n/do_you_trust_notion_with_your_sensitive_data/">ils vous demanderont s’il-te-plaît au préalable</a>.</p>

<p><audio class="wp-audio-shortcode" id="audio-15988-1" preload="none" controls="controls"><source type="audio/mpeg" src="https://www.hypothermia.fr/media/2020/08/KOMPROMAT-Possession.mp3?_=1"/><a href="https://www.hypothermia.fr/media/2020/08/KOMPROMAT-Possession.mp3">https://www.hypothermia.fr/media/2020/08/KOMPROMAT-Possession.mp3</a></audio><p class="legend">KOMPROMAT – Possession</p><p>C’est d’une logique économique évidente, qu’un service gratuit cherche à se rémunérer par d’autres fins, en exploitant les données de ses clients par exemple. Pour éviter ce problème j’étais prête à souscrire à un service payant répondant à mes critères en matière de confidentialité – je n’ai hélas pas trouvé chaussure à mon pied. J’ai trouvé <a href="https://standardnotes.org/">Standard Notes</a> qui derrière une présentation alléchante a un goût de bâclé très limité (quelle galère pour juste insérer une image !) Ou bien j’ai failli m’abonner à <a href="https://crypt.ee/">crypt.ee</a> tant la démarche de ses développeurs et le goût du détail m’ont plu. Hélas après quelques utilisations, la sécurité poussée à l’extrême en rendait l’utilisation trop lente pour répondre à mes besoins (rentrer la clef de déchiffrage à chaque fois que je souhaitais prendre une note rapide me devenait bien trop pénible).</p>
<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/cryptee.jpg" alt="" class="alignnone size-full wp-image-16004" data-srcset="https://www.hypothermia.fr/media/2020/08/cryptee.jpg 1200w, https://www.hypothermia.fr/media/2020/08/cryptee-1024x576.jpg 1024w, https://www.hypothermia.fr/media/2020/08/cryptee-768x432.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/cryptee.jpg" alt="" class="alignnone size-full wp-image-16004" srcset="https://www.hypothermia.fr/media/2020/08/cryptee.jpg 1200w, https://www.hypothermia.fr/media/2020/08/cryptee-1024x576.jpg 1024w, https://www.hypothermia.fr/media/2020/08/cryptee-768x432.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px"/></noscript></figure><p>J’en suis donc restée à <a href="https://joplinapp.org/">Joplin</a>, solution open source pas très jolie et sans interface web mais qui remplit mes critères fonctionnels, me permet de tout stocker « chez moi » et de chiffrer les informations que j’y recueille, les rendant lisibles par moi seule. J’ai essayé toute une soirée de faire fonctionner <a href="https://github.com/foxmask/joplin-web">Joplin web</a> pour me garantir un accès à distance depuis n’importe quel terminal, en vain ; on ne peut décidément pas tout avoir.</p><p>K m’a demandé si ce n’était pas mon cahier des charges qui était bien trop exigeant pour des solutions que développent des Jean-Michels libristes durant leurs nuits d’insomnies. Pourtant je suis prête à soutenir une structure professionnelle et des développements plus conséquents en souscrivant à un abonnement. Payé avec de l’argent, mais pas avec mes informations personnelles. Ce qui semble hélas encore utopique à l’heure actuelle. Je ne peux m’empêcher de me dire que si aussi peu de solutions payantes respectueuses de la vie privée existent, c’est bien que l’exploitation des données utilisateurs est beaucoup plus rentable.</p><p><em>« C’est bien d’avoir des principes, surtout que toi tu t’y tiens »</em> me soutenait K en essayant de me remonter le moral. Le prix que j’y paie, ce sont ces centaines d’heures de mon temps libre passées devant l’écran à bidouiller des solutions jusqu’à atteindre un compromis qui me satisfait. Une fois que j’aurai mis au point mon système maison, le blog sera le prochain à passer sous le bistouri. Je ne suis pas prête à abandonner mes critères en termes de fonctionnalité, d’esthétique et de confidentialité. Alors je n’ai pas d’autre choix que de me retrousser les manches, et de ressortir mon rouleau de scotch.</p>
<figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.hypothermia.fr/media/2020/08/no_idea.jpg" alt="" class="alignnone size-full wp-image-15990" data-srcset="https://www.hypothermia.fr/media/2020/08/no_idea.jpg 1200w, https://www.hypothermia.fr/media/2020/08/no_idea-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/no_idea-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/no_idea-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/><noscript><img src="https://www.hypothermia.fr/media/2020/08/no_idea.jpg" alt="" class="alignnone size-full wp-image-15990" srcset="https://www.hypothermia.fr/media/2020/08/no_idea.jpg 1200w, https://www.hypothermia.fr/media/2020/08/no_idea-1024x683.jpg 1024w, https://www.hypothermia.fr/media/2020/08/no_idea-768x512.jpg 768w, https://www.hypothermia.fr/media/2020/08/no_idea-480x320.jpg 480w" sizes="(max-width: 1200px) 100vw, 1200px"/></noscript></figure></p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>