<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="pretty-atom-feed.xsl" type="text/xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="fr">
  <title>HaïkoOz</title>
  <subtitle>Journal personnel de GoOz, avec des mots petits et grands.</subtitle>
  <link href="https://blog.foojin.com/feeds/posts.xml" rel="self" />
  <link href="https://blog.foojin.com/" />
  <updated>2026-04-15T00:00:00Z</updated>
  <id>https://blog.foojin.com/</id>
  <author>
    <name>GoOz</name>
  </author>
  <entry>
    <title>Ça doit être les burgers.</title>
    <link href="https://blog.foojin.com/2026/04/15/ca-doit-etre-les-burgers/" />
    <updated>2026-04-15T00:00:00Z</updated>
    <id>https://blog.foojin.com/2026/04/15/ca-doit-etre-les-burgers/</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Ça fait 20 ans maintenant (non 1 ou 2 ans max) que je veux mettre &lt;a href=&quot;https://github.com/GoOz/Niepce&quot;&gt;Niepce&lt;/a&gt;, mon starter kit &lt;strong&gt;11ty&lt;/strong&gt; pour se faire un joli portfolio, à jour. Mais j&#39;ai eu des problèmes techniques qui m&#39;en ont empêché.&lt;/p&gt;
&lt;p&gt;J&#39;ai réglé, partiellement, le problème… En fait non, je l&#39;ai pas réglé du tout, je l&#39;ai juste salement contourné en espérant que ça ne soit que temporaire mais la solution finale ne dépend pas de moi…&lt;/p&gt;
&lt;p&gt;J&#39;en pouvais plus d&#39;attendre un fix qui n&#39;arrivait pas, j&#39;ai donc préféré faire dans le sale. Pardonnez-moi, c&#39;est pour la bonne cause.&lt;/p&gt;
&lt;p&gt;Mais bref, la v1.0.0 &lt;a href=&quot;https://github.com/GoOz/Niepce/releases&quot;&gt;est sortie&lt;/a&gt;… sauf que en fait on est déjà à la v1.0.2 parce que j&#39;avais laissé des bourdasses, mais peu importe. En espérant que ça serve à quelqu&#39;un d&#39;autre que moi.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Il y a quelques semaines j&#39;ai fait ma seconde exposition photo (en groupe) et maintenant on m&#39;invite à faire ma candidature pour une autre exposition en octobre. &lt;em&gt;Joie !&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Ouais sauf que maintenant je suis plein de doutes. Je sais plus quoi proposer comme série…&lt;/p&gt;
&lt;p&gt;Il s&#39;avère qu&#39;à la dernière exposition j&#39;avais proposé une série que j&#39;aimais beaucoup et j&#39;ai eu pour réponse peu ou prou ceci :&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Ouais alors bof bof ta série là, ça manque de cohérence mais on a regardé ton site et on voudrait que tu proposes une série de photos de rue en noir et blanc. Tu sais le genre que tu fais ponctuellement et absolument pas souvent ? Bah voilà.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Je me suis creusé les neurones et j&#39;ai sorti ces &lt;a href=&quot;https://www.foojin.com/series.html&quot;&gt;3 séries&lt;/a&gt; (c&#39;est 5 photos max par personne cette fois-ci).&lt;/p&gt;
&lt;p&gt;Et je sais pas laquelle serait le mieux. Pour le contexte c&#39;est une expo d&#39;art toute catégorie donc si je suis sélectionné ce serait à côté de peintres, sculpteur•rices, etc.&lt;/p&gt;
&lt;p&gt;Dites moi, laquelle des trois vous parle le plus ?&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Faudrait que je me déclare comme auto-entrepreneur pour vendre des photos… mais j&#39;ai tellement la &lt;em&gt;fleeeeeeeeeemmmmmme&lt;/em&gt; de faire toute cette paperasse… Vous avez pas idée…&lt;/p&gt;
&lt;p&gt;Le fait de pas avoir besoin de ça pour vivre ne doit certainement pas aider non plus il faut dire.&lt;/p&gt;
&lt;p&gt;Je sais que je vais finir par le faire mais là tout de suite je suis en mode &lt;strong&gt;procrastinateur++&lt;/strong&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Alfred contre vents et marées</title>
    <link href="https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/" />
    <updated>2026-02-20T00:00:00Z</updated>
    <id>https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/</id>
    <content type="html">&lt;p&gt;Je vous avais pour la première fois parlé d&#39;Alfred &lt;a href=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/&quot;&gt;il y a de ça 10 ans&lt;/a&gt; (putain 10 ans…) et je me suis rendu compte récemment que je l&#39;utilise toujours et toujours autant mais que ne nombreuses choses ont changé.&lt;br&gt;
Si le fonctionnement de base (mises à part les quelques &lt;em&gt;updates&lt;/em&gt; du logiciel entre temps) n&#39;a pas changé, j&#39;ai pas mal chamboulé ma collection de workflows et je me suis dit que ce serait pas mal de faire un point de mise à jour.&lt;/p&gt;
&lt;p&gt;Je ne vais pas repasser sur les &lt;em&gt;workflows&lt;/em&gt; que j&#39;utilisais il y a 10 ans, la majorité étant hors-service, mais plutôt passer en revue tout ceux que j&#39;utilise donc aujourd&#39;hui.&lt;/p&gt;
&lt;h2 id=&quot;mes-creations-a-moi&quot;&gt;Mes créations à moi&lt;/h2&gt;
&lt;p&gt;Si je n&#39;ai pas partagé sur le web la majorité d&#39;entre eux parce que trop triviaux ou alors trop spécifiques à mes usages personnels, je vous les montre malgré tout, en guise d&#39;exemple de petits trucs sympa que permet &lt;strong&gt;Alfred&lt;/strong&gt;.&lt;/p&gt;
&lt;h3 id=&quot;lien-markdown&quot;&gt;Lien Markdown&lt;/h3&gt;
&lt;p&gt;Juste un petit raccourci pratique que je me suis fait pour quand j&#39;écris du markdown dans une app qui supporte le markdown mais sans proposer de raccourci clavier pour créer un lien markdown. Ne me demandez pas de nom… je ne suis pas une balance.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/markdown-link.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;coller-du-texte-brut&quot;&gt;Coller du texte brut&lt;/h3&gt;
&lt;p&gt;Ça vous est déjà arrivé de copier du texte d&#39;un fichier ou d&#39;une page web puis de coller ailleurs et de voir que le formatage du texte est resté ? C&#39;est chiant, hein ?&lt;br&gt;
Alors certains logiciels gèrent la possibilité de retirer le formatage en copiant mais c&#39;est loin d&#39;être le cas partout.&lt;br&gt;
Du coup je me suis créé un raccourci tout con pour y remédier.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/plain-text.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;publication-d-une-nouvelle-photo&quot;&gt;Publication d&#39;une nouvelle photo&lt;/h3&gt;
&lt;p&gt;Je ne vais pas m&#39;étendre sur celui-ci plus que ça puisque j&#39;en ai parlé longuement déjà dans &lt;a href=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/&quot;&gt;un autre billet&lt;/a&gt; mais si c&#39;est un workflow bien plus compliqué qu&#39;un bête raccourci, ce dernier m&#39;a quand même permis de drastiquement réduire le temps qu&#39;il me fallait pour publier une de mes photos en ligne sur les réseaux.&lt;br&gt;
Et rien que pour ça je dis : &amp;quot;Merci Alfred ! 🙇&amp;quot; !&lt;/p&gt;
&lt;h3 id=&quot;snippets-de-merde&quot;&gt;Snippets de merde&lt;/h3&gt;
&lt;p&gt;J&#39;en avais aussi déjà parlé… &lt;em&gt;&lt;a href=&quot;https://blog.foojin.com/2016/12/17/snippets-de-merde/&quot;&gt;il y a 10 ans&lt;/a&gt;&lt;/em&gt;…  mais je me suis fait une collection de snippets avec moult répliques du film &lt;em&gt;La classe américaine&lt;/em&gt; parce que j&#39;aime sortir des répliques de trucs de pop culture.&lt;br&gt;
Il est donc toujours disponible sur &lt;a href=&quot;https://github.com/GoOz/snippetsdemerde&quot;&gt;Github&lt;/a&gt; si ça vous intéresse.&lt;/p&gt;
&lt;p&gt;Honnêtement je suis à ça 🤏 de faire la même pour &lt;em&gt;Kaamelott&lt;/em&gt; et &lt;em&gt;La cité de la peur&lt;/em&gt;… j&#39;ai juste un peu beaucoup la flemme pour le moment.&lt;/p&gt;
&lt;h2 id=&quot;les-creations-des-autres&quot;&gt;Les créations des autres&lt;/h2&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Note&lt;/p&gt;&lt;p&gt;Les workflows présentés ici ne sont pas tous trouvables au même endroit sur le web, certains sont sur la&lt;a href=&quot;https://alfred.app/&quot;&gt; galerie de workflow officielle d&#39;Alfred&lt;/a&gt;, d&#39;autres sur &lt;strong&gt;Github&lt;/strong&gt;. Partez donc du principe que si je ne mets pas de lien c&#39;est que vous le trouverez sur la galerie.&lt;/p&gt;
&lt;/div&gt;
&lt;h3 id=&quot;1password&quot;&gt;1Password&lt;/h3&gt;
&lt;p&gt;Je suis client de &lt;strong&gt;1Password&lt;/strong&gt; depuis des lustres, j&#39;en suis d&#39;ailleurs très content mais couplé à ce workflow, on gagne un temps de dingue.&lt;/p&gt;
&lt;p&gt;Pour des raisons évidentes de confidentialité je ne ferai pas de démo en vidéo mais grosso modo il vous permet de lister et/ou chercher un item dans votre coffre et en récupérer ce que vous souhaitez en deux coups de cuillère à pot grâce à des raccourcis simples :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;↩&lt;/code&gt; Ouvrir la page web et remplir les informations d&#39;authentification.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;⌘↩&lt;/code&gt; Voir l&#39;item dans 1Password.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;⌥↩&lt;/code&gt; Copier le username.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;⌃↩&lt;/code&gt; Copier le mot de passe.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;⇧↩&lt;/code&gt; Copier le code de double authentification&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;C&#39;est beau, c&#39;est rapide, c&#39;est simple, c&#39;est twingo !&lt;/p&gt;
&lt;h3 id=&quot;about-this-mac&quot;&gt;About This Mac&lt;/h3&gt;
&lt;p&gt;Pas transcendant mais fort habile, ce petit workflow vous permet d&#39;obtenir en 2 secondes des infos matériels et pratiques de votre mac.&lt;br&gt;
Vous n&#39;avez qu&#39;à taper &lt;code&gt;amm&lt;/code&gt; (pour about my mac), choisir l&#39;item de votre choix et taper &lt;code&gt;⌘↩️&lt;/code&gt;  pour copier ses infos.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-400.avif 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-812.avif 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-1196.avif 1196w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-400.webp 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-812.webp 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-1196.webp 1196w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-400.png&quot; alt=&quot;Capture d&#39;écran du workflow About This Mac&quot; width=&quot;1196&quot; height=&quot;648&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-400.png 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-812.png 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/g-k0u8sJLt-1196.png 1196w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;atop&quot;&gt;Atop&lt;/h3&gt;
&lt;p&gt;Si vous voulez rapidement voir ce qu&#39;il se passe sur votre mac, il y a ce petit workflow qui ne paye pas de mine mais qui fait des merveilles. Que vous souhaitiez vérifier la consommation de votre processeur ou de votre ram, l&#39;activité de votre réseau ou encore la vitesse de votre connexion internet pour ne nommer que ça il sera là, pragmatique et efficace.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/atop.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;calendar&quot;&gt;Calendar++&lt;/h3&gt;
&lt;p&gt;&lt;em&gt;Voir sur &lt;a href=&quot;https://github.com/zeitlings/alfred-calendar&quot;&gt;Github&lt;/a&gt; 🐙.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Gérer son calendrier en quelques coups de clavier ça fait rêver non ? Et bien grâce à ce workflow vous pouvez consulter et même ajouter des événements en un rien de temps sans avoir l&#39;app Calendar d&#39;ouverte.&lt;/p&gt;
&lt;p&gt;Pratique quand vous faites autre chose alors qu&#39;on vous propose un rendez-vous en loucedé que votre Calendrier est fermé et que vous n&#39;avez pas de post-it sous la main.&lt;/p&gt;
&lt;h4 id=&quot;ajouter-un-evenement&quot;&gt;Ajouter un événement&lt;/h4&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/calendar.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h4 id=&quot;consulter-son-calendrier&quot;&gt;Consulter son calendrier&lt;/h4&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/calendar2.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;calm-notifications&quot;&gt;Calm notifications&lt;/h3&gt;
&lt;p&gt;Vous êtes en pleine réunion de vidéoconférence et on vous demande de manière impromptue de partager votre écran ? Vite ! Il faut préparer ça et couper les notifications pour éviter tout moment gênant !&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/dnd.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;chatgpt-dall-e&quot;&gt;ChatGPT / DALL-E&lt;/h3&gt;
&lt;p&gt;Je ne suis pas un gros client de l&#39;IA, je dois l&#39;avouer, mais je m&#39;en sers principalement et de manière très ponctuelle pour mes parties de jeu de rôle en ligne quand c&#39;est moi le MJ. Ça me sert surtout à créer à la volée des personnages avec un peu de profondeur pour mes joueurs quand l&#39;occasion se présente.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-warning&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-alert mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Warning&lt;/p&gt;&lt;p&gt;Normalement il est beaucoup plus rapide à répondre mais le jour où j&#39;ai enregistré la vidéo ChatGPT était un peu dans les choux…&lt;/p&gt;
&lt;/div&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/chatgpt.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;cleanshot&quot;&gt;CleanShot&lt;/h3&gt;
&lt;p&gt;Voir sur &lt;a href=&quot;https://github.com/Asikur22/Color-Converter-Alfred-Workflow/&quot;&gt;Github&lt;/a&gt; 🐙&lt;/p&gt;
&lt;p&gt;J&#39;utilise beaucoup &lt;a href=&quot;https://cleanshot.com/&quot;&gt;CleanShot&lt;/a&gt; que ce soit pour des raisons pro ou perso (j&#39;y ai accès sans surcoût grâce à mon abonnement &lt;a href=&quot;https://setapp.com/fr&quot;&gt;Setapp&lt;/a&gt;) et normalement, pour l&#39;utiliser, il faut principalement utiliser la souris… plus maintenant !&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/cleanshot.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Note&lt;/p&gt;&lt;p&gt;Il existe aussi un autre workflow un poil plus récent sur &lt;a href=&quot;https://alfred.app/workflows/stephenc/cleanshot-x/&quot;&gt;la galerie officielle&lt;/a&gt; qui fait grosso modo la même chose. Je n&#39;ai pas eu l&#39;occasion de le tester mais là j&#39;ai la flemme de changer parce que celui là fonctionne toujours bien malgré le fait que sa dernière mise à jour date d&#39;il y a 4 ans x)&lt;/p&gt;
&lt;/div&gt;
&lt;h3 id=&quot;color-converter&quot;&gt;Color Converter&lt;/h3&gt;
&lt;p&gt;&lt;em&gt;Voir sur &lt;a href=&quot;https://github.com/Asikur22/Color-Converter-Alfred-Workflow/&quot;&gt;Github&lt;/a&gt; 🐙&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;J&#39;utilisais déjà un workflow similaire il y a 10 ans il est malheureusement décédé des suites d&#39;une incompatibilité python.
Voici donc le remplaçant, il propose moins de couleur que l&#39;ancien mais il couvre mes besoins alors bon…
Bref, proposez une couleur Hexa, RGB(a) ou HSL, choisissez le formatage qui vous convient, taper Entrée et boom c&#39;est dans le presse-papier.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/color.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;common-folders&quot;&gt;Common Folders&lt;/h3&gt;
&lt;p&gt;Voir sur &lt;a href=&quot;https://github.com/rknightuk/alfred-workflows/tree/main/workflows/common-folders&quot;&gt;Github&lt;/a&gt; 🐙&lt;/p&gt;
&lt;p&gt;Celui là je pense que ça devrait être une fonctionnalité native pour être honnête (dans Alfred v6 peut être🤞), parce que j&#39;ai pris ce workflow comme base mais j&#39;ai tout changé pour convenir à mes besoins. Mais en bref, si vous avez des dossiers sur votre machine que vous visitez souvent, ça permet de le &amp;quot;mettre en favoris&amp;quot; pour faciliter son ouverture dans Finder.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/common-folders.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
### Currency Converter
Attends… ça fait combien 20£ en € déjà ?
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/currency.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;p&gt;Ah ok, 22,89€ ! Cool !&lt;/p&gt;
&lt;h3 id=&quot;fakum&quot;&gt;Fakum&lt;/h3&gt;
&lt;p&gt;Si vous travaillez dans le web et qu&#39;il vous arrive de tester des interfaces ou des fonctionnalités d&#39;un site web, vous aurez à remplir des formulaires avec des données diverses et variées sauf que c&#39;est vite chiant, surtout pour des données niche comme… un IBAN, un numéro de carte, etc.&lt;/p&gt;
&lt;p&gt;Plus de soucis avec Fakum, c&#39;est vite fait, bien fait !&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/fakum.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;fastest-emoji-search&quot;&gt;Fastest Emoji Search&lt;/h3&gt;
&lt;p&gt;&lt;em&gt;Voir sur &lt;a href=&quot;https://github.com/mr-pennyworth/alfred-fastest-emoji/&quot;&gt;Github&lt;/a&gt; 🐙&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Les emojis c&#39;est cool mais y en a beaucoup… très beaucoup. Je sais pas vous mais moi j&#39;arrive pas à me souvenir où dans la liste des emojis ils apparaissent, ni de la moitié des mots-clés liés aux emojis que j&#39;utilise souvent donc ne parlons même pas de ceux dont je me sers que sporadiquement.&lt;/p&gt;
&lt;p&gt;Heureusement j&#39;ai un peu d&#39;aide avec ce plugin qui supporte en prime les teintes de couleurs de peau et aussi &lt;a href=&quot;https://emojikitchen.dev/&quot;&gt;Emoji Kitchen&lt;/a&gt; (pour générer des emojis à la volée).&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/fastest-emoji-search.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
### Gif Search &amp; Giphy
J&#39;aime bien utiliser les emojis dans mes conversations mais j&#39;aime aussi beaucoup utiliser des gifs (qu&#39;on prononce gif et non gif, bande de sauvages !).  
Dans mon cas j&#39;ai deux sources : une source locale de gifs glanés au fur et à mesure des années et une source en ligne.  
Pour chaque source son workflow !
#### Gif Search
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/gif-search.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h4 id=&quot;giphy&quot;&gt;Giphy&lt;/h4&gt;
&lt;p&gt;&lt;em&gt;Voir sur &lt;a href=&quot;https://github.com/kejadlen/giphy.alfredworkflow&quot;&gt;Github&lt;/a&gt; 🐙&lt;/em&gt;&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/giphy.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
Vous pouvez aussi copier le gif directement mais selon le support de l&#39;app ça peut rendre le gif statique, à voir selon vos besoins du coup.
### GitFred
Vous utilisez Github souvent ? vous avez vos propres repository et vous voulez pouvoir avoir un rapide coup d&#39;œil sur ce qui s&#39;y passe sans avoir à ouvrir la page dans votre navigateur ? Bah voilà !
&lt;p&gt;Ce workflow permet même plus pour peu qu&#39;on lui donne les accès de surveiller ses notifications et repository privés.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/gitfred.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
### Google Suggest
Par défaut, quand vous tapez du texte dans Alfred, que ça ne correspond à rien sur votre machine, le comportement de fallback envoie la requête sur Google, en considérant çacomme une recherche sur le web.
Il manquait juste un petit truc pour améliorer l&#39;utilisation de Google, ce sont les suggestions.
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/google-suggest.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;heic-to-jpeg&quot;&gt;HEIC to JPEG&lt;/h3&gt;
&lt;p&gt;Qu&#39;on aime ou pas le format HEIC d&#39;iOS il est là mais il peut rapidement devenir contraignant, notamment lorsque que l&#39;on veut partager à des gens qui n&#39;ont pas de de machine Apple.&lt;br&gt;
Alors des logiciels d&#39;encodage y en a pléthore mais ce workflow a le mérite d&#39;être très rapide puisqu&#39;il n&#39;y a pas de logiciel à lancer, c&#39;est juste un &lt;em&gt;FileAction&lt;/em&gt; sur Alfred (c&#39;est à dire un workflow qui fonctionne sans requête, juste une opération sur un fichier et/ou dossier).&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/heic-to-jpeg.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;ip-address&quot;&gt;IP Address&lt;/h3&gt;
&lt;p&gt;Bon ben, c&#39;est simple et direct, c&#39;est juste un workflow qui te renvoie ton adresse Ip local et distante, IPv4 et IPv6.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-400.avif 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-812.avif 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-1220.avif 1220w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-400.webp 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-812.webp 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-1220.webp 1220w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-400.png&quot; alt=&quot;Capture d&#39;écran du workflow IP address&quot; width=&quot;1220&quot; height=&quot;582&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-400.png 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-812.png 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/eUrpSFIdbn-1220.png 1220w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;lorem-ipsum&quot;&gt;Lorem Ipsum&lt;/h3&gt;
&lt;p&gt;En tant que développeur j&#39;utilise souvent du texte &lt;em&gt;lorem ipsum&lt;/em&gt; pour remplir mes pages de faux texte mais ça peut vite de venir contraignant d&#39;avoir un site fournissant un tel service toujours ouvert, à devoir jongler entre ce dernier et mon éditeur de code.&lt;br&gt;
Mais ça c&#39;était avant ce workflow&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/lorem-ipsum.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;maps-suggest&quot;&gt;Maps Suggest&lt;/h3&gt;
&lt;p&gt;Même principe que pour &lt;strong&gt;Google Suggest&lt;/strong&gt; mais appliqué à &lt;em&gt;Plans.app&lt;/em&gt;. Et vous pouvez choisir entre Apple Plans ou Google Maps, rien que pour ça c&#39;est cool.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/maps-suggest.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;menu-bar-search&quot;&gt;Menu Bar Search&lt;/h3&gt;
&lt;p&gt;Alors celui-là est peu particulier mais j&#39;aime beaucoup. Parfois, quand j&#39;utilise un logiciel de manière trop ponctuelle, j&#39;ai un peu du mal à me souvenir des raccourcis clavier et je me retrouve à aller fouiller les menus déroulant de l&#39;application à la recherche de la fonctionnalité que je souhaite lancer. Mais c&#39;est chiant et c&#39;est long et c&#39;est chiant.&lt;br&gt;
Grâce à ce workflow, je peux chercher dans l&#39;app active directement avec Alfred la fonctionnalité souhaitée.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/menu-bar-search.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
### Mini Weather
Juste un simple workflow pour avoir un aperçu en un clin d&#39;œil de la météo par heure ou par jour où que vous soyez.
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-400.avif 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-812.avif 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-1206.avif 1206w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-400.webp 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-812.webp 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-1206.webp 1206w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-400.png&quot; alt=&quot;Capture d&#39;écran du workflow Mini Weather&quot; width=&quot;1206&quot; height=&quot;774&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-400.png 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-812.png 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/PUsg4ENLeT-1206.png 1206w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;optimize-images&quot;&gt;Optimize Images&lt;/h3&gt;
&lt;p&gt;Un &lt;em&gt;FileAction&lt;/em&gt; qui utilise &lt;a href=&quot;https://imageoptim.com/fr&quot;&gt;ImageOptim&lt;/a&gt; en sous-marin (qu&#39;il faudra donc avoir installé avant sur sa machine).&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/optimize-images.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;percent-change&quot;&gt;Percent Change&lt;/h3&gt;
&lt;p&gt;&lt;em&gt;Voir sur &lt;a href=&quot;https://github.com/bradmontgomery/alfred-percent-change&quot;&gt;Github&lt;/a&gt; 🐙&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Attends… si un vendeur me fait une réduc de 15% sur un produit à 786€ ça va au final me coûter… alors le produit en croix… et je retiens 12… plus l&#39;âge de la comtesse… oh et puis merde&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/percent-change.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;reminders-today&quot;&gt;Reminders Today&lt;/h3&gt;
&lt;p&gt;Avoir des choses à faire c&#39;est chiant. Avoir l&#39;app Rappels (Reminders) toujours ouverte c&#39;est chiant. Pouvoir vite fait rajouter des choses et les cocher comme fait c&#39;est mieux.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/reminders-today.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;search-caniuse&quot;&gt;Search CanIUse&lt;/h3&gt;
&lt;p&gt;Dans le genre qui aide les développeurs ce workflow de recherche sur le site &lt;a href=&quot;https://caniuse.com/&quot;&gt;CanIUse&lt;/a&gt; avec suggestions est fort pratique aussi.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/caniuse.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;sequential-paste&quot;&gt;Sequential Paste&lt;/h3&gt;
&lt;p&gt;Il existe plein de logiciels qui gèrent bien mieux le copier/coller séquentiel mais pour le besoin que j&#39;ai ce workflow fait très bien le job (et puis le &lt;em&gt;clipboard history&lt;/em&gt; natif de Alfred est bien complémentaire aussi) et ça me suffit.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/sequential-paste.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;simple-2fa-paste&quot;&gt;Simple 2FA Paste&lt;/h3&gt;
&lt;p&gt;D&#39;habitude, j&#39;utilise la 2FA intégrée dans &lt;em&gt;1Password&lt;/em&gt; mais il arrive que des services ne proposent que l&#39;envoi de code par SMS ou par mail.&lt;/p&gt;
&lt;p&gt;Ce workflow prend en charge les SMS. Il va aller chercher dans vos récents messages le ou les codes 2FA et vous n&#39;aurez plus qu&#39;à choisir le bon.&lt;/p&gt;
&lt;p&gt;Bon là je n&#39;ai pas d&#39;exemple parce que je n&#39;ai pas de messages récents mais je vous laisse imaginer.&lt;/p&gt;
&lt;p&gt;À savoir qu&#39;il existe un &lt;a href=&quot;https://alfred.app/workflows/mayjunejuly/2fa-email-codes/&quot;&gt;workflow similaire&lt;/a&gt; pour les mails mais qui ne se cantonne qu&#39;à &lt;em&gt;Mail.app&lt;/em&gt; et je ne l&#39;utilise pas donc je n&#39;ai pas grand chose à en dire.&lt;/p&gt;
&lt;h3 id=&quot;tapback-message&quot;&gt;Tapback Message&lt;/h3&gt;
&lt;p&gt;Un petit workflow à la con c&#39;est certain mais si comme moi vous utilisez au moins un peu les réponses &lt;em&gt;Tapback&lt;/em&gt; (les réactions avec emojis) sur vos messages et que ça vous emmerde d&#39;aller sur l&#39;app Message, de trouver le message en question, de clic droit et choisir l&#39;emoji alors ce workflow est fait pour vous.&lt;/p&gt;
&lt;p&gt;Répondez donc avec un &lt;em&gt;tapback&lt;/em&gt; sur votre dernier message reçu sans quitter votre clavier en un temps record !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-400.avif 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-812.avif 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-1208.avif 1208w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-400.webp 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-812.webp 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-1208.webp 1208w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-400.png&quot; alt=&quot;Capture d&#39;écran du wokrflow Tapback&quot; width=&quot;1208&quot; height=&quot;644&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-400.png 400w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-812.png 812w, https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/lckFDjkO9n-1208.png 1208w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;unit-converter&quot;&gt;Unit Converter&lt;/h3&gt;
&lt;p&gt;Le web est terni d&#39;une présence américaine constante et honnêtement je pourrais vivre avec si seulement ils utilisaient le système métrique comme tout le monde. Mais non… Bref heureusement que j&#39;ai ce workflow pour faire mes conversions.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/img/unit-converter.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h2 id=&quot;et-encore-c-est-pas-tout&quot;&gt;Et encore… c&#39;est pas tout&lt;/h2&gt;
&lt;p&gt;Je vous ai juste fait une liste des workflows les plus intéressants selon moi mais j&#39;en utilise encore moult qui pour diverses raisons (trop niche, déprécié mais qui fonctionne encore, trop basique, déjà évoqué précédemment, pas encore assez testé, etc) n&#39;apparaitront pas ici. Ce billet est déjà assez long comme ça et m&#39;a pris assez de temps comme ça.&lt;/p&gt;
&lt;p&gt;J&#39;espère que si vous êtes déjà utilisateur d&#39;Alfred, vous aurez découvert quelques trucs sympas, sinon que je vous aurais au moins tenté de vous laisser séduire.&lt;/p&gt;
&lt;p&gt;On se revoit dans 10 ans !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/xxXpRAVl7i-400.webp 400w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2026/02/20/alfred-contre-vents-et-marees/xxXpRAVl7i-400.gif&quot; alt=&quot;Gif de Forrest Gump disant au revoir de la main&quot; width=&quot;400&quot; height=&quot;200&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>To Thac0 or not to Thac0</title>
    <link href="https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/" />
    <updated>2025-12-22T00:00:00Z</updated>
    <id>https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/</id>
    <content type="html">&lt;p&gt;Certainement une des mécaniques les plus controversées parmi les joueurs et joueuses de Donjons et Dragons, le Thac0 continue de diviser aujourd&#39;hui encore. Preuve en est, je vais en remettre une couche.
Spoiler alert : Je déteste !&lt;/p&gt;
&lt;h2 id=&quot;c-est-quoi-le-thac0&quot;&gt;C&#39;est quoi le Thac0 ?&lt;/h2&gt;
&lt;p&gt;Dans les premières versions de Donjons et Dragons (le premier jeu de rôle et le plus connu dans le monde), quand un personnage veut attaquer un monstre, le joueur doit lancer un dé (à 20 faces) pour savoir si son attaque touche le dit monstre et pour ce faire il doit utiliser la mécanique appelée &lt;strong&gt;Thac0&lt;/strong&gt; ou &lt;em&gt;To Hit Armor Class (of) 0&lt;/em&gt; ou encore en bon français &amp;quot;Pour toucher une classe d&#39;armure de 0&amp;quot;.&lt;br&gt;
La class d&#39;armure (CA) étant donc le niveau d&#39;armure d&#39;un personnage/monstre/etc qu&#39;il faut atteindre pour pouvoir prétendre le toucher.&lt;/p&gt;
&lt;p&gt;Dans les premières versions donc, la CA était par défaut de 10 et est descendante, c&#39;est à dire que plus le score de CA était bas, plus il était difficile de toucher avec une attaque.&lt;/p&gt;
&lt;p&gt;Le &lt;strong&gt;thac0&lt;/strong&gt; lui est une valeur fluctuante qui peut changer selon la classe, le niveau, les compétences, les armes, etc de notre personnage.&lt;/p&gt;
&lt;p&gt;Sur le papier tout ça a l&#39;air simple, il suffit à chaque jet de dé de prendre son thac0 et lui soustraire la valeur du dé lancé : &lt;code&gt;Thac0 - D20 = CA touchée&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Par exemple, un personnage qu&#39;on appellera &lt;strong&gt;Takor&lt;/strong&gt;, guerrier humain de niveau 11, aura un thac0 de &lt;code&gt;10&lt;/code&gt; (selon les règles) ce qui est pas mal puisque ça veut dire que sur un d20, il doit faire au moins 10 pour toucher, soit 50% de chance de toucher une CA de 0 (qui est déjà une grosse CA).&lt;/p&gt;
&lt;p&gt;Pas si compliqué, on est d&#39;accord ?&lt;/p&gt;
&lt;h2 id=&quot;sauf-que&quot;&gt;Sauf que…&lt;/h2&gt;
&lt;p&gt;Ça c&#39;est un exemple simple, sur le papier, mais en réalité il y a beaucoup d&#39;autres paramètres contre-intuitifs.&lt;/p&gt;
&lt;p&gt;Notamment les bonus du matériel. Il est très courant pour un personnage de trouver du matériel avec un bonus, tel un &lt;code&gt;bouclier +1&lt;/code&gt;. Ce fameux &lt;code&gt;+1&lt;/code&gt; va donc s&#39;ajouter à la CA et si j&#39;ai une CA de &lt;code&gt;2&lt;/code&gt; et que je rajoute ce bouclier à mon inventaire, ma nouvelle CA sera donc de… &lt;code&gt;1&lt;/code&gt;.&lt;br&gt;
Rappelez-vous, j&#39;ai dit que la CA était descendante ! Suivez un peu !&lt;br&gt;
Bref, donc si je me rajoute des points de CA, son score total va donc diminuer.&lt;/p&gt;
&lt;p&gt;Et là vous vous demandez : &amp;quot;mais si j&#39;ajoute plein de choses qui ajoutent de la CA, je risque de passer sous la barre de &lt;code&gt;0&lt;/code&gt;, non ?! Et bien oui et ce n&#39;est pas rare.&lt;br&gt;
Vous pouvez tomber sur un monstre avec une CA de &lt;code&gt;-5&lt;/code&gt; par exemple. Ce serait clairement à plus haut niveau mais ce n&#39;est pas tellement exceptionnel.&lt;/p&gt;
&lt;p&gt;À côté de ça vous pouvez aussi trouver une &lt;code&gt;épée +2&lt;/code&gt; mais à quoi correspond ce +2 ?! Au touché que diable ! Donc évidemment ça changera indirectement votre thac0 si vous utilisez cette arme pour attaquer.&lt;br&gt;
Je dis &amp;quot;indirectement&amp;quot; puisque dans les faits votre valeur de thac0 reste inchangée, c&#39;est juste un bonus qui viendra changer le résultat final, mais le fait est que si votre thac0 est de &lt;code&gt;10&lt;/code&gt; et que vous utilisez cette arme vous toucherez à partir de là une CA de &lt;code&gt;0&lt;/code&gt; en faisant un &lt;code&gt;8&lt;/code&gt; ou plus sur le dé. Oui de &lt;code&gt;8&lt;/code&gt;, c&#39;est certes +2 mais on est toujours dans un contexte descendant donc on soustrait.&lt;/p&gt;
&lt;p&gt;J&#39;espère que vous commencez à saisir la complexité grandissante mais prenons un cas concret.&lt;/p&gt;
&lt;p&gt;Disons que &lt;strong&gt;Takor&lt;/strong&gt; s&#39;est trouvé une &lt;code&gt;épée +2&lt;/code&gt; et qu&#39;il s&#39;est spécialisé dans les épées ce qui lui confère un &lt;code&gt;+1&lt;/code&gt; au touché. Et puis au détour d&#39;un donjon &lt;em&gt;bien sombre&lt;/em&gt; (&lt;code&gt;-4&lt;/code&gt;) il tombe sur un chevalier malfaisant en armure de plate et tout le bordel qui a une CA de &lt;code&gt;-5&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Normalement le joueur n&#39;est pas censé connaître la CA de l&#39;adversaire mais pour le bien de l&#39;exemple et puisque quelqu&#39;un va bien devoir faire le calcul, on va dire qu&#39;il est au courant&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;On a donc un Thac0 de &lt;code&gt;10&lt;/code&gt; de base auquel on va soustraire le &lt;code&gt;+2&lt;/code&gt; de l&#39;épée et le &lt;code&gt;+1&lt;/code&gt; de la compétence de spécialisation, mais on lui rajoute le &lt;code&gt;-4&lt;/code&gt; parce que le combat se passe dans l&#39;obscurité et on aurait pu s&#39;arrêter là si la CA de l&#39;adversaire était de &lt;code&gt;0&lt;/code&gt; mais ce n&#39;est pas le cas donc on va rajouter le &lt;code&gt;-5&lt;/code&gt; de différence, soit donc : &lt;code&gt;10 - (2+1) - (-4) - (-5) = 16&lt;/code&gt;&lt;br&gt;
Il faudra donc faire 16 ou plus sur le d20 d&#39;attaque pour toucher.&lt;/p&gt;
&lt;p&gt;Je ne suis qu&#39;à moitié de mauvaise foi, c&#39;est juste littéralement comme ça que le livre de règles explique les calculs mais dans les faits les joueurs ont développé des méthodes pour simplifier tout ça, notamment des matrices de touché en fonction des armes etc.&lt;/p&gt;
&lt;p&gt;Mais ça n&#39;enlève rien au fait que j&#39;ai toujours trouvé ça inutilement compliqué.&lt;/p&gt;
&lt;h2 id=&quot;mais-ca-c-etait-avant&quot;&gt;Mais ça c&#39;était avant.&lt;/h2&gt;
&lt;p&gt;Depuis la troisième édition de &lt;strong&gt;D&amp;amp;D&lt;/strong&gt;, les règles ont changé et désormais la CA est ascendante et il n&#39;y a plus de thac0.&lt;/p&gt;
&lt;p&gt;Désormais lorsque un personnage veut attaquer un monstre il doit faire : &lt;code&gt;D20 + bonus en tout genre = CA touché&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Disons que si on est dans la même situation qu&#39;avant et qu&#39;on a un &lt;strong&gt;Takor&lt;/strong&gt; avec les mêmes compétences et armes, on aura donc &lt;code&gt;D20 + 2 (épée) + 1 spécialisation - 4 (obscurité) = CA touché&lt;/code&gt;. La CA restant à la discrétion du maître de jeu.&lt;/p&gt;
&lt;p&gt;On est donc sur une base toujours supérieure à 0, principalement basé sur l&#39;addition.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Le `-4` de l&#39;obscurité peut très bien être géré subtilement (et c&#39;est ce que personnellement je fais en tant que MJ), c&#39;est à dire que c&#39;est le MJ qui va rajouter `4`  à la CA de base du monstre au lieu de le soustraire dans le calcul.&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;De nos jours il n&#39;existe plus de jeu, à ma connaissance, utilisant le thac0 (ou équivalent) à l&#39;exception des première et deuxième édition de D&amp;amp;D et autres variantes qui en ont découlé.&lt;/p&gt;
&lt;h2 id=&quot;mais-pourquoi-je-deteste-vraiment-ca&quot;&gt;Mais pourquoi je déteste vraiment ça ?&lt;/h2&gt;
&lt;p&gt;Il est vrai je pourrais juste m&#39;en foutre mais non ce n&#39;est pas juste quelque chose que je n&#39;aime pas. Je le déteste, pour tout ce que ce que cela représente.&lt;/p&gt;
&lt;p&gt;Déjà je déteste quand les gens qui le défendent refusent d&#39;admettre que c&#39;est inutilement compliqué et que ça crée une porte d&#39;entrée non accueillante pour les nouveaux.&lt;/p&gt;
&lt;p&gt;Il faut savoir que le thac0 est juste une mécanique que &lt;strong&gt;Gary Gygax&lt;/strong&gt; (l&#39;un des créateurs de D&amp;amp;D) avait pompé sur des jeux de wargame de l&#39;époque, sauf que dans le contexte des wargames ça avait plus de sens. Ça n&#39;a rien d&#39;original et c&#39;était juste ce qu&#39;il avait trouvé de mieux et le plus simple à intégrer à l&#39;époque. La première édition de D&amp;amp;D n&#39;est pas le Graal, elle n&#39;est pas sans défaut et pour moi le thac0 en est un gros (et y en a d&#39;autres hein, mais les autres je les déteste pas donc ça va).&lt;/p&gt;
&lt;p&gt;Et, peut-être que de par mon métier je me préoccupe beaucoup d&#39;expérience utilisateur et accessibilité mais, les arguments d&#39;en face du type &amp;quot;c&#39;est juste des math basiques&amp;quot; ça marche pas avec moi quand en fait les math basiques sont des additions de valeurs parfois positives, parfois négatives pour obtenir des valeurs qui plus elles sont négatives meilleures elles sont.&lt;/p&gt;
&lt;p&gt;Je pense qu&#39;il y a beaucoup de mépris qui traine là-dedans.&lt;/p&gt;
&lt;p&gt;Je pense qu&#39;il y a le même effet qu&#39;on a lorsque qu&#39;on parle de simplifier l&#39;orthographe française; Ce relent de &amp;quot;Non, on en a chié étant gamin à apprendre toutes ces conneries de règles et exceptions , je suis pas d&#39;accord pour que les générations futures aient la vie facile que je n&#39;ai pas eu !&amp;quot;&lt;/p&gt;
&lt;p&gt;Très vite aussi on tombe dans le mépris des gens moins à l&#39;aise en math, une sorte de &lt;em&gt;gatekeeping&lt;/em&gt; malaisant alors que le jeu de rôle c&#39;est pas des math, c&#39;est de l&#39;imagination avant tout. Ce n&#39;est d&#39;ailleurs probablement pas pour rien si plus le temps passe plus les jeux qui sortent se simplifient et limitent les calculs au maximum.&lt;/p&gt;
&lt;p&gt;Et puis il y a toujours ceux qui disent c&#39;était mieux avant parce qu&#39;ils ont la nostalgie d&#39;un temps perdu. Ils ont passé des années à y jouer, à une époque où il n&#39;y avait que D&amp;amp;D, se sont fait à ces complexités qui sont devenues comme une deuxième nature et ne veulent pas comprendre que, vu le choix énorme de jeux de rôles aujourd&#39;hui, plus personne n&#39;a de temps à perdre dans des complexités superflues.&lt;/p&gt;
&lt;p&gt;Bref… Le thac0 c&#39;est de la merde ! &lt;em&gt;Change my mind!&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/lT5paBABuR-400.avif 400w, https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/lT5paBABuR-577.avif 577w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/lT5paBABuR-400.webp 400w, https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/lT5paBABuR-577.webp 577w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/lT5paBABuR-400.jpeg&quot; alt=&quot;&quot; width=&quot;577&quot; height=&quot;432&quot; srcset=&quot;https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/lT5paBABuR-400.jpeg 400w, https://blog.foojin.com/2025/12/22/to-thac0-or-not-to-thac0/lT5paBABuR-577.jpeg 577w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Sus aux messages audio</title>
    <link href="https://blog.foojin.com/2025/12/16/sus-aux-messages-audio/" />
    <updated>2025-12-16T00:00:00Z</updated>
    <id>https://blog.foojin.com/2025/12/16/sus-aux-messages-audio/</id>
    <content type="html">&lt;p&gt;Je deviens vieux, comme tout le monde, mais même si je me considère progressiste il existe quelque chose en ce bas monde que les générations suivantes font qui a le don de m&#39;énerver : &lt;strong&gt;les messages audio sur les messageries instantanées&lt;/strong&gt;.&lt;/p&gt;
&lt;h2 id=&quot;l-attrait&quot;&gt;L&#39;attrait&lt;/h2&gt;
&lt;p&gt;Je peux comprendre pourquoi les messages audio sont au demeurant intéressants.&lt;/p&gt;
&lt;p&gt;Il y a une époque on écrivait en &amp;quot;langage SMS&amp;quot; parce qu&#39;on était limité en caractères; c&#39;était dégueulasse et pas toujours compréhensible pour tout le monde mais il y avait une raison derrière : l&#39;argent ! 💸&lt;br&gt;
Puis les limites ont sauté et on a pu de nouveau écrire normalement… de belles phrases longues et chiantes.&lt;/p&gt;
&lt;p&gt;Et le message audio est arrivé en rendant beaucoup plus simple et rapide de parler de quelque chose sans écrire un roman à la main, sans même avoir à s&#39;arrêter pour se concentrer ou pour être sûr de ne pas rater une touche. En plus de tout ça, ça règle le problème du ton invisible de l&#39;écrit.&lt;/p&gt;
&lt;p&gt;Franchement, je comprends tout à fait à quel point c&#39;est pratique.&lt;/p&gt;
&lt;h2 id=&quot;mais&quot;&gt;MAIS !&lt;/h2&gt;
&lt;p&gt;C&#39;est surtout pratique en tant qu&#39;émetteur…&lt;/p&gt;
&lt;p&gt;En tant que receveur c&#39;est une toute autre histoire, pour moi tout du moins :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Il faut avoir le temps et être en capacité de pouvoir écouter ce message donc ne pas être dans un endroit bruyant et, si comme moi vous n&#39;aimez pas étaler vos communications personnelles au monde qui vous entoure, trouver un endroit pour y être seul (sauf si j&#39;ai un casque mais c&#39;est rarement le cas).&lt;/li&gt;
&lt;li&gt;L&#39;impossibilité de scanner visuellement une conversation pour retrouver une information particulière, d&#39;ailleurs si les deux parties ne communiquent qu&#39;en messages audio ça devient juste un historique de widgets sans queue ni tête.&lt;/li&gt;
&lt;li&gt;Le message écrit implique implicitement d&#39;aller un peu à l&#39;essentiel ou tout du moins de s&#39;en rapprocher le plus possible. Avec l&#39;audio, plus de limite, alors si votre interlocuteur s&#39;avère être une personne qui aime parler mais surtout s&#39;entendre parler, vous êtes obligé de vous taper l&#39;entièreté du message pour obtenir l&#39;information importante souhaitée. Une vraie torture. Pour moi en tout cas. Tu peux lire en diagonale un message écrit et t&#39;arrêter sur les parties qui t&#39;importent mais tu ne peux pas faire ça sur un message audio.&lt;/li&gt;
&lt;li&gt;Personne ne réécoute ses messages audio avant de les envoyer, avouez ! Si ce message n&#39;a pas été enregistré dans de bonnes conditions (bruit ambiant, articulation, etc), il est probable que je doive me taper l&#39;écoute de tout un message sans jamais comprendre de quoi il s&#39;agit ou d&#39;être en capacité d&#39;en retirer quelconque information importante.&lt;/li&gt;
&lt;li&gt;À cause de toutes ces conditions, quand je vois que j&#39;ai un message audio à consulter mais que je ne suis pas dans de bonnes conditions d&#39;écoute je me dis que je l&#39;écouterai et que j&#39;y répondrais plus tard… sauf que j&#39;oublie plus tard et je finis par ne jamais l&#39;écouter et je me fais embrouiller ensuite.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;suis-je-un-vieux-con&quot;&gt;Suis-je un vieux con ?&lt;/h2&gt;
&lt;p&gt;Je me suis réellement posé la question… est-ce que je suis vraiment en train d&#39;avoir une sorte d&#39;attitude réactionnaire ou bien est-ce une aversion justifiée ?&lt;/p&gt;
&lt;p&gt;Et puis je me suis rendu compte qu&#39;on pouvait très bien avoir &amp;quot;presque&amp;quot; le meilleur des deux mondes en utilisant plutôt le &lt;em&gt;speech-to-text&lt;/em&gt;. Certes je n&#39;entendrai jamais le doux son de ta voix mais je serai tellement plus serein et je ne te détesterai pas, tout en obtenant l&#39;information que je veux.&lt;br&gt;
Et c&#39;est là tout ce qui (m&#39;)importe.&lt;/p&gt;
&lt;p&gt;En fait je crois que je suis juste un con qui n&#39;aime pas qu&#39;on lui impose ce qu&#39;il n&#39;aime pas.&lt;/p&gt;
&lt;p&gt;Mais dites-moi ce que vous en pensez. Ça y est, je suis devenu un gros con réac&#39; d&#39;après vous ?&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>S&#39;amuser avec CSS</title>
    <link href="https://blog.foojin.com/2025/05/26/samuser-avec-css/" />
    <updated>2025-05-26T00:00:00Z</updated>
    <id>https://blog.foojin.com/2025/05/26/samuser-avec-css/</id>
    <content type="html">&lt;p&gt;Une fois par an chez alwaysdata, l&#39;équipe (full remote) se retrouve pour un séminaire d&#39;une semaine, quelque part en France ou ailleurs, dont la destination est tenue secrète jusqu&#39;au dernier moment par les organisateurs et souvent révélée via un petit jeu.&lt;/p&gt;
&lt;h2 id=&quot;l-idee-de-base&quot;&gt;L&#39;idée de base&lt;/h2&gt;
&lt;p&gt;Cette année j&#39;étais un des organisateurs et j&#39;aime bien jouer alors c&#39;est tout naturellement que j&#39;ai proposé de m&#39;occuper de ce petit jeu.&lt;br&gt;
J&#39;avais déjà en tête de faire une pâle copie d&#39;&lt;strong&gt;Ouverture Facile&lt;/strong&gt; (les vrais sachent), ce vieux site d&#39;énigmes directement dans ton navigateur, mais en vachement plus court et plus simple.&lt;br&gt;
L&#39;idée était d&#39;avoir une énigme par page dont la solution mènerait à une page suivante et ainsi de suite jusqu&#39;à arriver sur la page annonçant la destination du séminaire.&lt;/p&gt;
&lt;p&gt;À la base je voulais faire au plus simple parce que je n&#39;avais pas du temps illimité dessus non plus alors je me suis dit que j&#39;allais faire en sorte d&#39;utiliser le moins possible de JavaScript.
Finalement, je me suis tellement pris au jeu que j&#39;ai fait exclusivement sans JS (à une ou deux exceptions près). Des énigmes purement dans le navigateur et basées principalement sur techniques CSS et un peu de HTML.&lt;/p&gt;
&lt;p&gt;Je me suis bien amusé à faire ce petit jeu sans prétention et juste pour le fun.&lt;/p&gt;
&lt;p&gt;Si vous voulez tester ça vous-même et sans spoiler, rendez-vous sur &lt;a href=&quot;https://gooz.alwaysdata.net/seminaire/&quot;&gt;https://gooz.alwaysdata.net/seminaire/&lt;/a&gt; et partez donc à la poursuite du lapin ! Avant de revenir ici.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-warning&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-alert mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Warning&lt;/p&gt;&lt;p&gt;Attention ce petit jeu n&#39;est pas vraiment pas accessible par moment. Je n&#39;ai même pas essayé de tester mais vu ce que j&#39;ai fait à certains endroits c&#39;est certain qu&#39;il ne l&#39;est pas.&lt;/p&gt;
&lt;/div&gt;
&lt;h2 id=&quot;les-enigmes-avec-spoilers&quot;&gt;Les énigmes (avec spoilers)&lt;/h2&gt;
&lt;p&gt;Je voulais partir vraiment tout doucement et graduellement mais augmenter sûrement la difficulté.&lt;/p&gt;
&lt;h3 id=&quot;page-d-accueil&quot;&gt;Page d&#39;accueil&lt;/h3&gt;
&lt;p&gt;Sur cette page je voulais juste mettre en place &amp;quot;l&#39;histoire&amp;quot; du petit lapin à poursuivre et mettre en évidence ce que les joueureuses devront chercher. En l&#39;occurrence un emoji de visage de lapin sur lequel il suffit de cliquer pour passer à la page suivante.&lt;br&gt;
Pas vraiment une énigme en soi ici, j&#39;en conviens, disons que c&#39;est juste une case départ.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-1824.avif 1824w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-1824.webp 1824w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-400.png&quot; alt=&quot;&quot; width=&quot;1824&quot; height=&quot;1132&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/G8qg3WHywZ-1824.png 1824w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;enigme-1&quot;&gt;Énigme 1&lt;/h3&gt;
&lt;p&gt;Pour peu qu&#39;on puisse appeler ça une énigme… j&#39;affiche 3 emojis dont 1 de lapin. Trouver le lapin est au delà du jeu d&#39;enfant à ce stade.&lt;br&gt;
Il suffit de toujours cliquer dessus pour passer à la suite.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-2068.avif 2068w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-2068.webp 2068w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-400.png&quot; alt=&quot;&quot; width=&quot;2068&quot; height=&quot;1056&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/hrcRlJ-D_d-2068.png 2068w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;enigme-2&quot;&gt;Énigme 2&lt;/h3&gt;
&lt;p&gt;Toujours la même chose sauf qu&#39;on multiplie presque par 10 le nombre d&#39;emojis affichés.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-2494.avif 2494w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-2494.webp 2494w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-400.png&quot; alt=&quot;&quot; width=&quot;2494&quot; height=&quot;1086&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/zz7AoobKkv-2494.png 2494w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;enigme-3&quot;&gt;Énigme 3&lt;/h3&gt;
&lt;p&gt;Re-belote mais on multiplie ça de nouveau par 5… ça commence à devenir laborieux mais l&#39;idée est de faire croire au joueur que ça ne va faire qu&#39;augmenter en nombre, sauf que non.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-2490.avif 2490w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-2490.webp 2490w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-400.png&quot; alt=&quot;&quot; width=&quot;2490&quot; height=&quot;2240&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qiFk96OzAG-2490.png 2490w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;enigme-4&quot;&gt;Énigme 4&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;AH !&lt;/strong&gt; Même nombre d&#39;emojis qu&#39;on a mélangé mais cette fois ils tournent sur eux-même et pas forcément dans le même sens. C&#39;est un poil plus laborieux encore. D&#39;aucun pourrait même dire gerbant.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-2476.avif 2476w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-2476.webp 2476w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-400.png&quot; alt=&quot;&quot; width=&quot;2476&quot; height=&quot;2238&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/75x2th0npR-2476.png 2476w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;enigme-5&quot;&gt;Énigme 5&lt;/h3&gt;
&lt;p&gt;BIM je &lt;em&gt;disrupte&lt;/em&gt; ! Plus d&#39;emoji ! Enfin si mais j&#39;affiche les codes HTML de la même liste qu&#39;avant (mais dans le désordre).&lt;br&gt;
La petite difficulté ici est qu&#39;il existe plusieurs emojis de lapin et qu&#39;il ne faut pas se tromper pour trouver le bon code. Et si vous aviez remarqué l&#39;URL des pages jusque là, qui allait de &lt;code&gt;/1/&lt;/code&gt; à &lt;code&gt;/5/&lt;/code&gt;, j&#39;ai aussi disrupté l&#39;URL de la page suivante. :3&lt;br&gt;
La page &lt;code&gt;/6/&lt;/code&gt; n&#39;existe pas ! MWAHAHAHA 😈
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-2418.avif 2418w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-2418.webp 2418w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-400.png&quot; alt=&quot;&quot; width=&quot;2418&quot; height=&quot;6486&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/91vRXWjevo-2418.png 2418w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;enigme-6&quot;&gt;Énigme 6&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;BAM ! DISRUPTIVISATION !&lt;/strong&gt; Aux chiottes les emojis, on est plus des gamins !&lt;br&gt;
À la place une suite de caractères alphanumériques, en minuscule ou majuscule.
Mais qu&#39;est-ce que ça peut bien vouloir dire ?!&lt;/p&gt;
&lt;p&gt;Réponse : &lt;strong&gt;Rien&lt;/strong&gt; !&lt;/p&gt;
&lt;p&gt;Il suffit de sélectionner tous ces caractères pour mettre en exergue certains d&#39;entre eux ce qui vous permettra de construire l&#39;URL de la prochaine énigme !&lt;/p&gt;
&lt;p&gt;J&#39;ai juste styler le pseudo-element &lt;code&gt;::selection&lt;/code&gt; de manière bien peu accessible. Ne reproduisez pas ça chez vous.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-2652.avif 2652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-2652.webp 2652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-400.png&quot; alt=&quot;&quot; width=&quot;2652&quot; height=&quot;2213&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/a-3sewxAPQ-2652.png 2652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;enigme-7&quot;&gt;Énigme 7&lt;/h3&gt;
&lt;p&gt;C&#39;est le retour des emojis, je sais qu&#39;ils vous manquaient.&lt;br&gt;
C&#39;est une de celles qui ont donné le plus de fil à retordre à mes joueurs (béta-testeurs ou officiels).&lt;/p&gt;
&lt;p&gt;Cette photo de &lt;em&gt;Christian Clavier&lt;/em&gt; n&#39;est évidemment pas là pour faire joli. Elle est là, avec le petit texte, pour donner un indice sur la façon de résoudre cette énigme.&lt;/p&gt;
&lt;p&gt;Il suffit de naviguer entre les emojis, lien après lien, en utilisant le &lt;strong&gt;clavier&lt;/strong&gt; pour trouver la crotte qui cache le &lt;strong&gt;trou&lt;/strong&gt; de l&#39;entrée du terrier !
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-2504.avif 2504w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-2504.webp 2504w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-400.png&quot; alt=&quot;&quot; width=&quot;2504&quot; height=&quot;3318&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/U3B3-7d6kc-2504.png 2504w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Pour ce faire, rien de plus simple, au &lt;code&gt;:focus-visible&lt;/code&gt; je cache l&#39;emoji de crotte et affiche un autre emoji à la place.&lt;/p&gt;
&lt;h3 id=&quot;enigme-8&quot;&gt;Énigme 8&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;BOM DISRUPTANCE !1!&lt;/strong&gt;
Cette fois-ci l&#39;énigme est en deux parties.&lt;/p&gt;
&lt;p&gt;La première consiste à trouver comment faire &lt;strong&gt;assez&lt;/strong&gt; de lumière et assez longtemps en sélectionnant les objets adéquats.
Et évidemment il faut faire du feu grâce à la bougie. Mais que faire brûler ? Le journal ? ça fonctionnera pas assez longtemps. Les bûches ? Ça risque d&#39;être compliqué de brûler des bûches avec une bougie.
Il fallait en effet choisir les 3 pour faire un feu qui tienne la route !
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-1650.avif 1650w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-1650.webp 1650w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-400.png&quot; alt=&quot;&quot; width=&quot;1650&quot; height=&quot;1120&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/V2tV6iZ4Ys-1650.png 1650w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
Ce faisant, vous activez la deuxième partie de l&#39;énigme en affichant plusieurs emojis de feu bizarrement affichés. On vous invite alors à &lt;em&gt;adapter&lt;/em&gt; votre vue !
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-2742.avif 2742w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-2742.webp 2742w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-400.png&quot; alt=&quot;&quot; width=&quot;2742&quot; height=&quot;2242&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/4zJ0jecCkK-2742.png 2742w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
Et oui, il suffit de redimensionner la fenêtre de votre navigateur (ou zoomer, ça marche aussi) pour que les flammes finissent par former un nombre, le nombre de l&#39;URL de la prochaine étape.&lt;/p&gt;
&lt;p&gt;Si cette page est à l&#39;URL &lt;code&gt;/800/&lt;/code&gt; ce n&#39;est pas pour rien non plus. En mettant le viewport en 800px de largeur vous arriviez directement à la bonne taille. Mais il semble que personne n&#39;ait remarqué ça.&lt;/p&gt;
&lt;p&gt;En bref, rien de bien folichon, juste un layout en flexbox responsive.
Par contre pour les objets à sélectionner de la première partie, c&#39;est un peu plus pointu.&lt;/p&gt;
&lt;p&gt;Pour s&#39;assurer en CSS que des items en particulier soient sélectionnés, mais pas les autres, afin d&#39;afficher l&#39;élément suivant on doit faire des trucs un poil &lt;em&gt;borderline&lt;/em&gt; comme ça :&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.bag:has(#sandwich:not(:checked) + #newspaper:checked + #wood:checked + #mirror:not(:checked) + #candy:not(:checked) + #candle:checked + #notebook:not(:checked)) + .dark&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--text-1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;user-select&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; initial&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

	&lt;span class=&quot;token selector&quot;&gt;&amp;amp; .fire-wrapper&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;visibility&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; visible&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Ne faites pas ça non plus chez vous. C&#39;est moche.&lt;/p&gt;
&lt;h3 id=&quot;enigme-9&quot;&gt;Énigme 9&lt;/h3&gt;
&lt;p&gt;On arrive au bout avec une dernière énigme montrant plusieurs images dont le but est de faire penser à une ville :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;une chouette&lt;/li&gt;
&lt;li&gt;un vieux portrait crayonné&lt;/li&gt;
&lt;li&gt;une plante jaune&lt;/li&gt;
&lt;li&gt;Emily (de la série Emily in Paris) un verre à la main&lt;/li&gt;
&lt;li&gt;un blason&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Une fois que vous avez la réponse vous n&#39;avez plus qu&#39;à la rentrer dans le formulaire en bas de page.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-400.avif 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-812.avif 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-1400.avif 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-2256.avif 2256w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-400.webp 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-812.webp 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-1400.webp 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-2256.webp 2256w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-400.png&quot; alt=&quot;&quot; width=&quot;2256&quot; height=&quot;4735&quot; srcset=&quot;https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-400.png 400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-812.png 812w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-1400.png 1400w, https://blog.foojin.com/2025/05/26/samuser-avec-css/qe6o0_Rhba-2256.png 2256w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
Cette fois-ci rien de technique donc, juste de la &amp;quot;culture&amp;quot;.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;La chouette est un emblème de la ville&lt;/li&gt;
&lt;li&gt;Le portrait est celui de Gustave Eiffel qui est né dans cette ville&lt;/li&gt;
&lt;li&gt;La plante j&#39;aune n&#39;est pas du colza mais de la moutarde&lt;/li&gt;
&lt;li&gt;Emily tient un vers de kir cassis&lt;/li&gt;
&lt;li&gt;Le blason est celui du Duc de Bourgogne.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;La bonne réponse est donc &lt;strong&gt;Dijon&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;C&#39;est sur cette page que j&#39;ai utilisé &lt;strong&gt;enfin&lt;/strong&gt; du JS pour gérer le formulaire de réponse. J&#39;ai même été jusque crypter la bonne réponse dans le code pour contrer les petits malins du &lt;code&gt;CTRL/⌘+U&lt;/code&gt; ou des devtools.&lt;/p&gt;
&lt;p&gt;Ah, il y a aussi du JS sur la dernière page, celle des félicitations, pour faire les feux d&#39;artifice mais là c&#39;est purement décoratif.&lt;/p&gt;
&lt;h2 id=&quot;le-setup&quot;&gt;Le Setup&lt;/h2&gt;
&lt;p&gt;Je n&#39;ai pas utilisé grand chose pour faire tout ça, c&#39;était surtout dans le but de me faire gagner du temps.&lt;/p&gt;
&lt;h3 id=&quot;11ty&quot;&gt;11ty&lt;/h3&gt;
&lt;p&gt;Si vous êtes habitués des lieux vous savez l&#39;amour que je porte à &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;11ty&lt;/a&gt; et encore une fois je l&#39;ai utilisé pour ce petit projet. C&#39;était clairement pas indispensable mais comme je voulais créer plusieurs pages fantômes et une 404 c&#39;était plus simple de passer par un template géré par &lt;strong&gt;11ty&lt;/strong&gt;.&lt;/p&gt;
&lt;h3 id=&quot;open-props&quot;&gt;Open-props&lt;/h3&gt;
&lt;p&gt;Ce petit projet &lt;a href=&quot;https://open-props.style/&quot;&gt;Open-Props&lt;/a&gt; créé par &lt;a href=&quot;https://nerdy.dev/&quot;&gt;Adam Argyle&lt;/a&gt; et que j&#39;apprécie beaucoup propose tout un set de CSS Custom Properties préfaites et un theme de rendu par défaut que j&#39;ai donc utilisé ici.
Très pratique pour des petits projets comme celui-là, ou encore des prototypes. Je recommande.&lt;/p&gt;
&lt;p&gt;Et c&#39;est tout !!!
Le reste c&#39;est ~200 lignes de CSS maison,  ~60 lignes de JS (dont la moitié ne sert littéralement à rien d&#39;autre qu&#39;à faire joli), du setup de 11ty et &lt;em&gt;YOLO&lt;/em&gt; !&lt;/p&gt;
&lt;h2 id=&quot;mots-de-fin&quot;&gt;Mots de fin&lt;/h2&gt;
&lt;p&gt;Je me suis vraiment beaucoup amusé à trouver et implémenter des énigmes en utilisant du CSS ou du HTML. C&#39;était un bon exercice de sortir un peu des sentiers battus je trouve.&lt;br&gt;
J&#39;ai fait ça vraiment rapidement, étalé sur une semaine et je pense qu&#39;avec plus de temps j&#39;aurais pu trouver d&#39;autres trucs cools à faire mais je pense aussi que pour faire un jeu comme ça auquel tout le monde peut jouer ça devient très compliqué puisque c&#39;était carrément pas accessible aux non-voyants par exemple.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Comment déployer son site statique 11ty depuis Github vers alwaysdata</title>
    <link href="https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/" />
    <updated>2025-04-11T00:00:00Z</updated>
    <id>https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/</id>
    <content type="html">&lt;p&gt;Utiliser un moteur de site statique c&#39;est sympa, léger, économique mais la mise en ligne des dernières mises à jour finit souvent comme un processus manuel, parfois laborieux, souvent répétitif.
Mais comme pour tout processus répétitif, on se sent mieux quand on automatise des choses.&lt;/p&gt;
&lt;p&gt;La &lt;a href=&quot;https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/&quot;&gt;dernière fois&lt;/a&gt; je vous avais parlé de comment j&#39;utilisais &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;11ty&lt;/a&gt; comme moteur et &lt;a href=&quot;https://obsidian.md/&quot;&gt;Obsidian&lt;/a&gt; comme éditeur de contenu mais j&#39;avais occulté sur le processus de mise en ligne et il est temps d&#39;y remédier.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Note&lt;/p&gt;&lt;p&gt;Par soucis de simplicité et parce que c&#39;est ce que je connais le mieux, je vais décrire mon processus avec un repository Git hébergé sur &lt;a href=&quot;https://github.com/&quot;&gt;Github&lt;/a&gt; et un hébergement du site chez &lt;a href=&quot;https://www.alwaysdata.com/&quot;&gt;alwaysdata&lt;/a&gt; mais le principe est a priori transposable dans des contextes différents.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Comme on avait vu la dernière fois ce blog est sur un repository &lt;strong&gt;Git&lt;/strong&gt; et à chaque nouvelle mise à jour, je fais donc un &lt;code&gt;commit&lt;/code&gt; que je &lt;code&gt;push&lt;/code&gt; ensuite sur &lt;strong&gt;Github&lt;/strong&gt;.&lt;br&gt;
Maintenant il faut trouver un moyen de dire à &lt;strong&gt;Github&lt;/strong&gt; que, dès qu&#39;il reçoit une mise à jour, il lui faudra envoyer un message au serveur d&#39;hébergement du site pour que ce dernier puisse récupérer ces mises à jours et les mettent en ligne.
Pour ce faire, il existe les &lt;em&gt;webhooks&lt;/em&gt;.&lt;/p&gt;
&lt;h2 id=&quot;configuration-d-un-site-pour-diffuser-vos-pages-statiques-chez-alwaysdata&quot;&gt;Configuration d&#39;un site pour diffuser vos pages statiques chez alwaysdata&lt;/h2&gt;
&lt;p&gt;Servir un site statique sur alwaysdata est sûrement ce qu&#39;il y a de plus simple.&lt;/p&gt;
&lt;p&gt;Rendez-vous sur l&#39;admin d&#39;alwaysdata dans la section &lt;code&gt;Web &amp;gt; Sites&lt;/code&gt; et cliquez sur le bouton &amp;quot;Ajouter un site&amp;quot;, puis :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;adresse&lt;/strong&gt;, mettez l&#39;adresse URL à laquelle  vous souhaitez que votre site apparaisse&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;type&lt;/strong&gt;, choisissez &lt;code&gt;Fichiers statiques&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;répertoire de travail&lt;/strong&gt;, mettez &lt;code&gt;dossierDeVotreSite/dossierDeBuild&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Le &lt;code&gt;dossierDeVotreSite&lt;/code&gt; est le dossier dans lequel vous aurez cloné votre repository &lt;strong&gt;Git&lt;/strong&gt;, donc par défaut le nom du projet sur &lt;strong&gt;Github&lt;/strong&gt;.&lt;br&gt;
Le &lt;code&gt;dossierDeBuild&lt;/code&gt; est déterminé par la façon dont vous avez configuré votre site &lt;strong&gt;11ty&lt;/strong&gt;, chez moi c&#39;est &lt;code&gt;_site&lt;/code&gt; mais ça pourrait tout autant être &lt;code&gt;dist&lt;/code&gt; ou &lt;code&gt;build&lt;/code&gt; ou &lt;code&gt;foobar&lt;/code&gt;, etc. Vérifiez donc ça directement sur la config de votre projet.&lt;/p&gt;
&lt;p&gt;Pour finir validez ça et laissons ça de côté pour passer à la suite.&lt;/p&gt;
&lt;h2 id=&quot;setup-du-webhook-chez-alwaysdata&quot;&gt;Setup du webhook chez alwaysdata&lt;/h2&gt;
&lt;p&gt;Le webhook est un nouveau service qu&#39;il vous faudra ajouter et activer vous même sur votre compte alwaysdata.&lt;/p&gt;
&lt;p&gt;Pour ça, il vous faudra donc :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Ajouter une library de gestion de webhooks comme &lt;a href=&quot;https://github.com/adnanh/webhook/&quot;&gt;adnanh/webhook&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Créer un site &lt;code&gt;webhook&lt;/code&gt; sur votre compte &lt;strong&gt;alwaysdata&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;installer-la-library&quot;&gt;Installer la library&lt;/h3&gt;
&lt;p&gt;Connectez-vous en SSH sur votre compte &lt;strong&gt;alwaysdata&lt;/strong&gt; pour créer un dossier &lt;code&gt;webhook&lt;/code&gt; et y installer la library :&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;$ &lt;span class=&quot;token function&quot;&gt;mkdir&lt;/span&gt; webhook
$ &lt;span class=&quot;token function&quot;&gt;wget&lt;/span&gt; -O- https://github.com/adnanh/webhook/releases/download/2.8.0/webhook-linux-amd64.tar.gz &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;tar&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-xz&lt;/span&gt; --strip-components&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token parameter variable&quot;&gt;-C&lt;/span&gt; webhook&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;creer-un-site-webhook-sur-alwaysdata&quot;&gt;Créer un site webhook sur alwaysdata&lt;/h3&gt;
&lt;p&gt;Rendez-vous sur l&#39;admin d&#39;alwaysdata dans la section &lt;code&gt;Web &amp;gt; Sites&lt;/code&gt; et cliquez sur le bouton &amp;quot;Ajouter un site&amp;quot;, puis :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;adresse&lt;/strong&gt;, mettez &lt;code&gt;&amp;lt;votreNomDeCompte&amp;gt;.alwaysdata.net/webhook&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;type&lt;/strong&gt;, choisissez &lt;code&gt;Programme utilisateur&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;commande&lt;/strong&gt;, mettez-y la commande qui devra être exécuté &lt;code&gt;./webhook -port $PORT -hooks ./hooks.json -logfile webhook.log&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;répertoire de travail&lt;/strong&gt;, mettez &lt;code&gt;webhook&lt;/code&gt; (ou le nom du dossier où vous avez installé la library webhook de l&#39;étape d&#39;avant)&lt;/li&gt;
&lt;li&gt;Dans l&#39;onglet &lt;strong&gt;SSL&lt;/strong&gt;, &lt;em&gt;Forcez le HTTPS&lt;/em&gt; si ce n&#39;est pas déjà le cas&lt;/li&gt;
&lt;li&gt;Dans l&#39;onglet &lt;strong&gt;Avancé&lt;/strong&gt;, &lt;em&gt;Excluez le chemin&lt;/em&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-400.avif 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-812.avif 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-1170.avif 1170w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-400.webp 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-812.webp 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-1170.webp 1170w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-400.png&quot; alt=&quot;Configuration principale du site&quot; width=&quot;1170&quot; height=&quot;1239&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-400.png 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-812.png 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/GxnVGhKikC-1170.png 1170w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-400.avif 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-812.avif 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-1024.avif 1024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-400.webp 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-812.webp 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-1024.webp 1024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-400.png&quot; alt=&quot;Configuration SSL du site&quot; width=&quot;1024&quot; height=&quot;186&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-400.png 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-812.png 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/gOjdrFHwpD-1024.png 1024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-400.avif 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-812.avif 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-1024.avif 1024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-400.webp 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-812.webp 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-1024.webp 1024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-400.png&quot; alt=&quot;Configuration avancée du site&quot; width=&quot;1024&quot; height=&quot;281&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-400.png 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-812.png 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/34WeL5kWE6-1024.png 1024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;On en a pas vraiment fini avec &lt;strong&gt;alwaysdata&lt;/strong&gt; mais il nous faudra y revenir plus tard. Maintenant parlons de &lt;strong&gt;Github&lt;/strong&gt;.&lt;/p&gt;
&lt;h2 id=&quot;setup-de-github&quot;&gt;Setup de Github&lt;/h2&gt;
&lt;p&gt;Rendez-vous donc sur la page Github de votre projet, puis allez sur l&#39;onglet &amp;quot;Settings&amp;quot;, ensuite dans le menu de gauche, dans la section &amp;quot;Code and automation&amp;quot;, allez sur &amp;quot;Webhooks&amp;quot; et enfin cliquez sur le bouton &amp;quot;Add Webhook&amp;quot;.&lt;/p&gt;
&lt;p&gt;À partir de là :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;Payload URL&lt;/strong&gt;, mettez &lt;code&gt;https://&amp;lt;votreNomDeCompte&amp;gt;.alwaysdata.net/webhook/hooks/deploy&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;Content type&lt;/strong&gt;, choisissez &lt;code&gt;application/json&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;strong&gt;Secret&lt;/strong&gt;, tapez un mot de passe (et vous allez me faire le plaisir de le noter dans un gestionnaire de mots de passe, parce qu&#39;on va s&#39;en resservir très vite et que, si jamais un truc foire, vous n&#39;ayez pas à tout refaire parce que vous ne vous souvenez plus de celui-là)&lt;/li&gt;
&lt;li&gt;Gardez le reste par défaut (sauf si vous souhaitez faire autre chose)&lt;/li&gt;
&lt;li&gt;Et Ajoutez ce webhook nouvellement configuré.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-400.avif 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-812.avif 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-1400.avif 1400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-2836.avif 2836w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-400.webp 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-812.webp 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-1400.webp 1400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-2836.webp 2836w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-400.png&quot; alt=&quot;Configuration du webhook sur Github&quot; width=&quot;2836&quot; height=&quot;1752&quot; srcset=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-400.png 400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-812.png 812w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-1400.png 1400w, https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/56exCTMqgn-2836.png 2836w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;On pourrait naïvement croire que c&#39;est fini mais non. À ce stade chaque nouveau push va en effet envoyer une requête au serveur &lt;strong&gt;alwaysdata&lt;/strong&gt; mais côté serveur il n&#39;y a rien qui permette d&#39;authentifier la requête comme légitime, ni dise quoi faire une fois cette requête reçue.&lt;/p&gt;
&lt;h2 id=&quot;configuration-du-webhook-sur-alwaysdata&quot;&gt;Configuration du webhook sur alwaysdata&lt;/h2&gt;
&lt;h3 id=&quot;authentification-et-configuration&quot;&gt;Authentification et configuration&lt;/h3&gt;
&lt;p&gt;Vous allez donc devoir créer un fichier &lt;code&gt;hooks.json&lt;/code&gt; de configuration. Pour ce faire, soit vous vous connectez en SSH sur le serveur et l&#39;ajoutez à la main, soit vous créez ce fichier localement et l&#39;envoyez sur le serveur par SFTP. Peu importe vraiment, ce qui compte c&#39;est que ce fichier existe sur le serveur au final.&lt;/p&gt;
&lt;p&gt;Dans mon cas, et comme stipulé dans la commande à exécuter de la configuration du site &lt;code&gt;webhook&lt;/code&gt;, je l&#39;ai mis dans le dossier &lt;code&gt;webhook&lt;/code&gt;. Ce n&#39;est pas obligatoire mais si vous faites différemment pensez à bien uniformiser ça partout.&lt;/p&gt;
&lt;p&gt;Ce fichier json devra ressembler à ceci :&lt;/p&gt;
&lt;pre class=&quot;language-json&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;id&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;deploy&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;execute-command&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;/home/votreNomDeCompte/webhook/deploy.sh&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;command-working-directory&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;/home/votreNomDeCompte&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;trigger-signature-soft-failures&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;pass-arguments-to-command&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;&quot;source&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;payload&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;repository.name&quot;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;&quot;source&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;payload&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;repository.clone_url&quot;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;&quot;source&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;payload&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;head_commit.id&quot;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;trigger-rule&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;and&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          &lt;span class=&quot;token property&quot;&gt;&quot;match&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
            &lt;span class=&quot;token property&quot;&gt;&quot;type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;value&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;token property&quot;&gt;&quot;value&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;refs/heads/main&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
            &lt;span class=&quot;token property&quot;&gt;&quot;parameter&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
              &lt;span class=&quot;token property&quot;&gt;&quot;source&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;payload&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
              &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ref&quot;&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          &lt;span class=&quot;token property&quot;&gt;&quot;or&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
              &lt;span class=&quot;token property&quot;&gt;&quot;match&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
                &lt;span class=&quot;token property&quot;&gt;&quot;type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;payload-hmac-sha1&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;token property&quot;&gt;&quot;secret&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;VotreSuperMotDePasseQueVousAvezNotéDansVotreGestionaire&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
                &lt;span class=&quot;token property&quot;&gt;&quot;parameter&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
                  &lt;span class=&quot;token property&quot;&gt;&quot;source&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;header&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
                  &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;X-Hub-Signature&quot;&lt;/span&gt;
                &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
              &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;À noter que :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Pour la clé &lt;code&gt;id&lt;/code&gt;, mettez donc ce que vous voulez mais je conseille de donner le même nom que le nom de votre fichier de commande ci-après&lt;/li&gt;
&lt;li&gt;Pour la clé &lt;code&gt;execute-command&lt;/code&gt;, choisissez le chemin et le nom de fichier &lt;code&gt;sh&lt;/code&gt; que vous souhaitez. Par soucis de simplicité je garde tout dans le dossier &lt;code&gt;webhook&lt;/code&gt; mais ce n&#39;est pas obligatoire.&lt;/li&gt;
&lt;li&gt;Si votre branche principale n&#39;est pas &lt;code&gt;main&lt;/code&gt; mais &lt;code&gt;master&lt;/code&gt;, pensez alors à changer &lt;code&gt;&amp;quot;value&amp;quot;: &amp;quot;refs/heads/main&amp;quot;,&lt;/code&gt; par &lt;code&gt;&amp;quot;value&amp;quot;: &amp;quot;refs/heads/master&amp;quot;,&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Et si vous avez plusieurs sites 11ty à déployer de la même façon, vous pourrez juste modifier la partie &lt;code&gt;trigger-rule&lt;/code&gt; et y ajouter une nouvelle authentification :&lt;/p&gt;
&lt;pre class=&quot;language-json&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token property&quot;&gt;&quot;or&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	  &lt;span class=&quot;token property&quot;&gt;&quot;match&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;payload-hmac-sha1&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;secret&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;MotDePasseDeMonSite1&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;parameter&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		  &lt;span class=&quot;token property&quot;&gt;&quot;source&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;header&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		  &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;X-Hub-Signature&quot;&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
	  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	  &lt;span class=&quot;token property&quot;&gt;&quot;match&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;payload-hmac-sha1&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;secret&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;MotDePasseDeMonSite2&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;parameter&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		  &lt;span class=&quot;token property&quot;&gt;&quot;source&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;header&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		  &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;X-Hub-Signature&quot;&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
	  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Notez donc que la seule différence entre les deux entrées sera le &lt;code&gt;secret&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;On a donc désormais l&#39;authentification en place et la commande à éxécuter, sauf que si vous suivez bien ce fichier &lt;code&gt;deploy.sh&lt;/code&gt; n&#39;existe pas (encore).&lt;/p&gt;
&lt;h3 id=&quot;configuration-du-deploiement&quot;&gt;Configuration du déploiement&lt;/h3&gt;
&lt;p&gt;Que vous suiviez ma façon de faire en créant un fichier &lt;code&gt;webhook/deploy.sh&lt;/code&gt; ou que vous préfériez faire à votre sauce, faites dans tous les cas un nouveau fichier &lt;em&gt;.sh&lt;/em&gt; dans lequel vous allez y écrire la ou les commandes à éxécuter quand un nouveau push à été notifié.&lt;/p&gt;
&lt;p&gt;Dans le cas d&#39;un site fait avec &lt;strong&gt;11ty&lt;/strong&gt;, je propose donc un simple script comme suit :&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;&lt;span class=&quot;token shebang important&quot;&gt;#!/bin/bash&lt;/span&gt;

&lt;span class=&quot;token assign-left variable&quot;&gt;NAME&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token variable&quot;&gt;$1&lt;/span&gt;

&lt;span class=&quot;token assign-left variable&quot;&gt;DEST_DIR&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token variable&quot;&gt;${&lt;span class=&quot;token environment constant&quot;&gt;HOME&lt;/span&gt;}&lt;/span&gt;/&lt;span class=&quot;token variable&quot;&gt;${NAME&lt;span class=&quot;token operator&quot;&gt;,,&lt;/span&gt;}&lt;/span&gt;

&lt;span class=&quot;token builtin class-name&quot;&gt;cd&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;${DEST_DIR}&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;git&lt;/span&gt; pull origin main &lt;span class=&quot;token parameter variable&quot;&gt;--rebase&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; ci &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; run build&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Dans ce script on y récupère le nom du repository via &lt;code&gt;NAME&lt;/code&gt; qui dans mon cas s&#39;avère être aussi le nom du dossier où mon site &lt;strong&gt;11ty&lt;/strong&gt; est cloné. Ce n&#39;est pas obligatoire mais si comme moi vous vous retrouvez avec plusieurs sites &lt;strong&gt;11ty&lt;/strong&gt; de la sorte vous pourrez utiliser le même script de déploiement pour tous vos sites au lieu de le dupliquer, mais c&#39;est à vous de voir.&lt;/p&gt;
&lt;p&gt;Donc ce script va, depuis votre &lt;em&gt;home&lt;/em&gt;, :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Aller dans le dossier du projet&lt;/li&gt;
&lt;li&gt;Mettre à jour sa codebase en allant &lt;code&gt;pull --rebase&lt;/code&gt; les modifications récentes&lt;/li&gt;
&lt;li&gt;Faire un &lt;code&gt;npm i&lt;/code&gt; pour installer les nouvelles dépendances le cas échéant&lt;/li&gt;
&lt;li&gt;Faire un &lt;code&gt;npm run build&lt;/code&gt; pour générer les changements opérés dans le dernier &lt;code&gt;push&lt;/code&gt; et les publier&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Pour finir il vous faudra donner les droits d&#39;exécution à ce script alors connectez-vous en SSH sur le serveur &lt;strong&gt;alwaysdata&lt;/strong&gt; et tapez &lt;code&gt;chmod +x path/to/deploy.sh&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Et voilà ! Normalement si tout s&#39;est bien passé vous devriez pouvoir faire un petit test en faisant un &lt;code&gt;push&lt;/code&gt; de modifications mineures et voir ces changements apparaitre.&lt;/p&gt;
&lt;h2 id=&quot;troubleshooting&quot;&gt;Troubleshooting&lt;/h2&gt;
&lt;p&gt;Si jamais dans les 2 minutes (et encore je suis large) vous ne voyez pas vos modifications en ligne il s&#39;est probablement passé quelque chose d&#39;imprévu.&lt;br&gt;
Dans ce cas, je vous invite à aller lire les logs dans le fichier &lt;code&gt;webhook/webhook.log&lt;/code&gt; sur le serveur &lt;strong&gt;alwaysdata&lt;/strong&gt;. Vous devriez y trouver une réponse assez rapidement. Je ne vais malheureusement pas trop pouvoir vous aider plus que ça étant donné la diversité des problèmes possibles que vous pourriez rencontrer.&lt;/p&gt;
&lt;p&gt;J&#39;espère en tout cas que tout ça vous sera utile. ❤️&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eleventy devant, Obsidian derrière</title>
    <link href="https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/" />
    <updated>2025-02-03T00:00:00Z</updated>
    <id>https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/</id>
    <content type="html">&lt;p&gt;Depuis que je suis passé de &lt;strong&gt;Ghost&lt;/strong&gt; à &lt;strong&gt;Eleventy&lt;/strong&gt; quelque chose me manquait dans le processus de publication : la simplicité ! Il fallait que j&#39;y remédie. Mais revenons un peu sur mon &lt;em&gt;setup&lt;/em&gt; pour &lt;strong&gt;Eleventy&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Avec &lt;a href=&quot;https://ghost.org/&quot;&gt;Ghost&lt;/a&gt; j&#39;avais une plateforme complète qui gérait tout toute seule du début à la fin.&lt;br&gt;
En passant à &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt; j&#39;ai gagné en légèreté, rapidité et simplicité de la stack mais j&#39;ai un peu perdu en simplicité d&#39;utilisation et en fonctionnalité.&lt;/p&gt;
&lt;p&gt;J&#39;ai réduit en 3 étapes essentielles le workflow classique pour publier un nouveau billet :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;L&#39;écriture du billet&lt;/li&gt;
&lt;li&gt;La génération des pages web&lt;/li&gt;
&lt;li&gt;La publication (ou mettre en ligne si vous préférez)&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Je ne vais pas parler de la génération des pages, c&#39;est ben tout le but d&#39;utiliser Eleventy, c&#39;est inhérent au projet. Le simple fait de l&#39;utiliser suffit à résoudre ce problème.&lt;/p&gt;
&lt;h2 id=&quot;la-publication&quot;&gt;La publication&lt;/h2&gt;
&lt;p&gt;Je pense ne pas me tromper en disant que c&#39;est l&#39;étape la plus perturbante pour quelqu&#39;un qui fait la migration depuis un CMS. &lt;strong&gt;11ty&lt;/strong&gt; n&#39;est &lt;strong&gt;pas&lt;/strong&gt; un CMS, c&#39;est un moteur de génération de pages web. Ça veut donc dire qu&#39;évidemment vous n&#39;aurez pas d&#39;interface &lt;em&gt;wysiwyg&lt;/em&gt; ou autre pour écrire vos billets (mais ça on y reviendra plus tard) mais aussi que rien ne mettra en ligne vos pages web générées.&lt;/p&gt;
&lt;p&gt;Générer des pages avec &lt;strong&gt;11ty&lt;/strong&gt; c&#39;est une seule commande : &lt;code&gt;npm run build&lt;/code&gt;. Ça peut paraitre simple sauf que…&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Soit vous écrivez vos billets directement sur le serveur web où est hébergé votre site, auquel cas effectivement ce sera simple mais franchement… vous ne devriez pas. Vous n&#39;avez aucune garantie de sauvegarde. Et ça c&#39;est moche.&lt;/li&gt;
&lt;li&gt;Soit vous écrivez vos billets et vous générez les pages sur votre machine puis vous faites ensuite un transfert via (s)FTP ou autre des fichiers générés, auquel cas c&#39;est quand même mieux mais franchement vous aimez vous emmerder.&lt;/li&gt;
&lt;li&gt;Soit vous écrivez vos billets sur votre machine mais vous versionnez votre site avec Git (ou autre) puis vous vous connectez au serveur pour faire un &lt;code&gt;git pull&lt;/code&gt; puis &lt;code&gt;npm run build&lt;/code&gt; et là on commence à parler mais il y a toujours une étape manuelle fort chiante.&lt;/li&gt;
&lt;li&gt;Soit vous faites tout comme avant &lt;strong&gt;MAIS&lt;/strong&gt; vous mettez en place un webhook qui va, dès qu&#39;il sait qu&#39;un nouveau commit git a eu lieu, faire un &lt;code&gt;git pull&lt;/code&gt; puis &lt;code&gt;npm run build&lt;/code&gt; tout seul comme un grand et à votre place.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Personnellement, j&#39;ai mis en place le dernier choix. Je ne peux vous dire comment faire ce webhook partout ailleurs mais chez mon hébergeur &lt;a href=&quot;https://www.alwaysdata.com/fr/&quot;&gt;alwaysdata&lt;/a&gt; et avec &lt;strong&gt;Github&lt;/strong&gt; comme gestionnaire de &lt;em&gt;repository&lt;/em&gt; Git j&#39;ai mis en place ça relativement facilement et j&#39;en parle sur ce &lt;a href=&quot;https://blog.foojin.com/2025/04/11/comment-deployer-son-site-statique-11ty-depuis-github-vers-alwaysdata/&quot;&gt;billet&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Depuis dès que je &lt;code&gt;push&lt;/code&gt; des choses sur git ça se retrouve mis en ligne dans les 2-3 minutes au maximum, le temps que tout passe dans les tuyaux et que ça génère les pages.&lt;/p&gt;
&lt;h2 id=&quot;l-ecriture-du-billet&quot;&gt;L&#39;écriture du billet&lt;/h2&gt;
&lt;p&gt;C&#39;est sûrement plus une question de goût personnel, des éditeurs de markdown il y en a pléthore, mais je trouve qu&#39;&lt;a href=&quot;https://obsidian.md/&quot;&gt;Obsidian&lt;/a&gt; est particulièrement bien adapté à ce besoin là. Le confort d&#39;écriture m&#39;y parait idéal tout en permettant une souplesse et une certaine adaptation grâce à ses nombreuses extensions, notamment celle qui permet d&#39;y utiliser &lt;strong&gt;Git&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;D&#39;aucuns pourraient me dire qu&#39;utiliser un éditeur de code modulable, comme &lt;strong&gt;VS Code&lt;/strong&gt;, ferait tout aussi bien le boulot et ils auraient raison mais je trouve que l&#39;interface de VS Code un peu trop encombrée de base et puis j&#39;utilise déjà &lt;strong&gt;Obsidian&lt;/strong&gt; à côté pour mes notes personnelles donc j&#39;aime écrire dedans donc j&#39;ai choisi &lt;strong&gt;Obsidian&lt;/strong&gt;. Il n&#39;y a pas de mauvais choix dans ce cas précis. Choisissez ce avec quoi vous êtes le plus à l&#39;aise.&lt;/p&gt;
&lt;p&gt;Mais revenons sur &lt;strong&gt;Obsidian&lt;/strong&gt;, puisque c&#39;est bien de cet outil dont je veux parler.&lt;/p&gt;
&lt;h3 id=&quot;gerer-un-coffre-avec-git&quot;&gt;Gérer un coffre avec Git&lt;/h3&gt;
&lt;p&gt;Obsidian est capable de gérer n&#39;importe quel dossier de fichiers markdown donc il n&#39;y a rien de particulier à faire de ce côté, faites un nouveau coffre de votre clone &lt;strong&gt;Git&lt;/strong&gt; et ce sera tout.&lt;/p&gt;
&lt;p&gt;Mais pour pouvoir gérer &lt;strong&gt;Git&lt;/strong&gt; depuis &lt;strong&gt;Obsidian&lt;/strong&gt; il vous faudra installer un plugin très judicieusement appelé &amp;quot;Git&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-400.avif 400w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-812.avif 812w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-1400.avif 1400w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-2168.avif 2168w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-400.webp 400w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-812.webp 812w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-1400.webp 1400w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-2168.webp 2168w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-400.png&quot; alt=&quot;Capture de l&#39;extension Git&quot; width=&quot;2168&quot; height=&quot;1444&quot; srcset=&quot;https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-400.png 400w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-812.png 812w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-1400.png 1400w, https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/LW8eaosbuF-2168.png 2168w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Le plugin n&#39;a pas besoin de configuration particulière pour fonctionner, vérifiez peut être que l&#39;option &lt;code&gt;push&lt;/code&gt; automatique ne soit pas activée, sauf si c&#39;est ce que vous souhaitez.&lt;/p&gt;
&lt;h3 id=&quot;un-template-sur-mesure&quot;&gt;Un template sur mesure&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Obsidian&lt;/strong&gt; a une option qui permet de spécifier dans quel dossier les nouvelles notes (fichiers markdown) seront entreposées à leur création. Mais si comme moi votre architecture est un poil particulière, cette option ne suffira pas.&lt;/p&gt;
&lt;p&gt;Mes notes sont classées comme suit &lt;code&gt;/YYYY/MM/DD/titre-du-billet/index.md&lt;/code&gt; et on pourrait vite croire que ce serait vite compliqué de faire ça automatiquement mais que nenni.&lt;/p&gt;
&lt;p&gt;Grâce à la fonctionnalité native &amp;quot;template&amp;quot; d&#39;&lt;strong&gt;Obsidian&lt;/strong&gt; et à une autre extension nommée &amp;quot;templater&amp;quot; on va pouvoir faire de la magie.
Les templates sont assez rudimentaires dans &lt;strong&gt;Obsidian&lt;/strong&gt;, c&#39;est vraiment juste un modèle d&#39;architecture de page vide à remplir à la main ensuite mais le plugin &lt;em&gt;templater&lt;/em&gt;, lui, permet de pousser plus loin en permettant l&#39;auto-remplissage des templates, d&#39;y appliquer des scripts, de faire des ajouts dynamiques, etc.&lt;/p&gt;
&lt;p&gt;Par exemple mon template de billet de blog ressemble à ça :&lt;/p&gt;
&lt;pre class=&quot;language-md&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;&amp;lt;%*
let title = await tp.system.prompt(&quot;Titre du billet&quot;)
titleFolder = title.normalize(&quot;NFD&quot;).replace(/[&#92;u0300-&#92;u036f]/g, &quot;&quot;).replace(/[.,&#92;/#!$%&#92;^&amp;amp;&#92;*;:{}=&#92;-_`~()]/g,&quot;&quot;).trim().replace(/&#92;s+/g, &#39;-&#39;).toLowerCase()
let year = tp.date.now(&#39;YYYY&#39;) 
let month = tp.date.now(&#39;MM&#39;) 
let day = tp.date.now(&#39;DD&#39;) 
let newFolder = &lt;span class=&quot;token code-snippet code keyword&quot;&gt;`/content/${year}/${month}/${day}/${titleFolder}/`&lt;/span&gt; 
await tp.file.move(newFolder + &#39;index&#39;);
&lt;span class=&quot;token title important&quot;&gt;-%&gt;
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/span&gt;
title: &amp;lt;% title %&gt;
date: &amp;lt;% tp.date.now(&#39;YYYY-MM-DD&#39;) %&gt;
featured: img/featured.jpg
featured_author: 
featured_url: 
&lt;span class=&quot;token title important&quot;&gt;tags:
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/span&gt;



&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- excerpt --&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;La partie manifestement scriptée est pour &lt;em&gt;templater&lt;/em&gt;&lt;/p&gt;
&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; title &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; tp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;system&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;prompt&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Titre du billet&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
titleFolder &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; title&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;normalize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;NFD&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;[&#92;u0300-&#92;u036f]&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;[.,&#92;/#!$%&#92;^&amp;amp;&#92;*;:{}=&#92;-_`~()]&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;trim&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-source language-regex&quot;&gt;&#92;s+&lt;/span&gt;&lt;span class=&quot;token regex-delimiter&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token regex-flags&quot;&gt;g&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;-&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toLowerCase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; year &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; tp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;date&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;now&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;YYYY&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; 
&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; month &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; tp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;date&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;now&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;MM&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; 
&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; day &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; tp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;date&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;now&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;DD&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; 
&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; newFolder &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/content/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;year&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;month&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;day&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;titleFolder&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt; 
&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; tp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;move&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;newFolder &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;index&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;C&#39;est principalement fait pour créer la bonne architecture de dossier.&lt;/p&gt;
&lt;p&gt;En bref, je demande à ouvrir une fenêtre dialog pour demander le titre du billet, puis à partir de ce titre j&#39;en crée une variable au format kebab-case, ensuite je récupère l&#39;année, le mois et le jour et enfin à partir de tout ça je crée le dossier de destination de la note.&lt;/p&gt;
&lt;p&gt;Puis vient le véritable template de billet pour &lt;strong&gt;Eleventy&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;language-md&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;&lt;span class=&quot;token front-matter-block&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token front-matter yaml language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &amp;lt;% title %&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &amp;lt;% tp.date.now(&#39;YYYY&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;MM&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;DD&#39;) %&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;featured&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; img/featured.jpg
&lt;span class=&quot;token key atrule&quot;&gt;featured_author&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 
&lt;span class=&quot;token key atrule&quot;&gt;featured_url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 
tags&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/span&gt;



&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- excerpt --&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Dans le &lt;em&gt;frontmatter&lt;/em&gt; (tout ce qu&#39;il y a entre les &lt;code&gt;---&lt;/code&gt;), les metadonnées qui peuvent être automatisées le sont grâce à &lt;em&gt;templater&lt;/em&gt;. C&#39;est donc le cas de la date du jour et le titre du billet.
Evidemment si je décide de changer le titre ou la date, je peux toujours le faire manuellement à tout moment, il s&#39;agit juste d&#39;un point de départ.&lt;/p&gt;
&lt;h2 id=&quot;le-resultat&quot;&gt;Le résultat&lt;/h2&gt;
&lt;p&gt;Avec tout ça, lorsque je veux écrire un nouveau billet, la création est très amplement simplifiée.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2025/02/03/eleventy-devant-obsidian-derriere/img/new-post.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;p&gt;Une fois que j&#39;ai fini d&#39;écrire mon billet en markdown, je n&#39;ai plus qu&#39;à ouvrir le panneau latéral d&#39;&lt;strong&gt;Obsidian&lt;/strong&gt; pour afficher l&#39;interface du plugin Git, &lt;code&gt;add&lt;/code&gt; les fichiers que je veux ajouter, faire un &lt;code&gt;commit&lt;/code&gt; et &lt;code&gt;push&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Tout ça passera par le webhook, qui mettra à jour les sources sur le serveur et lancera la génération des pages et finalement tout sera posté en ligne dans la foulée.&lt;/p&gt;
&lt;p&gt;J&#39;ai donc récupéré un workflow plutôt transparent et aussi fonctionnel que lorsque j&#39;étais sur &lt;strong&gt;Ghost&lt;/strong&gt;.&lt;br&gt;
Pour tout vous dire, je ne sais pas ce que je pourrais améliorer de plus.&lt;/p&gt;
&lt;p&gt;Mais si vous avez d&#39;autres tips alors je veux bien que vous me les partagiez. :)&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Pourquoi faire long et simple quand on peut faire rapide et compliqué</title>
    <link href="https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/" />
    <updated>2025-01-30T00:00:00Z</updated>
    <id>https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/</id>
    <content type="html">&lt;p&gt;Tous les jours (ouvrés) je poste une de mes photos en ligne. Tous les jours je répète les mêmes gestes simples mais barbants. Tous les jours je me dis qu&#39;il faudrait que je fasse quelque chose pour me faciliter la vie. C&#39;est maintenant chose faite !&lt;/p&gt;
&lt;h2 id=&quot;ma-routine&quot;&gt;Ma routine&lt;/h2&gt;
&lt;h3 id=&quot;etape-1-le-choix&quot;&gt;Étape 1 : Le choix&lt;/h3&gt;
&lt;p&gt;Je stocke mes photos exportées et prêtes à être publiées dans un dossier sur le bureau de mon ordi.&lt;br&gt;
Chaque jour je lance dans ce dossier une commande &lt;code&gt;random ./*&lt;/code&gt; (commande de base dans &lt;a href=&quot;https://fishshell.com/&quot;&gt;Fish&lt;/a&gt;) et je fais ça 5 fois de suite.&lt;br&gt;
J&#39;aime bien choisir une photo au hasard mais je préfère avoir un choix à faire en fonction de mon humeur du jour, donc je choisis une photo parmi ces 5 en faisant des allers-retours entre mon terminal et mon &lt;em&gt;Finder&lt;/em&gt; pour voir de quelles photos on parle.&lt;/p&gt;
&lt;p&gt;Une fois que j&#39;ai arrêté un choix, je lance dans le terminal un petit script de ma confection pour générer une copie de l&#39;image avec un cadre blanc et un ratio précis.&lt;br&gt;
&amp;quot;Pourquoi&amp;quot; me demanderiez-vous si justement ?&lt;br&gt;
Et bien parce que sur Instagram, pour une raison que j&#39;ignore, quand vous leur dites de garder le format original de l&#39;image, ils &lt;em&gt;crop&lt;/em&gt; quand même les photos pour qu&#39;elles rentrent dans leur ratio (maximum j&#39;imagine) défini. Et si je me choisis avec beaucoup de précaution mes cadrages, c&#39;est pas pour que Môssieur Insta prennent des libertés comme ça. Alors juste pour lui, je prépare une image avec un ratio qu&#39;il affectionne tout en gardant mon cadrage d&#39;origine.&lt;/p&gt;
&lt;h3 id=&quot;etape-2-la-preparation&quot;&gt;Étape 2 : La préparation&lt;/h3&gt;
&lt;p&gt;Ma philosophie sur la publication de mes photos est orientée &lt;a href=&quot;https://indieweb.org/POSSE-fr&quot;&gt;POSSE&lt;/a&gt;, c&#39;est à dire que ma source première est mon propre site, puis je publie ensuite des copies sur d&#39;autres réseaux.&lt;/p&gt;
&lt;p&gt;Et pour publier sur mon propre &lt;a href=&quot;https://gooz.photography/&quot;&gt;portfolio&lt;/a&gt;, site statique généré avec &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;11ty&lt;/a&gt; et mon template &lt;a href=&quot;https://github.com/GoOz/Niepce&quot;&gt;Niepce&lt;/a&gt; je dois créer un dossier dont le nom sera aussi l&#39;URL, dans lequel je dois créer un fichier markdown &lt;code&gt;index.md&lt;/code&gt; contenant les infos de base de la photo et enfin la photo en elle-même qui doit être nommée &lt;code&gt;photo.jpg&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Vu que l&#39;URL est censée être unique et ne jamais changer, il me faut donc trouver un titre original dès cette étape.&lt;/p&gt;
&lt;p&gt;S&#39;ensuit ensuite le &lt;code&gt;commit&lt;/code&gt; et &lt;code&gt;push&lt;/code&gt; de cette nouvelle photo avec mise à jour du portfolio automatiquement mais là on s&#39;écarte du sujet.&lt;/p&gt;
&lt;h3 id=&quot;etape-3-la-publication&quot;&gt;Étape 3 : La publication&lt;/h3&gt;
&lt;p&gt;Une fois mon portfolio mis à jour il est temps de s&#39;occuper des réseaux.&lt;br&gt;
Au moment où j&#39;écris ce billet je ne publie &lt;em&gt;que&lt;/em&gt; sur 3 réseaux :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://glass.photo/gooz&quot;&gt;Glass&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://pixelfed.social/i/web/profile/422334934806983747&quot;&gt;Pixelfed&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.instagram.com/gooz/&quot;&gt;Instagram&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Je considère &lt;strong&gt;Glass&lt;/strong&gt; comme le réseau principal, c&#39;est celui sur lequel j&#39;ai le plus d&#39;interactions et il a ceci de particulier qu&#39;il n&#39;y a pas de hashtag, seulement des catégories de photographie alors je poste sur ce réseau en premier.&lt;/p&gt;
&lt;p&gt;Puis vient le moment de poster sur &lt;strong&gt;Instagram&lt;/strong&gt; et &lt;strong&gt;Pixelfed&lt;/strong&gt; qui, du fait de leur fonctionnement similaire, utiliseront exactement les mêmes informations de publication.&lt;br&gt;
Sauf peut être la localisation parce que l&#39;outil de localisation de &lt;strong&gt;Pixelfed&lt;/strong&gt; est tellement mal foutu que la moitié du temps je ne le remplis pas.&lt;/p&gt;
&lt;p&gt;Quand c&#39;est chose faite, sur mon compte &lt;a href=&quot;https://mamot.fr/@GoOz&quot;&gt;mastodon&lt;/a&gt; je &lt;em&gt;retoot&lt;/em&gt; la publication &lt;strong&gt;Pixelfed&lt;/strong&gt; (c&#39;est beau le fédivers  quand même ♥️), puis sur &lt;strong&gt;Instagram&lt;/strong&gt; je fais une story de ma publication Insta… tout ça pour la visibilité.&lt;br&gt;
Notez que je fais ça sans vraiment savoir pourquoi.&lt;/p&gt;
&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;Voilà, je fais ça, tous les jours, depuis des mois. J&#39;en ai eu un peu marre alors j&#39;ai voulu automatiser et simplifier le plus d&#39;étapes possible.&lt;/p&gt;
&lt;h2 id=&quot;alors-que-revoici-alfred&quot;&gt;Alors que revoici Alfred&lt;/h2&gt;
&lt;p&gt;Je vous avais déjà parlé d&#39;&lt;a href=&quot;https://www.alfredapp.com/&quot;&gt;Alfred&lt;/a&gt; il y a… &lt;a href=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/&quot;&gt;bientôt 9 ans&lt;/a&gt;… ça me rajeunit pas mais au moins ça veut dire que je suis un client loyal d&#39;Alfred. On se rassure comme on peut.&lt;/p&gt;
&lt;p&gt;Je sais que les &lt;em&gt;cool kids&lt;/em&gt; utilisent &lt;a href=&quot;https://www.raycast.com/&quot;&gt;Raycast&lt;/a&gt; de nos jours mais même après l&#39;avoir testé je n&#39;ai pas trouvé qu&#39;il valait le coup que je change. Vous pensez bien qu&#39;après 9 ans d&#39;habitudes sur un outil, il va me falloir de très bonnes raisons de changer et il n&#39;y en avait clairement pas assez.&lt;br&gt;
De plus Alfred, c&#39;est une toute petite équipe indépendante, non soutenue par des investisseurs (le genre qui te ruine une application parce que ce sont des pompes à fric). Mine de rien ça pèse aussi dans la balance.&lt;/p&gt;
&lt;p&gt;Bref, pour résoudre mon problème de &amp;quot;productivité&amp;quot;, j&#39;ai donc décidé de me faire un &lt;em&gt;workflow&lt;/em&gt; personnalisé avec Alfred.&lt;/p&gt;
&lt;p&gt;Mais qu&#39;est-ce qu&#39;un &lt;em&gt;workflow&lt;/em&gt; me demanderiez-vous l&#39;air hagard ?&lt;/p&gt;
&lt;p&gt;Et bien c&#39;est &amp;quot;simplement&amp;quot; un système de suite d&#39;actions automatisées géré par alfred. Et cette suite d&#39;actions peut avoir différents type de &amp;quot;triggers&amp;quot; mais en très bref un &lt;em&gt;trigger&lt;/em&gt; lance une &lt;em&gt;action&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Évidemment ça c&#39;est la version simple. Je suis allé un peu plus loin que ça.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Spoiler alert&lt;/em&gt; : in fine mon workflow ressemble à ça :&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-400.avif 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-812.avif 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-1400.avif 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-1878.avif 1878w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-400.webp 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-812.webp 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-1400.webp 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-1878.webp 1878w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-400.png&quot; alt=&quot;Workflow complet&quot; width=&quot;1878&quot; height=&quot;1156&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-400.png 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-812.png 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-1400.png 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/FKe_uQZ-GF-1878.png 1878w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;etape-1-le-choix-2&quot;&gt;Étape 1 Le choix&lt;/h3&gt;
&lt;p&gt;Désormais pour choisir une photo il me suffit d&#39;ouvrir Alfred, taper &lt;code&gt;pick X&lt;/code&gt; (X étant le nombre de photos que je souhaite afficher ou bien par défaut il en affichera 6), puis je clique sur l&#39;image de mon choix qui sera dupliquée avec un contour.&lt;br&gt;
Et voilà c&#39;est tout. Je viens de faire l&#39;étape 1 en quelques secondes.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/img/pick.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;p&gt;En détail, sur la deuxième ligne, voici ce que j&#39;ai fait :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;je choisis un mot clé &lt;code&gt;pick&lt;/code&gt;  comme trigger&lt;/li&gt;
&lt;li&gt;je lui applique un argument optionnel, le nombre de photos à afficher&lt;/li&gt;
&lt;li&gt;si je ne donne pas d&#39;argument je vais montrer 6 photos par défaut&lt;/li&gt;
&lt;li&gt;je dis dans quel dossier regarder&lt;/li&gt;
&lt;li&gt;je mélange le contenu du dossier aléatoirement&lt;/li&gt;
&lt;li&gt;je prends les 6 ou X premières photos du dossier mélangé (s&#39;assurant ainsi que l&#39;aléatoire ne m&#39;affichera pas 2 fois la même photo)&lt;/li&gt;
&lt;li&gt;puis je les affiche dans une grille&lt;/li&gt;
&lt;li&gt;en sélectionnant la photo,  je l&#39;envoie au script qui va créer la copie avec cadre&lt;/li&gt;
&lt;li&gt;puis pour finir j&#39;envoie une notification pour attester que le boulot est fait&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;J&#39;ai aussi rajouté une petite action sur fichier qui me permet, lorsque j&#39;ai un fichier sélectionné, de directement l&#39;envoyer au script pour en faire une copie avec cadre. Ça m&#39;arrive d&#39;avoir ce besoin ponctuel.&lt;br&gt;
Même action finale, juste un trigger différent.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-400.avif 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-812.avif 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-1400.avif 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-1882.avif 1882w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-400.webp 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-812.webp 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-1400.webp 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-1882.webp 1882w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-400.png&quot; alt=&quot;Tâche pick&quot; width=&quot;1882&quot; height=&quot;478&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-400.png 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-812.png 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-1400.png 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/nAF8giLuxU-1882.png 1882w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;etape-2-la-preparation-2&quot;&gt;Étape 2 la préparation&lt;/h3&gt;
&lt;p&gt;Pour la préparation, c&#39;est le mot clé &lt;code&gt;create&lt;/code&gt; que j&#39;ai choisi auquel s&#39;ajoute l&#39;argument obligatoire du nom du dossier.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-tip&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-light-bulb mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Tip&lt;/p&gt;&lt;p&gt;J&#39;écris directement le nom du dossier en &lt;code&gt;kebab-case&lt;/code&gt; pour avoir de belles URLs mais j&#39;aurais très bien pu rajouter une étape pour forcer le formatage attendu aussi.&lt;/p&gt;
&lt;/div&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/img/create.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;p&gt;En détail :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;je choisis un mot clé &lt;code&gt;create&lt;/code&gt; comme &lt;em&gt;trigger&lt;/em&gt; suivi du nom du dossier&lt;/li&gt;
&lt;li&gt;je vérifie si ce dossier existe déjà ou non avant de faire quoique ce soit parce que je n&#39;aurais pas de d&#39;erreur remontée par Finder si c&#39;est le cas&lt;/li&gt;
&lt;li&gt;si le dossier existe déjà, j&#39;arrête tout et j&#39;envoie une notification d&#39;erreur&lt;/li&gt;
&lt;li&gt;s&#39;il n&#39;existe pas alors je crée le dossier&lt;/li&gt;
&lt;li&gt;puis dans ce dossier je crée un fichier &lt;code&gt;index.md&lt;/code&gt; vide&lt;/li&gt;
&lt;li&gt;finalement j&#39;envoie une notification de succès&lt;/li&gt;
&lt;/ol&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-400.avif 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-812.avif 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-1352.avif 1352w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-400.webp 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-812.webp 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-1352.webp 1352w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-400.png&quot; alt=&quot;Tâche create&quot; width=&quot;1352&quot; height=&quot;396&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-400.png 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-812.png 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/VuzBdcq0TR-1352.png 1352w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Note&lt;/p&gt;&lt;p&gt;À ce moment-là j&#39;aurais pu créer un fichier markdown partiellement pré-rempli mais comme j&#39;édite ça dans &lt;strong&gt;VSCode&lt;/strong&gt; en utilisant un template de fichier avec des arrêts de tabulation dans les zones à éditer, c&#39;est plus pratique de juste créer le fichier vide.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Il reste donc la photo à déplacer.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Note&lt;/p&gt;&lt;p&gt;Là aussi que j&#39;ai préféré pour des raisons d&#39;habitude pratique de séparer création de dossier et copie de photo en deux tâches distinctes mais j&#39;aurais pu tout faire une seule tâche. Peut être même que je le ferai un jour. Le temps nous le dira.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Je sélectionne donc le fichier, je lance l&#39;action sur fichier &lt;code&gt;Copy &amp;amp; rename&lt;/code&gt; qui va demander ensuite dans quel dossier déplacer la copie et voilà la copie est déplacée et bien nommée.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/img/copynrename.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;p&gt;En détail :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;en tapant &lt;code&gt;⌥ ⌘ :&lt;/code&gt; sur mon mac je lance un action sur fichier nommée &lt;code&gt;Copy &amp;amp; rename&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;je vais ensuite afficher un champ de recherche de fichiers (et dossier) pour trouver le dossier dans lequel copier&lt;/li&gt;
&lt;li&gt;je copie d&#39;abord le fichier dans ce dossier&lt;/li&gt;
&lt;li&gt;puis je renomme le fichier en &lt;code&gt;photo.jpg&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;enfin j&#39;envoie une notification de travail terminé&lt;/li&gt;
&lt;/ol&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-400.avif 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-812.avif 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-1400.avif 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-1856.avif 1856w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-400.webp 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-812.webp 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-1400.webp 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-1856.webp 1856w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-400.png&quot; alt=&quot;Tâche copy and rename&quot; width=&quot;1856&quot; height=&quot;298&quot; srcset=&quot;https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-400.png 400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-812.png 812w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-1400.png 1400w, https://blog.foojin.com/2025/01/30/pourquoi-faire-long-et-simple-quand-on-peut-faire-rapide-et-complique/dyLQ4SLuMe-1856.png 1856w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;etape-3-la-publication-2&quot;&gt;Étape 3 La publication&lt;/h3&gt;
&lt;p&gt;C&#39;est là que ça pêche…&lt;/p&gt;
&lt;p&gt;Je ne sais pas comment automatiser cette partie mais ce ne serait sûrement pas avec Alfred.&lt;br&gt;
Je pense qu&#39;il doit y avoir moyen de faire quelque chose avec des outils comme &lt;a href=&quot;https://zapier.com&quot;&gt;Zapier&lt;/a&gt; ou &lt;a href=&quot;https://ifttt.com/&quot;&gt;IFTTT&lt;/a&gt; mais leur version gratuite ne suffira clairement pas et je trouve leurs options payantes très vite chères pour le besoin que j&#39;ai.&lt;/p&gt;
&lt;p&gt;Si vous avez des recommandations d&#39;autres solutions je suis évidemment preneur.&lt;/p&gt;
&lt;h3 id=&quot;conclusion-2&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;Grâce à &lt;strong&gt;Alfred&lt;/strong&gt; j&#39;ai pu &amp;quot;automatiser&amp;quot; 2 étapes sur 3 et j&#39;en suis bien content. Et ce n&#39;était pas si compliqué que ça. Bien évidemment ça m&#39;a pris un peu de temps pour comprendre en profondeur le fonctionnement mais une fois le principe assimilé ça va assez vite.&lt;/p&gt;
&lt;p&gt;Je pourrais partager le workflow si ça intéresse des gens mais vu que c&#39;est un besoin très personnel je n&#39;ai pas jugé ça utile.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Les femmes et les enfants d&#39;abord</title>
    <link href="https://blog.foojin.com/2025/01/21/les-femmes-et-les-enfants-dabord/" />
    <updated>2025-01-21T00:00:00Z</updated>
    <id>https://blog.foojin.com/2025/01/21/les-femmes-et-les-enfants-dabord/</id>
    <content type="html">&lt;p&gt;La période est à la fuite des réseaux sociaux mainstream après les dernières sorties médiatiques des grands noms du web (Musk &amp;amp; Zuck pour ne pas les nommer). On invite tout le monde à se &amp;quot;désolidariser&amp;quot; de ces dangereux bouffons en allant voir ailleurs, rester serait les légitimer mais je ne suis pas convaincu que ce soit aussi simple.&lt;/p&gt;
&lt;p&gt;S&#39;il me semble que &lt;strong&gt;Mastodon&lt;/strong&gt; et &lt;strong&gt;Bluesky&lt;/strong&gt; sont désormais assez bien ancrés pour qu&#39;une migration de Twitter se fasse sans heurt ou tout du moins sans trop de perte, je ne suis pas sûr que ce soit la même pour Meta.&lt;/p&gt;
&lt;p&gt;À ce jour il n&#39;y a pas de réelles alternatives viables à &lt;strong&gt;Facebook&lt;/strong&gt; ou &lt;strong&gt;Instagram&lt;/strong&gt;, &lt;strong&gt;Whatsapp&lt;/strong&gt; serait la éventuellement la seule exception… et encore. Mais dans tous les cas le problème reste le même : les gens sont sur Meta.&lt;/p&gt;
&lt;p&gt;Je ne doute pas que tous les petits nerds du coin auront une facilité à migrer mais c&#39;est faire fi de toute cette population qui, même sans aller jusque parler d&#39;&lt;em&gt;illectronisme&lt;/em&gt;, n&#39;a pas cette aisance en informatique.
L&#39;effort de changer pour ces gens est nettement plus grand que pour nous autres nerds. Le prix (moral) à payer (de perdre des contacts) l&#39;est tout autant.&lt;/p&gt;
&lt;p&gt;Mais il n&#39;y a pas que ça, je pense aussi à tous ces artistes et petits artisans qui utilisent ces réseaux comme moyen de communication pour leurs clients et futur clients. Leur demander de migrer c&#39;est se tirer une balle dans le pied. C&#39;est potentiellement tuer leur activité.&lt;/p&gt;
&lt;p&gt;Je ne dis pas qu&#39;il faut pas construire d&#39;alternatives, bien au contraire, c&#39;est plus que jamais utile mais je pense juste qu&#39;il ne faut pas pousser avec trop de véhémence les gens à migrer. On est d&#39;accord qu&#39;en souhaitant la migration massive vous souhaitez punir ces grandes entreprises mais la culpabilité doit se trouver de leur côté, pas de celui des petites gens déjà dans la brume numérique qui seront indéniablement des victimes collatérales et qui de plus n&#39;ont pas à porter sur leurs épaules le poids de vos combats, même si vous les considérez comme universels.&lt;/p&gt;
&lt;p&gt;Je pense qu&#39;ils ont surtout besoin d&#39;accompagnement et ce en douceur, c&#39;est à dire avec une période de transition.&lt;/p&gt;
&lt;p&gt;Parfois je me dis que la véritable solution long terme ne serait pas de créer un remplaçant à Facebook mais qui serait éthique (rien ne garantirait qu&#39;il le reste &lt;em&gt;ad vitam eternam&lt;/em&gt;), mais plutôt de construire une fédération interopérable d&#39;espaces personnels (comme ce que Mastodon a fait avec &lt;em&gt;activity pub&lt;/em&gt;).
Finalement un peu ce qu&#39;on avait pour les blogs et les flux RSS… mais nettement plus attractif et &lt;em&gt;noob-friendly&lt;/em&gt; pour les abandonnés du numérique.&lt;/p&gt;
&lt;p&gt;Bref, soyez compréhensifs et gentils. La droiture n&#39;est pas une excuse au harcèlement.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Une affaire rondement menée</title>
    <link href="https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/" />
    <updated>2024-12-30T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/</id>
    <content type="html">&lt;p&gt;Début 2024 &lt;a href=&quot;https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/&quot;&gt;j&#39;ai décidé de me lancer dans un challenge photo&lt;/a&gt;, avec une photo par semaine, et aujourd&#39;hui c&#39;est la fin de l&#39;année et donc du challenge. Faisons le point !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-400.avif 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-812.avif 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-1400.avif 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-400.webp 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-812.webp 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-1400.webp 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-400.jpeg&quot; alt=&quot;Shuffle 01&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-400.jpeg 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-812.jpeg 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-1400.jpeg 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/HVpcOEtZAc-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Je l&#39;ai fini ! En respectant les conditions de bout en bout, pendant 1 an. Rien que pour ça je suis assez fier de moi. Rétrospectivement je suis content de mon choix d&#39;avoir fait un challenge 52 (chaque semaine) plutôt que 365 (chaque jour), parce que le principe était bien trop complexe pour que je réussisse à faire ça tous les jours. Il m&#39;est arrivé de passer la semaine à trouver quoi faire en fonction du tirage que j&#39;avais eu.&lt;/p&gt;
&lt;p&gt;Une chose que j&#39;ai rapidement changé par contre c&#39;est mon système de tirage de valeurs. J&#39;ai vite laissé tomber le site dont je parlais dans le billet de la genèse pour passer à un bouton couplé à une fonction dans &lt;a href=&quot;https://obsidian.md/&quot;&gt;Obsidian&lt;/a&gt;, là où je me notais tout du challenge.&lt;/p&gt;
&lt;p&gt;Mais à part ça j&#39;ai respecté tout de A à Z.&lt;/p&gt;
&lt;p&gt;Parfois je faisais la photo le jour même du tirage, parfois je la faisais la veille du tirage pour la semaine suivante. Sur ce point c&#39;était plutôt chaotique. Entre les aléas de la vie et les tirages complexes, ce n&#39;était pas possible d&#39;être régulier mais ça importait peu finalement. Seul le résultat final comptait.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-400.avif 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-812.avif 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-1400.avif 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-400.webp 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-812.webp 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-1400.webp 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-400.jpeg&quot; alt=&quot;Shuffle 20&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-400.jpeg 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-812.jpeg 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-1400.jpeg 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/hyn_t1Ccv9-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;ce-que-j-en-ai-tire&quot;&gt;Ce que j&#39;en ai tiré&lt;/h2&gt;
&lt;p&gt;Contre toute attente je n&#39;ai pas spécialement appris plus que ça à me servir de mon appareil. Enfin je savais déjà m&#39;en servir mais le fait de tout faire en manuel ne m&#39;a pas débloqué de nouveau super pouvoir.&lt;/p&gt;
&lt;p&gt;Par contre j&#39;ai vraiment bien repris goût à la photographie. J&#39;ai développé encore plus mon regard au point de me découvrir un goût nouveau pour les lignes notamment, en particulier les plus subtiles. Je me suis aussi tellement trituré les méninges que j&#39;ai eu plusieurs idées pour de nouvelles séries.&lt;/p&gt;
&lt;p&gt;Pour moi qui peinait à définir ma photographie, j&#39;ai, je pense, vraiment affiné mon parcours photographique et ça c&#39;est cool. Je ne suis toujours pas sûr à 100% mais c&#39;est nettement moins flou que ça ne l&#39;a été.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-400.avif 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-812.avif 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-1400.avif 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-400.webp 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-812.webp 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-1400.webp 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-400.jpeg&quot; alt=&quot;Shuffle 28&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-400.jpeg 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-812.jpeg 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-1400.jpeg 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/J-iuB72aNm-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;et-maintenant&quot;&gt;Et maintenant ?&lt;/h2&gt;
&lt;p&gt;Je ne vais pas faire de nouveau challenge en 2025. C&#39;était vraiment très bien, intéressant et inspirant mais je préfère me focaliser désormais sur ces nouvelles idées de séries que j&#39;ai eu. J&#39;ai envie maintenant de raconter mes histoires et non plus me reposer sur le hasard.&lt;/p&gt;
&lt;p&gt;Et si jamais vous aviez raté ça, je vous invite à aller voir la série &lt;strong&gt;Shuffle&lt;/strong&gt; dans son entièreté sur &lt;a href=&quot;https://gooz.photography/tags/shuffle/&quot;&gt;mon portfolio&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Merci à celles et ceux qui avaient suivi mon aventure toute l&#39;année et à bientôt pour une autre aventure !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-400.avif 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-812.avif 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-1400.avif 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-400.webp 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-812.webp 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-1400.webp 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-400.jpeg&quot; alt=&quot;Shuffle 48&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-400.jpeg 400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-812.jpeg 812w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-1400.jpeg 1400w, https://blog.foojin.com/2024/12/30/une-affaire-rondement-menee/OaRh2GQILv-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Je t’aime moi non plus</title>
    <link href="https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/" />
    <updated>2024-11-21T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/</id>
    <content type="html">&lt;p&gt;Cela fait bien longtemps que je pratique la photographie, depuis mes 15 ou 16 ans avec une régularité plus que variable, donc j’ai eu le temps de tester moult choses, découvrir ce que je n’aimais pas ou ce que j’aimais prendre en photo et ce qui me laissait pantois ou impassible à regarder.&lt;/p&gt;
&lt;p&gt;Si aujourd’hui je me cherche encore ou en tout cas je cherche à comprendre ce qui me fait le plus vibrer pour en faire des séries ou des projets, j’ai tout de même une liste de choses avec un avis plus ou moins bien arrêté. Comme vous le verrez, mon avis a évolué avec le temps donc rien ne dit que je ne changerai pas encore d&#39;avis dans le futur.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Note&lt;/p&gt;&lt;p&gt;Toutes les photographies sans auteur spécifié sont de moi et à retrouver sur &lt;a href=&quot;https://gooz.photography&quot;&gt;gooz.photography&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;h2 id=&quot;ce-que-je-n-aime-pas-voir-ni-faire&quot;&gt;Ce que je n’aime pas voir ni faire&lt;/h2&gt;
&lt;h3 id=&quot;l-urbex-urban-exploration&quot;&gt;L’urbex (urban exploration)&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-400.jpeg&quot; alt=&quot;Photographie exemple d&#39;urbex&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/atPem-a8_x-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Globalement il est rare que l’urbex me fasse beaucoup d&#39;effet. Voir de vieux bâtiments inhabités et vides si ce n’est la présence excessive de gravas et de tags me laisse souvent sur ma faim. J&#39;y trouve en fait très souvent de la redondance.&lt;br&gt;
Si en plus vous y ajouter des modèles, habillés ou pas, dans cet environnement là, sans rien raconter d’autre, souvent je pleure.&lt;br&gt;
Et si la photo fait dans le HDR excessif, je me crève les yeux.&lt;br&gt;
Par contre si c’est une série de photo comme une expédition à Tchernobyl, dans un village abandonné subitement ou une maison qui n’a pas été vidé des traces de vie de ses derniers occupants, là y a un petit côté tranche de vie que j’apprécie beaucoup.&lt;br&gt;
Et pour finir si c’est un lieu abandonné depuis si longtemps que la nature y a repris ses droits, ça aussi ça peut me plaire.&lt;/p&gt;
&lt;h3 id=&quot;la-macro&quot;&gt;La macro&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-3759.avif 3759w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-3759.webp 3759w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-400.jpeg&quot; alt=&quot;Photographie exemple de macro&quot; width=&quot;3759&quot; height=&quot;2819&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/Y7CVOv_YSN-3759.jpeg 3759w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@gildardorh8&quot;&gt;gildardorh8&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Je n’ai aucun problème avec les insectes, au contraire il existe plusieurs espèces que je trouve très belles ou les zooms sur des détails fins et de texture avancées mais la photo de macro ne me fait aucun effet la plupart du temps. J’ai l’impression que c’est finalement plus proche de la photographie commerciale de packshot mais pour les insectes ou la nature, c’est plus une question de réussir à mettre en valeur une beauté évidente mais souvent ignorée, plus technique que ressenti je dirais. A vrai dire, j’ai l’impression que la macro est plus une question de matériel que de thématique, la plus grosse difficulté résiderait probablement plus dans la recherche des sujets qu’autre chose.&lt;/p&gt;
&lt;h3 id=&quot;le-nu-erotique-porno&quot;&gt;Le nu érotique/porno&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-400.jpeg&quot; alt=&quot;Photographie exemple de nu&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/xlJnI8PlfB-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Je ne m’arrêterai pas sur le côté sexiste et le male gaze dont c’est la plus belle représentation, même si c’est un sujet très intéressant au demeurant. Pour faire bref, je n’aime pas la photographie de nu érotique qui se veut artistique qui n’est là que pour mettre en valeur le corps d’une femme (ou d’un homme même si c’est clairement plus rare) comme si c’était un objet de catalogue. De base, si ce n’est que ça je lâche généralement un soupir d’exaspération. Si en plus y a aucun travail sur la lumière ou la composition ou l&#39;émotion je ne peux m’empêcher d’imaginer l’auteur comme un vieux beauf cringe à la Claudy (interprété par François Damiens) dans le film &lt;strong&gt;Dikkenek&lt;/strong&gt;.&lt;br&gt;
Disons juste qu’il me faut bien plus que ça pour attirer mon attention mais on y reviendra plus tard.&lt;/p&gt;
&lt;h3 id=&quot;le-sport&quot;&gt;Le sport&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-3500.avif 3500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-3500.webp 3500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-400.jpeg&quot; alt=&quot;Photographie exemple de sport&quot; width=&quot;3500&quot; height=&quot;2333&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0Yrtjj67FN-3500.jpeg 3500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@svkj&quot;&gt;svkj&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Je n’ai jamais été sportif ni amateur de sport en général alors vous pensez bien que la photo sportive… je n’aime pas. Mais je reconnais bien facilement que c’est une thématique particulière et complexe qui demande énormément de réflexes et de dextérité. Mais c’est juste pas pour moi, tant comme spectateur qu&#39;auteur.&lt;/p&gt;
&lt;h3 id=&quot;le-documentaire&quot;&gt;Le documentaire&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-400.jpeg&quot; alt=&quot;Photographie exemple de documentaire&quot; width=&quot;1920&quot; height=&quot;1280&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/52YR6jkPy6-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@ilvagabiondo&quot;&gt;ilvagabiondo&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Ce n’est pas tellement que je n’aime pas ça mais plutôt que j’ai rarement aimé des séries de ce type. Pourtant j’aime bien les histoires et les tranches de vie mais j’ai rarement vu des photos de ce type avec une belle composition ou une belle lumière. C’est plus souvent pris sur le vif alors ça n’aide pas j’en conviens mais du coup je suis souvent un peu déçu. Mais je sais qu&#39;il y a des exceptions alors je ne m&#39;empêche pas d&#39;aller en voir si je tombe dessus mais je n&#39;irai probablement pas les chercher non plus.&lt;/p&gt;
&lt;h3 id=&quot;la-mode&quot;&gt;La mode&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-400.jpeg&quot; alt=&quot;Photographie exemple de mode&quot; width=&quot;1920&quot; height=&quot;2880&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ZKXwEwfS6A-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@shotbyjudeus&quot;&gt;shotbyjudeus&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Comme pour le sport je ne suis pas franchement branché mode donc forcément ça ne me parle pas trop non plus mais il est vrai que très souvent la frontière entre mode et portrait n’est pas toujours très nette et parfois je me retrouve à en aimer certaines.&lt;br&gt;
Évidemment les rares photo de mode qui me plaisent sont celles qui s’éloignent le plus souvent beaucoup des standards de la mode.&lt;/p&gt;
&lt;h3 id=&quot;la-double-exposition&quot;&gt;La double exposition&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-400.jpeg&quot; alt=&quot;Photographie exemple de double exposition&quot; width=&quot;1920&quot; height=&quot;2880&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/gNoTBcPKGe-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@antoniolio&quot;&gt;antoniolio&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Je ne m’explique pas pourquoi mais j’ai toujours eu du mal avec la double (ou plus) exposition. Je n’arrive pas à trouver ça intéressant visuellement. Et pourtant je sais reconnaître le travail technique ou créatif qu&#39;il y a derrière mais rien n’y fait, je ne m’enlève pas cette sensation de brouillon.
Les goûts et les couleurs hein.&lt;/p&gt;
&lt;h3 id=&quot;le-diptyque-triptyque&quot;&gt;Le diptyque / triptyque&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-400.jpeg&quot; alt=&quot;Photographie exemple de diptyque&quot; width=&quot;1920&quot; height=&quot;1287&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/js27wMLV9q-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@taramaemil&quot;&gt;taramaemil&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;J’aime bien le principe, de raconter des choses en plusieurs images, seulement je vois trop de diptyques qui au final ne racontent rien, ou alors je ne comprends pas ce que ça veut raconter ce qui est une possibilité. Bref finalement je finis trop souvent déçu, pour ne pas dire tout le temps, et j’ai développé avec le temps une sorte de réaction naturelle de rejet…&lt;/p&gt;
&lt;h3 id=&quot;sooc-straight-out-of-camera&quot;&gt;SOOC (Straight Out Of Camera)&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-400.jpeg&quot; alt=&quot;Photographie exemple de SOOC&quot; width=&quot;1920&quot; height=&quot;2880&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/2z1y4ShKmU-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@kazusaki_sagar&quot;&gt;kazusaki_sagar&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Technique qui consiste à ne pas faire de post-traitement et de tout faire à la prise de vue directement depuis l&#39;appareil. Je peux comprendre que ce soit intéressant pour apprendre à bien maitriser son appareil mais c&#39;est bien le seul avantage que je lui trouve. Après évidemment chacun fait comme il veut mais moi ça ne m&#39;intéresse pas. Du tout. Surtout que très souvent quand je pars en vadrouille photographique je ne suis pas seul donc je ne peux pas faire attendre les gens des dizaines de minutes pour quelques images.&lt;/p&gt;
&lt;p&gt;De plus, j&#39;essaye de ne pas trop donner de crédit à ses sympathisants mais, j&#39;ai lu trop de trucs d&#39;évangélistes du SOOC qui pensent être de meilleurs photographes ou des vrais photographes par rapport aux autres parce qu&#39;il ne font pas de post-traitement. Comme si c&#39;était une maladie nouvelle propre aux générations de la photo numérique, alors que le traitement photo est aussi vieux que la photographie elle-même. Je trouve ça un poil pseudo-élitiste et hypocrite pour être honnête dès que ça sort du contexte d&#39;exercice ou de la nécessité.&lt;/p&gt;
&lt;h3 id=&quot;le-light-painting&quot;&gt;Le light painting&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-400.jpeg&quot; alt=&quot;Photographie exemple de light painting&quot; width=&quot;1920&quot; height=&quot;1178&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/P9KHX23-NV-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@mariolagr&quot;&gt;mariolagr&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;J’aime bien pourtant ce qu’on peut faire avec les poses longues mais je suis complètement hermétique à ce genre de photographie. Enfin je suis surtout hermétique quand on a un fond (une rue, une plaine, etc) ou un sujet avec juste les tracés de lumière par dessus. Je pense que ça se rapproche de mon aversion pour la double exposition, je trouve ça un peu dégueulasse.&lt;br&gt;
Mais utiliser la lumière pour dessiner des choses sur un fond uni, tel une toile, pour en faire un truc plus abstrait me parle déjà beaucoup plus.&lt;/p&gt;
&lt;h2 id=&quot;ce-que-j-aime-voir-et-que-j-aime-ou-j-aimerais-faire&quot;&gt;Ce que j’aime voir et que j’aime ou j’aimerais faire&lt;/h2&gt;
&lt;h3 id=&quot;la-nature&quot;&gt;La nature&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-400.jpeg&quot; alt=&quot;Photographie exemple de nature&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/yNoZA7_1v4-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Je fais souvent de la randonnée alors de la nature j’en vois souvent et j’apprécie beaucoup ça.&lt;br&gt;
Il me parait donc tout naturel d’aimer voir sa beauté naturelle mise en valeur. Pour en faire, je peux dire que la difficulté réside à réussir à retranscrire dans son cadrage ce que les yeux voient et ce n’est pas chose simple. Je ne compte plus les prises que j’ai faites en me disant « oh c’est joli ça » mais me rendre compte une fois sur l’écran que ça rend beaucoup moins bien. L’effet coupable est le plus souvent qu’avec ses yeux on a un angle de vue nettement supérieur à celui d’un objectif et donc c’est plus difficile de tout « rentrer » dans ce plus petit format.&lt;/p&gt;
&lt;h3 id=&quot;le-paysage&quot;&gt;Le paysage&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-400.jpeg&quot; alt=&quot;Photographie exemple de paysage&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/0zIzy7bJQp-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;J’ai eu une relation compliquée avec le paysage. J’ai longtemps trouvé ça chiant (quand j&#39;étais plus jeune surtout) mais on a appris à se connaître et je sais maintenant ô combien ce qui parait être comme la discipline la plus simple ne l’est finalement pas tellement. Déjà faut les trouver les plus beaux paysages, ça tombe pas du ciel comme ça. Et puis il faut y être au bon moment aussi, la lumière naturelle étant tout ce qu’on a, une seule heure suffit pour changer l’angle ou l’intensité du soleil et tout changer à la prise de vue.&lt;/p&gt;
&lt;h3 id=&quot;le-portrait&quot;&gt;Le portrait&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-400.jpeg&quot; alt=&quot;Photographie exemple de portrait&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/scgYkOU8eE-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Ça a toujours été mon chouchou le portrait. Et dieu sait que c’est pas facile. C’est je pense ce que je fais le moins dans ce que j’aime faire le plus. Mais je crois que la raison à ça c’est que contrairement à beaucoup d’autres thématiques, celle-ci nécessite plus que soi-même, cela nécessite au moins une autre personne. Et pour peu que cette autre personne ne soit pas à l’aise devant l’objectif cela rajoutera une difficulté supplémentaire.&lt;br&gt;
Bref, j’adore en regarder et malgré la difficulté j’aime aussi en faire.&lt;br&gt;
C’est bizarre d’ailleurs quand j’y pense parce que je suis plutôt introverti et pas spécialement à l’aise en société ou avec du monde mais la photographie de portrait est ce que je préfère.&lt;/p&gt;
&lt;h3 id=&quot;la-rue&quot;&gt;La rue&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-400.jpeg&quot; alt=&quot;Photographie exemple de street&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/n5WlzPAjpu-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;J’adore la photographie de rue et j’en fais quand je peux mais c’est fou comme c’est compliqué. Au même titre que pour le sport, c’est une discipline qui demande beaucoup de réflexe et de dextérité mais j’irais même jusqu’à dire que c’est un cran au dessus, puisqu’il faut être capable de rapidement changer ses paramètres pour le bien de la vue qu‘on veut produire au risque sinon de rater le bon moment. Et on en rate forcément. Ça doit être une des choses qu’on apprend le plus rapidement d’ailleurs, faire le deuil du shot perdu à jamais parce qu’on était pas prêt.&lt;/p&gt;
&lt;h3 id=&quot;l-abstrait&quot;&gt;L’abstrait&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-400.jpeg&quot; alt=&quot;Photographie exemple de abstrait&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/dfQvigOXG2-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Une discipline que je n’aimais que trop rarement fut un temps mais que j’ai appris à apprécier avec le temps. Prendre en photo des choses dans un contexte particulier qui rend le sujet méconnaissable mais qui produit autre chose de nettement plus graphique, je trouve ça cool. Personnellement, je pense que c’est la discipline qui se rapproche le plus des arts plastiques comme la peinture mais qui utilise la lumière et l’appareil comme pinceau. Le seul problème que j’ai avec l&#39;abstrait c’est que ça demande beaucoup plus de réflexion créative (ou de la chance avec un shot raté), il ne suffit pas faire avec ce qu’on a devant les yeux et je ne suis pas très doué pour ça.&lt;/p&gt;
&lt;h3 id=&quot;le-minimalisme&quot;&gt;Le minimalisme&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-400.jpeg&quot; alt=&quot;Photographie exemple de minimalisme&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/MDsj28GxEw-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Discipline qui consiste à prendre en photo des sujets très sommaires, pas de place pour la fioriture dans le minimalisme. Comme il y a peu à montrer on pourrait naïvement croire que c’est simple alors que c’est exactement l’inverse. Ça demande un contrôle de l’environnement total et une prise de vue parfaite et sans défaut pour la simple et bonne raison que tout défaut, aussi petit soit-il, ne pourra pas être dissimulé, il se verra comme le nez au milieu de la figure.&lt;/p&gt;
&lt;h3 id=&quot;le-nu&quot;&gt;Le nu&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-400.jpeg&quot; alt=&quot;Photographie exemple de nu&quot; width=&quot;1920&quot; height=&quot;2891&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/l7XqMkmMvf-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@emilianovittoriosi&quot;&gt;emilianovittoriosi&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;J’aime quand c’est pour utiliser le corps humain, entier ou en partie, pour jouer avec les formes et la lumière. J’aime quand c’est mettre en place des petites scènettes candides qui racontent une histoire. J’aime quand on suggère plus qu’on ne montre. En bref, j’aime un peu tout nu qui ne serait pas explicitement sexuel. Je sais que c’est difficile de tracer une ligne bien nette pour ça et c’est plus rare qu’il n’y parait de voir des photos de nu qui ne tombent justement pas dans l’explicite. Je regrette aussi qu’il n’y ait pas plus de photos d’hommes nus et pas forcément des éphèbes foutus comme des athlètes. Le corps masculin lui aussi peut être sublimer.&lt;/p&gt;
&lt;h3 id=&quot;les-lignes-et-les-formes&quot;&gt;Les lignes et les formes&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-400.jpeg&quot; alt=&quot;Photographie exemple de lignes et de forme&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/jDK1x3E8lU-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Indéniablement, mon chouchou le plus récent. Je me suis surpris à aimer voir et chercher les lignes et les formes dans certaines de mes compositions. J’aime quand la photo n’a pas l’air de montrer grand chose de spécial mais qu’il y a une sorte de deuxième lecture pour œil averti ou pour celui qui prend le temps d&#39;observer au-delà de ce qui est montré.&lt;br&gt;
Je me rappellerai toujours la fois où, alors que je visitais une expo de photographes amateurs, j’ai entendu un autre visiteur chuchoter à son ami qu’il voyait pas l’intérêt d’une photographie que j’ai trouvé superbement bien composée et pleine de lignes. Il ne suffit pas de les voir, il faut les regarder. J’ai moi-même appris depuis à regarder le monde autour de moi, à la recherche de ces lignes et de ces formes cachées devant nos yeux.&lt;br&gt;
Et j’aime ça.&lt;/p&gt;
&lt;h2 id=&quot;ce-que-j-aime-voir-mais-que-je-n-aime-pas-faire&quot;&gt;Ce que j’aime voir mais que je n’aime pas faire&lt;/h2&gt;
&lt;h3 id=&quot;l-architectural&quot;&gt;L’architectural&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-400.jpeg&quot; alt=&quot;Photographie exemple d&#39;architecture&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/clvxliu--J-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Je n’y connais pas grand chose en architecture pour être tout à fait honnête mais je sais apprécier certaines choses tout de même et la mise en valeur de bâtiments me fait souvent plaisir à voir. Est-ce parce qu’il y a très souvent beaucoup de lignes et de formes ? Très probablement, oui. Mais à part ça, il me semble que c’est un des rares arts qui se marie bien avec la photographie. C’est moins le cas pour les autres.&lt;br&gt;
Mais même si j’aime bien en voir, je n’aime pas trop en faire moi-même, surtout parce que je n’ai pas le matériel adapté, ni l’envie d’acheter le dit matériel pour pouvoir en faire convenablement.&lt;/p&gt;
&lt;h3 id=&quot;l-aerien&quot;&gt;L’aérien&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-400.jpeg&quot; alt=&quot;Photographie exemple d&#39;aérien&quot; width=&quot;1920&quot; height=&quot;2562&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/ArKtp2Svl5-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@a2eorigins&quot;&gt;a2eorigins&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;Qu’on ait les moyens de &lt;strong&gt;Yann Arthus-Bertrand&lt;/strong&gt; ou qu’on soit l’heureux détenteur d’un drone, je trouve que les points de vue aériens sont toujours très intéressants à voir, c’est une toute nouvelle perspective qui s’ouvre à nous offrant de nombreuses nouvelles opportunités de composition.&lt;br&gt;
Alors peut être que l’effet de nouveauté s’estompera un jour, en tout cas pour moi, mais pour le moment j’aime bien. Par contre je n&#39;ai ni les moyens pour un hélicoptère, ni l’envie d’acheter un drone alors ce ne sera pas pour moi.&lt;/p&gt;
&lt;h3 id=&quot;l-auto-portrait&quot;&gt;L’auto portrait&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-400.jpeg&quot; alt=&quot;Photographie exemple d&#39;auto-portrait&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/nGXth3lKaN-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;On pourrait croire que l’auto-portrait c’est finalement juste du portrait mais je ne suis pas d’accord. C’est un portrait qui en dit plus sur l’auteur (et donc le sujet) qui met de soi 2 fois plus dans la photo. En ce sens les auto-portrait pour moi ont plus de saveur que les portraits.&lt;br&gt;
Mais comme beaucoup d’autres photographes, je n’aime pas trop passer de l’autre côté de l’objectif. Ce n’est pas une question d’estime de soi mais plutôt que je n’aime pas les aller-retours incessants à l’appareil pour tester des cadrages ou réglages différents. Même si, depuis que je suis chez &lt;strong&gt;Fujifilm&lt;/strong&gt;, une app mobile qui permet de voir en &lt;em&gt;live view&lt;/em&gt; ce que voit l&#39;objectif ce qui a pour mérite de simplifier un peu le processus mais je ne la trouve pas encore assez fluide et pratique cette app pour me pousser à faire plus d&#39;auto-portrait.&lt;/p&gt;
&lt;h3 id=&quot;la-nature-morte&quot;&gt;La nature morte&lt;/h3&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-400.avif 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-812.avif 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-1400.avif 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-1920.avif 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-400.webp 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-812.webp 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-1400.webp 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-1920.webp 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-400.jpeg&quot; alt=&quot;Photographie exemple de nature morte&quot; width=&quot;1920&quot; height=&quot;2519&quot; srcset=&quot;https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-400.jpeg 400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-812.jpeg 812w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-1400.jpeg 1400w, https://blog.foojin.com/2024/11/21/je-taime-moi-non-plus/7dRqziC9xs-1920.jpeg 1920w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;&lt;small&gt;&lt;em&gt;par &lt;a href=&quot;https://unsplash.com/fr/@mary_skr&quot;&gt;mary_skr&lt;/a&gt;&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;J’aime l’ambiance zen qui ressort des natures mortes et le gros travail de composition qui les accompagne la majorité du temps mais c’est beaucoup de travail préparatoire et ce n’est définitivement pas la partie que je trouve la plus fun, c’est pourquoi je n’en fais jamais. Mais vraiment j’aime bien en regarder.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Voilà c&#39;est tout. Tout ce à quoi j&#39;ai pensé tout du moins.&lt;br&gt;
Mais on rigole, on rigole sauf que avec tout ça je saurais même pas dire ce qui est ma spécialité et ce qui ne l&#39;est pas.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Ô joie, ô aigresse ennemie</title>
    <link href="https://blog.foojin.com/2024/07/05/o-joie-o-aigresse-ennemie/" />
    <updated>2024-07-05T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/07/05/o-joie-o-aigresse-ennemie/</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac…&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Tu m&#39;avais promis d&#39;être aveugle,&lt;br&gt;
Intègre,&lt;br&gt;
Juste.&lt;/p&gt;
&lt;p&gt;Mais tu t&#39;es laissée corrompre,&lt;br&gt;
Manipuler,&lt;br&gt;
Détourner&lt;/p&gt;
&lt;p&gt;Tu m&#39;as poussé dans ses bras idylliques,&lt;br&gt;
Révoltés,&lt;br&gt;
Sages.&lt;/p&gt;
&lt;p&gt;Elle est tout ce que tu aurais dû être.&lt;br&gt;
Elle est tout ça et plus encore.&lt;br&gt;
Elle est tout ce dont j&#39;ai besoin.&lt;/p&gt;
&lt;!-- excerpt --&gt;
&lt;p&gt;L&#39;extrême droite c&#39;est la haine de l&#39;autre, la haine de l&#39;autre c&#39;est le fascisme, le fascisme c&#39;est la mort.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Les tribulations de la communication administrative</title>
    <link href="https://blog.foojin.com/2024/04/24/les-tribulations-de-la-communication-administrative/" />
    <updated>2024-04-24T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/04/24/les-tribulations-de-la-communication-administrative/</id>
    <content type="html">&lt;p&gt;Cela fait plusieurs années que je suis membre du bureau d&#39;une association de jeu de rôle et si nos interactions avec la mairie sont rares, elles ne sont jamais sereines car tout parait toujours compliqué et insurmontable avec eux.&lt;/p&gt;
&lt;h2 id=&quot;la-situation&quot;&gt;La situation&lt;/h2&gt;
&lt;p&gt;Cette association compte une trentaine de membres et la mairie nous prête donc des locaux (qui est un appartement vraiment) dans la ville.&lt;br&gt;
Cette ville de 17 000 habitants est assez grande pour avoir son service dédié à la vie associative.&lt;br&gt;
Cet appartement compte 4 salles :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;un &lt;strong&gt;garage&lt;/strong&gt;, utilisé par une autre association&lt;/li&gt;
&lt;li&gt;un &lt;strong&gt;salon&lt;/strong&gt;, utilisé par encore une autre association&lt;/li&gt;
&lt;li&gt;une &lt;strong&gt;première chambre&lt;/strong&gt; utilisée par notre association&lt;/li&gt;
&lt;li&gt;une &lt;strong&gt;deuxième chambre&lt;/strong&gt; utilisée par absolument personne depuis des années (pas souvenir qu&#39;elle ait jamais été utilisée par une autre association pour tout dire).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Depuis des années nous utilisons notre salle attitrée ainsi que la deuxième chambre, d&#39;un commun accord (officieux) avec la mairie, et quand le besoin se fait sentir, ce qui est le cas au moins une fois par semaine sinon deux. Cette seconde salle donc est toujours ouverte et nous n&#39;en avons pas les clés puisqu&#39;elle n&#39;est pas vraiment à nous, ni à personne d&#39;autre au final et qu&#39;elle ne contient en tout et pour tout que d&#39;une table, des chaises et une lampe halogène.&lt;br&gt;
Matériel qui, soit dit en passant, appartient à notre association.&lt;/p&gt;
&lt;h2 id=&quot;le-premier-probleme&quot;&gt;Le premier problème&lt;/h2&gt;
&lt;p&gt;L&#39;année dernière en juin 2023, quelqu&#39;un dont on ignore l&#39;identité est passé dans les locaux et a fermé cette porte à notre plus grand désarroi. Il aura fallu moult mails et coups de fil pour que la mairie s&#39;en occupe et ouvre de nouveau la salle.&lt;/p&gt;
&lt;p&gt;En cause : leur inaptitude à découvrir qui, parmi ses agents, avait les clés…&lt;/p&gt;
&lt;p&gt;Et l&#39;opération aurait été rendu plus complexe par la période estivale et le fait qu&#39;ils devait préparer le forum des associations prévu pour début septembre. Admettons.&lt;/p&gt;
&lt;p&gt;Au final il leur aura fallu 3 mois pour régler le problème. Une porte fermée donc. La rouvrir. 3 mois…&lt;/p&gt;
&lt;p&gt;Puis plus de problème… jusque Février 2024.&lt;/p&gt;
&lt;h2 id=&quot;la-porte-fermee-2-le-retour&quot;&gt;La porte fermée 2, le retour&lt;/h2&gt;
&lt;p&gt;Aux alentours de la mi-février 2024, on retrouve cette même salle de nouveau fermée.&lt;br&gt;
On appelle donc la mairie. Et c&#39;est ainsi que commença l&#39;escape game le plus compliqué de toute ma vie.&lt;/p&gt;
&lt;p&gt;Tout d&#39;abord, il faut savoir que tous nos premiers contacts ont toujours été cordiaux malgré une frustration grandissante au sein du bureau et vous allez vite comprendre pourquoi.&lt;/p&gt;
&lt;p&gt;La première réponse à notre demande de réouverture de la salle était dans les grandes lignes :&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;On ne sait pas qui a fermé la porte, on va essayer d&#39;en savoir plus.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;C&#39;est cool mais nous on s&#39;en fout de savoir qui a fermé la porte… on cherche pas à blâmer quelqu&#39;un, juste à ouvrir une porte.&lt;/p&gt;
&lt;p&gt;Et puis ça dure, 1 mois durant, malgré les relances cordiales.&lt;br&gt;
Jusqu&#39;au jour où on en a marre et notre trésorier envoie un mail, assez relevé mais pas insultant et on obtient des réponses. Des réponses bienvenues mais pas spécialement rassurantes.&lt;/p&gt;
&lt;p&gt;Il s&#39;avère que la clé de cette porte est inconnue au bataillon. Aucun service de la mairie n&#39;a le double de cette clé et ils n&#39;ont aucun registre contenant les noms des personnes extérieures à la mairie qui pourraient l&#39;avoir en sa possession.&lt;br&gt;
Pour les plus attentifs d&#39;entre vous, vous aurez peut être remarqué qu&#39;ils avaient la clé il y a 6 mois puisqu&#39;ils ont pu ouvrir la porte mais apparemment ce n&#39;est plus le cas.&lt;/p&gt;
&lt;p&gt;Mais bref, ils ne peuvent plus l&#39;ouvrir.&lt;br&gt;
Toutefois ils nous proposent une solution, ils vont demander à ce que quelqu&#39;un passe pour forcer l&#39;ouverture et changer la serrure pour faire les choses au carré cette fois.&lt;/p&gt;
&lt;p&gt;Grande nouvelle ! Enfin les prémices d&#39;une résolution !&lt;/p&gt;
&lt;p&gt;Ça c&#39;était y a un mois…
On a dû relancer une nouvelle fois pour que eux-même relancent le service qui s&#39;occupe de ça.&lt;/p&gt;
&lt;p&gt;En même temps fallait le voir venir, que des rôlistes soient mis à l&#39;amende par une porte fermée c&#39;est pas vraiment original (les vrais sachent).&lt;/p&gt;
&lt;h2 id=&quot;la-goutte-d-eau&quot;&gt;La goutte d&#39;eau&lt;/h2&gt;
&lt;p&gt;Et si vous croyez que cette foutue porte était le seul soucis qu&#39;on avait mais que nenni !&lt;/p&gt;
&lt;p&gt;La mairie a décidé cette année de gérer les associations via une application et au demeurant c&#39;est une très bonne idée vu la quantité d&#39;associations dans la ville.&lt;br&gt;
Bon je suis pas super fan de l&#39;ergonomie du portail en question et franchement le tout me parait pas très professionnel mais bon, ça fait le boulot alors on va pas trop s&#39;en plaindre.&lt;/p&gt;
&lt;p&gt;Au delà d&#39;y déposer les documents administratifs indispensables (comme les statuts, comptes rendu d&#39;AG, etc) on peut aussi y réserver les salles pour nos activités, que ce soit des réservations ponctuelles (réunion d&#39;AG) ou récurrentes pour les activités toute l&#39;année donc.&lt;/p&gt;
&lt;p&gt;Je m&#39;y suis connecté pour faire une demande de réservation pour notre salle habituelle ainsi que la seconde salle histoire qu&#39;elle nous soit enfin attribuée et qu&#39;on ait plus de problème de salle fermée à l&#39;avenir.&lt;/p&gt;
&lt;p&gt;Mais quelle ne fut pas ma surprise dis donc de voir que… aucune des deux salles n&#39;était dans la liste.&lt;/p&gt;
&lt;p&gt;J&#39;ai alors contacté le service de la vie associative il y a 11 jours et je n&#39;ai pas eu une seule réponse, même pas une de bonne réception.&lt;/p&gt;
&lt;p&gt;J&#39;ai renvoyé un mail faisant clairement état de ma frustration tout en restant aussi cordial que possible… et dans l&#39;heure j&#39;avais une réponse.&lt;/p&gt;
&lt;p&gt;Deux fois qu&#39;on les contacte à de multiples occasions de manière très cordiale sans avoir une seule réponse et deux fois ils nous répondent dans l&#39;heure uniquement quand on s&#39;énerve…&lt;/p&gt;
&lt;p&gt;Je trouve ça triste de devoir en arriver là, de devoir devenir une Karen ou un Jean-Michel (je ne connais pas l&#39;équivalent masculin), non pas pour obtenir ce que je veux mais seulement pour avoir une réponse.&lt;/p&gt;
&lt;p&gt;Enfin bref…&lt;/p&gt;
&lt;p&gt;Vous reprendrez bien un peu de laisser-passer A38 avec ça ?&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>To the future</title>
    <link href="https://blog.foojin.com/2024/04/11/to-the-future/" />
    <updated>2024-04-11T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/04/11/to-the-future/</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac…&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Je me suis rajouté une petite page &amp;quot;&lt;a href=&quot;https://blog.foojin.com/projects/&quot;&gt;Projets&lt;/a&gt;&amp;quot; sur le blog.&lt;/p&gt;
&lt;p&gt;Non pas que je croule sous les projets au point qu&#39;il me faille une page pour me souvenir mais j&#39;ai eu l&#39;envie de le faire en voyant quelques pages &amp;quot;&lt;a href=&quot;https://nownownow.com/&quot;&gt;now&lt;/a&gt;&amp;quot; d&#39;autres pairs.&lt;/p&gt;
&lt;p&gt;Alors vous seriez en droit de vous poser la question pourquoi ne pas faire tout simplement ma propre page &lt;strong&gt;now&lt;/strong&gt; dans ce cas ?&lt;/p&gt;
&lt;p&gt;Parce que je me connais, j&#39;oublierai constamment de la mettre à jour et elle serait constamment obsolète, ce qui à mon sens, va un peu à l&#39;encontre de l&#39;idée.&lt;/p&gt;
&lt;p&gt;Mais les projets eux, ça change pas très souvent alors je me suis dit que j&#39;allais rajouté ça.&lt;/p&gt;
&lt;p&gt;C&#39;est chose faite !&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Je viens de lire &lt;a href=&quot;https://www.dargaud.com/bd/la-route/la-route-la-route-bda5512960&quot;&gt;La route&lt;/a&gt; de Larcenet. C&#39;était magnifique. Triste et magnifique.&lt;/p&gt;
&lt;p&gt;J&#39;avoue, j&#39;ai toujours eu du mal à lire les œuvres de Larcenet post Fluide Glacial. J&#39;aimais tellement son humour que quand il a arrêté d&#39;en faire ça m&#39;a laissé un goût amer.&lt;/p&gt;
&lt;p&gt;Je critique en aucune manière la qualité de ses œuvres après son virement vers le dramatique mais c&#39;était tellement différent que j&#39;ai jamais pu vraiment m&#39;y faire.&lt;/p&gt;
&lt;p&gt;Et puis je me suis laissé tenter par &lt;strong&gt;La route&lt;/strong&gt;. Ce tracé, ça lui va tellement bien. C&#39;était beau, c&#39;était propre.&lt;/p&gt;
&lt;p&gt;Je crois que je me suis réconcilié avec moi-même et que j&#39;ai fait le deuil du jeune Manu Larcenet. Pour mon plus grand plaisir.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Je suis bientôt arrivé au tiers de mon &lt;a href=&quot;https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/&quot;&gt;challenge photo&lt;/a&gt; et je suis plutôt satisfait de la tournure que ça prend. Ce n&#39;est pas à chaque fois facile mais je suis toujours motivé et ça me permet de continuer à tester plein de choses. Ce qui va me conforter dans l&#39;idée que je trouverai jamais une spécialité mais pour le moment ça me convient bien.&lt;/p&gt;
&lt;p&gt;Et puis je commence à doucement entrevoir des idées de séries de photo. Ça me met en joie.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Déception d&#39;une compatibilité illusoire</title>
    <link href="https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/" />
    <updated>2024-04-05T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac…&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;J&#39;aime pas trop la pub. J&#39;apprécie pas trop Instagram non plus mais force est d&#39;admettre que c&#39;est encore une plateforme où les photographes trainent alors j&#39;y suis aussi.&lt;/p&gt;
&lt;p&gt;Mais je me suis dit que j&#39;allais payer l&#39;abonnement sans pub, parce que je peux me le permettre et parce que j&#39;ai vraiment pas envie que &lt;strong&gt;Meta&lt;/strong&gt; me suce mes données personnelles.&lt;/p&gt;
&lt;p&gt;Enfin ça c&#39;était le plan.&lt;/p&gt;
&lt;p&gt;J&#39;avais réussi à m&#39;abonner il y a quelques mois déjà, non sans mal mais j&#39;ai arrêté l&#39;abonnement suite à leur changement tarifaire qui consiste à te faire payer pour chaque compte Facebook + Instagram d&#39;un même compte Meta. Autant Instagram j&#39;utilise mais Facebook pas vraiment alors j&#39;allais pas payer pour ça.&lt;/p&gt;
&lt;p&gt;Bref nous voici donc maintenant où quand je me connecte à Instagram il me dit qu&#39;il faut que je prenne une décision de nouveau à propos de mes données personnelles.&lt;/p&gt;
&lt;p&gt;Je décide donc de m&#39;abonner de nouveau (maintenant que j&#39;ai bien séparé mes comptes Facebook et Instagram) en passant par &lt;em&gt;instagram.com&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Petit problème cependant dans le tunnel de paiement, c&#39;est que Instagram n&#39;autorise pas les sites à l&#39;intégrer dans une iframe… même si le site en question est Instagram lui-même…&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-400.avif 400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-812.avif 812w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-1094.avif 1094w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-400.webp 400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-812.webp 812w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-1094.webp 1094w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-400.png&quot; alt=&quot;Firefox ne peut ouvrir cette page&quot; width=&quot;1094&quot; height=&quot;1244&quot; srcset=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-400.png 400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-812.png 812w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/LTE_axxlpN-1094.png 1094w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Impossible d&#39;aller au bout du tunnel de paiement donc. Évidemment le problème est le même quelque soit le navigateur utilisé.&lt;/p&gt;
&lt;p&gt;Je me laisse pas faire pour autant. J&#39;accepte donc le compte en &amp;quot;gratuit avec publicité&amp;quot;, ce qui me permet d&#39;enfin afficher Instagram normalement et ensuite d&#39;aller dans les paramètres de mon compte Meta.&lt;/p&gt;
&lt;p&gt;Une fois là-bas, n&#39;étant plus du tout dans le même environnement, je me dis que ça pouvait passer puisque c&#39;était le même genre de problème que j&#39;avais eu la première fois.&lt;/p&gt;
&lt;p&gt;Et bingpot ! Ça fonctionne ! Je peux enfin payer !&lt;/p&gt;
&lt;p&gt;Je valide le paiement auprès de ma banque et ça me dit bien que la banque valide et que ça va revenir sur le site Meta. Et BIM page blanche…&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-400.avif 400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-812.avif 812w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-1400.avif 1400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-1964.avif 1964w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-400.webp 400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-812.webp 812w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-1400.webp 1400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-1964.webp 1964w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-400.png&quot; alt=&quot;Page de redirection blanche&quot; width=&quot;1964&quot; height=&quot;1546&quot; srcset=&quot;https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-400.png 400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-812.png 812w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-1400.png 1400w, https://blog.foojin.com/2024/04/05/deception-d-une-compatibilite-illusoire/Kj_1lkRNwx-1964.png 1964w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;En regardant le code, je vois qu&#39;il y a un &lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt; censé être soumis au &lt;code&gt;onload&lt;/code&gt; mais manifestement rien ne se passe et pas d&#39;erreur dans la console.&lt;/p&gt;
&lt;p&gt;À ce moment-là, je ne sais toujours pas si mon paiement est passé ou pas.
Et quand je vais voir le statut de mon compte, il est toujours marqué comme étant &amp;quot;Gratuit avec publicité&amp;quot;.&lt;/p&gt;
&lt;p&gt;Bref, j&#39;ai signalé un problème auprès de Meta mais je ne sais toujours pas si mon paiement est passé ou non.&lt;/p&gt;
&lt;p&gt;J&#39;ai bien compris qu&#39;ils étaient forts question monétisation des données personnelles mais manifestement, là où tous les autres maitrisent les tunnels de paiement avec du vrai argent, eux sont clairement à la ramasse et ne savent pas faire du tout.&lt;/p&gt;
&lt;p&gt;Si j&#39;étais cynique je dirais qu&#39;ils ont tellement pas envie que les gens payent qu&#39;ils ne testent même pas cette fonctionnalité proprement et s&#39;en battent un peu les roubignoles.&lt;/p&gt;
&lt;p&gt;Mais je ne suis pas cynique, oh non. 🙃&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;J&#39;ai réessayé quelques jours plus tard toujours sans succès et puis j&#39;ai eu une épiphanie…&lt;/p&gt;
&lt;p&gt;J&#39;ai essayé avec un autre navigateur, Chrome en l&#39;occurrence, et ça a marché.&lt;/p&gt;
&lt;p&gt;Une partie de moi est soulagé que ce soit fini et que j&#39;ai plus à me taper des pubs sans fin mais une autre est sévèrement outré qu&#39;une fonctionnalité aussi importante sur un site si gros ne fonctionne pas sur Firefox.&lt;/p&gt;
&lt;p&gt;Il serait vain de vous exposer à quel point j&#39;ai envie de casser des trucs… mais vous avez l&#39;idée.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Pourquoi faire simple quand on peut faire absurde</title>
    <link href="https://blog.foojin.com/2024/03/20/pourquoi-faire-simple-quand-on-peut-faire-absurde/" />
    <updated>2024-03-20T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/03/20/pourquoi-faire-simple-quand-on-peut-faire-absurde/</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac……&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;J&#39;ai réagi sur un &lt;em&gt;toot&lt;/em&gt; de &lt;a href=&quot;https://fediverse.zachleat.com/@zachleat/112117301801565699#.&quot;&gt;Zach Leatherman&lt;/a&gt; qui reprend un &lt;em&gt;tweet&lt;/em&gt; d&#39;une personne demandant un outil simple pour pondre quelques pages pour un site personnel et une des réponses était d&#39;utiliser &lt;strong&gt;React&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Je ne remets pas en cause l&#39;existence même de &lt;strong&gt;React&lt;/strong&gt; (encore que ça ne serait pas déconnant mais ce n&#39;est pas le sujet) mais sérieusement… React n&#39;a rien de simple et dans ce contexte c&#39;est utiliser une usine à gaz pour chauffer l&#39;eau de son thé; tant sur le plan technique ou de performance qu&#39;écologique c&#39;est la pire des idées de faire ça pour ce genre de site.&lt;/p&gt;
&lt;p&gt;Et ce qui m&#39;a le plus choqué c&#39;est que personne n&#39;a répondu en alertant sur ce sujet. La hype des nouveaux joujoux JS à utiliser à tort et à travers pour tout et n&#39;importe quoi m&#39;exaspère de plus en plus.&lt;/p&gt;
&lt;p&gt;Puis je me suis demandé si je devenais vieux et con… peut-être un peu…&lt;/p&gt;
&lt;p&gt;Et finalement je suis tombé sur une réponse de &lt;a href=&quot;https://twitter.com/doctorbaytas/status/1769271734048276901&quot;&gt;@doctorbaytas&lt;/a&gt; qui a fini de m&#39;achever :&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I have used &lt;a href=&quot;https://twitter.com/eleven_ty&quot;&gt;@eleven_ty&lt;/a&gt; before for my personal site and it was pretty good &lt;br&gt;
same mindset as &lt;a href=&quot;https://twitter.com/jekyllrb&quot;&gt;@jekyllrb&lt;/a&gt;, built on JS instead of Ruby &lt;br&gt;
(later scrapped it and rebuilt in &lt;a href=&quot;https://twitter.com/nextjs&quot;&gt;@nextjs&lt;/a&gt; because why would you live without &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt;)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&amp;quot;why would you live without React&amp;quot; ? Non… la bonne question serait plutôt : As-tu &lt;strong&gt;VRAIMENT&lt;/strong&gt; besoin de React. Genre &lt;em&gt;vraiment&lt;/em&gt; !? Pour un putain de site vitrine pour ta tronche que tu mets à jour tous les 6 mois ?!&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;(╯°□°）╯︵ ┻━┻
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;#environdemourir&lt;/code&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Mon association de jeu de rôle subit un problème depuis quelques semaines qui frôle, que dis-je, qui nage en pleine absurdité administrative.&lt;/p&gt;
&lt;p&gt;Nous avons une salle dans un logement appartenant à la mairie, sauf qu&#39;une salle n&#39;est pas suffisant pour nous alors on &amp;quot;squatte&amp;quot; une autre salle du même logement (que personne d&#39;autre n&#39;utilise jamais) pour pouvoir accueillir plusieurs tables en même temps et parfois un agent de la mairie passe dans le logement pour &lt;em&gt;x&lt;/em&gt; raison et ferme cette deuxième salle à clé… sauf que nous n&#39;avons pas la clé, nous n&#39;avons que celle de la première salle qui nous est légitimement attitrée.&lt;/p&gt;
&lt;p&gt;Tout ça, la mairie est bien sûr au courant et nous laisse utiliser cette salle supplémentaire en bonne intelligence.&lt;/p&gt;
&lt;p&gt;Mais voilà, quand l&#39;agent passe et ferme il nous faut prévenir la mairie pour qu&#39;elle envoie quelqu&#39;un rouvrir la salle ce qui est une opération plutôt simple et directe. Sauf que la dernière fois que c&#39;est arrivé, malgré les multiples relances, il aura fallu 3 mois pour que l&#39;agent passe. Alors c&#39;était durant les vacances d&#39;été donc moins gênant vu la faible fréquentation mais tout de même, ça nous a bien emmerdé quand ça s&#39;est étalé jusqu&#39;à la rentrée.&lt;/p&gt;
&lt;p&gt;Et puis l&#39;agent est repassé récemment et a refermé cette foutue porte il y a un mois tout pile.&lt;/p&gt;
&lt;p&gt;On arrête pas de les relancer et si la fois précédente ils disaient galérer à trouver quel agent avait les clés (pour lui dire d&#39;aller rouvrir), désormais la communication c&#39;est &amp;quot;on sait qui a les clés&amp;quot; mais ils ne savent pas qui a fermé et comment résoudre le problème.&lt;/p&gt;
&lt;p&gt;Mais nous on s&#39;en fout de savoir qui a fermé (sûrement une personne qui faisait bêtement son job), on ne cherche pas un bouc émissaire à flageller, on veut juste que quelqu&#39;un passe et ouvre cette porte.&lt;/p&gt;
&lt;p&gt;Mais ça a l&#39;air vachement compliqué comme requête pour une mairie apparemment.&lt;/p&gt;
&lt;p&gt;Je serais pas étonné que ça déconne plein pot question organisation côté mairie et que ce soit un poil plus compliqué que juste de la bêtise humaine, mais ça me fout les glandes parce que pendant ce temps-là on est obligé d&#39;annuler ou reporter des soirées faute de place alors qu&#39;il y en a juste derrière cette porte fermée.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;ʕノ•ᴥ•ʔノ ︵ ┻━┻
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;#environdemourir #leretour&lt;/code&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Les hauts mais surtout les bas</title>
    <link href="https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/" />
    <updated>2024-03-15T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac…&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Au cours de mes pérégrinations sur &lt;a href=&quot;https://mamot.fr/@GoOz&quot;&gt;Mastodon&lt;/a&gt; je suis tombé sur deux billets traitant le même sujet : &lt;strong&gt;Ne pas mettre de &lt;code&gt;margin&lt;/code&gt; sur un composant réutilisable&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Les articles en question :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://kyleshevlin.com/no-outer-margin/&quot;&gt;No outer margin&lt;/a&gt; par Kyle Shevlin&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://mxstbr.com/thoughts/margin/&quot;&gt;Margin considered harmful&lt;/a&gt; par Max Stoiber&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Au delà du fait que cela n&#39;a rien de nouveau, que je fais ça depuis des années comme beaucoup d&#39;autres qui travaillent sur des composants réutilisables et qui sont vite tombés sur ce problème récurrent, ce qui m&#39;a gêné le plus dans ces articles c&#39;est que leurs exemples sont toujours dans un contexte &lt;strong&gt;React/JS&lt;/strong&gt; or ce n&#39;est pas du tout un problème lié à ce contexte, c&#39;est un problème inhérent à CSS, complètement agnostique de la stack front utilisée.&lt;/p&gt;
&lt;p&gt;On aura le même problème sur n&#39;importe quel framework JS et même en HTML tout simplement.&lt;/p&gt;
&lt;p&gt;C&#39;est comme si &lt;em&gt;React&lt;/em&gt; était le nouveau défaut. Sauf que non.&lt;/p&gt;
&lt;p&gt;Ce n&#39;est peut être que moi mais quand tu parles d&#39;un problème global, je pense que tu devrais faire des exemples qui parlent à tout le monde en utilisant du code neutre.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-400.avif 400w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-812.avif 812w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-1400.avif 1400w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-2560.avif 2560w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-400.webp 400w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-812.webp 812w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-1400.webp 1400w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-2560.webp 2560w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-400.png&quot; alt=&quot;Meme de Peter Griffin de la série Family Guy présentant what really grinds my gears&quot; width=&quot;2560&quot; height=&quot;1445&quot; srcset=&quot;https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-400.png 400w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-812.png 812w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-1400.png 1400w, https://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/F7QhahHBcQ-2560.png 2560w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Hier soir avec des amis on a enfin fait la cérémonie de commémoration d&#39;un ami décédé en septembre.&lt;/p&gt;
&lt;p&gt;Ça a commencé par dispersion de ses cendres au pied d&#39;un arbre que l&#39;on a planté dans la forêt pour l&#39;occasion et puis on a fini par un feu de joie (pas dans la forêt hein, on est allé ailleurs) pendant lequel on a brûlé des mots, des documents et d&#39;autres choses.&lt;/p&gt;
&lt;p&gt;Il est le deuxième ami parti beaucoup trop tôt à cause d&#39;un cancer.&lt;/p&gt;
&lt;p&gt;C&#39;est toujours aussi difficile. Voire même plus. Ça a ravivé des douleurs enfouies depuis des années.&lt;/p&gt;
&lt;p&gt;Je ne suis pas religieux, ni même spirituel de quelque manière que ce soit, alors je n&#39;ai pas pu m&#39;imaginer ou souhaiter qu&#39;il soit bien là où il est. Pour moi il n&#39;est nulle part, il n&#39;est juste plus.&lt;/p&gt;
&lt;p&gt;Ce qui reste, c&#39;est juste les autres. Nous, avec nous même.&lt;/p&gt;
&lt;p&gt;Adieu Gillou…&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Un pour l’argent, deux pour le spectacle, et trois pour le caillou.</title>
    <link href="https://blog.foojin.com/2024/03/12/un-pour-l%E2%80%99argent-deux-pour-le-spectacle-et-trois-pour-le-caillou./" />
    <updated>2024-03-12T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/03/12/un-pour-l%E2%80%99argent-deux-pour-le-spectacle-et-trois-pour-le-caillou./</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac…&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Je trouve que ça a un effet relaxant d&#39;écrire du CSS moderne. La satisfaction que cela me procure est &lt;em&gt;étrangement&lt;/em&gt; inversement proportionnelle à la frustration que j&#39;éprouvais quand je faisais du support IE jadis.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;:where(input[type=&quot;file&quot;])&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--brand-main&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1px solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;border-radius&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--reset-font-size&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; * &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-7&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; + &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-2&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--background-dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--placeholder&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font-style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; italic&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;padding-inline-end&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-3&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token selector&quot;&gt;&amp;amp;::file-selector-button&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;margin-inline-end&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-3&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-2&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-3&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--color&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--body-light&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token selector&quot;&gt;&amp;amp;:where(:hover)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;--color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--brand-dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token selector&quot;&gt;&amp;amp;:where(:active)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;--color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--brand-darker&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token selector&quot;&gt;&amp;amp;:where([disabled])&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;--color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--brand-disabled&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;cursor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; not-allowed&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;p&gt;A propos du développement frontend (et plus particulièrement CSS)…&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Certain pursuits are validated with importance, dignity, and honor.&lt;/p&gt;
&lt;p&gt;Doctors; lawyers; architects; CEOs; software engineers.&lt;/p&gt;
&lt;p&gt;Some kinds of work are “serious” work, which is well and good—except that, implicitly, that means other kinds are &lt;em&gt;not&lt;/em&gt; serious.&lt;/p&gt;
&lt;p&gt;We might not ever say it, or even think it, but when we cast some people as heroes, we relegate others to the role of the sidekick—even though their labor is no less important, and they do at least as much to push the work toward success.&lt;/p&gt;
&lt;p&gt;Nurses; paralegals; interior designers; executive assistants; frontend developers.&lt;/p&gt;
&lt;p&gt;(Surely it’s a coincidence the first group tends to be more male than the second.)&lt;/p&gt;
&lt;p&gt;— &lt;em&gt;Josh Collinsworth&lt;/em&gt; ~ &lt;a href=&quot;https://joshcollinsworth.com/blog/devaluing-frontend&quot;&gt;The quiet, pervasive devaluation of frontend&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;C&#39;est l&#39;histoire de toute ma carrière…&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Depuis que je suis sur &lt;a href=&quot;https://glass.photo/&quot;&gt;Glass&lt;/a&gt; (réseau social pour photographes payant mais très bienveillant et de qualité selon moi) je vois le travail de nombreux photographes qui ont du talent et je remarque souvent qu&#39;ils ou elles ont une sorte de touche personnelle, une sorte de type de photo de prédilection.&lt;/p&gt;
&lt;p&gt;Et quand je regarde &lt;a href=&quot;https://www.bloogart.com/&quot;&gt;ce que je fais&lt;/a&gt;, je ne vois aucun fil rouge. Je touche à beaucoup de type de photo, j&#39;expérimente beaucoup, même &lt;a href=&quot;https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/&quot;&gt;mon challenge pour l&#39;année&lt;/a&gt; est aléatoire…&lt;/p&gt;
&lt;p&gt;J&#39;arrive pas à me décider si c&#39;est une bonne chose ou pas que je ne me sois pas trouvé un type de prédilection. Le faut-il seulement ? Ou alors j&#39;ai bien une touche perso mais je suis pas assez détaché et objectif pour le voir.&lt;/p&gt;
&lt;p&gt;🤷‍♂️&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Il y a un début à tout</title>
    <link href="https://blog.foojin.com/2024/03/08/il-y-a-un-debut-a-tout/" />
    <updated>2024-03-08T00:00:00Z</updated>
    <id>https://blog.foojin.com/2024/03/08/il-y-a-un-debut-a-tout/</id>
    <content type="html">&lt;p&gt;&lt;strong&gt;Des trucs en vrac…&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Comme de nombreux copains et copines qui le font déjà depuis de belles lurettes, je vais m&#39;atteler à essayer de poster des billets &amp;quot;fourre-tout&amp;quot;, c&#39;est à dire une sorte de bric à brac de notes, pensées, liens utiles, etc.
En bref tout ce qui peut bien me passer par la tête mais qui ne mériterait pas un post à part entière.&lt;/p&gt;
&lt;p&gt;La périodicité sera évidemment aussi chaotique que son contenu.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;J&#39;ai mis un peu à jour ce blog en enlevant des tags pas franchement utiles, voire même embrouillants.&lt;/p&gt;
&lt;p&gt;Et puis j&#39;ai rajouté une table des matières ou navigation de page sur les billets (quand y en a besoin). J&#39;aime bien, ça rend bien. :3&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Élément phare de ma liste de choses à procrastiner et ce depuis des lustres, &lt;a href=&quot;https://github.com/tweetback/tweetback&quot;&gt;Tweetback&lt;/a&gt; est désormais installé &lt;a href=&quot;https://tweets.foojin.com/&quot;&gt;chez moi&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Pour être honnête je ne suis pas convaincu d&#39;en avoir un jour l&#39;utilité. Faut dire que depuis 2009 (l&#39;année de mon inscription) j&#39;ai écrit beaucoup de conneries et sûrement pas mal de trucs moins cons… mais je ne m&#39;en souviens pas.&lt;/p&gt;
&lt;p&gt;C&#39;est plus par soucis de reprise de contrôle de mes conneries que je l&#39;ai fait.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Shuffle, mon challenge photo de l&#39;année</title>
    <link href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/" />
    <updated>2023-12-22T00:00:00Z</updated>
    <id>https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/</id>
    <content type="html">&lt;p&gt;Depuis quelques temps je me suis un peu poussé au cul pour reprendre la photographie avec plus d&#39;assiduité. Seul problème, mon boulot consiste à avoir ce même cul vissé sur une chaise toute la journée devant un ordinateur et ce toujours dans le même bureau, chez moi. Alors je me suis mis à penser que faire un petit challenge serait une bonne idée.&lt;/p&gt;
&lt;h2 id=&quot;la-genese&quot;&gt;La génèse&lt;/h2&gt;
&lt;p&gt;Je voulais commencer par un challenge tranquille mais pas trop, donc ce serait un challenge 52, c&#39;est à dire 1 photo par semaine dans l&#39;année, soit 52 photos.&lt;br&gt;
Mais le truc un peu chiant à mon goût c&#39;est que la plupart des challenges existants (sur lesquels je suis tombé tout du moins) tournent beaucoup autour de thématiques et ça me fait chier, j&#39;ai pas envie de chercher spécifiquement des jolies fleurs parce que cette semaine là le thème est &amp;quot;fleur&amp;quot;.&lt;br&gt;
Sinon parfois on est sur des techniques ou des compositions spécifiques et ça me fait tout autant chier, surtout parce que y a des techniques ou compositions que j&#39;aime pas donc faire un truc que j&#39;aime pas juste pour remplir un challenge, ça me gave.&lt;/p&gt;
&lt;p&gt;Oui mais quoi alors ? Il faut des contraintes pour que ce soit un peu fun, sinon c&#39;est un challenge 1 photo par semaine et YOLO… ce qui serait valide mais je cherche un truc en plus, contraignant, pour faire travailler un peu la créativité, m&#39;voyez ?&lt;/p&gt;
&lt;p&gt;Il me fallait un truc cohérent sur toute l&#39;année, contraignant d&#39;une manière ou d&#39;une autre et fun aussi pendant qu&#39;on y est.&lt;/p&gt;
&lt;p&gt;Et puis en bon joueur de jeu de rôle, j&#39;ai pensé à des dés pour faire du hasard. Genre lancer 3 dés pour obtenir des valeurs aléatoires. Des valeurs aléatoires pour des paramètres d&#39;exposition par exemple. Des trucs comme les ISO, la vitesse d&#39;obturation et l&#39;ouverture, le triptyque gagnant de base de toute photographie.&lt;/p&gt;
&lt;p&gt;C&#39;était décidé ! J&#39;allais lancé 3 dés, une fois par semaine, et me démerder pour essayer de faire une photo qui me ressemble et que j&#39;aime avec ces contraintes aléatoires. Ceux qui s&#39;y connaissent assez en optique et donc en photographie savent que ça peut vite tourner au vinaigre cette histoire, qu&#39;on a vite fait de se retrouver avec des photos toutes noires ou toutes blanches ou… de manière plus globale des photos qu&#39;on appellerait des ratées.&lt;br&gt;
Mais c&#39;est bien là qu&#39;est tout le fun du challenge je trouve, essayer de trouver comment faire un truc sympa avec des paramètres qui peuvent être facilitants ou bien complètement foireux. Et en plus ça aura le mérite de me forcer à bien prendre en main mon appareil en passant tout en manuel comme ça.&lt;/p&gt;
&lt;h2 id=&quot;la-methodologie&quot;&gt;La méthodologie&lt;/h2&gt;
&lt;p&gt;Je vais vous décrire ici comment je vais procéder pour que, si jamais ça vous tente aussi, vous puissiez reproduire l&#39;expérience de votre côté avec votre propre matériel.&lt;/p&gt;
&lt;p&gt;Tout d&#39;abord il vous faut choisir un seul et unique appareil avec un seul et unique objectif.&lt;br&gt;
Pour ma part part ce sera mon &lt;strong&gt;Fujifilm X-T5&lt;/strong&gt; avec mon objectif à focale fixe &lt;strong&gt;Fujinon 35mm/f1.4&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;À partir de là vous aller devoir lister le nombre de valeurs possibles que votre appareil propose pour la sensibilité (ISO), de même pour la vitesse d&#39;obturation, puis faire une dernière fois ça avec votre objectif pour l&#39;ouverture.&lt;/p&gt;
&lt;h3 id=&quot;sensibilite-iso&quot;&gt;Sensibilité (ISO)&lt;/h3&gt;
&lt;p&gt;Sur mon appareil j&#39;ai 21 valeurs possible pour les ISO, ce qui donne un tableau de correspondance comme suit :&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Valeur dé&lt;/th&gt;
&lt;th&gt;Valeur ISO&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;125&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;160&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;250&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;td&gt;320&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;6&lt;/td&gt;
&lt;td&gt;400&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;7&lt;/td&gt;
&lt;td&gt;500&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;td&gt;640&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;9&lt;/td&gt;
&lt;td&gt;800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;1000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;11&lt;/td&gt;
&lt;td&gt;1250&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;12&lt;/td&gt;
&lt;td&gt;1600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;td&gt;2000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;14&lt;/td&gt;
&lt;td&gt;2500&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;15&lt;/td&gt;
&lt;td&gt;3200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;16&lt;/td&gt;
&lt;td&gt;4000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;17&lt;/td&gt;
&lt;td&gt;5000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;18&lt;/td&gt;
&lt;td&gt;6400&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;19&lt;/td&gt;
&lt;td&gt;8000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;20&lt;/td&gt;
&lt;td&gt;10000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;21&lt;/td&gt;
&lt;td&gt;12800&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 id=&quot;vitesse-d-obturation&quot;&gt;Vitesse d&#39;obturation&lt;/h3&gt;
&lt;p&gt;Sur mon appareil j&#39;ai 14 valeurs possible pour la vitesse d&#39;obturation, ce qui donne un tableau de correspondance comme suit :&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Valeur dé&lt;/th&gt;
&lt;th&gt;Valeur de vitesse&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;1&amp;quot;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;1/2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;1/4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;1/8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;td&gt;1/15&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;6&lt;/td&gt;
&lt;td&gt;1/30&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;7&lt;/td&gt;
&lt;td&gt;1/60&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;td&gt;1/125&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;9&lt;/td&gt;
&lt;td&gt;1/250&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;1/500&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;11&lt;/td&gt;
&lt;td&gt;1/1000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;12&lt;/td&gt;
&lt;td&gt;1/2000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;td&gt;1/4000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;14&lt;/td&gt;
&lt;td&gt;1/8000&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 id=&quot;ouverture&quot;&gt;Ouverture&lt;/h3&gt;
&lt;p&gt;Sur mon objectif j&#39;ai 22 valeurs possible pour l&#39;ouverture, ce qui donne un tableau de correspondance comme suit :&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Valeur dé&lt;/th&gt;
&lt;th&gt;Valeur d&#39;ouverture&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;16&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;14&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;11&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;6&lt;/td&gt;
&lt;td&gt;9&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;7&lt;/td&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;td&gt;7.1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;9&lt;/td&gt;
&lt;td&gt;6.4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;5.6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;11&lt;/td&gt;
&lt;td&gt;5.0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;12&lt;/td&gt;
&lt;td&gt;4.5&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;td&gt;4.0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;14&lt;/td&gt;
&lt;td&gt;3.6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;15&lt;/td&gt;
&lt;td&gt;3.2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;16&lt;/td&gt;
&lt;td&gt;2.8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;17&lt;/td&gt;
&lt;td&gt;2.5&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;18&lt;/td&gt;
&lt;td&gt;2.2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;19&lt;/td&gt;
&lt;td&gt;2.0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;20&lt;/td&gt;
&lt;td&gt;1.8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;21&lt;/td&gt;
&lt;td&gt;1.6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;td&gt;1.4&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 id=&quot;les-jets-de-des&quot;&gt;Les jets de dés&lt;/h3&gt;
&lt;p&gt;J&#39;ai beau avoir beaucoup de dés pour mes parties de jeu de rôle, j&#39;ai jamais eu, ni trouvé, de dé 21, 22 ou 14.&lt;br&gt;
Alors à la place on va utiliser une application en ligne, en l&#39;occurence &lt;a href=&quot;https://rolladie.net/&quot;&gt;Roll a Die&lt;/a&gt; qui a le mérite de pouvoir faire des dés aux valeurs personnelles ainsi que de nous permettre de lancer les 3 dés en une fois, pour chaque fois nous générer notre challenge de la semaine.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-400.avif 400w, https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-812.avif 812w, https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-1124.avif 1124w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-400.webp 400w, https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-812.webp 812w, https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-1124.webp 1124w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-400.png&quot; alt=&quot;Capture d&#39;écran de l&#39;application Roll a Die&quot; width=&quot;1124&quot; height=&quot;1232&quot; srcset=&quot;https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-400.png 400w, https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-812.png 812w, https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/a6R4jB9Vgc-1124.png 1124w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;yaplukafokon&quot;&gt;Yaplukafokon&lt;/h2&gt;
&lt;p&gt;Et voilà, j&#39;ai décidé d&#39;humblement appeler ce challenge le &lt;strong&gt;Shuffle challenge&lt;/strong&gt; !!&lt;/p&gt;
&lt;p&gt;Maintenant que tout est prêt, y a plus qu&#39;à se lancer. Ce que je ferai donc dès la première semaine de janvier 2024.&lt;/p&gt;
&lt;p&gt;Si jamais le challenge vous a tenté aussi, faites le moi savoir et partagez-moi vos clichés, ça m&#39;intéresse, quant aux miens ce sera comme d&#39;habitude sur &lt;a href=&quot;https://www.bloogart.com/&quot;&gt;www.bloogart.com/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Alea jacta est&lt;/em&gt; comme disait l&#39;autre.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Niepce, le kit pour portfolio statique</title>
    <link href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/" />
    <updated>2023-12-14T00:00:00Z</updated>
    <id>https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/</id>
    <content type="html">&lt;p&gt;Depuis que j&#39;ai refait ce blog en site statique avec &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt; je suis tombé amoureux de cet outil et j&#39;ai décidé de refaire aussi mon portfolio avec. Mais j&#39;ai remarqué qu&#39;il y avait peu ou pas de starter kit dans la communauté pour créer son portfolio. Alors je l&#39;ai fait… pour moi d&#39;abord et puis pour les autres ensuite.&lt;/p&gt;
&lt;h2 id=&quot;pourquoi-comment-et-a-quoi-ca-ressemble-donc&quot;&gt;Pourquoi, comment et à quoi ça ressemble donc ?&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Niepce&lt;/strong&gt; est un &lt;em&gt;starter kit&lt;/em&gt; pour vous aider à construire votre portfolio statique avec &lt;strong&gt;Eleventy&lt;/strong&gt; sans que vous ayez à tout faire vous même.&lt;/p&gt;
&lt;p&gt;Il est prêt à être généré tel quel mais vous aurez quelques petites choses à régler tout de même pour le faire vôtre.&lt;/p&gt;
&lt;p&gt;Le but premier était de rendre ce &lt;em&gt;starter kit&lt;/em&gt; de portfolio souple, configurable et, autant que faire se peut, accessible au plus grand nombre sauf qu&#39;&lt;strong&gt;Eleventy&lt;/strong&gt; a beau être génial, on va pas se mentir, c&#39;est pas à la portée du premier ou de la première venue; un certain niveau minimum de savoir technique est requis.&lt;br&gt;
J&#39;ai fait du mieux que j&#39;ai pu mais à un moment il faudra mettre les mains dans le cambouis, pas le choix.&lt;/p&gt;
&lt;p&gt;Pour voir à quoi ça ressemble pas besoin d&#39;aller bien loin, je vous invite à aller voir &lt;a href=&quot;https://www.bloogart.com/&quot;&gt;mon portfolio&lt;/a&gt;, c&#39;est encore le plus simple. Vous ne pourrez pas voir toutes les possibilités mais c&#39;est déjà un bon aperçu.&lt;/p&gt;
&lt;h2 id=&quot;les-fonctionnalites-integrees&quot;&gt;Les fonctionnalités intégrées&lt;/h2&gt;
&lt;h3 id=&quot;logo-personnalise&quot;&gt;Logo personnalisé&lt;/h3&gt;
&lt;p&gt;Si vous avez votre propre logo, vous pourrez l&#39;ajouter facilement.&lt;br&gt;
Si vous n&#39;en avez pas c&#39;est le nom du portfolio qui prendra sa place.&lt;/p&gt;
&lt;p&gt;Attention toutefois, le nom devra être court sous peine de passer à la ligne, c&#39;est pourquoi un logo est tout de même préférable.&lt;/p&gt;
&lt;h3 id=&quot;banniere-pour-les-partages-sociaux-avec-opengraph&quot;&gt;Bannière pour les partages sociaux avec OpenGraph&lt;/h3&gt;
&lt;p&gt;Quand vous ou quelqu&#39;un d&#39;autre partagera un lien vers votre site sur les réseaux sociaux ou sur toute autre plateforme qui gère &lt;a href=&quot;https://ogp.me/&quot;&gt;Opengraph&lt;/a&gt; cela affichera une carte avec les informations essentielles de la page partagée.&lt;/p&gt;
&lt;p&gt;Un peu comme ceci :
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/DJbATMgxV3-400.avif 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/DJbATMgxV3-794.avif 794w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/DJbATMgxV3-400.webp 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/DJbATMgxV3-794.webp 794w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/DJbATMgxV3-400.png&quot; alt=&quot;Capture d&#39;écran d&#39;un partage sur Twitter usant d&#39;OpenGraph&quot; width=&quot;794&quot; height=&quot;644&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/DJbATMgxV3-400.png 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/DJbATMgxV3-794.png 794w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Pour les pages de vos photos, ce sera déjà pris en charge mais pour le reste vous pouvez choisir une bannière personnalisée.&lt;/p&gt;
&lt;h3 id=&quot;les-tons-clair-et-obscur&quot;&gt;Les tons clair et obscur&lt;/h3&gt;
&lt;p&gt;Niepce existe en 3 saveurs :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;en ton clair&lt;/li&gt;
&lt;li&gt;en ton obscur&lt;/li&gt;
&lt;li&gt;en ton automatique&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;En bref, vous avez le choix de forcer un des deux tons ou de laisser les préférences utilisateurs choisir à votre place.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Le ton clair&lt;/strong&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-400.avif 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-812.avif 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-1400.avif 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-2880.avif 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-400.webp 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-812.webp 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-1400.webp 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-2880.webp 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-400.png&quot; alt=&quot;Capture d&#39;écran du ton clair&quot; width=&quot;2880&quot; height=&quot;1749&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-400.png 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-812.png 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-1400.png 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uKHdyucR3Z-2880.png 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Le ton obscur&lt;/strong&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-400.avif 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-812.avif 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-1400.avif 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-2880.avif 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-400.webp 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-812.webp 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-1400.webp 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-2880.webp 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-400.png&quot; alt=&quot;Capture d&#39;écran du ton obscur&quot; width=&quot;2880&quot; height=&quot;1749&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-400.png 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-812.png 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-1400.png 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/MCpun-omC1-2880.png 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;4-choix-de-presentation&quot;&gt;4 choix de présentation&lt;/h3&gt;
&lt;p&gt;Vous avez le choix entre 4 façons pour présenter les galeries :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;la grille dite &amp;quot;&lt;em&gt;justified&lt;/em&gt;&amp;quot; à la &lt;strong&gt;Flickr&lt;/strong&gt; ou &lt;strong&gt;500px&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;la grille dite &amp;quot;&lt;em&gt;masonry&lt;/em&gt;&amp;quot; à la &lt;strong&gt;Pinterest&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;la grille dite &amp;quot;&lt;em&gt;instagrid&lt;/em&gt;&amp;quot; à la &lt;strong&gt;Instagram&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;pas de grille, en &amp;quot;&lt;em&gt;monocolumn&lt;/em&gt;&amp;quot;, chaque photo les unes après les autres&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Dans le portfolio, deux types de page sont candidats à afficher une de ses présentations :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;la page d&#39;accueil&lt;/li&gt;
&lt;li&gt;la page de catégorie (ou de tag)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Vous aurez la possibilité de choisir une présentation globale (pour les 2 types de page donc) ou présenter les choses de manière différente sur chaque type.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;La grille &lt;em&gt;Justified&lt;/em&gt;&lt;/strong&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-400.avif 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-812.avif 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-1400.avif 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-2880.avif 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-400.webp 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-812.webp 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-1400.webp 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-2880.webp 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-400.png&quot; alt=&quot;Capture d&#39;écran de la grille justified&quot; width=&quot;2880&quot; height=&quot;1578&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-400.png 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-812.png 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-1400.png 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uh7lUdPrFx-2880.png 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;La grille &lt;em&gt;Masonry&lt;/em&gt;&lt;/strong&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-400.avif 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-812.avif 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-1400.avif 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-2880.avif 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-400.webp 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-812.webp 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-1400.webp 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-2880.webp 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-400.png&quot; alt=&quot;Capture d&#39;écran de la grille masonry&quot; width=&quot;2880&quot; height=&quot;1580&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-400.png 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-812.png 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-1400.png 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/SCEH6b_nSA-2880.png 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;La grille &lt;em&gt;Instagrid&lt;/em&gt;&lt;/strong&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-400.avif 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-812.avif 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-1400.avif 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-2880.avif 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-400.webp 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-812.webp 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-1400.webp 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-2880.webp 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-400.png&quot; alt=&quot;Capture d&#39;écran de la grille instagrid&quot; width=&quot;2880&quot; height=&quot;1580&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-400.png 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-812.png 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-1400.png 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/waGi8PgpU9-2880.png 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;La grille &lt;em&gt;Monocolumn&lt;/em&gt;&lt;/strong&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-400.avif 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-812.avif 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-1400.avif 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-2880.avif 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-400.webp 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-812.webp 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-1400.webp 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-2880.webp 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-400.png&quot; alt=&quot;Capture d&#39;écran de la grille monocolumn&quot; width=&quot;2880&quot; height=&quot;1576&quot; srcset=&quot;https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-400.png 400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-812.png 812w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-1400.png 1400w, https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/uiqRIHAma8-2880.png 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;affichage-des-metadonnees-exif&quot;&gt;Affichage des métadonnées EXIF&lt;/h3&gt;
&lt;p&gt;Vous pouvez décider d&#39;afficher ou non quelques métadonnées EXIF tirées des photographies.
Évidemment si votre portfolio ne présente pas de photographie mais plutôt des peintures, dessins ou que sais-je, ça ne vous sera pas d&#39;utilité.&lt;/p&gt;
&lt;p&gt;Les métadonnées récupérées et affichées (si elles sont disponibles) sont :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;la marque et le modèle de l&#39;appareil photo&lt;/li&gt;
&lt;li&gt;la vitesse d&#39;obturation&lt;/li&gt;
&lt;li&gt;la focale&lt;/li&gt;
&lt;li&gt;l&#39;ouverture&lt;/li&gt;
&lt;li&gt;les ISO&lt;/li&gt;
&lt;li&gt;la date de prise de vue de la photo&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;affichage-des-tags&quot;&gt;Affichage des tags&lt;/h3&gt;
&lt;p&gt;Dans le portfolio les tags appliqués aux photos servent à générer les catégories qui apparaissent dans le menu latéral.&lt;br&gt;
Il ne vous sera peut être donc pas d&#39;utilité d&#39;afficher ces tags sur la page d&#39;une photo.&lt;br&gt;
Dans tous les cas vous aurez la possibilité d&#39;afficher ces tags ou non.&lt;/p&gt;
&lt;h3 id=&quot;liens-reseaux-sociaux&quot;&gt;Liens réseaux sociaux&lt;/h3&gt;
&lt;p&gt;Il est souvent utile (malheureusement ?) d&#39;afficher les profils de nos réseaux sociaux.
Un set prédéfinis de réseau n&#39;attendent que vos URLs pour être affichés.&lt;/p&gt;
&lt;p&gt;Dans la liste non-exhaustive nous avons pour le moment :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;500px&lt;/li&gt;
&lt;li&gt;Behance&lt;/li&gt;
&lt;li&gt;Deviantart&lt;/li&gt;
&lt;li&gt;Flickr&lt;/li&gt;
&lt;li&gt;Glass&lt;/li&gt;
&lt;li&gt;Instagram&lt;/li&gt;
&lt;li&gt;Notos&lt;/li&gt;
&lt;li&gt;Pixelfed&lt;/li&gt;
&lt;li&gt;Tumblr&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Je n&#39;ai pas mis tous les réseaux pour présenter son travail surtout parce que… pour certains je n&#39;ai pas trouvé des logo en SVG satisfaisant ou je n&#39;ai pas juger bon de le rajouter. Mais ça pourrait évoluer.&lt;/p&gt;
&lt;p&gt;Dans tous les cas, il est clairement possible de rajouter ses propres réseaux ou de me demander d&#39;en rajouter un.&lt;/p&gt;
&lt;h3 id=&quot;liens-externes&quot;&gt;Liens externes&lt;/h3&gt;
&lt;p&gt;Si comme moi votre portfolio a son propre nom de domaine et que vous souhaitez afficher des URLs personnelles ailleurs (comme votre blog par exemple) il sera tout à fait possible de le faire.&lt;/p&gt;
&lt;p&gt;Le principe est peu ou prou le même que pour les réseaux sociaux, il vous sera demandé une URL et un label pour le lien.&lt;/p&gt;
&lt;h2 id=&quot;comment-le-mettre-en-place&quot;&gt;Comment le mettre en place&lt;/h2&gt;
&lt;h3 id=&quot;prerequis&quot;&gt;Prérequis&lt;/h3&gt;
&lt;p&gt;Afin de pouvoir installer et utiliser &lt;strong&gt;Niepce&lt;/strong&gt; il va falloir un environnement prêt à le recevoir.
Pas besoin de grand chose mais un peu quand même :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Git &lt;em&gt;(selon la méthode de récupération du projet)&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;Node &amp;gt;= 16&lt;/li&gt;
&lt;li&gt;Et voilà c&#39;est à peu près tout&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;recuperer-les-sources&quot;&gt;Récupérer les sources&lt;/h3&gt;
&lt;p&gt;Tout est sur &lt;a href=&quot;https://github.com/GoOz/Niepce&quot;&gt;Github&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;De là, libre à vous de cloner le dépôt git en ligne de commande&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;&lt;span class=&quot;token function&quot;&gt;mkdir&lt;/span&gt; mon-portfolio
&lt;span class=&quot;token function&quot;&gt;git&lt;/span&gt; clone https://github.com/GoOz/Niepce.git mon-portfolio&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;ou de télécharger l&#39;archive directement depuis le bouton télécharger de Github.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-warning&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-alert mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Warning&lt;/p&gt;&lt;p&gt;Vous ne pourrez pas &lt;code&gt;push&lt;/code&gt; sur mon dépôt git donc si vous voulez continuer sur git ensuite pour versionner votre portfolio il vous faudra changer le &lt;code&gt;remote&lt;/code&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;h3 id=&quot;mise-en-place-de-l-environnement&quot;&gt;Mise en place de l&#39;environnement&lt;/h3&gt;
&lt;p&gt;Pour commencer il va falloir installer tout ce dont nous avons besoin. Pour ce faire ouvrez votre terminal, si ce n&#39;est déjà fait, et tapez ce qui suit&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;&lt;span class=&quot;token builtin class-name&quot;&gt;cd&lt;/span&gt; mon-portfolio
&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;La commande &lt;code&gt;npm install&lt;/code&gt; va aller chercher les quelques dépendances et les installer pour vous. Promis il n&#39;y en a pas beaucoup.&lt;/p&gt;
&lt;p&gt;Une fois l&#39;installation terminée, vous devriez être en mesure de lancer le site en local en tapant&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; run start&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;et une fois que le terminal vous affiche&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;11ty&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; Watching…
&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;11ty&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; Server at http://localhost:8080/&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;cela voudra dire que c&#39;est prêt, donc ouvrez un nouvel onglet de votre navigateur préféré et aller sur &lt;a href=&quot;http://localhost:8080/&quot;&gt;http://localhost:8080/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Vous devriez y voir la même chose que sur les captures d&#39;écran présentées plus haut.&lt;/p&gt;
&lt;h2 id=&quot;configuration&quot;&gt;Configuration&lt;/h2&gt;
&lt;p&gt;Maintenant que votre site tourne localement il est temps d&#39;éditer la configuration pour le transformer en &lt;strong&gt;votre&lt;/strong&gt; portfolio.&lt;/p&gt;
&lt;p&gt;Toute la configuration se fera dans 2 fichiers :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;_data/metadata.json&lt;/code&gt; qui est le fichier de configuration de base d&#39;Eleventy&lt;/li&gt;
&lt;li&gt;&lt;code&gt;_data/niepce.js&lt;/code&gt; qui est le fichier de configuration propre à Niepce.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Ces deux fichiers sont déjà partiellement pré-remplis et, de base, vous ne devriez avoir qu&#39;à remplir des champs vides ou éditer des valeurs existantes.&lt;/p&gt;
&lt;p&gt;Prenons d&#39;abord le fichier &lt;code&gt;metadata.json&lt;/code&gt;&lt;/p&gt;
&lt;pre class=&quot;language-json&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;&quot;title&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Niepce&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;https://portfolio.niepce.tld&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;&quot;language&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;&quot;locale&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;en_US&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;&quot;description&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Niepce&#39;s personal portfolio&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;&quot;author&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Nicéphore Niépce&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;email&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;nicephore@niepce.tld&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token property&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;https://www.niepce.tld&quot;&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Je ne pense pas qu&#39;il y ait besoin de tout décrire sur ces informations, toutefois je préciserais que :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;le &lt;code&gt;title&lt;/code&gt; est le titre qui apparaitra comme le label de l&#39;onglet du navigateur mais c&#39;est aussi le titre qui apparaitra sur le site si vous n&#39;avez pas spécifié de logo.&lt;/li&gt;
&lt;li&gt;la &lt;code&gt;description&lt;/code&gt; servira à la fois pour décrire les résultats des moteurs de recherche ainsi que sur les descriptions des cartes OpenGraph sur un partage.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Vient ensuite le fichier &lt;code&gt;niepce.js&lt;/code&gt; et là je vais rentrer dans le détail.&lt;/p&gt;
&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;grid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;masonry&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;grid_tags&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;justified&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;theme&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;auto&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;logo&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;banner&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;exif&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;socials&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		&lt;span class=&quot;token string-property property&quot;&gt;&quot;500px&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;behance&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;deviantart&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;flickr&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;glass&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;instagram&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;notos&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;pixelfed&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token literal-property property&quot;&gt;tumblr&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token literal-property property&quot;&gt;links&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
			&lt;span class=&quot;token literal-property property&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
			&lt;span class=&quot;token literal-property property&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;grid&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;masonry | justified | instagrid | monocolumn&lt;/code&gt;&lt;br&gt;
&lt;em&gt;C&#39;est votre choix de grille pour la home et pour les pages de catégorie.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;grid_tags&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;masonry | justified | instagrid | monocolumn&lt;/code&gt;&lt;br&gt;
&lt;em&gt;C&#39;est votre choix de grille pour les pages de catégorie. Si elle n&#39;est pas définie alors c&#39;est le choix &lt;code&gt;grid&lt;/code&gt; qui sera utilisé pour ces pages.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;theme&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;light | dark | auto&lt;/code&gt;&lt;br&gt;
&lt;em&gt;Force un ton en particulier ou bien laisse les préférences utilisateur choisir automatiquement.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;logo&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;String&lt;/code&gt;&lt;br&gt;
&lt;em&gt;Chemin vers votre logo (de n&#39;importe quel format d&#39;image qui soit supporté par une balise HTML &lt;code&gt;img&lt;/code&gt;). Il peut être n&#39;importe où, même distant. Si aucun logo n&#39;est spécifié alors c&#39;est le &lt;code&gt;title&lt;/code&gt; de &lt;code&gt;metadata.json&lt;/code&gt; qui prendra le relai et sera affiché.&lt;/em&gt;&lt;br&gt;
&lt;em&gt;Si c&#39;est un SVG  et que vous voulez l&#39;intégrer à la page pour que sa couleur s&#39;adapte au thème, ajoutez un suffixe &lt;code&gt;-inline&lt;/code&gt; au nom du fichier (ex: logo-inline.svg).&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;banner&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;String&lt;/code&gt;&lt;br&gt;
&lt;em&gt;Chemin vers votre bannière (de n&#39;importe quel format d&#39;image qui soit supporté par une balise HTML &lt;code&gt;img&lt;/code&gt;). Il peut être n&#39;importe où, même distant. Cette image ne sera utilisé que pour les balises &lt;a href=&quot;https://ogp.me/&quot;&gt;OpenGraph&lt;/a&gt; à moins que vous ne décidiez de l&#39;utiliser pour autre chose.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;exif&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;boolean&lt;/code&gt;&lt;br&gt;
&lt;em&gt;Affiche ou non les métadonnées EXIF de vos photos sur les billets. Si à &lt;code&gt;true&lt;/code&gt; seules les métadonnées existantes dans la photo seront affichées.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;tags&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;boolean&lt;/code&gt;&lt;br&gt;
&lt;em&gt;Affiche ou non les tags appliquées aux photos sur les billets.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;social&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;Clé (String): Valeur (String)&lt;/code&gt;&lt;br&gt;
&lt;em&gt;Seuls les réseaux sociaux avec un lien de profil renseigné seront affichés.&lt;/em&gt;&lt;br&gt;
&lt;em&gt;À noter que si besoin vous pouvez ajouter vos propres réseaux sociaux qui n&#39;existe pas dans la liste par défaut mais pour faire ça vous aurez besoin d&#39;ajouter son propre icône SVG dans le dossier &lt;code&gt;public/img/sprite&lt;/code&gt; et le nommer exactement comme la &lt;strong&gt;clé&lt;/strong&gt; définie ici.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Clé&lt;/strong&gt; &lt;code&gt;links&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Valeur&lt;/strong&gt; &lt;code&gt;Clé (String): Valeur (String)&lt;/code&gt;&lt;br&gt;
&lt;em&gt;Si vous voulez afficher des liens externes dans le menu de navigation, saisissez le label (texte qui apparaitra) et l&#39;URL de ce lien.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Une fois le tout configuré comme vous le souhaitez, il sera temps de créer vos pages.&lt;/p&gt;
&lt;h2 id=&quot;creation-de-vos-pages&quot;&gt;Création de vos pages&lt;/h2&gt;
&lt;p&gt;Toutes les pages que vous allez créer se trouveront dans le dossier &lt;code&gt;content&lt;/code&gt; à la racine du projet.&lt;/p&gt;
&lt;p&gt;Il y a déjà du contenu exemple dans ce dossier comme vous le verrez et vous pourrez les supprimer le moment venu mais certains dossiers et fichiers ne devrait pas être touchés ni déplacés (à moins que vous sachiez ce que vous faites), ce sont :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;le dossier &lt;code&gt;feed&lt;/code&gt; qui sert à générer les flux RSS (Atom en fait mais je vais pas entrer dans les détails)&lt;/li&gt;
&lt;li&gt;le dossier &lt;code&gt;sitemap&lt;/code&gt; qui sert à générer le fichier &lt;code&gt;sitemap.xml&lt;/code&gt;, à destination des moteurs de recherches notamment.&lt;/li&gt;
&lt;li&gt;le fichier &lt;code&gt;index.njk&lt;/code&gt; qui génère la page d&#39;accueil de votre site&lt;/li&gt;
&lt;li&gt;le fichier &lt;code&gt;tags.njk&lt;/code&gt; qui génère les pages de catégorie.&lt;/li&gt;
&lt;li&gt;le fichier &lt;code&gt;content.11tydata.js&lt;/code&gt; qui donne au moteur Eleventy les informations nécessaires quant aux pages de contenu.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Tout le reste est là pour vous donner des exemples.&lt;/p&gt;
&lt;h3 id=&quot;creer-une-page-independante&quot;&gt;Créer une page indépendante&lt;/h3&gt;
&lt;p&gt;Un exemple existe déjà, c&#39;est celui du &lt;code&gt;about.md&lt;/code&gt; que vous pouvez garder et modifier ou bien le supprimer et faire autre chose à votre sauce.&lt;/p&gt;
&lt;p&gt;Vous pourrez voir dans ce fichier comment créer des pages indépendantes.&lt;/p&gt;
&lt;pre class=&quot;language-md&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;&lt;span class=&quot;token front-matter-block&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token front-matter yaml language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; layouts/page.njk
&lt;span class=&quot;token key atrule&quot;&gt;eleventyNavigation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; About
  &lt;span class=&quot;token key atrule&quot;&gt;order&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;override:tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;pages&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Hello&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; I&#39;m the photographer&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/span&gt;
[…]&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Il vous faudra :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;spécifier le layout, en l&#39;occurence celui que vous voulez c&#39;est celui qui s&#39;appelle &lt;code&gt;page.njk&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;spécifier le label du lien dans la navigation et sa position dans la liste en éditant les valeurs de &lt;code&gt;key&lt;/code&gt; et &lt;code&gt;order&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;garder &lt;code&gt;override:tags: [&amp;quot;pages&amp;quot;]&lt;/code&gt; pour être certain que cette nouvelle page n&#39;apparaissent pas comme un nouveau billet et reste bien une page distincte.&lt;/li&gt;
&lt;li&gt;donner un titre à cette page en spécifiant &lt;code&gt;title&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Ces métadonnées entre &lt;code&gt;---&lt;/code&gt; représentent ce qu&#39;on appelle le &lt;em&gt;frontmatter&lt;/em&gt; et c&#39;est bien tout ce que c&#39;est, des métadonnées.&lt;/p&gt;
&lt;p&gt;Tout le reste après ça est du &lt;strong&gt;Markdown&lt;/strong&gt; tout ce qu&#39;il y a de plus normal.&lt;/p&gt;
&lt;h3 id=&quot;creer-un-billet&quot;&gt;Créer un billet&lt;/h3&gt;
&lt;p&gt;Il est peut être temps de faire enfin des billets avec vos photos.&lt;br&gt;
Mais d&#39;abord parlons structure.&lt;/p&gt;
&lt;p&gt;Comme vous le constaterez avec les exemples, chaque billet ressemble à quelque chose comme ça :&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;├── content
│   ├── mon-titre-de-billet
│   │   ├── index.md
│   │   ├── photo.jpg
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Cette structure est plus conseillée qu&#39;obligatoire, dans les faits rien ne vous oblige à faire ça et vous pourriez tout faire à plat à la racine de &lt;code&gt;content&lt;/code&gt; ou dans une autre structure mais ça deviendrait vite bordélique et/ou ça vous demanderait plus de travail ainsi que de la configuration à changer au final. C&#39;est pourquoi je vous conseille de garder cette structure à moins que vous sachiez ce que vous faites encore une fois.&lt;/p&gt;
&lt;p&gt;Mais mettons que vous suiviez cette recommandation, le nom du dossier sera &lt;em&gt;in fine&lt;/em&gt; l&#39;URL de votre billet. Personnellement je préfère mettre le titre en minuscule avec des &lt;code&gt;-&lt;/code&gt; à la place des espaces, je trouve ça plus joli à voir mais rien ne vous y oblige.&lt;br&gt;
Ensuite le nom du fichier markdown &lt;code&gt;.md&lt;/code&gt; importe peu, je le nomme toujours &lt;code&gt;index.md&lt;/code&gt; par soucis de simplicité.&lt;br&gt;
Enfin pour la photo, là aussi le nom importe peu mais il est plus sage de tout le temps la nommer de la même façon pour éviter de se tromper pour une raison que l&#39;on va voir tout de suite.&lt;/p&gt;
&lt;p&gt;Comme pour les pages indépendantes, nous allons avoir du &lt;em&gt;frontmatter&lt;/em&gt; dans ces fichiers &lt;code&gt;index.md&lt;/code&gt; avec différentes métadonnées à renseigner.&lt;/p&gt;
&lt;pre class=&quot;language-md&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-md&quot;&gt;&lt;span class=&quot;token front-matter-block&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token front-matter yaml language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Portrait
&lt;span class=&quot;token key atrule&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token datetime number&quot;&gt;2023-09-01&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;photo&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; photo.jpg
&lt;span class=&quot;token key atrule&quot;&gt;photo_alt&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Portrait de ma mère
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; portrait&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;title&lt;/code&gt; sera donc le titre de votre photo (et donc de la page), a priori la même que le nom du dossier mais en plus joli avec des majuscules et des espaces.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;date&lt;/code&gt; est la date à laquelle vous voulez que ce billet apparaisse, ça ne jouera pas sur grand chose à part l&#39;ordre dans lequel vos billets apparaitront puisqu&#39;ils sont affichés du plus récent au plus ancien.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;photo&lt;/code&gt; est le nom du fichier de votre photo, comme je disais plus haut, toujours le nommer de la même façon simplifie le processus de création de billet mais faites bien comme bon vous semble&lt;/li&gt;
&lt;li&gt;&lt;code&gt;photo_alt&lt;/code&gt; sera le texte alternatif de l&#39;image qui sera affiché si pour une raison x ou y l&#39;image ne s&#39;affiche pas et qui sera aussi utile aux lecteurs d&#39;écran pour décrire l&#39;image aux personnes malvoyantes.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;tags&lt;/code&gt; sera donc la catégorie à laquelle appartient ce billet et donc cette photo. Personnellement je n&#39;en mets qu&#39;une seule à chaque fois mais libre à vous de faire des inter-catégories ou que sais-je.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Encore une fois, tout ce qui sera écrit en markdown après ce &lt;em&gt;frontmatter&lt;/em&gt; apparaitra sur le billet aussi.&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-tip&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-light-bulb mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Tip&lt;/p&gt;&lt;p&gt;Si vous avez activé les options &lt;code&gt;exif&lt;/code&gt; et/ou &lt;code&gt;tags&lt;/code&gt; le contenu de vos billets apparaitra après ces éléments dans la page.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Si vous avez tout rempli correctement vous devriez être en mesure de voir vos billets et pages indépendantes sur  &lt;a href=&quot;http://localhost:8080/&quot;&gt;http://localhost:8080/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Une fois tous vos billets et pages créés et que vous êtes satisfait du résultat, il est temps de publier tout ça, mais avant n&#39;oubliez pas de supprimer les pages et billets exemples, ça ferait tâche.&lt;/p&gt;
&lt;h2 id=&quot;deploiement&quot;&gt;Déploiement&lt;/h2&gt;
&lt;p&gt;Pour ce qui est du déploiement, vous aurez forcément besoin d&#39;un hébergeur sans avoir besoin de grand chose d&#39;installé dessus non plus.&lt;br&gt;
Comme pour le développement local, vous n&#39;aurez finalement besoin que de &lt;strong&gt;Node &amp;gt;16&lt;/strong&gt; et c&#39;est tout.&lt;/p&gt;
&lt;p&gt;Il existe bien des façons de faire de l&#39;auto-déploiement avec git mais je ne vais pas en parler parce que ça devient un poil plus pointu en plus d&#39;être probablement différent selon votre hébergeur.&lt;/p&gt;
&lt;p&gt;Sachez juste que ce que Eleventy génère est un site statique, donc en gros juste du HTML/CSS/JS et pour obtenir ce site statique il vous faut lancer la commande :&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;&lt;span class=&quot;token builtin class-name&quot;&gt;cd&lt;/span&gt; mon-portfolio
&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; run build&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Cette commande de &lt;em&gt;build&lt;/em&gt; est aussi lancée via un &lt;code&gt;npm run start&lt;/code&gt; mais pour être sûr que tout est propre il est plus sage de lancer le &lt;em&gt;build&lt;/em&gt; une fois que tout est fini.&lt;/p&gt;
&lt;p&gt;Une fois le &lt;em&gt;build&lt;/em&gt; fait vous pouvez retrouver votre site dans le dossier &lt;code&gt;_site&lt;/code&gt; à la racine du projet. C&#39;est ce que vous devez absolument avoir sur votre serveur d&#39;hébergeur et c&#39;est sur ce dossier que doit pointer votre nom de domaine. Donc configurez en conséquence dans l&#39;administration de votre hébergeur.&lt;/p&gt;
&lt;p&gt;Quant à la manière d&#39;obtenir et transférer ces fichiers générés…&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Soit vous générez localement et transférez via FTP sur le serveur.&lt;/li&gt;
&lt;li&gt;Soit vous versionnez votre projet, le clonez sur le serveur, mettez à jour le dépôt et faites le &lt;em&gt;build&lt;/em&gt; directement sur le serveur, tout ça en SSH.&lt;/li&gt;
&lt;li&gt;Soit vous vous débrouillez pour faire un auto-déploiement (via git push et web-socket par exemple).&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;et-la-suite-dans-tout-ca&quot;&gt;Et la suite dans tout ça ?&lt;/h2&gt;
&lt;p&gt;Ce projet étant un &lt;em&gt;starter kit&lt;/em&gt;, comprendre juste un outil de démarrage de projet, les mises à jour des dépendances (comme Eleventy et ses plugins par exemple) vous incombent. De la même manière si des évolutions ou bugfix apparaissent sur le &lt;a href=&quot;https://github.com/GoOz/Niepce&quot;&gt;dépôt Github&lt;/a&gt; ce sera à vous de vous débrouiller pour mettre à jour les corrections ou évolutions sur votre propre projet. &lt;br&gt;
Toutes les modifications seront bien visibles sur Github dans tous les cas.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/GoOz/Niepce/issues/new/choose&quot;&gt;N&#39;hésitez pas à me le faire savoir&lt;/a&gt; si vous vous retrouvez confronté à un bug ou si vous aimeriez rajouter des fonctionnalités. Je n&#39;ai fait que ce qui m&#39;intéressait personnellement mais je suis ouvert à toute proposition d&#39;ajout d&#39;autres fonctionnalités.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Sur Internet, vous ne savez jamais qui vous suit</title>
    <link href="https://blog.foojin.com/2023/12/07/sur-internet-vous-ne-savez-jamais-qui-vous-suit/" />
    <updated>2023-12-07T00:00:00Z</updated>
    <id>https://blog.foojin.com/2023/12/07/sur-internet-vous-ne-savez-jamais-qui-vous-suit/</id>
    <content type="html">&lt;p&gt;Si on met de côté les différents réseaux sociaux, j&#39;ai deux présences en ligne : ce blog et mon &lt;a href=&quot;https://www.bloogart.com/&quot;&gt;portfolio de photographie&lt;/a&gt;. Et récemment j&#39;ai fait une refonte des deux avec &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt; mais surtout je les ai migré chez mon nouvel hébergeur &lt;a href=&quot;https://www.alwaysdata.com&quot;&gt;alwaysdata&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Ça fait bien longtemps que je n&#39;utilise plus d&#39;outil de mesure d&#39;audience sur mes sites, déjà parce que je n&#39;aime pas vraiment ça personnellement donc je ne vais pas l&#39;imposer aux autres et puis ça fait toujours ça de moins en JavaScript à télécharger.&lt;/p&gt;
&lt;p&gt;Toujours est-il que depuis que j&#39;ai migré j&#39;ai le droit à certains outils de mesure d&#39;audience côté serveur. Alors c&#39;est très rudimentaire, je n&#39;ai finalement pas grand chose d&#39;autre que le nombre de visites uniques mais ça m&#39;a malgré tout assez surpris.&lt;br&gt;
J&#39;ai plus de visites que ce que je pensais. Sur ce blog j&#39;ai des pics à &lt;strong&gt;100&lt;/strong&gt; visites et sur mon portfolio j&#39;ai une moyenne de &lt;strong&gt;250&lt;/strong&gt; et un pic exceptionnel à &lt;strong&gt;650&lt;/strong&gt;.&lt;br&gt;
Alors ça peut paraître peu pour certains mais à mon échelle ça me paraît beaucoup.&lt;/p&gt;
&lt;p&gt;Faut dire que déjà je n&#39;avais pas de système de commentaire ou de like, sur aucun des deux. J&#39;ai bien les &lt;em&gt;webmentions&lt;/em&gt; sur ce blog depuis peu mais on va pas se mentir, de toute façon y a toujours eu une question de majorité silencieuse. Tout celleux qui vous lisent, qu&#39;ils aiment ou pas ce que vous faites, ne commentent, like, ou partagent pas forcément sur les réseaux.
Donc je n&#39;ai que très peu de retours des autres sur ce que je publie.&lt;/p&gt;
&lt;p&gt;Ajoutez à ça le flux RSS (qu&#39;évidemment vous avez tous sur vos sites) qui est en libre accès et voilà vous publiez sans savoir qui vous lit.&lt;/p&gt;
&lt;p&gt;Tout ça pour dire que même si vous pensez que ce que vous avez à partager n&#39;intéresse personne, vous avez très probablement tort, alors écrivez sur vos blogs, partagez vos créations, etc. C&#39;est un peu ça aussi le web, le partage à tous, pour tous et &lt;s&gt;aramous&lt;/s&gt; par tous.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>9 jours en Écosse</title>
    <link href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/" />
    <updated>2023-10-09T00:00:00Z</updated>
    <id>https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/</id>
    <content type="html">&lt;p&gt;Quand il s&#39;agit de voyage, je suis plutôt du genre dépaysement par la nature que par le soleil, plage et tout le toutim. Je préfère la verdure et le calme. Pendant des années j&#39;ai rêvé de visiter l&#39;Écosse et ça m&#39;aura peut être pris une dizaine d&#39;années mais c&#39;est enfin chose faite. Alors voici mon retour de voyage, pour partager et si jamais ça peut servir comme base à quelqu&#39;un d&#39;autre qui serait intéressé pour vivre la même expérience alors tant mieux.&lt;/p&gt;
&lt;p&gt;On est donc parti sur un road trip de 9 jours.&lt;br&gt;
Évidemment on a pas pu tout faire.&lt;br&gt;
Évidemment il a fallu faire des concessions.&lt;br&gt;
Mais on est pas déçu de nos choix.&lt;/p&gt;
&lt;p&gt;Voilà très rapidement notre itinéraire, en commençant et finissant par Edinburgh durant ces 9 jours :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Edinburgh&lt;/li&gt;
&lt;li&gt;Edinburgh&lt;/li&gt;
&lt;li&gt;Glencoe&lt;/li&gt;
&lt;li&gt;Glencoe&lt;/li&gt;
&lt;li&gt;Skye Islands&lt;/li&gt;
&lt;li&gt;Inverness&lt;/li&gt;
&lt;li&gt;Cairn Gorm (Nord)&lt;/li&gt;
&lt;li&gt;Cairn Gorm (Ouest)&lt;/li&gt;
&lt;li&gt;Edinburgh&lt;/li&gt;
&lt;/ol&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-1685.avif 1685w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-1685.webp 1685w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-400.png&quot; alt=&quot;Carte de l&#39;itinéraire&quot; width=&quot;1685&quot; height=&quot;1284&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-400.png 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-812.png 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-1400.png 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/YPFTywuQd5-1685.png 1685w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;jour-1-edinburgh&quot;&gt;Jour 1 : Edinburgh&lt;/h2&gt;
&lt;p&gt;On s&#39;est organisé 2 jours à Edinburgh en se disant que 3 jours seraient de trop et on a eu raison. Non pas qu&#39;il n&#39;y a pas de quoi faire 3 jours à Edinburgh mais quand on a que 9 jours alors il faut optimiser un brin et honnêtement 2 jours suffisent à se faire plaisir déjà.&lt;/p&gt;
&lt;h3 id=&quot;new-town&quot;&gt;New Town&lt;/h3&gt;
&lt;p&gt;Le premier jour, on est arrivé vers 10h30 à l&#39;aéroport et on a pris la navette &lt;em&gt;airline 100&lt;/em&gt; jusque &lt;strong&gt;New Town&lt;/strong&gt;.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-400.jpeg&quot; alt=&quot;Vue sur un parc de New Town avec des monuments au fond&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ztVrut5JXu-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;cex&quot;&gt;CeX&lt;/h3&gt;
&lt;p&gt;On a dû d&#39;emblée faire un crochet par &lt;strong&gt;CeX&lt;/strong&gt;, un magasin d&#39;occasion de matériel informatique parce que ma compagne avait oublié son téléphone en France… et elle voulait pouvoir envoyer ses propres photos et messages à ses proches pendant le voyage et puis… 2 téléphones valent mieux qu&#39;un quand on cherche un endroit à visiter ou bien à manger. On a pas eu besoin qu&#39;elle se prenne une carte SIM étant donné que la majorité des lieux à Edinburgh proposent un WiFi gratuit ce qui était amplement suffisant. Toujours est-il donc que chez &lt;strong&gt;CeX&lt;/strong&gt; le staff était adorable et ont vite compris notre besoin. C&#39;était notre première véritable interaction avec des écossais et leur accent particulier. Je suis assez content de mes capacités à les comprendre au final. C&#39;est pas toujours facile mais globalement ça se gère.&lt;/p&gt;
&lt;h3 id=&quot;old-town&quot;&gt;Old Town&lt;/h3&gt;
&lt;p&gt;C&#39;est dans ce quartier qu&#39;on avait notre B&amp;amp;B pour 2 jours et il était donc très bien placé car c&#39;est principalement dans &lt;strong&gt;Old Town&lt;/strong&gt; et aux alentours que la majorité des choses qu&#39;on avait à voir étaient situés.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-400.jpeg&quot; alt=&quot;Vue sur une rue perpendiculaire passant au-dessus&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pE_5VliHw6-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h4 id=&quot;grassmarket&quot;&gt;Grassmarket&lt;/h4&gt;
&lt;p&gt;Le coin de &lt;strong&gt;Grassmarket&lt;/strong&gt; (où les pubs les plus emblématiques du coin résident comme The Last Drop, The White Hard Inn, etc…) est le lieu où se passaient les exécutions publiques dans le temps. D&#39;ailleurs, le nom du &lt;strong&gt;Last Drop&lt;/strong&gt; qui apparemment offrait un dernier verre aux condamnés à mort vient de cette histoire.&lt;br&gt;
C&#39;est très touristique donc très chargé, surtout en haute saison j&#39;imagine mais c&#39;est mignon comme tout comme place.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-400.jpeg&quot; alt=&quot;Enseigne du White Hart Inn&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zVSe6r-fA4-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h4 id=&quot;victoria-street&quot;&gt;Victoria Street&lt;/h4&gt;
&lt;p&gt;De &lt;strong&gt;Grassmarket&lt;/strong&gt; on a remonté &lt;strong&gt;Victoria Street&lt;/strong&gt;, rue qui aurait inspiré &lt;strong&gt;&lt;a href=&quot;https://fr.wikipedia.org/wiki/J._K._Rowling&quot;&gt;J. K. Rowling&lt;/a&gt;&lt;/strong&gt; pour &lt;a href=&quot;https://fr.wikipedia.org/wiki/Chemin_de_Traverse_(Harry_Potter)&quot;&gt;Diagon Alley&lt;/a&gt; (et c&#39;est vrai qu&#39;il y a un petit truc, il y a même des magasins de pop culture qui vendent, évidemment, du &lt;em&gt;merchandising&lt;/em&gt; Harry Potter). C&#39;est une rue en pente, qui rejoint directement The Royal Mile, la rue la plus importante d&#39;Edinburgh.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-400.jpeg&quot; alt=&quot;Victoria Street&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mNUJuHkEFp-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;greyfriars-kirk&quot;&gt;Greyfriars kirk&lt;/h2&gt;
&lt;p&gt;On a redescendu &lt;strong&gt;Grassmarket&lt;/strong&gt; pour rejoindre le très beau et singulier cimetière &lt;strong&gt;Greyfriars kirk&lt;/strong&gt; où se trouve une copie de la statue de &lt;strong&gt;Bobby&lt;/strong&gt;, ce gentil chionchion qui serait resté 14 ans à surveiller la tombe de son maître, jusque sa propre mort, et où &lt;strong&gt;J. K. Rowling&lt;/strong&gt; aurait pompé directement sur les tombes pas mal de nom des personnages de sa fameuse saga.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-400.jpeg&quot; alt=&quot;Cimetière de GreyFriars Kirk&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/g6Wg94Aifg-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;edinburghs-central-library-jeunesse&quot;&gt;Edinburgh&#39;s Central Library Jeunesse&lt;/h3&gt;
&lt;p&gt;Après moults pérégrinations on est tombé sur la bibliothèque centrale jeunesse et ma compagne étant une bibliothécaire branchée jeunesse on y est allé. Ils y étaient très sympathiques.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-400.jpeg&quot; alt=&quot;Salle de lecture de la bibliothèque jeunesse&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/q_AoeR_N16-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;the-royal-mile&quot;&gt;The Royal Mile&lt;/h3&gt;
&lt;p&gt;On est finalement allé à &lt;strong&gt;The Royal Mile&lt;/strong&gt; qui, &lt;em&gt;spoiler alert&lt;/em&gt;, fait plus que 1 mile. C&#39;est la rue qui joint le &lt;strong&gt;château d&#39;Edinburgh&lt;/strong&gt; au &lt;strong&gt;Palais de Holyrood&lt;/strong&gt;. C&#39;est une si ce n&#39;est la rue la plus touristique d&#39;Edinburgh et c&#39;est une très belle rue avec plein de beaux bâtiments et de belles boutiques.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-400.jpeg&quot; alt=&quot;Église de la Royal Mile&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/hIxK187rRc-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;tea-time&quot;&gt;Tea time&lt;/h3&gt;
&lt;p&gt;On s&#39;est posé dans un salon de thé pour se remplir le gosier et j&#39;ai pris un chocolat chaud… sauf que j&#39;ai compris plus tard que les Ecossais le buvaient avec du lait entier. Mon bidou, peu habitué, a crié à l&#39;infamie pendant quelques heures ensuite. Grosse erreur de ma part.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-3024.avif 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-3024.webp 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-400.jpeg&quot; alt=&quot;Tea time à l&#39;écossaise&quot; width=&quot;3024&quot; height=&quot;4032&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Apkml8FqNx-3024.jpeg 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;mystery-tour&quot;&gt;Mystery tour&lt;/h3&gt;
&lt;p&gt;On avait réservé de 18h30 à 20h30 une visite guidée dans la ville centrée sur les histoires de fantômes, &lt;em&gt;true crime&lt;/em&gt; et compagnie. Notre guide &lt;strong&gt;Niamh&lt;/strong&gt; était géniallissime et nous a raconté plein de petites histoires plus glauques les unes que les autres, et ce sur les lieux mêmes où elles se sont passées.&lt;br&gt;
Notez que marcher pendant presque 2 heures m&#39;aura permis de mieux digérer mon chocolat chaud. 🙃&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-400.jpeg&quot; alt=&quot;Edinburgh et Arthur&#39;s seat de nuit&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/3IRZc7e68g-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;the-banshee-labyrinth&quot;&gt;The banshee labyrinth&lt;/h3&gt;
&lt;p&gt;Pour finir la journée on est allé boire un verre dans &lt;strong&gt;&lt;a href=&quot;https://www.thebansheelabyrinth.com/&quot;&gt;The Banshee Labyrinth&lt;/a&gt;&lt;/strong&gt;, un pub à l&#39;ambiance unique. Pas de mensonge sur la marchandise puisqu&#39;il est compliqué de s&#39;y retrouver, en tout cas la première fois qu&#39;on y entre.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-3024.avif 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-3024.webp 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-400.jpeg&quot; alt=&quot;Dernier verre dans le Banshee labyrinth&quot; width=&quot;3024&quot; height=&quot;4032&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CBQGDCOG0D-3024.jpeg 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;jour-2-edinburgh&quot;&gt;Jour 2 : Edinburgh&lt;/h2&gt;
&lt;p&gt;Deuxième journée à Edinburgh pour compléter la première : on aura évidemment pas tout fait, notamment les gros trucs comme le château ou le palais de Holyrood qui sont des nids à touristes même en fin de saison. Mais ne les ayant pas fait, je ne peux en dire ni du bien, ni du mal.&lt;/p&gt;
&lt;h3 id=&quot;scottish-breakfast&quot;&gt;Scottish breakfast&lt;/h3&gt;
&lt;p&gt;Je ne suis pas du matin et mon estomac non plus mais j&#39;ai quand même essayé un &lt;em&gt;scottish breakfast&lt;/em&gt; (ce qui est comme un &lt;em&gt;british breakfast&lt;/em&gt; - beans, sausage, bacon - mais avec des trucs scots avec en prime comme du haggis, du boudin noir et des potato scones).
C&#39;était gras et lourd, en tout cas pour moi, mais c&#39;était bon. Faut juste être prêt à digérer tout ça.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-3024.avif 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-3024.webp 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-400.jpeg&quot; alt=&quot;Petit déjeuner à l&#39;écossaise&quot; width=&quot;3024&quot; height=&quot;4032&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_8yEZInVtM-3024.jpeg 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;dean-village&quot;&gt;Dean Village&lt;/h3&gt;
&lt;p&gt;Dean Village n&#39;a pas grand chose de particulier si ce n&#39;est que c&#39;est un mignon petit quartier résidentiel avec une rivière qui passe en son centre et une jolie balade à faire, surtout que tout ça est un peu au centre d&#39;Edinburgh, c&#39;est assez rare pour être notable.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-400.jpeg&quot; alt=&quot;Dean Village&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kbyL3OFcSJ-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;calton-cemetery&quot;&gt;Calton cemetery&lt;/h2&gt;
&lt;p&gt;On s&#39;est baladé dans un autre cimetière ancien plus au nord qui vaut le détour, dans la même veine que &lt;strong&gt;Greyfriars kirk&lt;/strong&gt;.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-400.jpeg&quot; alt=&quot;Cimetière de Calton&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/0HXV5aP4R8-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;surgeons-hall-museums&quot;&gt;Surgeons&#39; Hall Museums&lt;/h3&gt;
&lt;p&gt;Ensuite on est redescendu plus au sud pour visiter le &lt;a href=&quot;https://museum.rcsed.ac.uk/&quot;&gt;musée de la chirurgie&lt;/a&gt;. Très sympathique à faire, sauf si vous n&#39;aimez pas l&#39;idée de voir de véritables restes humains conservés ou des organes dans des jarres de formol. Je préfère prévenir.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-400.jpeg&quot; alt=&quot;Entrée du Surgeons&#39; Hall Museums&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RuHewPzcPV-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;edinburghs-central-library&quot;&gt;Edinburgh&#39;s Central library&lt;/h3&gt;
&lt;p&gt;Toujours dans l&#39;optique de satisfaire la curiosité de ma compagne bibliothécaire on est parti faire le reste de la &lt;em&gt;Edinburgh&#39;s central library&lt;/em&gt;, c&#39;est un autre bâtiment que celui pour la jeunesse qu&#39;on avait vu la veille. C&#39;est un très beau bâtiment ancien.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-400.jpeg&quot; alt=&quot;National Library of Scotland&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/RCmyXPawAK-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;necrobus&quot;&gt;Necrobus&lt;/h3&gt;
&lt;p&gt;On s&#39;est fait un tour du Nécrobus, un Ghost tour comme il y en a beaucoup, à ceci près que celui-ci se passe dans un bus typique des UK redécoré de façon glauque. C&#39;était très fun, un peu de redite avec la visite guidée qu&#39;on avait faite la veille mais on a pu aller plus loin, bus oblige, qu&#39;à pied. Le but de cette visite est clairement de faire un peu peur et beaucoup rire et ça marche bien.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-3024.avif 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-3024.webp 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-400.jpeg&quot; alt=&quot;National Library of Scotland&quot; width=&quot;3024&quot; height=&quot;4032&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/mUsalN6qWM-3024.jpeg 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;whistle-binkies&quot;&gt;Whistle Binkies&lt;/h3&gt;
&lt;p&gt;Pour finir la soirée, et pour se mêler aux autochtones, on est allé boire notre dernier coup dans un pub de concert live, le &lt;a href=&quot;https://whistlebinkies.com/&quot;&gt;Whistle Binkies&lt;/a&gt;, dans la même rue que le &lt;strong&gt;Banshee Labyrinth&lt;/strong&gt;. La déco était jolie, pub à la british, et ils avaient un bon choix de whisky et de bière.&lt;/p&gt;
&lt;h2 id=&quot;jour-3-glencoe&quot;&gt;Jour 3 : Glencoe&lt;/h2&gt;
&lt;p&gt;C&#39;est l&#39;heure du départ pour les contrées &amp;quot;sauvages&amp;quot; de l&#39;Écosse: belles pour les yeux et exigeantes pour les jambes.&lt;/p&gt;
&lt;h3 id=&quot;location-chez-avis&quot;&gt;Location chez Avis&lt;/h3&gt;
&lt;p&gt;On avait réservé une Fiat 500 chez Avis pour 6 jours.&lt;br&gt;
Pourquoi Avis ? Parce que c&#39;est un gros du domaine et surtout car c&#39;était un des rares à accepter les cartes de débit. Normalement, chez la majorité des loueurs là-bas c&#39;est la carte de crédit qui fait loi. J&#39;étais sûr de rien alors comme je ne voulais pas prendre de risque et me retrouver comme un con sans voiture sur place, j&#39;ai préféré aller chez eux. Et pour le coup je confirme que la carte de débit fonctionne chez eux.&lt;/p&gt;
&lt;p&gt;Pourquoi une petite Fiat 500 ? Parce que on était que 2 donc c&#39;était suffisant mais surtout parce que beaucoup de petites routes en Écosse ne sont que des une voie avec des &amp;quot;&lt;em&gt;passing places&lt;/em&gt;&amp;quot; tout le long des deux côtés. Du coup, plus ta voiture est petite plus c&#39;est simple de rencontrer d&#39;autres véhicules en face qui ne sont généralement pas aussi petits, bien au contraire. Et j&#39;ai vite compris pourquoi il y avait autant de pick up… C&#39;est un paysage magnifique l&#39;Écosse mais très vallonné, du coup faut un peu de patate sous le capot (ce que la Fiat 500 n&#39;avait pas). Je n&#39;ai jamais été bloqué dans une côte mais j&#39;en ai parfois chié à la faire grimper.&lt;br&gt;
Avec le recul, je me dit que c&#39;était une parfaite voiture pour la ville mais pas vraiment pour la campagne.&lt;/p&gt;
&lt;p&gt;Au départ, j&#39;étais un peu anxieux pour la conduite à gauche, mais en y allant doucement et prenant son temps on s&#39;y fait.&lt;/p&gt;
&lt;h3 id=&quot;stirling&quot;&gt;Stirling&lt;/h3&gt;
&lt;p&gt;Sur le chemin pour Glencoe on a fait un arrêt à &lt;strong&gt;Stirling&lt;/strong&gt; où on peut y visiter le château, chose que l&#39;on a pas fait par manque de temps (et parce que trop de touristes) alors à la place on a simplement visité la ville et son cimetière à pied puis on est allé dans un salon de thé se recharger et on est reparti.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-400.jpeg&quot; alt=&quot;Cimetière de Stirling&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/E_3XwlmkC6-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;p&gt;À noter que c&#39;était la première fois que j&#39;avais un parcmètre à payer et comme j&#39;avais entendu que l&#39;Écosse était très &lt;em&gt;Carte Bleue first&lt;/em&gt; je n&#39;avais pas tiré d&#39;argent en liquide. Or à Stirling les parcmètres était à payer en liquide ou via une app mobile appelée Ring-Go que j&#39;ai essayé d&#39;utiliser (j&#39;attends toujours le sms de validation d&#39;inscription à ce jour, je crois que l&#39;app n&#39;aime pas trop les numéros étrangers). Il faut donc faire attention à ça, partout ailleurs où l&#39;on est allé les parcmètres étaient compatible CB donc plus le problème mais je doute que Stirling soit l&#39;unique exception.&lt;/p&gt;
&lt;p&gt;Bref, on a fraudé.&lt;/p&gt;
&lt;h3 id=&quot;lost-valley&quot;&gt;Lost Valley&lt;/h3&gt;
&lt;p&gt;Arrivé dans la contrée de &lt;strong&gt;Glencoe&lt;/strong&gt;, on a directement commencé par une randonnée célèbre, la Lost Valley. C&#39;était une très très belle randonnée, qui grimpe pas mal, avec beaucoup de passages à gentiment escalader mais rien de surhumain. On n&#39;a malheureusement pas pu la finir parce que c&#39;était un jour humide et au 3/4 du chemin on était censé traverser un cours d&#39;eau, qui par temps sec reste gérable en sautant sur les rochers, mais qui, par temps humide, avait son niveau et son courant trop élevés. On a bien cherché d&#39;autres chemins mais on n&#39;a rien trouvé de satisfaisant. Alors on rebroussé chemin sans voir le fameux point de vue de Lost Valley. C&#39;est pas grave on s&#39;est rattrapé plus tard. 😛&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-400.jpeg&quot; alt=&quot;La Lost Valley&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/AN8uGmg7ZS-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;old-station&quot;&gt;Old station&lt;/h3&gt;
&lt;p&gt;Sur conseil de note logeuse de &lt;strong&gt;Spean Bridge&lt;/strong&gt;, au nord de &lt;strong&gt;Fort William&lt;/strong&gt; qui est au Nord de la ville de &lt;strong&gt;Glencoe&lt;/strong&gt;, on a réservé une table au &lt;strong&gt;Old Station&lt;/strong&gt;, un bar/restaurant situé dans une ancienne station de gare. C&#39;est sympathique comme ambiance. Mais c&#39;est à ce moment là qu&#39;on a compris un truc fondamental sur l&#39;Écosse : aux UK on mange pour se nourrir, pas pour le plaisir. C&#39;était correct mais tout juste alors que c&#39;est un endroit réputé.&lt;br&gt;
En fait, la majorité de la cuisine locale, quand ce n&#39;est pas de la cuisine du monde, est grasse et rarement assaisonnée. On avait déjà eu cette impression à Edinburgh mais on s&#39;était dit que c&#39;était juste la faute à pas de chance. Mais en fait non, c&#39;est gloabelement partout pareil.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-4032.avif 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-4032.webp 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-400.jpeg&quot; alt=&quot;Mon Repas au Old station&quot; width=&quot;4032&quot; height=&quot;3024&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Ii6y0vOTq-4032.jpeg 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;jour-4-glencoe&quot;&gt;Jour 4 : Glencoe&lt;/h2&gt;
&lt;p&gt;Deuxième jour à Glencoe, puisque trop de belles choses à voir et trop peu de temps sur une journée.&lt;/p&gt;
&lt;h3 id=&quot;glen-nevis-et-the-steall-falls&quot;&gt;Glen Nevis et the Steall falls&lt;/h3&gt;
&lt;p&gt;On a commencé par une autre randonnée connue au &lt;strong&gt;Glen Nevis&lt;/strong&gt; où l&#39;on peut y voir la cascade de &lt;strong&gt;Steall Falls&lt;/strong&gt;. Un peu comme la &lt;strong&gt;Lost Valley&lt;/strong&gt;, on grimpe pas mal au départ pour arriver dans une vallée magnifique et vide d&#39;humains (pour peu d&#39;y aller tôt le matin). C&#39;était ressourçant. Une de mes randonnées préférées sans aucun doute.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-400.jpeg&quot; alt=&quot;Vallée de Glen Nevis&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/x5Pw3WBVw4-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;remontee-mecanique-de-glencoe-mountain-resort&quot;&gt;Remontée mécanique de Glencoe Mountain Resort&lt;/h3&gt;
&lt;p&gt;Pour se reposer un peu les guiboles, on est allé au &lt;strong&gt;&lt;a href=&quot;https://www.glencoemountain.co.uk/&quot;&gt;Glencoe Mountain Resort&lt;/a&gt;&lt;/strong&gt; qui, comme son nom ne l&#39;indique pas forcément, est aussi actif en dehors de la saison de ski. En effet, on peut y prendre des télésièges pour monter en haut de la montagne, ce qui permet d&#39;y avoir une magnifique vue sur la vallée et ses Lochs. À noter aussi, pour les amateurs, qu&#39;on peut descendre ensuite en VTT sur une piste dédiée.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-400.jpeg&quot; alt=&quot;Vue depuis les hauteurs du Glencoe Mountain Resort&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/khBwsP0PXu-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;glencoe&quot;&gt;Glencoe&lt;/h3&gt;
&lt;p&gt;Une fois reposés, on est reparti pour Glencoe faire une randonnée au départ de la ville et qui rejoint le Loch le plus proche par la forêt. C&#39;était une randonnée plutôt tranquille mais c&#39;était magnifique.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-400.jpeg&quot; alt=&quot;Carte de l&#39;itinéraire&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/OETga1Moua-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;the-whispering-pine-lodge&quot;&gt;The Whispering Pine Lodge&lt;/h3&gt;
&lt;p&gt;Pour finir la journée, on est allé dîner au &lt;strong&gt;&lt;a href=&quot;https://www.blacksheephotels.com/the-whispering-pine-lodge/&quot;&gt;Whispering Pine Lodge&lt;/a&gt;&lt;/strong&gt;, un hôtel restaurant, un brin cher mais pour une fois c&#39;était bon. Enfin bon… normal quoi. Bon comme un restaurant pas franchement gastro en France. Et avec une facture d&#39;environ 100£, c&#39;était cher payé.&lt;br&gt;
C&#39;était malgré tout le premier bon repas en 4 jours qu&#39;on prenait, alors je m&#39;en plains pas trop.&lt;/p&gt;
&lt;h2 id=&quot;jour-5-skye-islands&quot;&gt;Jour 5 : Skye islands&lt;/h2&gt;
&lt;p&gt;En route pour les &lt;strong&gt;Skye Islands&lt;/strong&gt;, où il y avait tellement de choses à voir et à faire et tellement peu de temps. Surtout quand on a des surprises pas si bonnes : Au départ on devait faire le &lt;strong&gt;château d&#39;Eilean Donan&lt;/strong&gt; sur l&#39;aller et le &lt;strong&gt;Caisteal Maol&lt;/strong&gt; sur le retour mais on a dû changer nos plans. Je vous explique.&lt;/p&gt;
&lt;h3 id=&quot;pression-des-pneus&quot;&gt;Pression des pneus&lt;/h3&gt;
&lt;p&gt;La voiture nous a mis un warning sur la pression des pneus et ce à peine 3 jours après la location, je l&#39;avais un peu mauvaise (surtout que j&#39;avais pas pris l&#39;assurance crevaison et je commençais à paniquer). On s&#39;est alors mis à la recherche d&#39;une station service qu&#39;on a vite trouvé. Seul problème, il faut du cash pour la machine… cash que je n&#39;ai pas. On s&#39;est donc mis à la recherche d&#39;un distributeur de billet (qui était assez proche) puis à regonfler nos pneus sur une machine récalcitrante. Grâce à l&#39;aide de la gentille dame de la station, on est reparti les pneus vigoureux et beaucoup moins anxieux.&lt;/p&gt;
&lt;h3 id=&quot;fairy-pools&quot;&gt;Fairy pools&lt;/h3&gt;
&lt;p&gt;On est arrivé un peu tard aux &lt;strong&gt;Fairy pools&lt;/strong&gt; et il y avait, à mon grand regret, déjà beaucoup de monde. Les gens c&#39;est bien pour le tourisme mais pas fou pour les photos. C&#39;était sympa comme balade malgré tout, on y remonte un cours d&#39;eau avec de multiples petites piscines naturelles (où se baignent les fées donc). Ce n&#39;était pas la meilleure rando, même sans le monde.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-400.jpeg&quot; alt=&quot;Les Fairy pools&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/wxpy2JVUim-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;dunvegan-castle&quot;&gt;Dunvegan castle&lt;/h3&gt;
&lt;p&gt;On a fait le &lt;strong&gt;Dunvegan Castle&lt;/strong&gt; et ses jardins : ça faisait un bon arrêt tranquille pour se reposer. De très jolis jardins et un château sympa à visiter. C&#39;était celui du clan McLeod mais j&#39;y ai pas vu d&#39;immortel. 🤷&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-400.jpeg&quot; alt=&quot;Château de Dunvegan&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/4Lx1PFMf3S-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;portree&quot;&gt;Portree&lt;/h3&gt;
&lt;p&gt;C&#39;est à Portree qu&#39;on avait pris un véritable B&amp;amp;B avec petit déjeuner inclus. Portree est une des plus importantes villes portuaires des îles Skye, bien que pas si grande au final. Mais une rapide petite promenade nous a montré une ville vivante malgré tout.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-400.jpeg&quot; alt=&quot;Le port de Portree&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/_39B4_r2qJ-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;fairy-glen&quot;&gt;Fairy glen&lt;/h3&gt;
&lt;p&gt;Pour le dîner, on a décidé d&#39;aller pique-niquer dans le &lt;strong&gt;Fairy Glen&lt;/strong&gt;. C&#39;est un coin mignon de petites collines à l&#39;herbe tondue naturellement par sa population de moutons. Et comme on y est allé le soir c&#39;était calme et peu peuplé. Combo parfait pour apprécier un joli coucher de soleil avec son sandwich et sa canette de &lt;em&gt;cider&lt;/em&gt;. 😃&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-400.jpeg&quot; alt=&quot;Les Fairy Glen&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/O2soBHqFfT-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;jour-6-inverness&quot;&gt;Jour 6 : Inverness&lt;/h2&gt;
&lt;p&gt;Départ pour Inverness, mais avant d&#39;y arriver on a fait un dernier truc aux Skye Islands…&lt;/p&gt;
&lt;h3 id=&quot;the-old-man-of-storr&quot;&gt;The Old man of Storr&lt;/h3&gt;
&lt;p&gt;Cette fameuse randonnée un brin plus exigeante que les précédente nous fait grimper assez haut. Toute la montée est magnifique, jusqu&#39;à la toute fin. Je suis assez fier d&#39;avoir réussi à le faire et honnêtement la vue en valait vraiment la chandelle.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-400.jpeg&quot; alt=&quot;Old man of Storr&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ipZ-88bt1U-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;eilean-donan&quot;&gt;Eilean Donan&lt;/h3&gt;
&lt;p&gt;Sur le chemin du retour des Skye Islands on a donc fait ce qu&#39;on aurait dû faire à l&#39;aller : &lt;strong&gt;Eilean Donan Castle&lt;/strong&gt;, un joli petit chateau sur un Loch, seulement accessible par un pont. On est arrivé quand la marée était basse, on n&#39;a pas eu la meilleure vue mais ça reste un très joli château agréable à visiter.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-400.jpeg&quot; alt=&quot;Château Eilean Donan&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/kd6aCYjn19-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;inverness&quot;&gt;Inverness&lt;/h3&gt;
&lt;p&gt;Arrivé à Inverness on y a fait un petit arrêt pour visiter à pied mais il pleuvait, on était dimanche (beaucoup de boutiques fermées) et c&#39;était très urbain. En plus de ça, le château était en travaux. Bref, on est pas resté très longtemps. Je ne dis pas qu&#39;il n&#39;y avait pas d&#39;intérêt à le visiter mais c&#39;est pas tellement ce qu&#39;on recherchait.&lt;/p&gt;
&lt;h3 id=&quot;clava-cairn&quot;&gt;Clava Cairn&lt;/h3&gt;
&lt;p&gt;On est donc allé voir des vieux Cairns ensuite. Avec la météo capricieuse et la fin de journée, il y avait peu de monde, ce qui était encore plus agréable.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-400.jpeg&quot; alt=&quot;Clava cairn&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/tnNcmFD2un-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;culloden-battlefield&quot;&gt;Culloden Battlefield&lt;/h2&gt;
&lt;p&gt;Le terrain de la fameuse bataille de &lt;strong&gt;Culloden&lt;/strong&gt; où les clans rebelles se sont bien fait défoncé par l&#39;armée britannique en 1746. En vrai y a pas grand chose à y voir. Contrairement à ce que montre le film Braveheart, c&#39;est tout tout plat, ce qui n&#39;a pas stratégiquement aidé les écossais. On est arrivé un peu trop tard pour voir le musée donc c&#39;est probablement intéressant mais le champ de bataille en lui-même n&#39;est rien autre qu&#39;un grand champ de vide avec quelques pierres en hommage aux différents clans.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-4032.avif 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-4032.webp 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-400.jpeg&quot; alt=&quot;Champ de bataille de Culloden&quot; width=&quot;4032&quot; height=&quot;3024&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pScj2xj4Tz-4032.jpeg 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;urquharts&quot;&gt;Urquhart&#39;s&lt;/h3&gt;
&lt;p&gt;Premier et unique coup de cœur culinaire : le restaurant &lt;strong&gt;&lt;a href=&quot;https://www.urquharts-inverness.co.uk&quot;&gt;Urquhart&#39;s&lt;/a&gt;&lt;/strong&gt;, à ne pas confondre avec le château qui se trouve sur le &lt;strong&gt;Loch Ness&lt;/strong&gt;, tout près d&#39;Inverness aussi. La nourriture y était bonne, très bonne, et cuisinée, ce qu&#39;on a franchement apprécié après 6 jours à manger des trucs passables.
Si vous voulez y aller, réservez impérativement.&lt;/p&gt;
&lt;h2 id=&quot;jour-7-cairn-gorm-nord&quot;&gt;Jour 7 : Cairn Gorm (Nord)&lt;/h2&gt;
&lt;p&gt;Fort d&#39;une météo merdique (le genre de pluie qui rend toute balade désagréable), nous sommes parti d&#39;Inverness vers les &lt;strong&gt;Cairn Gorm&lt;/strong&gt;, sorte de Massif central à l&#39;écossaise.&lt;/p&gt;
&lt;h3 id=&quot;elgin&quot;&gt;Elgin&lt;/h3&gt;
&lt;p&gt;On voulait faire un crochet par Elgin où l&#39;on peut trouver les ruines d&#39;une vieille cathédrale bien entretenue. Mais une fois arrivé on s&#39;est rendu compte que c&#39;était en travaux avec des échafaudages partout et que l&#39;entrée était à 10£ par personne. Alors ajoutez à ça la pluie… on a préféré rebrousser chemin.&lt;/p&gt;
&lt;h3 id=&quot;pluscarden-abbey&quot;&gt;Pluscarden Abbey&lt;/h3&gt;
&lt;p&gt;Pour se venger du fiasco d&#39;Elgin, on est allé visiter la dernièra abbaye encore en activité d&#39;Écosse, la &lt;strong&gt;&lt;a href=&quot;https://www.pluscardenabbey.org/&quot;&gt;Pluscarden Abbey&lt;/a&gt;&lt;/strong&gt;. C&#39;était mignon, ça a tué le temps mais c&#39;était pas l&#39;arrêt du siècle non plus.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-4032.avif 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-4032.webp 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-400.jpeg&quot; alt=&quot;Abbaye de Pluscarden&quot; width=&quot;4032&quot; height=&quot;3024&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CDKv5nsa0B-4032.jpeg 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;cullen-portknockie&quot;&gt;Cullen-Portknockie&lt;/h3&gt;
&lt;p&gt;Toujours sous la pluie, on s&#39;est arrêté sur le port de &lt;strong&gt;Cullen&lt;/strong&gt; pour faire une randonnée longeant la plage vers &lt;strong&gt;Portknockie&lt;/strong&gt; avec une superbe vue, notamment sur le &lt;strong&gt;Bow Fiddle Rock&lt;/strong&gt;. On a commencé au bon moment parce qu&#39;à notre retour la marée était haute et nous aurait probablement empêché de rejoindre les falaises. À surveiller donc si vous comptez la faire aussi. Quand on y est allé c&#39;était un jour de pluie et de vent et autant au port c&#39;était gérable autant sur les falaises la vitesse du vent était décuplée, ça aurait pu être dangereux.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-400.jpeg&quot; alt=&quot;Rocher de Whale&#39;s mouth&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/Gm3WGG5FfT-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;the-royal-oak-hotel&quot;&gt;The Royal Oak Hotel&lt;/h3&gt;
&lt;p&gt;Arrêt pour déjeuner dans ce qui semble être la pire erreur culinaire de ma vie : j&#39;ai commandé un burger et ils m&#39;ont dit qu&#39;il ne pouvait pas cuire la viande bleue ou saignante comme je l&#39;aime mais je l&#39;ai pris quand même. Je ne sais si c&#39;est leur cuisine qui ne permet pas ou si c&#39;est une règle en Écosse mais ils devaient sur-cuire la viande. Toujours est-il que le steak était encore plus difficilement mangeable qu&#39;un burger de fast-food… à chaque bouchée j&#39;avais l&#39;impression de mordre dans une tablette de chocolat, mais sans goût.&lt;br&gt;
Tout le reste du burger était fade. Même moi, qui suis très loin d&#39;être ne serait-ce qu&#39;un amateur en cuisine, j&#39;aurais pu mieux faire. Je pensais ne pas prendre de risque en choisissant un burger mais je me suis trompé : c&#39;était juste pas bon.&lt;br&gt;
Je ne sais pas si j&#39;ai fait une mauvaise pioche ou si c&#39;est comme ça sur tous les plats mais toujours est-il que j&#39;étais terriblement déçu. Je ne recommande pas du coup.&lt;/p&gt;
&lt;h3 id=&quot;balmoral-cairns&quot;&gt;Balmoral cairns&lt;/h3&gt;
&lt;p&gt;On est alors parti vers la boucle des &lt;strong&gt;Balmoral Cairns&lt;/strong&gt;, cairns plus ou moins récents en hommage à certaines personnes décédées dans une magnifique forêt de pins et de mousses. On a dû la raccourcir faute de temps mais elle aurait mérité d&#39;être faite en entier.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-400.jpeg&quot; alt=&quot;Cairn du prince Albert.&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/zwayPYw0TW-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;tomintoul&quot;&gt;Tomintoul&lt;/h3&gt;
&lt;p&gt;Notre hôtel, le &lt;strong&gt;&lt;a href=&quot;https://www.richmondarmstomintoul.co.uk/&quot;&gt;Richmond Arms&lt;/a&gt;&lt;/strong&gt; était à &lt;strong&gt;Tomintoul&lt;/strong&gt;, un simple village étape parfait pour les randonneurs et leurs périples dans les &lt;strong&gt;Cairn Gorm&lt;/strong&gt;. Cet hôtel était une vieille bicoque, c&#39;était tellement old school. Je déconseille si vous aimez les trucs récents, mais nous, pour une nuit, on a bien aimé, on y a bien dormi et le petit déjeuner y était compris.&lt;/p&gt;
&lt;h2 id=&quot;jour-8-cairn-gorm-ouest&quot;&gt;Jour 8 : Cairn Gorm (Ouest)&lt;/h2&gt;
&lt;h3 id=&quot;loch-an-eilein&quot;&gt;Loch An Eilein&lt;/h3&gt;
&lt;p&gt;Le lendemain on est reparti en direction d&#39;&lt;strong&gt;Aviemore&lt;/strong&gt; à l&#39;Ouest des &lt;strong&gt;Cairn Gorm&lt;/strong&gt; pour aller voir &amp;quot;le Loch le plus instagramable d&#39;Écosse&amp;quot;, le &lt;strong&gt;loch An Eilein&lt;/strong&gt;. C&#39;était une très jolie balade dans la forêt autour du Loch, pas du tout exigeante. Alors certes c&#39;est joli mais j&#39;ai pas trop pigé pourquoi c&#39;était le plus instagramable des Lochs. 🤷&lt;br&gt;
C&#39;était pas exceptionnel non plus.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-400.jpeg&quot; alt=&quot;Loch An Eilein&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/SIMDS2-XWG-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;pitlochry&quot;&gt;Pitlochry&lt;/h3&gt;
&lt;p&gt;Mignonne tout petite ville, assez touristique, où l&#39;on s&#39;est fait plaisir avec encore une fois dans un salon de thé.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-3024.avif 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-3024.webp 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-400.jpeg&quot; alt=&quot;Ru passant dans la ville de Pitlochry&quot; width=&quot;3024&quot; height=&quot;4032&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/pPORK82u6G-3024.jpeg 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;black-watch-museum-perth&quot;&gt;Black Watch Museum, Perth&lt;/h3&gt;
&lt;p&gt;On est allé au &lt;strong&gt;&lt;a href=&quot;https://theblackwatch.co.uk/&quot;&gt;Black Watch Museum&lt;/a&gt;&lt;/strong&gt; de &lt;strong&gt;Perth&lt;/strong&gt; en pensant que c&#39;était un musée sur les fantômes, mais on a dû se foirer ou confondre un truc parce que c&#39;était pas ça du tout : c&#39;était donc un musée sur la &lt;strong&gt;Black Watch&lt;/strong&gt;, la section écossaise de l&#39;armée britannique et donc toute son histoire. C&#39;était très intéressant malgré tout.&lt;/p&gt;
&lt;h3 id=&quot;kirkmichael&quot;&gt;Kirkmichael&lt;/h3&gt;
&lt;p&gt;Notre tout dernier gîte était dans un tout petit bled, non loin de Pitlochry, &lt;strong&gt;Kirkmichael&lt;/strong&gt;.&lt;br&gt;
Pour une fois, c&#39;était un appartement entier et non pas une chambre donc on a mangé sur place avec des courses qu&#39;on avait faites plus tôt. Et donc on s&#39;était pris des plats préparés et… c&#39;était à l&#39;image de la cuisine écossaise dans les restaurants : pas bon. 😔
Mais bon on a bien dormi. On a bien apprécié notre apéro aussi, puisque dans les restaurants quand on commande à boire, le repas arrive très peu de temps après. On en a conclu que les Ecossais ne sont pas familiers avec le concept d&#39;apéro dans les restaurants.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-3024.avif 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-3024.webp 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-400.jpeg&quot; alt=&quot;Notre soirée apéro avec du vin, de la bière et des chips.&quot; width=&quot;3024&quot; height=&quot;4032&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/CyZU7P6UJh-3024.jpeg 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;jour-9-edinburgh&quot;&gt;Jour 9 : Edinburgh&lt;/h2&gt;
&lt;p&gt;Toute la nuit il avait plu à &lt;strong&gt;Kirkmichael&lt;/strong&gt;, et en partant joyeusement pour Edinburgh le lendemain matin, sans une goutte de pluie, on fait pas 1 mile avant de tomber sur une route inondée… genre 20cm d&#39;eau sur seulement 5 mètres, mais tout de même assez pour me faire flipper avec ma pauvre petite Fiat 500… Mais elle est passée !&lt;/p&gt;
&lt;h3 id=&quot;st-bridgets-kirk&quot;&gt;St Bridget&#39;s kirk&lt;/h3&gt;
&lt;p&gt;Au Nord d&#39;Edinburgh, juste avant de passer le pont, se trouvent cachées dans un coin les ruines d&#39;une ancienne église, juste au bord de la mer. Le matin, quand le soleil se lève encore et qu&#39;il n&#39;y a personne, c&#39;est un joli spectacle.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-3000.avif 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-3000.webp 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-400.jpeg&quot; alt=&quot;St Bridget&#39;s kirk&quot; width=&quot;3000&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/ELdHWjEcm6-3000.jpeg 3000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;ibis-hotel&quot;&gt;Ibis hotel&lt;/h3&gt;
&lt;p&gt;On est passé à notre hôtel déposer les bagages avant de rendre la voiture. Rien de bien folichon, juste qu&#39;il est bien placé pour repartir à l&#39;aéroport le lendemain matin (surtout qu&#39;on avait un vol à 6h du matin) puisque en périphérie Ouest d&#39;Edinburgh, juste avant l&#39;aéroport à 15 min de route.&lt;/p&gt;
&lt;h3 id=&quot;the-witchery&quot;&gt;The Witchery&lt;/h3&gt;
&lt;p&gt;Après avoir rendu la voiture on est allé manger dans un restaurant qu&#39;on avait repéré quelques jours auparavant, &lt;strong&gt;&lt;a href=&quot;https://www.thewitchery.com/&quot;&gt;The Witchery&lt;/a&gt;&lt;/strong&gt;. C&#39;est un peu plus &lt;em&gt;fancy&lt;/em&gt; que la moyenne mais on avait encore un peu de budget, alors on s&#39;est fait plaisir. Vraiment, c&#39;était très très bon, on sent qu&#39;on est dans le haut de gamme tout de suite. La déco était aussi superbe. Je recommande vraiment si vous avez les moyens et pensez à réserver car c&#39;est très vite complet.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-400.jpeg&quot; alt=&quot;Entrée de The Witchery&quot; width=&quot;2000&quot; height=&quot;3000&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/fPU_4jFrSO-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;arthurs-seat&quot;&gt;Arthur&#39;s seat&lt;/h3&gt;
&lt;p&gt;Pour digérer on s&#39;est dit qu&#39;on allait faire notre ultime randonnée, &lt;strong&gt;Arthur&#39;s seat&lt;/strong&gt;, qui est la formation rocheuse typique au beau milieu d&#39;Edinburgh. Alors je sais pas si c&#39;était vraiment difficile ou si mon corps n&#39;en pouvait plus après toutes ces randonnées plus ou moins compliquées mais j&#39;en ai chié un peu sur la fin.&lt;/p&gt;
&lt;video controls=&quot;&quot; width=&quot;100%&quot;&gt;
	&lt;source src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/img/23-09-20%2016-04-20%203303.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;/video&gt;
&lt;h3 id=&quot;sheep-heid-inn&quot;&gt;Sheep Heid Inn&lt;/h3&gt;
&lt;p&gt;Une des recommandations typiques après avoir fait &lt;strong&gt;Arthur&#39;s Seat&lt;/strong&gt; est d&#39;aller boire un verre en redescendant à &lt;strong&gt;&lt;a href=&quot;https://www.thesheepheidedinburgh.co.uk&quot;&gt;The Sheep Heid Inn&lt;/a&gt;&lt;/strong&gt;, apparemment le plus vieux pub de toute l&#39;Écosse et dans le quel il y a aussi de très vieilles mais charmantes &lt;em&gt;skittle alleys&lt;/em&gt; (ancêtre du bowling quoi).&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-4032.avif 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-4032.webp 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-400.jpeg&quot; alt=&quot;Entrée du Sheep Heid Inn&quot; width=&quot;4032&quot; height=&quot;3024&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/MhHGwOdNaL-4032.jpeg 4032w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-400.avif 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-812.avif 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-1400.avif 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-3024.avif 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-400.webp 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-812.webp 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-1400.webp 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-3024.webp 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-400.jpeg&quot; alt=&quot;Allées de Skittle&quot; width=&quot;3024&quot; height=&quot;4032&quot; srcset=&quot;https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-400.jpeg 400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-812.jpeg 812w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-1400.jpeg 1400w, https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/5R4ofahFZv-3024.jpeg 3024w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
&lt;h3 id=&quot;go-home&quot;&gt;Go home&lt;/h3&gt;
&lt;p&gt;Pour finir on a repris le chemin vers le centre d&#39;Edinburgh pour choper un tram vers l&#39;hôtel et se préparer à rentrer à la maison. J&#39;étais à la fois triste parce que les vacances étaient finies mais aussi un peu content de rentrer chez moi après presque 10 jours en vadrouille sans trop me reposer.&lt;/p&gt;
&lt;h2 id=&quot;quelques-chiffres&quot;&gt;Quelques chiffres&lt;/h2&gt;
&lt;p&gt;Ayant toujours ma montre connectée sur moi pendant le voyage j&#39;ai eu le plaisir d&#39;avoir quelques stats au retour :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;On a fait &lt;strong&gt;191608&lt;/strong&gt; pas&lt;/li&gt;
&lt;li&gt;On a parcouru &lt;strong&gt;126,3&lt;/strong&gt; km à pied&lt;/li&gt;
&lt;li&gt;On a gravi pour l&#39;équivalent de &lt;strong&gt;508&lt;/strong&gt; étages&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Ça donne un peu le tournis… 😅&lt;/p&gt;
&lt;h2 id=&quot;en-resume-quelques-points-d-attention-avant-d-aller-en-ecosse&quot;&gt;En résumé, quelques points d&#39;attention avant d&#39;aller en Écosse&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Vous n&#39;avez pas vraiment besoin d&#39;argent liquide. J&#39;ai tiré 30£ et au final je n&#39;ai vraiment eu besoin que de 10£. Quasiment tout se paye en carte là-bas, même les troubadours dans les rues touristiques ont du matériel de paiement sans contact, c&#39;est dire.&lt;/li&gt;
&lt;li&gt;Pour la location de voiture, pensez à vérifier quel type de carte vous avez et ce que le loueur accepte. Et pour la voiture, si vous avez l&#39;intention d&#39;aller au Nord dans les Highlands, prévoyez de prendre une voiture avec un peu de patate pour grimper les côtes.&lt;/li&gt;
&lt;li&gt;La bouffe n&#39;est pas très bonne mais y a beaucoup de restaurants indiens ou asiatiques où l&#39;on peut se venger.&lt;/li&gt;
&lt;li&gt;Certains restaurants incluent le service dans la note, d&#39;autres non, pensez à bien vérifier. C&#39;est si vous voulez faire des tips en plus qu&#39;il vous faudra de la monnaie.&lt;/li&gt;
&lt;li&gt;Levez-vous tôt. Vous profiterez des paysages sans le gros des touristes et c&#39;est vraiment mieux.&lt;/li&gt;
&lt;li&gt;On a pas trop eu ce problème parce qu&#39;on est arrivé en fin de saison mais si vous allez dans les coins les plus humides, pensez à acheter dans une pharmacie de quoi repousser les &lt;em&gt;midges&lt;/em&gt;, un genre de moustique qui chasse en troupeau.&lt;/li&gt;
&lt;/ul&gt;
</content>
  </entry>
  <entry>
    <title>Migrer de Ghost à 11ty</title>
    <link href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/" />
    <updated>2023-08-31T00:00:00Z</updated>
    <id>https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/</id>
    <content type="html">&lt;p&gt;Après plusieurs années d&#39;utilisation de Ghost comme CMS de ce blog ainsi que mon portfolio, j&#39;ai décidé de migrer sur Eleventy. Ça n&#39;a pas été super facile mais franchement pas très compliqué non plus.&lt;/p&gt;
&lt;h2 id=&quot;pourquoi-changer&quot;&gt;Pourquoi changer ?&lt;/h2&gt;
&lt;p&gt;Pour plusieurs raisons en fait.&lt;br&gt;
Techniques d&#39;abord puisque quand &lt;strong&gt;Ghost&lt;/strong&gt; est sorti l&#39;éditeur était très centré sur &lt;em&gt;Markdown&lt;/em&gt;, la base de donnée était du simple &lt;strong&gt;NoSQL&lt;/strong&gt; et c&#39;était globalement très orienté sur le blog personnel. Maintenant l&#39;éditeur, bien qu&#39;il accepte toujours le &lt;em&gt;Markdown&lt;/em&gt; en entrée mais plus comme un insert, n&#39;est rien d&#39;autre qu&#39;un &lt;abbr title=&quot;What You See Is What You Get&quot;&gt;wysiwyg&lt;/abbr&gt; un peu mieux foutu que la moyenne, la base de donnée par défaut est &lt;strong&gt;MySQL&lt;/strong&gt; et c&#39;est beaucoup plus orienté sur CMS générateur de communauté payante. Un peu comme ce que ferait &lt;a href=&quot;https://www.patreon.com&quot;&gt;Patreon&lt;/a&gt; en fait mais en plus personnel et moins plateforme.&lt;br&gt;
Alors je ne critique pas &lt;strong&gt;Ghost&lt;/strong&gt; ou son équipe, c&#39;est très bien ce qu&#39;ils font, c&#39;est toujours très souvent mis à jour et franchement si demain je devais vendre du contenu personnel en ligne je passerais très probablement par &lt;strong&gt;Ghost&lt;/strong&gt; de nouveau.
Mais pour ce qui est d&#39;un bête blog personnel, j&#39;ai préféré rester simple.&lt;/p&gt;
&lt;p&gt;En plus de ça je passais d&#39;un serveur dédié OVH d&#39;un pote à un serveur personnel mutualisé et il s&#39;avère qu&#39;installer &lt;strong&gt;Ghost&lt;/strong&gt; sur un serveur où l&#39;ont pas les accès &lt;em&gt;root&lt;/em&gt;, c&#39;est un brin plus chiant et compliqué.&lt;/p&gt;
&lt;p&gt;Alors je me suis mis bille en tête de migrer tout ça sur &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt;, un générateur de sites statiques, parce qu&#39;à la fin de la journée, ce blog n&#39;a pas besoin de grand chose d&#39;autre que de simples fichiers statiques.&lt;/p&gt;
&lt;h2 id=&quot;recuperer-les-donnees&quot;&gt;Récupérer les données&lt;/h2&gt;
&lt;p&gt;Le nerf de la guerre d&#39;une migration c&#39;est d&#39;abord de pouvoir récupérer les données et ce de manière exploitable. Heureusement, &lt;strong&gt;Ghost&lt;/strong&gt; fait ça très bien puisqu&#39;il suffit d&#39;aller dans les &lt;em&gt;Settings&lt;/em&gt; puis &lt;em&gt;Labs&lt;/em&gt; et cliquer sur le joli bouton &lt;em&gt;Export&lt;/em&gt; pour obtenir un magnifique JSON.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-400.avif 400w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-812.avif 812w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-1400.avif 1400w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-2880.avif 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-400.webp 400w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-812.webp 812w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-1400.webp 1400w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-2880.webp 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-400.png&quot; alt=&quot;Screenshot de la page Settings de l&#39;admin de Ghost&quot; width=&quot;2880&quot; height=&quot;1578&quot; srcset=&quot;https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-400.png 400w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-812.png 812w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-1400.png 1400w, https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/81Z8yIsF3o-2880.png 2880w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Seul inconvénient, mais pas irrémédiable, il ne s&#39;agit que du contenu textuel des billets et pas les autres potentiels &lt;em&gt;assets&lt;/em&gt; extérieurs comme, notamment, les images. Pour obtenir ces derniers vous pouvez aller récupérer tout ça sur votre serveur via un client FTP par exemple et prendre tout ce qui est dans le dossier &lt;code&gt;content&lt;/code&gt; de votre instance &lt;strong&gt;Ghost&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Et voilà, vous avez tout. Enfin… vous avez vos backup de billet mais, même si &lt;em&gt;JSON&lt;/em&gt; c&#39;est bien c&#39;est quand même pas du markdown, ce qui est la façon pour &lt;strong&gt;Eleventy&lt;/strong&gt; d&#39;écrire des billets. Il va donc falloir transformer tout ça.&lt;/p&gt;
&lt;p&gt;Pas d&#39;inquiétude, installez &lt;a href=&quot;https://www.npmjs.com/package/ghost-to-md&quot;&gt;ghost-to-md&lt;/a&gt; et suivez son &lt;em&gt;readme&lt;/em&gt;, c&#39;est un petit script open source qui transformera votre json en autant de fichier Markdown que vous avez écris de billets.&lt;/p&gt;
&lt;h2 id=&quot;le-temps-des-retouches&quot;&gt;Le temps des retouches&lt;/h2&gt;
&lt;p&gt;Aussi magique soit ce petit script, il y aura probablement des ratés. Enfin ça dépend du contenu que vous écriviez mais si comme moi vous aviez écrit des snippets de code, ou du html comme des &lt;em&gt;iframes&lt;/em&gt;, etc… en fait tout ce qui n&#39;est pas du texte ou de l&#39;image alors ça sera très probablement pété. Je vous suggère donc de bien garder votre blog en ligne en guise de source de vérité le temps de régler tout ça.&lt;/p&gt;
&lt;p&gt;C&#39;est honnêtement ce qui m&#39;a pris le plus de temps pendant cette migration, passer au crible chaque billet que j&#39;ai écris depuis le temps (une trentaine à peu près) et régler ce qu&#39;il y a avait à régler.&lt;/p&gt;
&lt;p&gt;Occupez vous du contenu textuel d&#39;abord, laissez les images à part un moment, on y reviendra plus tard.&lt;/p&gt;
&lt;p&gt;Ah aussi, vous remarquerez au tout début de chaque fichier &lt;em&gt;Markdown&lt;/em&gt; des metadata contenant un &lt;em&gt;title&lt;/em&gt;, &lt;em&gt;slug&lt;/em&gt;, etc, ça s&#39;appelle le &lt;em&gt;frontmatter&lt;/em&gt; chez &lt;strong&gt;11ty&lt;/strong&gt;.
N&#39;y touchez pas pour le moment on y reviendra plus tard.&lt;/p&gt;
&lt;h2 id=&quot;setup-de-eleventy&quot;&gt;Setup de Eleventy&lt;/h2&gt;
&lt;p&gt;De base, &lt;strong&gt;11ty&lt;/strong&gt; est simple, &lt;strong&gt;11ty&lt;/strong&gt; est sobre.
J&#39;aurais pu partir de zéro et c&#39;est sûrement ce que je ferai la prochaine fois que je l&#39;utiliserai pour un autre projet mais je ne maîtrisais pas encore assez quand j&#39;ai commencé cette migration alors j&#39;ai pris comme base de travail le dépôt git tutoriel officiel pour blog &lt;a href=&quot;https://github.com/11ty/eleventy-base-blog&quot;&gt;Eleventy-base-blog&lt;/a&gt; qui est comme son nom l&#39;indique une base pour un blog. Parfait, n&#39;est-ce pas ?&lt;/p&gt;
&lt;p&gt;Je ne vais pas m&#39;attarder plus ce que ça sur comment installer à la base &lt;strong&gt;11ty&lt;/strong&gt;, lisez donc le… &lt;em&gt;readme&lt;/em&gt; du dépôt.&lt;/p&gt;
&lt;h3 id=&quot;cool-uris-dont-change-comme-on-dit-dans-le-bouchonnois&quot;&gt;Cool URIs don&#39;t change comme on dit dans le bouchonnois.&lt;/h3&gt;
&lt;p&gt;Un principe de base du développement web, et particulièrement à propos pour notre migration, c&#39;est qu&#39;un URI ne doit pas changer. Comprendre qu&#39;on va faire en sorte que les URIs de vos billets sur &lt;strong&gt;11ty&lt;/strong&gt; soient les mêmes que celles que vous aviez sur &lt;strong&gt;Ghost&lt;/strong&gt;, parce qu&#39;on est pas des bêtes quand même.&lt;/p&gt;
&lt;p&gt;Si vous avez regardé un peu les URIs sur &lt;strong&gt;Ghost&lt;/strong&gt; ressemblent à ça :
&lt;code&gt;domain.tld/YYYY/MM/DD/slug&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;11ty&lt;/strong&gt;, lui, par défaut va garder l&#39;architecture de votre dossier de contenu si vous ne forcez pas une URI spécifique.&lt;/p&gt;
&lt;p&gt;Donc pour arriver au même résultat sur &lt;strong&gt;11ty&lt;/strong&gt; vous aurez deux choix qui s&#39;offrent à vous :&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;soit vous faites en sorte que l&#39;architecture de votre dossier de billet de blog sur &lt;strong&gt;11ty&lt;/strong&gt; soit du même format que vos URI de &lt;strong&gt;Ghost&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Soit vous faites en sorte de forcer le &lt;code&gt;permalink&lt;/code&gt; de chacun de vos billets un par un.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Personnellement j&#39;ai choisi la première option, j&#39;aime bien architecturer proprement mes dossiers alors ça m&#39;allait de faire ça comme ça.&lt;br&gt;
Et pour ce qui est du &lt;code&gt;slug&lt;/code&gt;, ça va être simple, vous l&#39;avez déjà en fait, il est dans le &lt;em&gt;frontmatter&lt;/em&gt; de chaque fichier &lt;em&gt;.md&lt;/em&gt;, c&#39;est fourni grâce à &lt;strong&gt;ghost-to-md&lt;/strong&gt;. Vous n&#39;avez qu&#39;à faire en sorte que le nom de votre dossier soit raccords avec ce &lt;em&gt;slug&lt;/em&gt;. Une fois fait vous pouvez virer ce &lt;code&gt;slug&lt;/code&gt; du &lt;em&gt;frontmatter&lt;/em&gt; il ne nous servira plus.&lt;/p&gt;
&lt;p&gt;Du coup grosso modo on se retrouvera avec une architecture de la sorte :&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;content/
├─ 2023/
├─ 2022/
│  ├─ 12/
│  │  ├─ 31/
│  │  │  ├─ mon-titre-de-billet/
│  │  │  │  ├─ index.md
│  ├─ 06/
│  │  ├─ 13/
│  │  │  ├─ mon-titre-de-mon-autre-billet/
│  │  │  │  ├─ index.md

&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;les-tags&quot;&gt;Les tags&lt;/h3&gt;
&lt;p&gt;Normalement, vous les avez récupérés avec &lt;strong&gt;ghost-to-md&lt;/strong&gt; mais ils sont très probablement mal intégrés, donc retouchez un peu ça dans vos &lt;em&gt;.md&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Si vous n&#39;avez qu&#39;un seul tag, vous pouvez écrire ça sur une ligne ou sur plusieurs comme cela :&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; humeur
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; notes
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Et si vous avez plusieurs tags, il vous faudra utiliser une de ces deux syntaxes :&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;code&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; humeur&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; code
	&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; notes
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;gerer-les-images&quot;&gt;Gérer les images&lt;/h3&gt;
&lt;p&gt;Revenons-en aux images maintenant.
Le dépôt &lt;strong&gt;Elventy-base-blog&lt;/strong&gt; vient avec quelques plugins 11ty déjà installés dont &lt;strong&gt;eleventy-img&lt;/strong&gt;. Ce dernier gère plusieurs choses en même temps, il va :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Déplacer les images dans un dossier &lt;code&gt;img&lt;/code&gt; global&lt;/li&gt;
&lt;li&gt;Générer des images dans d&#39;autres formats (avif, webp, etc) qui pourraient être mieux adaptés&lt;/li&gt;
&lt;li&gt;Générer des images à différentes taille pour le responsive&lt;/li&gt;
&lt;li&gt;Mettre tout ça au carré en insérant une balise &lt;code&gt;picture&lt;/code&gt; avec des éléments &lt;code&gt;source&lt;/code&gt; et leurs attributs &lt;code&gt;srcset&lt;/code&gt; et &lt;code&gt;sizes&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;C&#39;est vraiment cool et pratique honnêtement, le seul petit inconvénient que je lui trouve c&#39;est qu&#39;il va falloir écrire du code spécifique au langage de templating que vous utilisez dans &lt;strong&gt;11ty&lt;/strong&gt; directement dans votre fichier &lt;em&gt;Markdown&lt;/em&gt;, ce qui n&#39;est pas très gênant j&#39;imagine si vous écrivez dans un éditeur de code mais un peu plus si vous écrivez dans un outil dédié au &lt;em&gt;Markdown&lt;/em&gt; comme moi avec &lt;a href=&quot;https://obsidian.md/&quot;&gt;Obsidian&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Par soucis de simplicité, je mets toutes mes images d&#39;un billet dans le répertoire de ce billet dans un dossier &lt;code&gt;img&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Et donc, utilisant &lt;a href=&quot;https://mozilla.github.io/nunjucks/&quot;&gt;Nunjucks&lt;/a&gt; pour le templating, je vais devoir écrire pour chaque image insérée quelque chose comme ça :&lt;/p&gt;
&lt;pre class=&quot;language-liquid&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-liquid&quot;&gt;&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token object&quot;&gt;image&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;./img/mon_image.jpg&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Mon texte alternatif, parce qu&#39;on est pas des bêtes non plus&quot;&lt;/span&gt; &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Ça c&#39;est la base mais vous pouvez aussi choisir une &lt;code&gt;width&lt;/code&gt; et surtout générer les &lt;code&gt;sizes&lt;/code&gt; pour le responsive par exemple :&lt;/p&gt;
&lt;pre class=&quot;language-liquid&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-liquid&quot;&gt;&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token object&quot;&gt;image&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;./img/mon_image.jpg&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Mon texte alternatif, parce qu&#39;on est pas des bêtes non plus&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;(min-width: 50em) 812px, 100vw&quot;&lt;/span&gt; &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Alors ça peut paraître lourd à l&#39;usage mais en fait vous pouvez mettre des valeurs par défaut et ne les spécifier que si vous voulez un truc différent.&lt;br&gt;
Pour ma part, toutes mes images de contenu ont les tailles &lt;code&gt;[400, 812, 1400, &amp;quot;auto&amp;quot;]&lt;/code&gt; (auto étant la taille de l&#39;image telle quelle) et leur &lt;code&gt;sizes&lt;/code&gt; est &lt;code&gt;(min-width: 50em) 812px, 100vw&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Avec juste ça le plugin &lt;strong&gt;eleventy-img&lt;/strong&gt; génèrera une balise picture belle comme il faut :&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;picture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;source&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;image/avif&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;srcset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;
      /img/v4TA5RtKYq-400.avif   400w,
      /img/v4TA5RtKYq-812.avif   812w,
      /img/v4TA5RtKYq-1170.avif 1170w
    &lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;sizes&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;(min-width: 50em) 812px, 100vw&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;source&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;image/webp&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;srcset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;
      /img/v4TA5RtKYq-400.webp   400w,
      /img/v4TA5RtKYq-812.webp   812w,
      /img/v4TA5RtKYq-1170.webp 1170w
    &lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;sizes&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;(min-width: 50em) 812px, 100vw&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;source&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;image/jpeg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;srcset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;
      /img/v4TA5RtKYq-400.jpeg   400w,
      /img/v4TA5RtKYq-812.jpeg   812w,
      /img/v4TA5RtKYq-1170.jpeg 1170w
    &lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;sizes&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;(min-width: 50em) 812px, 100vw&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Mon texte alternatif, parce qu&#39;on est pas des bêtes non plus&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;loading&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;lazy&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;decoding&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;async&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/img/v4TA5RtKYq-400.jpeg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;1170&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;1170&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;picture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;les-feature-image&quot;&gt;Les &lt;em&gt;feature image&lt;/em&gt;&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Ghost&lt;/strong&gt; permet sur chaque billet de lui mettre une image de présentation, que ce une personnelle ou venant directement de &lt;a href=&quot;https://unsplash.com&quot;&gt;Unsplash&lt;/a&gt; et j&#39;utilisais beaucoup cette option.&lt;br&gt;
Donc pour tenter de reprendre ça, j&#39;ai tout d&#39;abord récupéré toutes les images utilisées, je les ai stockées dans le dossier &lt;code&gt;img&lt;/code&gt; de mon billet et dans le &lt;em&gt;frontmatter&lt;/em&gt; de chaque billet j&#39;ai rajouté des données custom.&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Titre de mon billet
&lt;span class=&quot;token key atrule&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token datetime number&quot;&gt;2023-03-27&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;featured&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; img/featured.jpg
&lt;span class=&quot;token key atrule&quot;&gt;featured_author&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Carolina Heza
&lt;span class=&quot;token key atrule&quot;&gt;featured_url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; carolinahdzz
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; notes
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;featured&lt;/code&gt; étant le chemin vers l&#39;image en question&lt;/li&gt;
&lt;li&gt;&lt;code&gt;featured_author&lt;/code&gt; étant le nom de l&#39;auteur&lt;/li&gt;
&lt;li&gt;&lt;code&gt;featured_url&lt;/code&gt; étant le &lt;em&gt;handle&lt;/em&gt; de l&#39;auteur pour générer le lien qui va bien vers sa page &lt;strong&gt;Unsplash&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Ensuite dans mon template de billet j&#39;ai mis :&lt;/p&gt;
&lt;pre class=&quot;language-liquid&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-liquid&quot;&gt;&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; featured &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;figure&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;feature&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
	&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token object&quot;&gt;image&lt;/span&gt; featured &lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;(min-width: 50em) 90vw, 100vw&quot;&lt;/span&gt; &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;
	&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; featured_author &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;
	&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;figcaption&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Photo de &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;https://unsplash.com/@&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{{&lt;/span&gt; featured_url&lt;span class=&quot;token delimiter punctuation&quot;&gt;}}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{{&lt;/span&gt;featured_author&lt;span class=&quot;token delimiter punctuation&quot;&gt;}}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt; sur Unsplash&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;figcaption&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
	&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;endif&lt;/span&gt; &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;figure&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token liquid language-liquid&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;endif&lt;/span&gt; &lt;span class=&quot;token delimiter punctuation&quot;&gt;%}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Tout ça parce que, une fois encore, on est pas des bêtes, il &lt;strong&gt;faut&lt;/strong&gt; mettre les sources des photos que l&#39;on vous laisse utiliser gracieusement.&lt;/p&gt;
&lt;p&gt;Alors oui tout ça demande &lt;em&gt;un peu plus&lt;/em&gt; de travail pour chaque billet puisque tout ça était géré quasi automatiquement par &lt;strong&gt;Ghost&lt;/strong&gt; mais c&#39;est le jeu quand on veut se passer de CMS au final.&lt;/p&gt;
&lt;h3 id=&quot;le-flux-rss&quot;&gt;Le flux RSS&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;11ty&lt;/strong&gt; vient par défaut sans générateur de flux RSS mais il existe un plugin officiel bien nommé &lt;a href=&quot;https://www.11ty.dev/docs/plugins/rss/&quot;&gt;eleventy-plugin-rss&lt;/a&gt; qui, si vous utilisez le dépôt &lt;strong&gt;eleventy-base-blog&lt;/strong&gt; comme moi, vous aurez automatiquement.&lt;br&gt;
Honnêtement y a pas grand chose à faire de ce côté, c&#39;est plutôt direct. Le seul &lt;em&gt;hic&lt;/em&gt; c&#39;est qu&#39;il génère un fichier xml sur lequel on doit pointer mais que &lt;strong&gt;Ghost&lt;/strong&gt;, lui, faisait une URL du genre &lt;code&gt;domain.tld/rss/&lt;/code&gt; alors histoire de ne perdre personne pendant la migration j&#39;ai dû rajouter une redirection 301 (Moved Permanently) sur le serveur.&lt;/p&gt;
&lt;p&gt;Un simple &lt;em&gt;Redirect&lt;/em&gt; ne suffira pas malheureusement, il faudra faire un &lt;em&gt;RedirectMatch&lt;/em&gt; à la place, du coup dans votre &lt;em&gt;.htaccess&lt;/em&gt;, allez écrire un truc comme ça :&lt;/p&gt;
&lt;pre class=&quot;language-txt&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-txt&quot;&gt;RedirectMatch 301 ^/rss/?$ /feeds/posts.xml&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Et voilà, ça devrait faire le travail.&lt;/p&gt;
&lt;h3 id=&quot;les-petits-plus&quot;&gt;Les petits plus.&lt;/h3&gt;
&lt;p&gt;11ty a quelques &lt;a href=&quot;https://www.11ty.dev/docs/plugins/#list-of-official-plugins&quot;&gt;plugins officiels&lt;/a&gt;, et souvent indispensables, à vous proposer. Une flopée viennent avec le dépôt &lt;strong&gt;eleventy-base-blog&lt;/strong&gt; comme :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.11ty.dev/docs/plugins/navigation/&quot;&gt;Navigation&lt;/a&gt; pour générer une navigation ou un fil d&#39;ariane&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.11ty.dev/docs/plugins/rss/&quot;&gt;RSS&lt;/a&gt; pour générer vos flux RSS, Atom, JSON…&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.11ty.dev/docs/plugins/syntaxhighlight/&quot;&gt;Syntax highlighting&lt;/a&gt; pour mettre en lumière vos bouts de code avec &lt;a href=&quot;https://prismjs.com/&quot;&gt;PrismJS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/11ty/eleventy-plugin-bundle&quot;&gt;Bundle&lt;/a&gt; pour &amp;quot;concaténer&amp;quot; vos fichiers CSS ou JS&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Mais de nombreux autres sont disponibles via la &lt;a href=&quot;https://www.11ty.dev/docs/plugins/#community-contributed-plugins&quot;&gt;communauté 11ty&lt;/a&gt; et dans le tas j&#39;en ai déjà choisi quelques uns (et c&#39;est sûrement pas les derniers puisque je lorgne sur quelques autres) :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/gfscott/eleventy-plugin-embed-everything&quot;&gt;Embed everything&lt;/a&gt; pour générer de belles &lt;em&gt;iframes&lt;/em&gt; pour vos média externes (Youtube, Vimeo, Spotify, etc) en ne mettant que le lien du média dans vos billets&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/JKC-Codes/eleventy-plugin-time-to-read&quot;&gt;Time to read&lt;/a&gt; qui va calculer le temps de lecture de vos billets et vous permettre de l&#39;afficher comme il vous plait&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/thigoap/eleventy-plugin-reader-bar&quot;&gt;Reader bar&lt;/a&gt; qui va permettre de rajouter une barre d&#39;avancement de lecture (purement cosmétique)&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/patrickxchong/eleventy-plugin-svg-sprite/&quot;&gt;SVG Sprite&lt;/a&gt; pour générer un sprite SVG et faciliter son utlisation&lt;/li&gt;
&lt;/ul&gt;
</content>
  </entry>
  <entry>
    <title>L’autre, ce sac à merde</title>
    <link href="https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/" />
    <updated>2023-03-27T00:00:00Z</updated>
    <id>https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/</id>
    <content type="html">&lt;p&gt;L’enfer c’est les autres comme disait l’autre. C’est toujours l’autre. Jamais soi, jamais nos proches. C’est toujours de la faute des autres. Mais qui sommes-nous sinon les autres des autres. Sommes-nous alors leur enfer ?&lt;/p&gt;
&lt;h2 id=&quot;les-autres-sont-des-cons&quot;&gt;Les autres sont des cons.&lt;/h2&gt;
&lt;p&gt;Vous avez remarqué comme très souvent quand un proche vous raconte une de ses mésaventures avec un tiers il en ressort que ce tiers s’avère être un gros con sur qui repose entièrement la faute ?&lt;br&gt;
Et c’est vrai que quand votre proche vous le raconte, en toute objectivité, vous pensez vous aussi que c’était un comportement de gros connard, que dis-je, de gros fils de hyène !&lt;/p&gt;
&lt;p&gt;Loin de nous l’idée même de remettre la parole de notre proche en question. C’est vrai, pourquoi le ferions-nous ?&lt;/p&gt;
&lt;p&gt;Alors il est vrai que, parfois, ce que l’on nous raconte peut laisser place à une certaine interprétation, qu’on sent bien que la faute pourrait être partagée mais tout de même, si ne serait-ce que la moitié de l’histoire est belle est bien vraie, l’autre a tout de même fait un bon gros move de sac à foutre.&lt;/p&gt;
&lt;p&gt;Puis un jour, une épiphanie m’a frappé d’un coup sec sur la nuque. Si l’autre est un présentoir à étrons et que je suis un autre pour l’autre, ça veut dire que je suis moi-même un fils de chacal galleux ?&lt;/p&gt;
&lt;h2 id=&quot;les-autres-c-est-nous&quot;&gt;Les autres c’est nous.&lt;/h2&gt;
&lt;p&gt;Après de longues et intenses réflexions sous la douche je suis arrivé à la conclusion que… oui on est tous des ramassis de gerbe après un kebab bien gras. Partant du principe que toute notion de morale ou d’éthique ne peut être universelle, et que l’on se rapproche de certaines personnes parce que justement on partage certains points de vue et donc, logiquement, on s’éloigne d’autres pour nos divergences d’opinion qui finissent naturellement par nous obliger à les percevoir comme des étagères à selles intellectuelles.&lt;/p&gt;
&lt;p&gt;Franchement c’est pas de notre faute. Si comme moi vous êtes contre le racisme, la misogynie, l’homophobie… globalement tous les trucs qui sont contre une catégorie de personne, alors toute personne qui ne serait pas d’accord avec vous, ne serait-ce que sur un point, serait un forcément un fils d’ornithorynque manchot. D’ailleurs, si vous n’êtes pas d’accord avec cette phrase, il y a de bonnes chances pour que vous soyez vous même un garage à phallus sous syphilis.&lt;/p&gt;
&lt;p&gt;Forcément, du point de vue de l’autre, tout est aussi vrai pour nous.&lt;/p&gt;
&lt;p&gt;Et là vous allez me dire…
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-400.avif 400w, https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-812.avif 812w, https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-1170.avif 1170w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-400.webp 400w, https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-812.webp 812w, https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-1170.webp 1170w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-400.jpeg&quot; alt=&quot;Waouh, tellement de manichéisme, très binaire&quot; width=&quot;1170&quot; height=&quot;1170&quot; srcset=&quot;https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-400.jpeg 400w, https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-812.jpeg 812w, https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/v4TA5RtKYq-1170.jpeg 1170w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;
Et vous auriez raison ma foi.&lt;/p&gt;
&lt;h2 id=&quot;les-autres-c-est-pas-forcement-des-cons&quot;&gt;Les autres c’est pas forcément des cons&lt;/h2&gt;
&lt;p&gt;Je le sais, vous le savez, nous le sachons, la vie c’est pas un film d’expressionnisme allemand, tout n’est pas que noir ou blanc. Y a des nuances de gris, au moins cinquante il paraît mais je dirais plus tout de même.&lt;/p&gt;
&lt;p&gt;Ça voudrait dire qu’il est fort probable que votre proche, même si ce qu’il ou elle vous a raconté est 100% véridique, n&#39;aurait exprimé que son propre ressenti, en d’autres termes vous n’auriez qu’un seul son de cloche.
Il est donc tout aussi probable que ce tiers, supposément une raclure de chiotte à la turque, soit en train de raconter la même histoire de son propre point de vue à ses propres proches; histoire dans laquelle votre proche serait à son tour le fils d’unijambiste de la mésaventure.
Tout dépend d’où on se place finalement.&lt;/p&gt;
&lt;p&gt;La sagesse voudrait alors que si l’on se rend compte de cette dissonance, on puisse être critique envers la version des faits de votre proche, qu’on tente de relativiser la situation mais dans quel but ? Pour être plus juste ? Pour être plus intègre ? Pour se défendre d’être un maillon de cette chaîne de la haine ?&lt;/p&gt;
&lt;p&gt;Et si vous n’êtes pas là pour être un support émotionnel à un proche en détresse, et ce inconditionnellement, êtes-vous un bon proche ? N’est-ce pas ce qu’on attend d’un proche dans ces cas-là justement ? Ne seriez-vous pas en train de vous mettre un bâton dans vos propres roues ? À trop vouloir rester intègre, de pas vouloir rentrer dans ce cercle vicieux, n’êtes-vous pas en train de vous isoler pour avoir involontairement ou non pris la défense d’un ou une totale inconnue qui ne le saura jamais et ne vous remerciera jamais ?&lt;/p&gt;
&lt;p&gt;Tant de questions, tant de conséquences.&lt;/p&gt;
&lt;p&gt;Je me dis que parfois on pourrait penser naïvement que la relation que l’on a avec nos proches est uniquement basée sur le partage de l’amour de l’autre mais il me semble aussi, dans ces cas-là, qu’on se retrouve à devoir partager la haine de l&#39;autre que l’on soit d’accord ou non.&lt;/p&gt;
&lt;p&gt;C’est tellement compliqué d’être un animal social.&lt;/p&gt;
&lt;p&gt;Finalement, c’est vrai, l’enfer c’est les autres… ces gros enfoirés.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Ce billet vous a été présenté par les pensées de douche.&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>J&#39;ai bricolé un truc open-source</title>
    <link href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/" />
    <updated>2023-02-22T00:00:00Z</updated>
    <id>https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/</id>
    <content type="html">&lt;p&gt;Je bosse vraiment dans le développement web depuis 2007 et j&#39;ai jamais vraiment fait un projet open-source de A à Z qui serve à quelqu&#39;un d&#39;autre que moi depuis tout ce temps. Mais je crois que ce temps est révolu.&lt;/p&gt;
&lt;p&gt;Voyez, je suis à mes heures perdues grand amateur de jeu de rôle sur table et à la fois un peu fan de technologie. Tout ça pour dire que, souvent, plus le jeu a des règles complexes plus la sempiternelle feuille de personnage sous forme papier devient vite chiante à maintenir à jour. Pas impossible mais chiante.&lt;/p&gt;
&lt;p&gt;Pour la plupart des grands noms du jeu de rôle il existe déjà souvent une solution numérique de cette feuille de personnage. Mais pas tout le temps. Et que fait donc un développeur web flemmard quand une chose ne lui convient pas ? Il tente de le faire soi même évidemment.&lt;/p&gt;
&lt;p&gt;Vous l&#39;aurez compris c&#39;est exactement ce qu&#39;il m&#39;est arrivé. Avec mon groupe de JdR on a récemment changé de jeu et on est passé à &lt;strong&gt;Warhammer Fantasy Role Play&lt;/strong&gt; (à ne pas confondre avec Warhammer 40K ou Warhammer Fantasy qui sont des jeux de batailles avec des figurines, là on parle d&#39;un jeu de rôle papier ou sur table). Mais l&#39;offre de solution numérique s&#39;arrêtait à un vulgaire PDF éditable.&lt;/p&gt;
&lt;p&gt;C&#39;était pas assez pour bibi.&lt;/p&gt;
&lt;h2 id=&quot;la-genese-du-projet&quot;&gt;La genèse du projet&lt;/h2&gt;
&lt;p&gt;J&#39;ai alors d&#39;abord commencé à réfléchir le truc, comment ça se présenterait, quelles technologies, quelle fonctionnalités, etc.&lt;/p&gt;
&lt;p&gt;Puis je suis vite arrivé à la conclusion qu&#39;une fiche de personnage de jeu de rôle ce n&#39;était finalement rien d&#39;autre qu&#39;un simple formulaire de données. Dans le cas de WFRP (Warhammer Fantasy Role Play donc), il y a aussi moult données qui dépendent les unes des autres. Donc quelques calculs à prévoir mais rien de folichon.&lt;/p&gt;
&lt;p&gt;Alors je me suis dit… Et pourquoi pas ?&lt;/p&gt;
&lt;p&gt;Et pourquoi je me lancerais pas dans ce petit projet qui j&#39;en suis sûr servirait à d&#39;autres personnes de part le monde ?&lt;/p&gt;
&lt;p&gt;Du coup je l&#39;ai fait !&lt;/p&gt;
&lt;h2 id=&quot;choix-techniques&quot;&gt;Choix techniques&lt;/h2&gt;
&lt;p&gt;Je suis développeur front donc j&#39;ai d&#39;entrée évincé toute notion de backend. Ce serait un projet uniquement front.&lt;/p&gt;
&lt;h3 id=&quot;base-de-donnee&quot;&gt;Base de donnée&lt;/h3&gt;
&lt;p&gt;Mais il me fallait malgré tout une base de donnée pour stocker toutes les valeurs des champs du formulaire. J&#39;ai du coup opter pour du &lt;strong&gt;localStorage&lt;/strong&gt; pour plusieurs raisons :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;je ne voulais pas avoir à gérer des comptes utilisateur, faire du support là-dessus, gérer les mots de passes oubliés ou encore les histoires de données personnelles avec le RGPD, etc.&lt;/li&gt;
&lt;li&gt;Je ne voulais pas avoir à gérer des mis à jour de sécurité d&#39;une base de données backend et tous les potentiels hacks qui pourraient subvenir.&lt;/li&gt;
&lt;li&gt;Je n&#39;avais pas l&#39;intention de prendre un hébergment dédié pour l&#39;app. J&#39;avais déjà décidé que ça se passerait sur Github.io directement depuis le repository git&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Alors pourquoi localStorage plutôt que IndexedDB ou autres ? J&#39;ai honnêtement longuement hésité entre ces deux-là. J&#39;ai choisi le premier pour sa simplicité d&#39;utilisation mais je ne me ferme pas l&#39;idée de migrer vers IndexedDB si le besoin technique se fait ressentir.&lt;/p&gt;
&lt;h3 id=&quot;hebergement&quot;&gt;Hébergement&lt;/h3&gt;
&lt;p&gt;Comme dit plus haut, j&#39;avais l&#39;intention de base de faire un repo open-source de l&#39;app et directement l&#39;héberger sur Github Pages, histoire de faire direct et simple (au final c&#39;était pas si simple mais on verra ça plus tard). Mais disons que cette solution avait le mérite de faciliter le déploiement et la configuration du serveur avec du Gzip et du HTTPS par défaut notamment. Choses que je ne sais pas faire et que je n&#39;ai même pas envie de savoir faire.&lt;/p&gt;
&lt;h3 id=&quot;technologies&quot;&gt;Technologies&lt;/h3&gt;
&lt;p&gt;Forcément si on parle de front uniquement ce serait du HTML/CSS/JS. Mais est-ce que j&#39;utilise un système de templating pour HTML du genre Handlebars ? Est-ce que j&#39;utilise un pré ou post-procésseur CSS comme Sass ? Est-ce que j&#39;utilise un Framework JS pour monter tout ça comme ReactJS ?&lt;/p&gt;
&lt;p&gt;Les réponses à ces questions étaient : Non. À chacune d&#39;entre elles.
Je suis parti en mode Vanilla de bout en bout.
Enfin presque. Mais on verra plus tard. En tout cas ça allait être une app complètement statique.&lt;/p&gt;
&lt;h3 id=&quot;fonctionnalites&quot;&gt;Fonctionnalités&lt;/h3&gt;
&lt;p&gt;Ce que je voulais à minima c&#39;était que les champs qui sont des duplicatas d&#39;autres champs soient gérés automatiquement et que les champs qui sont le résultat d&#39;addition de plusieurs autres champs soient remplis aussi automatiquement.&lt;/p&gt;
&lt;p&gt;Puis les potes du club de JdR m&#39;ont dit que ce serait cool de pouvoir mettre en exergue une compétence de carrière parce que, dans ce jeu, ce sont les compétences qu&#39;on doit améliorer si l&#39;ont veut passer au niveau de carrière suivant. Normalement sur une feuille on met une croix ou on entoure cette dernière mais il me fallait un moyen de faire ça sur l&#39;app.
Puis ils m&#39;ont dit aussi que ce serait cool si l&#39;app calculait automatiquement le poids des affaires que le personnage possède sur lui puisque, dans WFRP toujours, le personnage ne peut porter un poids d&#39;objet limité.&lt;/p&gt;
&lt;p&gt;Ça faisait déjà deux nouvelles fonctionnalités.&lt;/p&gt;
&lt;p&gt;Ensuite personnellement je voulais faire deux thèmes différents : Un clair et un foncé (ou ce qu&#39;on appelle plus allègrement le Dark mode).&lt;/p&gt;
&lt;p&gt;Évidemment je voulais que ce soit un minimum responsive, la base quoi.&lt;/p&gt;
&lt;p&gt;Et pour le challenge, mais aussi pour la sécurité, je voulais qu&#39;on puisse exporter puis importer les données, que ce soit pour faire une sauvegarde (le localStorage c&#39;est pas fiable à 100%) ou pour un transfert sur un autre device.&lt;/p&gt;
&lt;p&gt;Ensuite j&#39;ai pensé à faire un partage par URL de la fiche, en mettant les données dans des queryStrings.&lt;/p&gt;
&lt;p&gt;Finalement, je me suis dit que si je proposais la fiche en français et en anglais ça toucherait plus de monde, donc je me suis mis bille en tête de rajouter de l&#39;i18n.&lt;/p&gt;
&lt;p&gt;Voilà j&#39;avais ma liste de fonctionnalités de départ.&lt;/p&gt;
&lt;h2 id=&quot;developpement&quot;&gt;Développement&lt;/h2&gt;
&lt;p&gt;En 2-3 semaines j&#39;ai beaucoup tatonné mais j&#39;arrivais globalement à mes fins. Toutes mes fins? Non…&lt;/p&gt;
&lt;p&gt;Il s&#39;avère que mon formulaire a beaucoup de données, beaucoup trop pour tout passer en queryStrings pour faire du partage via URL parce que tous les browsers ont une limite de longueur d&#39;URL et ils sont loin d&#39;être égaux. Certains sont à 60 000 caractères, d&#39;autre à 2 000… De base mon URL, à vide, serait dans les 4 000 et même si je bidouillais pour optimiser la longueur des queries ça ne serait jamais assez bon.&lt;/p&gt;
&lt;p&gt;J&#39;ai donc dû abandonné cette fonctionnalité. En tout cas telle quelle. Peut être que j&#39;y reviendrai mais différemment plus tard.&lt;/p&gt;
&lt;p&gt;Puis je suis passé à l&#39;i18n qui quand on veut faire du statique s&#39;avère un brin plus compliqué que prévu.&lt;/p&gt;
&lt;p&gt;J&#39;ai dû abandonner l&#39;idée de faire sans dépendance et après moult recherches je me suis arrêté sur &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;11ty&lt;/a&gt; qui semblait plus qu&#39;à propos pour faire du statique. Dépendance qui aura le mérite de n&#39;exister que pour builder l&#39;app, alors ça va je le vis bien.&lt;/p&gt;
&lt;p&gt;Par contre, déployer tout ça sur Github Pages quand on a un builder, c&#39;est une autre paire de manche que de simplement lui dire tu prends les fichiers html présent et tu me sers ça comme j&#39;avais au début. J&#39;ai dû me familiariser avec les Github Actions pour régler ça, non sans mal. Mais c&#39;est passé !&lt;/p&gt;
&lt;p&gt;J&#39;ai globalement construit ça au mieux, aussi bien que je savais le faire.&lt;/p&gt;
&lt;p&gt;Et je suis vraiment satisfait du résultat. Rien que de voir les données de performance ça me laisse en joie.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-400.avif 400w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-812.avif 812w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-1400.avif 1400w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-1606.avif 1606w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-400.webp 400w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-812.webp 812w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-1400.webp 1400w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-1606.webp 1606w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-400.png&quot; alt=&quot;Performance de WFRP&quot; width=&quot;1606&quot; height=&quot;572&quot; srcset=&quot;https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-400.png 400w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-812.png 812w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-1400.png 1400w, https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/33hu7rHdEv-1606.png 1606w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;moins de 10 requêtes HTTP&lt;/li&gt;
&lt;li&gt;~140 Ko tout compris&lt;/li&gt;
&lt;li&gt;~37Ko une fois Gzippé&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Alors je dis pas que l&#39;app est parfaite, faut encore la tester à plus grande échelle que juste moi, il y a sûrement des axes d&#39;améliorations et j&#39;ai déjà des nouvelles fonctionnalités dans les tuyaux.
Mais c&#39;est là, ça marche et c&#39;est disponible pour qui souhaite l&#39;utiliser.&lt;/p&gt;
&lt;p&gt;Le repo est sur &lt;a href=&quot;https://github.com/GoOz/wfrp-sheet&quot;&gt;Github&lt;/a&gt; et l&#39;app disponible sur &lt;a href=&quot;https://gooz.github.io/wfrp-sheet/#en&quot;&gt;Github Pages&lt;/a&gt; !&lt;/p&gt;
&lt;p&gt;Je tiens à remercier certaines personnes pour leurs coups de mains et conseils.
Notamment les gens cools de ##openweb@Libera.Chat sur IRC comme &lt;a href=&quot;https://indieweb.social/@anthony&quot;&gt;Anthony&lt;/a&gt; ou &lt;a href=&quot;https://pouet.chapril.org/@julienw&quot;&gt;Julien&lt;/a&gt;, mais aussi les copains du web comme &lt;a href=&quot;https://mamot.fr/@ryuran&quot;&gt;Yvain&lt;/a&gt; et &lt;a href=&quot;https://mamot.fr/@nhoizey&quot;&gt;Nicolas&lt;/a&gt; et puis enfin Raf pour la QA bénévole.&lt;/p&gt;
&lt;p&gt;Voilà c&#39;est tout pour moi.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Faire du CSS dynamique avec JavaScript mais en mieux avec CSS custom properties</title>
    <link href="https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/" />
    <updated>2022-12-20T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/</id>
    <content type="html">&lt;p&gt;CSS c&#39;est cool, JavaScript c&#39;est cool. Mais mettre à jour du CSS avec du JS ça sous-entend de faire du CSS inline et ça c&#39;est pas cool. Le truc c&#39;est que JS ne sait pas vraiment faire autre chose que ça, à moins que…&lt;/p&gt;
&lt;p&gt;La plupart du temps on peut très bien changer du style avec JS en appliquant ou en supprimant uniquement une classe CSS pré-écrite. Et quand c&#39;est possible c&#39;est encore ce qu&#39;il y a de mieux à faire mais il arrive parfois que cette option ne soit pas suffisante, notamment quand on cherche à écrire du CSS dynamique ou &amp;quot;&lt;em&gt;à la volée&lt;/em&gt;&amp;quot;.&lt;/p&gt;
&lt;p&gt;Mettons que sur mon site ou ma webapp j&#39;utilise un composant d&#39;avatar qui affiche par défaut les initiales de l&#39;utilisateur et que, parce que je veux que ce soit sympa, je veux que le &lt;code&gt;background-color&lt;/code&gt; de ce composant soit calculé en fonction des lettres de ces initiales afin d&#39;être un brin plus personnalisé. Ça a l&#39;air un peu con comme exemple mais j&#39;ai déjà fait ça et c&#39;est vrai que ça rend bien.&lt;/p&gt;
&lt;p&gt;D&#39;abord fabriquons la base du composant.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;avatar&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;JC&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.avatar&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0.25em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; inline-flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;align-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;justify-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; lightgrey&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;border-radius&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 50%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;iframe title=&quot;Composant de base&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;.avatar{width:2em;height:2em;margin:.25em;display:inline-flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%;font-size:2em;color:#000}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;JC&amp;lt;/div&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Et voilà !&lt;/p&gt;
&lt;p&gt;Maintenant ajoutons donc notre JS pour changer ce &lt;code&gt;background-color&lt;/code&gt; en fonction des initiales…&lt;br&gt;
En l&#39;occurrence j&#39;ai choisi de jouer avec du &lt;a href=&quot;https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Values_and_units#valeurs_hsl_et_hsla&quot;&gt;HSL&lt;/a&gt; afin de ne changer aléatoirement que le hue tout en gardant le contrôle de la saturation et la luminosité pour ne pas avoir à gérer les contrastes pour l&#39;accessibilité.&lt;/p&gt;
&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Fonction honteusement pompée sur&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;hue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;str &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; hash &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; i &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; i &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt; str&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; i&lt;span class=&quot;token operator&quot;&gt;++&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		hash &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; str&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;charCodeAt&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;i&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;hash &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; hash&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
		hash &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; hash &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&lt;/span&gt; hash&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; hash &lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;360&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// On va récupérer tous les avatars de la page qui sont personnalisés&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; avatars &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelectorAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;.avatar&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Et on va calculer la valeur du hue pour chacun d&#39;entre eux&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// et le mettre sur un background-color dans du CSS inline&lt;/span&gt;
Array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;avatars&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	element&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;backgroundColor &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;hsl(&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;hue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;element&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;,85%,90%)&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;iframe title=&quot;Composants avec background-color personnalisé&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;.avatar{width:2em;height:2em;margin:.25em;display:inline-flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%;font-size:2em;color:#000}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;JC&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;YL&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;CR&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;SD&amp;lt;/div&amp;gt;&amp;lt;script&amp;gt;function hue(r){if(null===r)return;let a=0;for(var e=0;e&amp;lt;r.length;e++)a=r.charCodeAt(e)+((a&amp;lt;&amp;lt;5)-a),a|=0;return a%360}const avatars=document.querySelectorAll(&amp;quot;.avatar&amp;quot;);Array.from(avatars).forEach((r=&amp;gt;{r.style.backgroundColor=`hsl(${hue(r.innerText)},85%,90%)`}))&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Ça marche bien, par contre on se retrouve avec du style inline ce qui en plus d&#39;être indiscutablement moche (je suis évidemment objectif 🙃) devient aussi compliqué à surcharger. À part écrire directement par dessus, il ne reste que l&#39;option &lt;code&gt;!important&lt;/code&gt; ce qui est encore plus moche, indiscutablement toujours.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-400.avif 400w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-812.avif 812w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-1172.avif 1172w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-400.webp 400w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-812.webp 812w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-1172.webp 1172w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-400.png&quot; alt=&quot;Image du DOM après modification du JS&quot; width=&quot;1172&quot; height=&quot;127&quot; srcset=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-400.png 400w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-812.png 812w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5g3XZwgB-s-1172.png 1172w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;div class=&quot;markdown-alert markdown-alert-note&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-info mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Note&lt;/p&gt;&lt;p&gt;Oui les navigateurs traduisent le HSL (entre autres) en RGB. C&#39;est un truc qu&#39;ils font apparemment, je sais pas trop pourquoi mais ça change pas grand chose pour nous ici.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;MAIS !&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Il existe un petit nouveau plus si nouveau que ça dans le gang CSS : Les &lt;strong&gt;CSS custom properties&lt;/strong&gt; !&lt;/p&gt;
&lt;p&gt;Reprenons un peu alors notre code.&lt;/p&gt;
&lt;p&gt;Pas de changement sur le HTML.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;avatar&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;JC&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Pour le CSS, on va se reposer désormais sur une CSS custom property pour le &lt;code&gt;background-color&lt;/code&gt;.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.avatar&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0.25em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; inline-flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;align-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;justify-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;hsl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--avatar-background-hue&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 85%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 90%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;border-radius&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 50%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;La notation &lt;code&gt;background-color: hsl(var(--avatar-background-hue, 0), 85%, 90%)&lt;/code&gt; se traduit comme ceci : Je veux que le &lt;code&gt;background-color&lt;/code&gt; de mon élément soit une couleur HSL avec comme valeur de hue la valeur de ma propriété CSS &lt;code&gt;--avatar-background-hue&lt;/code&gt; si elle existe, sinon ben tu lui mets une valeur de 0 en guise de filet de sécurité.&lt;/p&gt;
&lt;p&gt;Puis pour le JS, on va juste adapter un peu ce qui sera envoyé au DOM.&lt;/p&gt;
&lt;pre class=&quot;language-js&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Fonction honteusement pompée sur&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;hue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;str&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;str &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; hash &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; i &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; i &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt; str&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; i&lt;span class=&quot;token operator&quot;&gt;++&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
		hash &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; str&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;charCodeAt&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;i&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;hash &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; hash&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
		hash &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; hash &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&lt;/span&gt; hash&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
	&lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; hash &lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;360&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// On va récupérer tous les avatars de la page qui sont personnalisés&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; avatars &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelectorAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;.avatar&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Et on va calculer la valeur du hue pour chacun d&#39;entre eux&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// et le mettre dans une CSS custom property&lt;/span&gt;
Array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;avatars&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
	element&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setProperty&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
		&lt;span class=&quot;token string&quot;&gt;&quot;--avatar-background-hue&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
		&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;hue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;element&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;
	&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;iframe title=&quot;Composants avec background-color personnalisé via CSS custom properties&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;.avatar{width:2em;height:2em;margin:.25em;display:inline-flex;align-items:center;justify-content:center;background-color:hsl(var(--avatar-background-hue,0),85%,90%);border-radius:50%;font-size:2em;color:#000}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;JC&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;YL&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;CR&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;avatar&amp;quot;&amp;gt;SD&amp;lt;/div&amp;gt;&amp;lt;script&amp;gt;function hue(r){if(null===r)return;let a=0;for(var e=0;e&amp;lt;r.length;e++)a=r.charCodeAt(e)+((a&amp;lt;&amp;lt;5)-a),a|=0;return a%360}const avatars=document.querySelectorAll(&amp;quot;.avatar&amp;quot;);Array.from(avatars).forEach((r=&amp;gt;{r.style.setProperty(&amp;quot;--avatar-background-hue&amp;quot;,`${hue(r.innerText)}`)}))&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Ce qui donne exactement le même résultat… mais quand même en mieux parce que maintenant on peut surcharger simplement ces styles depuis le CSS si besoin.&lt;/p&gt;
&lt;p&gt;Et puis franchement c&#39;est plus beau à voir, indiscutablement toujours.
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-400.avif 400w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-812.avif 812w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-1074.avif 1074w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-400.webp 400w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-812.webp 812w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-1074.webp 1074w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-400.png&quot; alt=&quot;Image du DOM après modification du JS&quot; width=&quot;1074&quot; height=&quot;134&quot; srcset=&quot;https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-400.png 400w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-812.png 812w, https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/5Tug-UaO9v-1074.png 1074w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;

</content>
  </entry>
  <entry>
    <title>SVG + CSS = ❤️</title>
    <link href="https://blog.foojin.com/2022/12/13/svg-css/" />
    <updated>2022-12-13T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/12/13/svg-css/</id>
    <content type="html">&lt;p&gt;SVG est clairement un super format pour les illustrations sur le web. Mais ce qui en fait un encore meilleur format est le fait qu&#39;il peut interagir avec CSS et ça c&#39;est vraiment cool ! ❤️&lt;/p&gt;
&lt;p&gt;Mais le sujet est un poil long et complexe alors accrochez-vous&lt;/p&gt;
&lt;h2 id=&quot;les-differentes-methodes-de-chargement&quot;&gt;Les différentes méthodes de chargement&lt;/h2&gt;
&lt;p&gt;Avant d&#39;entrer directement dans le sujet CSS il nous faut nous attarder sur un petit détail : toutes les méthodes de chargement de SVG dans une page web ne permettent pas de profiter de la relation entre SVG et CSS.&lt;/p&gt;
&lt;p&gt;À vrai dire il n&#39;existe pas de méthode parfaite, en fait chacune d&#39;entre elles a ses avantages et inconvénients et vous devrez choisir à chaque fois ce qui correspond le mieux à vos besoins.&lt;/p&gt;
&lt;h3 id=&quot;la-balise-img&quot;&gt;La balise &lt;code&gt;img&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;Vous la connaissez déjà, plus besoin de la présenter, il s&#39;agit de la très célèbre balise &lt;code&gt;img&lt;/code&gt; qui sert, comme son nom l&#39;indique à intégrer une image à votre page web.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;svg/mon-super-svg.svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Mon texte alternatif&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Simple et efficace ! Seul problème, un svg embarqué dans cette balise se trouve complètement coupé du reste du Document. Un peu comme une &lt;code&gt;iframe&lt;/code&gt; dont le contenu n&#39;hériterait de quoique ce soit de la page qui l&#39;appelle.&lt;/p&gt;
&lt;p&gt;Vous ne pourrez lui appliquer comme CSS que ce que vous pouvez déjà appliquer à une image dite &amp;quot;classique&amp;quot;, c&#39;est à dire des filtres et autres transformations mais ça s&#39;arrêtera à peu près là.&lt;/p&gt;
&lt;h3 id=&quot;la-propriete-css-background-image&quot;&gt;La propriété CSS &lt;code&gt;background-image&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;C&#39;est la petite cousine de &lt;code&gt;img&lt;/code&gt; mais pour CSS.&lt;/p&gt;
&lt;p&gt;De la même manière elle va être encapsulé et coupé du reste du document.&lt;/p&gt;
&lt;p&gt;Les petites nuances étant qu&#39;elle n&#39;est pas dans le DOM donc elle ne devra servir qu&#39;à des fins décoratives, mais aussi que vous aurez probablement besoin d&#39;y rajouter quelques petites choses supplémentaires comme les propriétés &lt;a href=&quot;https://developer.mozilla.org/fr/docs/Web/CSS/background-repeat&quot;&gt;background-repeat&lt;/a&gt; et &lt;a href=&quot;https://developer.mozilla.org/fr/docs/Web/CSS/background-size&quot;&gt;background-size&lt;/a&gt;.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.mon-super-element&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 10rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 3rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-image&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string url&quot;&gt;&quot;../svg/mon-super-svg.svg&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-repeat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; no-repeat&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; contain&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id=&quot;le-inlined-svg&quot;&gt;Le Inlined SVG&lt;/h3&gt;
&lt;p&gt;C&#39;est là qu&#39;on va commencer à pouvoir s&#39;amuser. SVG étant basé sur le format XML tout comme HTML il est donc complètement compatible avec ce dernier mais aussi avec CSS et JavaScript.&lt;/p&gt;
&lt;p&gt;Vous allez donc pouvoir directement intégrer ce SVG dans votre DOM sans avoir besoin d&#39;artifice et interagir avec très simplement.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;viewBox&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0 0 200 200&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;rect&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;red&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;grey&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Alors là, pour mon exemple, j&#39;ai utilisé un SVG simple qui est donc très léger mais imaginez un instant un SVG d&#39;une grosse illustration et vous risquez de sérieusement encombrer votre DOM et potentiellement ralentir le temps dechargement et/ou rendu votre page HTML (mais honnêtement pour ça faudrait vraiment un &lt;strong&gt;ÉNORME&lt;/strong&gt; SVG).&lt;/p&gt;
&lt;h3 id=&quot;les-symbol-svg&quot;&gt;Les &lt;code&gt;symbol&lt;/code&gt; SVG&lt;/h3&gt;
&lt;p&gt;Si vous avez déjà mis le nez dans du code SVG vous êtes très probablement déjà tombé sur la balise &lt;code&gt;&amp;lt;use /&amp;gt;&lt;/code&gt; (propre à SVG) et vous avez peut être alors compris que c&#39;était une manière de rappeler des formes déjà existantes. C&#39;est franchement pratique en plus d&#39;être puissant.&lt;/p&gt;
&lt;p&gt;C&#39;est en fait tout le principe du sprite SVG. Vous n&#39;avez qu&#39;à charger une fois un seul SVG, que ce soit un appel vers un fichier externe ou directement inline, comprenant différents &lt;code&gt;symbol&lt;/code&gt; et ensuite vous pourrez les appeler à volonté à différents endroits de votre page sans ajouter de poids à celle-ci.&lt;/p&gt;
&lt;p&gt;En très bref, la balise &lt;code&gt;&amp;lt;use /&amp;gt;&lt;/code&gt; va aller dire au navigateur qu&#39;elle a besoin de tel &lt;code&gt;symbol&lt;/code&gt; avec telle &lt;code&gt;id&lt;/code&gt; à tel endroit et ce dernier ira comme faire un lien virtuel ramenant alors cette forme à l&#39;endroit souhaité en tant que duplicata fantôme (c&#39;est à dire qui n&#39;existe pas vraiment en définitive).&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- SVG directement via un appel externe --&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;use&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;svg/mon-super-svg.svg#marker&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- SVG inline --&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt; &lt;span class=&quot;token special-attr&quot;&gt;&lt;span class=&quot;token attr-name&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token value css language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;symbol&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;marker&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;viewBox&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0 0 200 200&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;rect&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;red&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;grey&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;symbol&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Plus loin dans le DOM --&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;use&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#marker&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;On pourrait très naturellement se dire que cette méthode est bonne pour les performances de votre site et en soi ce n&#39;est pas complètement faux. Sauf que si c&#39;est fait de manière un peu globale et sans faire attention ça peut avoir l&#39;effet inverse.&lt;/p&gt;
&lt;p&gt;Mettons que vous ayez un sprite de 100 &lt;code&gt;symbol&lt;/code&gt; ce qui est loin d&#39;être impossible pour un sprite de jeu d&#39;icônes par exemple, mais que sur une page vous n&#39;utilisez que 2 ou 3 icônes, vous allez donc charger toutes les autres pour rien. Et ça c&#39;est vraiment dommage. Cependant pour palier à ce désagrément certains outils de framework JavaScript permettent de créer des sprites à la volonté par exemple.&lt;/p&gt;
&lt;p&gt;Donc faites attention. ;)&lt;/p&gt;
&lt;h3 id=&quot;la-balise-object&quot;&gt;La balise &lt;code&gt;object&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;Pour les plus vieux d&#39;entre vous, vous vous souvenez peut être d&#39;elle parce que c&#39;était un bon moyen, sinon le meilleur, de charger des applets de feue &lt;strong&gt;Flash&lt;/strong&gt; sur une page web.&lt;/p&gt;
&lt;p&gt;Mais force est d&#39;avouer qu&#39;elle est très peu utilisée de nos jours puisque son but principal est de charger des fichiers externes souvent dans un format que HTML ne peux pas intégrer directement comme un PDF ou un applet Java ou que sais-je.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;object&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;image/svg+xml&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;svg/mon-super-svg.svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  Mon texte alternatif
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;object&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Et là je vous vois venir avec vos &amp;quot;Mais c&#39;est comme la balise &lt;code&gt;img&lt;/code&gt; en fait ?&amp;quot;.&lt;/p&gt;
&lt;p&gt;Et bien non ! C&#39;est encore mieux… pour peu que vous en ayez vraiment l&#39;utilité.&lt;/p&gt;
&lt;p&gt;Ce que je ne vous ai pas dit au tout début c&#39;est qu&#39;un SVG peut aussi contenir son propre CSS ou son propre JavaScript sauf que si vous chargez votre SVG depuis une balise &lt;code&gt;img&lt;/code&gt; et bien vous ne verrez que la première frame de ce SVG.&lt;br&gt;
En d&#39;autres termes si vous aviez une animation CSS dans ce SVG seul l&#39;&lt;strong&gt;état 0&lt;/strong&gt; ou la première frame de l&#39;animation sera affichée et aucune animation ne se fera.&lt;/p&gt;
&lt;p&gt;Ce qui ne sera pas le cas si vous chargez votre SVG via une balise &lt;code&gt;object&lt;/code&gt;. Tout le CSS ainsi que le JavaScript à l&#39;intérieur de ce dernier sera interprété et effectif.&lt;/p&gt;
&lt;h3 id=&quot;les-data-uri&quot;&gt;Les Data URI&lt;/h3&gt;
&lt;p&gt;Ceci est un cas un peu particulier puisqu&#39;il ne s&#39;agit pas à proprement parler de méthode de chargement mais plutôt de nature de SVG.&lt;/p&gt;
&lt;p&gt;Normalement, quand vous chargez un SVG via une balise &lt;code&gt;img&lt;/code&gt; vous devez fournir à l&#39;attribut &lt;code&gt;src&lt;/code&gt; un chemin relatif ou absolu vers un fichier binaire avec une extension… sauf que c&#39;est pas du tout obligatoire.&lt;/p&gt;
&lt;p&gt;Vous pouvez très bien fournir à la balise un SVG &lt;strong&gt;directement&lt;/strong&gt; mais pour ce faire vous devez transformez un peu ce dernier en l&#39;encodant avec un &lt;a href=&quot;https://yoksel.github.io/url-encoder/&quot;&gt;URL-encoder&lt;/a&gt; ou un base64-encoder mais le base64 serait déconseillé pour les SVG puisqu&#39;il a tendance à rendre le fichier un poil plus lourd.&lt;/p&gt;
&lt;p&gt;De toute évidence pas si évidente si vous pouvez faire ça avec une balise &lt;code&gt;img&lt;/code&gt;, vous pourrez faire ça aussi avec un &lt;code&gt;background-image&lt;/code&gt; CSS ou encore la balise &lt;code&gt;object&lt;/code&gt;.&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;data:image/svg+xml,%3Csvg […]&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Mon text alternatif&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.mon-super-element&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 10rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 3rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-image&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string url&quot;&gt;&quot;data:image/svg+xml,%3Csvg […]&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-repeat&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; no-repeat&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; contain&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;object&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;image/svg+xml&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;data:image/svg+xml,%3Csvg […]&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  Mon texte alternatif
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;object&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Ce que vous pourrez faire avec ce SVG dépendra surtout de la méthode de chargement choisie évidemment.&lt;/p&gt;
&lt;h3 id=&quot;les-avantages-et-inconvenients&quot;&gt;Les avantages et inconvénients&lt;/h3&gt;
&lt;p&gt;J&#39;en ai déjà un peu parlé sur chaque méthode mais ce seront ces avantages et inconvénients qui devront vous guider vers le meilleur choix à faire selon vos besoins. Pour ce faire vous devez vous poser les bonnes questions :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Est-ce &lt;strong&gt;les requêtes HTTP supplémentaires&lt;/strong&gt; pour aller chercher vos SVG sont ok pour vous ?&lt;/li&gt;
&lt;li&gt;Est-ce que un &lt;strong&gt;DOM trop chargé et donc le poids de la page HTML ou des fichiers CSS&lt;/strong&gt; est un sujet important pour vous&lt;/li&gt;
&lt;li&gt;Est-ce que vous voulez tirer profit de &lt;strong&gt;styles et/ou JavaScript embarqués dans le SVG&lt;/strong&gt; ?&lt;/li&gt;
&lt;li&gt;Est-ce que vous souhaitez pouvoir &lt;strong&gt;interagir directement avec les formes de votre SVG depuis les styles et/ou le JavaScript de votre page&lt;/strong&gt; ?&lt;/li&gt;
&lt;li&gt;Est-ce que au contraire, je veux juste &lt;strong&gt;charger un SVG simple sans rien y changer comme une image bitmap&lt;/strong&gt; ?&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;markdown-alert markdown-alert-tip&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-light-bulb mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Tip&lt;/p&gt;&lt;p&gt;Si vous décidez de charger un SVG contenant du JS via un appel externe (&lt;code&gt;img&lt;/code&gt;, &lt;code&gt;object&lt;/code&gt;, etc) il vaut mieux qu&#39;il vienne du même domaine que la page. Pour des raisons de sécurité, il me semble que certains navigateurs pourraient bloquer l&#39;interprétation du JS (à prendre avec des pincettes car je ne suis sûr de rien à ce sujet).&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Pour vous aider à peut être y voir un poil plus clair voici ci-dessous un tableau récapitulatif.&lt;/p&gt;
&lt;table class=&quot;table-compare&quot; style=&quot;text-align: center;&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;th&gt;&lt;code&gt;img&lt;/code&gt;&lt;/th&gt;
	    &lt;th&gt;bg-image&lt;/th&gt;
    	&lt;th&gt;Inlined&lt;/th&gt;
    	&lt;th&gt;Symbols&lt;/th&gt;
    	&lt;th&gt;&lt;code&gt;object&lt;/code&gt;&lt;/th&gt;
    	&lt;th&gt;Data URI&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;Requête HTTP&lt;/th&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;✅ non avec SVG externe&lt;br&gt;❌ oui avec SVG inline&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Alourdi DOM et/ou CSS&lt;/th&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;❌ non avec SVG externe&lt;br&gt;✅ oui avec SVG inline&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Coupé du DOM&lt;/th&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;❌ non avec SVG externe&lt;br&gt;❌ non avec SVG inline&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Avoir ses propres CSS et &lt;abbr title=&quot;JavaScript&quot;&gt;JS&lt;/abbr&gt;&lt;/th&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;✅ oui avec SVG externe&lt;br&gt;✅ oui avec SVG inline&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Document interagit avec&lt;/th&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;✅ oui&lt;/td&gt;
      &lt;td&gt;✅ oui avec SVG externe&lt;br&gt;✅ oui avec SVG inline&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
      &lt;td&gt;❌ non&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Comme vous pouvez mieux le voir, aucune méthode n&#39;est vraiment parfaite, alors choisissez bien.&lt;/p&gt;
&lt;p&gt;Maintenant que vous connaissez toutes les bases nécessaires on va pouvoir passer aux choses sérieuses.&lt;/p&gt;
&lt;h2 id=&quot;interagir-avec-un-svg-depuis-le-document&quot;&gt;Interagir avec un SVG depuis le document&lt;/h2&gt;
&lt;div class=&quot;markdown-alert markdown-alert-warning&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-alert mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Warning&lt;/p&gt;&lt;p&gt;Tout ce qui va suivre ne sera possible que si votre SVG est inlined avec ou sans symbol.&lt;/p&gt;
&lt;/div&gt;
&lt;h3 id=&quot;les-proprietes-css-pour-svg&quot;&gt;Les propriétés CSS pour SVG&lt;/h3&gt;
&lt;p&gt;Comme SVG est basé sur XML, CSS a tout le loisir du monde pour sélectionner des éléments du SVG qui s&#39;avèrent être aussi des formes. De fait on peut s&#39;amuser à les modifier à volonté, quitte à faire des trucs moches (et je dis pas ça parce que je sais pas faire de trucs jolis… encore que…)&lt;br&gt;
Commençons par faire quelques tracés vectoriels simple avec SVG.&lt;/p&gt;
&lt;pre class=&quot;language-xml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-xml&quot;&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
		&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;rect&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#ffc09f&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;transparent&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
		&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;circle&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;60&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;cy&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;60&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;r&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;50&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#ffee93&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;transparent&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
		&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ellipse&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;cx&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;60&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;cy&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;60&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rx&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;40&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;ry&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;25&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#fcf5c7&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;transparent&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
		&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;line&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;x1&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;x2&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y1&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y2&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;100&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#a0ced9&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
		&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;polyline&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;points&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10,30 60,50 90,75 60,100 90&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;none&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#adf7b6&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
		&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;polygon&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;points&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;70,80 10,90 70, 5 90, 10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#eac4d5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;transparent&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;defs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Pattern courtesy of https://iros.github.io/patternfills/ --&gt;&lt;/span&gt;
      &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Pattern qui ne sera pas visible sauf si on l&#39;appelle directement --&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;pattern&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;pattern-1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;patternUnits&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;userSpaceOnUse&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;image&lt;/span&gt;
        	&lt;span class=&quot;token attr-name&quot;&gt;&lt;span class=&quot;token namespace&quot;&gt;xlink:&lt;/span&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;10&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;image&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;pattern&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;defs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;path&lt;/span&gt;
    	&lt;span class=&quot;token attr-name&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;M 10,30
				A 20,20 0,0,1 50,30
				A 20,20 0,0,1 90,30
				Q 90,60 50,90
				Q 10,60 10,30 z&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#e8d1c5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;5&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;transparent&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Ce qui nous donnerait ça.&lt;/p&gt;
&lt;iframe title=&quot;Formes SVG de départ&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;svg{width:8rem;height:8rem}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;svg&amp;gt;&amp;lt;rect x=&amp;quot;10&amp;quot; y=&amp;quot;10&amp;quot; width=&amp;quot;100&amp;quot; height=&amp;quot;100&amp;quot; stroke=&amp;quot;#ffc09f&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;circle cx=&amp;quot;60&amp;quot; cy=&amp;quot;60&amp;quot; r=&amp;quot;50&amp;quot; stroke=&amp;quot;#ffee93&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;ellipse cx=&amp;quot;60&amp;quot; cy=&amp;quot;60&amp;quot; rx=&amp;quot;40&amp;quot; ry=&amp;quot;25&amp;quot; stroke=&amp;quot;#fcf5c7&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;line x1=&amp;quot;10&amp;quot; x2=&amp;quot;100&amp;quot; y1=&amp;quot;10&amp;quot; y2=&amp;quot;100&amp;quot; stroke=&amp;quot;#a0ced9&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;polyline points=&amp;quot;10,30 60,50 90,75 60,100 90&amp;quot; fill=&amp;quot;none&amp;quot; stroke=&amp;quot;#adf7b6&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;polygon points=&amp;quot;70,80 10,90 70, 5 90, 10&amp;quot; stroke=&amp;quot;#eac4d5&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;!-- Pattern courtesy of https://iros.github.io/patternfills/ --&amp;gt;&amp;lt;!-- Pattern qui ne sera pas visible sauf si on l&amp;#39;appelle directement --&amp;gt;&amp;lt;pattern id=&amp;quot;pattern-1&amp;quot; patternUnits=&amp;quot;userSpaceOnUse&amp;quot; width=&amp;quot;10&amp;quot; height=&amp;quot;10&amp;quot;&amp;gt;&amp;lt;image xlink:href=&amp;quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+&amp;quot; x=&amp;quot;0&amp;quot; y=&amp;quot;0&amp;quot; width=&amp;quot;10&amp;quot; height=&amp;quot;10&amp;quot;&amp;gt;&amp;lt;/image&amp;gt;&amp;lt;/pattern&amp;gt;&amp;lt;/defs&amp;gt;&amp;lt;path d=&amp;quot;M 10,30
			A 20,20 0,0,1 50,30
			A 20,20 0,0,1 90,30
			Q 90,60 50,90
			Q 10,60 10,30 z&amp;quot; stroke=&amp;quot;#e8d1c5&amp;quot; stroke-width=&amp;quot;5&amp;quot; fill=&amp;quot;transparent&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Alors que peut-on changer sur un SVG avec du CSS ? Beaucoup de choses comme vous pouvez le voir sur &lt;a href=&quot;https://www.w3.org/TR/SVG/propidx.html&quot;&gt;cette spec W3C&lt;/a&gt; mais vous pourrez remarquer que c&#39;est tout de même peu comparé à tout ce que CSS peut offrir.&lt;/p&gt;
&lt;p&gt;Mais essayons de passer en revue quelques uns des plus intéressants pour les SVG.&lt;/p&gt;
&lt;p&gt;Par exemple, voyons l&#39;impact de ces quelques propriétés sur nos SVG.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;rect&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* Change la couleur du tracé */&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; crimson&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;circle&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* Rempli d&#39;une couleur l&#39;intérieur du tracé */&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; teal&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;ellipse&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* Change l&#39;épaisseur du tracé */&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 8&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;line&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* Change la rendu du tracé */&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke-dasharray&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2 4% 5&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;polyline&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; rebeccapurple&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 8&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* Change le bout du tracé */&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke-linecap&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; round&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;polygon&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; rebeccapurple&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* Au lieu de changer la couleur d&#39;un tracé
    vous pouvez aussi lui attribuer un pattern */&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;#pattern&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;path&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* Vous pouvez vous amusez en changeant plusieurs
    propriétés en même temps */&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; crimson&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; teal&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 8&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke-dasharray&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2 4% 5&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke-linecap&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; round&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;#pattern&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;iframe title=&quot;Formes SVG stylées&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;svg{width:8rem;height:8rem}rect{stroke:crimson}circle{fill:teal}ellipse{stroke-width:8}line{stroke-dasharray:2 4% 5}polyline{fill:rebeccapurple;stroke-width:8;stroke-linecap:round}polygon{fill:rebeccapurple;stroke:url(#pattern)}path{stroke:crimson;fill:teal;stroke-width:8;stroke-dasharray:2 4% 5;stroke-linecap:round;stroke:url(#pattern)}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;svg&amp;gt;&amp;lt;rect x=&amp;quot;10&amp;quot; y=&amp;quot;10&amp;quot; width=&amp;quot;100&amp;quot; height=&amp;quot;100&amp;quot; stroke=&amp;quot;#ffc09f&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;circle cx=&amp;quot;60&amp;quot; cy=&amp;quot;60&amp;quot; r=&amp;quot;50&amp;quot; stroke=&amp;quot;#ffee93&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;ellipse cx=&amp;quot;60&amp;quot; cy=&amp;quot;60&amp;quot; rx=&amp;quot;40&amp;quot; ry=&amp;quot;25&amp;quot; stroke=&amp;quot;#fcf5c7&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;line x1=&amp;quot;10&amp;quot; x2=&amp;quot;100&amp;quot; y1=&amp;quot;10&amp;quot; y2=&amp;quot;100&amp;quot; stroke=&amp;quot;#a0ced9&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;polyline points=&amp;quot;10,30 60,50 90,75 60,100 90&amp;quot; fill=&amp;quot;none&amp;quot; stroke=&amp;quot;#adf7b6&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;polygon points=&amp;quot;70,80 10,90 70, 5 90, 10&amp;quot; stroke=&amp;quot;#eac4d5&amp;quot; fill=&amp;quot;transparent&amp;quot; stroke-width=&amp;quot;5&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt; &amp;lt;svg&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;!-- Pattern courtesy of https://iros.github.io/patternfills/ --&amp;gt;&amp;lt;pattern id=&amp;quot;pattern&amp;quot; patternUnits=&amp;quot;userSpaceOnUse&amp;quot; width=&amp;quot;10&amp;quot; height=&amp;quot;10&amp;quot;&amp;gt;&amp;lt;image xlink:href=&amp;quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+&amp;quot; x=&amp;quot;0&amp;quot; y=&amp;quot;0&amp;quot; width=&amp;quot;10&amp;quot; height=&amp;quot;10&amp;quot;&amp;gt;&amp;lt;/image&amp;gt;&amp;lt;/pattern&amp;gt;&amp;lt;/defs&amp;gt;&amp;lt;path d=&amp;quot;M 10,30
		A 20,20 0,0,1 50,30
		A 20,20 0,0,1 90,30
		Q 90,60 50,90
		Q 10,60 10,30 z&amp;quot; stroke=&amp;quot;#e8d1c5&amp;quot; stroke-width=&amp;quot;5&amp;quot; fill=&amp;quot;transparent&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Un petit détail aura peut être attiré votre attention ici. Pourquoi donc l&#39;exemple &lt;code&gt;polyline&lt;/code&gt; a une couleur à l&#39;intérieur du tracé ? Comme si ce dernier avait un tracé fermé comme un &lt;code&gt;polygon&lt;/code&gt; ?&lt;/p&gt;
&lt;p&gt;Et bien la raison est simple : c&#39;est parce que c&#39;est effectivemet un tracé fermé.&lt;br&gt;
En fait la différence principale entre un &lt;code&gt;polyline&lt;/code&gt; et &lt;code&gt;polygon&lt;/code&gt;, au delà du nom, est que &lt;code&gt;polygon&lt;/code&gt; fermera le tracé &lt;strong&gt;mais&lt;/strong&gt; fera un segment &lt;code&gt;stroke&lt;/code&gt; entre le premier et dernier point en plus. Donc dans les deux cas, le tracé est fermé et peut avoir un &lt;code&gt;fill&lt;/code&gt; remplir son office.&lt;/p&gt;
&lt;p&gt;J&#39;en conviens ce n&#39;est pas forcément intuitif de prime abord mais rien de bien gênant ici, il suffit de le savoir et voilà vous savez maintenant.&lt;/p&gt;
&lt;h3 id=&quot;l-heritage-css&quot;&gt;L&#39;héritage CSS&lt;/h3&gt;
&lt;p&gt;Si notre SVG fait parti du DOM et qu&#39;il peut interagir avec CSS alors tout naturellement on peut penser qu&#39;il hérite de propriétés CSS comme tout bon élément HTML qui se respecte. Et c&#39;est le cas, enfin en partie.&lt;/p&gt;
&lt;p&gt;Un SVG sera exclu du box-model CSS et donc n&#39;héritera rien qui soit lié à ce dernier. En gros notre SVG héritera surtout de tout ce qui concerne les fonts.&lt;/p&gt;
&lt;p&gt;Prenons par exemple ces quelques tracés &lt;code&gt;&amp;lt;text&amp;gt;&lt;/code&gt; propres à SVG et voyons ce qu&#39;il se passe.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 16rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 8rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; DarkSeaGreen&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text .small&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; italic 13px sans-serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text .heavy&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; bold 30px sans-serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text .Rrrrr&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; italic 40px serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;mon-svg-text&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;text&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;20&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;35&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;small&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Mon&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;text&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;text&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;50&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;35&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;heavy&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;chat&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;text&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;text&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;55&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;55&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;small&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;est un&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;text&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;text&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;95&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;55&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Rrrrr&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;enfoiré !&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;text&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;iframe title=&quot;Texte SVG&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;body{background-color:#fff}.mon-svg-text{width:16rem;height:8rem;color:#8fbc8f}.mon-svg-text .small{font:italic 13px sans-serif}.mon-svg-text .heavy{font:bold 30px sans-serif}.mon-svg-text .Rrrrr{font:italic 40px serif}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;svg class=&amp;quot;mon-svg-text&amp;quot;&amp;gt;&amp;lt;text x=&amp;quot;20&amp;quot; y=&amp;quot;35&amp;quot; class=&amp;quot;small&amp;quot;&amp;gt;Mon&amp;lt;/text&amp;gt;&amp;lt;text x=&amp;quot;50&amp;quot; y=&amp;quot;35&amp;quot; class=&amp;quot;heavy&amp;quot;&amp;gt;chat&amp;lt;/text&amp;gt;&amp;lt;text x=&amp;quot;55&amp;quot; y=&amp;quot;55&amp;quot; class=&amp;quot;small&amp;quot;&amp;gt;est un&amp;lt;/text&amp;gt;&amp;lt;text x=&amp;quot;95&amp;quot; y=&amp;quot;55&amp;quot; class=&amp;quot;Rrrrr&amp;quot;&amp;gt;enfoiré !&amp;lt;/text&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;div class=&quot;markdown-alert markdown-alert-tip&quot;&gt;&lt;p class=&quot;markdown-alert-title&quot;&gt;&lt;svg class=&quot;octicon octicon-light-bulb mr-2&quot; viewBox=&quot;0 0 16 16&quot; version=&quot;1.1&quot; width=&quot;16&quot; height=&quot;16&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;Tip&lt;/p&gt;&lt;p&gt;J&#39;ai mis ici un fond blanc ici parce que par défaut un svg sans couleur définie est noir donc c&#39;était mieux pour la visibilité.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Comme vous pouvez le voir la forme &lt;code&gt;text&lt;/code&gt; prend bien en charge toutes les propriétés CSS propres aux fonts. Toutes ? Non ! Car la couleur devrait être &lt;code&gt;DarkSeaGreen&lt;/code&gt; et ce noir est tout sauf du vert d&#39;une mer sombre.&lt;/p&gt;
&lt;p&gt;Que s&#39;est-il passé ? Est-ce que la couleur n&#39;est pas héritée ?&lt;/p&gt;
&lt;p&gt;Et bien en fait elle l&#39;est &lt;strong&gt;mais&lt;/strong&gt; &lt;code&gt;text&lt;/code&gt; n&#39;est pas du texte ou en tout cas n&#39;est pas un text node au sens où le DOM l&#39;entend. C&#39;est avant tout un tracé vectoriel SVG.&lt;br&gt;
Le SVG reçoit bien la couleur en héritage mais n&#39;en fait rien puisque, pour lui, ce qui donne la couleur à un SVG ce n&#39;est pas la propriété &lt;code&gt;color&lt;/code&gt; mais &lt;code&gt;fill&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Et le seul moyen de récupérer la valeur de la &lt;code&gt;color&lt;/code&gt; pour la doner à &lt;code&gt;fill&lt;/code&gt; c&#39;est d&#39;utiliser le mot clé &lt;code&gt;currentColor&lt;/code&gt; qui en gros ira dire au CSS d&#39;aller chercher la valeur du &lt;code&gt;color&lt;/code&gt; dont il a hérité.&lt;/p&gt;
&lt;p&gt;Enfin quand je dis la seule… ça c&#39;était avant puisque désormais on peut allègrement user et abuser des CSS custom properties ce qui offre encore plus de souplesse en forçant l&#39;héritage de bien d&#39;autres propriétés.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--stroke-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; crimson&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 16rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 8rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; DarkSeaGreen&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text .small&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; italic 13px sans-serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text .heavy&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; bold 30px sans-serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text .Rrrrr&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; italic 40px serif&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;.mon-svg-text text&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; currentColor&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;stroke&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--stroke-color&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;iframe title=&quot;Texte SVG stylé&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;body{background-color:#fff}.mon-svg-text{--stroke-color:crimson;width:16rem;height:8rem;color:#8fbc8f}.mon-svg-text .small{font:italic 13px sans-serif}.mon-svg-text .heavy{font:bold 30px sans-serif}.mon-svg-text .Rrrrr{font:italic 40px serif}.mon-svg-text text{fill:currentColor;stroke:var(--stroke-color)}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;svg class=&amp;quot;mon-svg-text&amp;quot;&amp;gt;&amp;lt;text x=&amp;quot;20&amp;quot; y=&amp;quot;35&amp;quot; class=&amp;quot;small&amp;quot;&amp;gt;Mon&amp;lt;/text&amp;gt;&amp;lt;text x=&amp;quot;50&amp;quot; y=&amp;quot;35&amp;quot; class=&amp;quot;heavy&amp;quot;&amp;gt;chat&amp;lt;/text&amp;gt;&amp;lt;text x=&amp;quot;55&amp;quot; y=&amp;quot;55&amp;quot; class=&amp;quot;small&amp;quot;&amp;gt;est un&amp;lt;/text&amp;gt;&amp;lt;text x=&amp;quot;95&amp;quot; y=&amp;quot;55&amp;quot; class=&amp;quot;Rrrrr&amp;quot;&amp;gt;enfoiré !&amp;lt;/text&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Pour en savoir plus sur les propriétés CSS héritées naturellement, retournez jeter un œil à la même &lt;a href=&quot;https://www.w3.org/TR/SVG/propidx.html&quot;&gt;spec W3C&lt;/a&gt; citée plus haut.&lt;/p&gt;
&lt;h3 id=&quot;le-clipping&quot;&gt;Le Clipping&lt;/h3&gt;
&lt;p&gt;On vient de voir comment CSS peut directement influencer sur un SVG mais ce dernier est capable de choses un peu particulières, comme devenir un masque.&lt;/p&gt;
&lt;p&gt;Pour exemple, j&#39;ai choisi un SVG d&#39;un joli cœur bien rouge et trois conteneurs aux contenus divers : un rempli de texte, un avec une image et un avec un CSS &lt;code&gt;background-image&lt;/code&gt;.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.area,
.svg&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 500px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 250px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2rem auto&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;overflow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; hidden&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.lgbt&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;linear-gradient&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    to bottom&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #e40303&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #e40303 16.67%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #ff8c00 16.67%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #ff8c00 33.33%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #ffed00 33.33%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #ffed00 50%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #008026 50%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #008026 66.67%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #004dff 66.67%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #004dff 83.33%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #750787 83.33%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    #750787
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;xmlns&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;http://www.w3.org/2000/svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;viewBox&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0 0 475.528 475.528&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;path&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;red&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706
    c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953
    C-54.844,154.658,26.437,351.092,237.376,436.245z&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;area clip&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    Je t&#39;adore à l&#39;égal de la voûte nocturne,&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Ô vase de tristesse, ô grande taciturne,&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Et t&#39;aime d&#39;autant plus, belle, que tu me fuis,&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Et que tu me parais, ornement de mes nuits,&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Plus ironiquement accumuler les lieues&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Qui séparent mes bras des immensités bleues.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Je m&#39;avance à l&#39;attaque, et je grimpe aux assauts,&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Comme après un cadavre un chœur de vermisseaux,&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Et je chéris, ô bête implacable et cruelle !&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;br&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    Jusqu&#39;à cette froideur par où tu m&#39;es plus belle !
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;area clip&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;https://picsum.photos/200/300&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Lorem picsum&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;area clip lgbt&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;iframe title=&quot;Préparation clipping SVG&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;.area,.svg{display:block;max-width:500px;height:250px;margin:2rem auto;overflow:hidden}.lgbt{background:linear-gradient(to bottom,#e40303,#e40303 16.67%,#ff8c00 16.67%,#ff8c00 33.33%,#ffed00 33.33%,#ffed00 50%,#008026 50%,#008026 66.67%,#004dff 66.67%,#004dff 83.33%,#750787 83.33%,#750787)}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;svg class=&amp;quot;svg&amp;quot; xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; viewBox=&amp;quot;0 0 475.528 475.528&amp;quot;&amp;gt;&amp;lt;path fill=&amp;quot;red&amp;quot; d=&amp;quot;M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706
    c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953
    C-54.844,154.658,26.437,351.092,237.376,436.245z&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;div class=&amp;quot;area text&amp;quot;&amp;gt;&amp;lt;p&amp;gt;Je t&amp;#39;adore à l&amp;#39;égal de la voûte nocturne,&amp;lt;br&amp;gt;Ô vase de tristesse, ô grande taciturne,&amp;lt;br&amp;gt;Et t&amp;#39;aime d&amp;#39;autant plus, belle, que tu me fuis,&amp;lt;br&amp;gt;Et que tu me parais, ornement de mes nuits,&amp;lt;br&amp;gt;Plus ironiquement accumuler les lieues&amp;lt;br&amp;gt;Qui séparent mes bras des immensités bleues.&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;Je m&amp;#39;avance à l&amp;#39;attaque, et je grimpe aux assauts,&amp;lt;br&amp;gt;Comme après un cadavre un chœur de vermisseaux,&amp;lt;br&amp;gt;Et je chéris, ô bête implacable et cruelle !&amp;lt;br&amp;gt;Jusqu&amp;#39;à cette froideur par où tu m&amp;#39;es plus belle !&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;area img&amp;quot;&amp;gt;&amp;lt;img eleventy:ignore src=&amp;quot;https://picsum.photos/200/300&amp;quot; alt=&amp;quot;Lorem picsum&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;area lgbt&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Maintenant en retouchant un peu le SVG pour le préparer et un soupçon de CSS…&lt;/p&gt;
&lt;pre class=&quot;language-svg&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-svg&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;xmlns&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;http://www.w3.org/2000/svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;50%&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;viewBox&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0 0 475.528 475.528&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-hidden&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token special-attr&quot;&gt;&lt;span class=&quot;token attr-name&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token value css language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;overflow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; hidden&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;defs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;clipPath&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;clip&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;path&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;scale(.5)&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;red&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706
                c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953
                C-54.844,154.658,26.437,351.092,237.376,436.245z&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;clipPath&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;defs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Vous pouvez remarquer trois choses ici.&lt;br&gt;
La première c&#39;est que l&#39;on va cacher ce SVG avec du CSS et &lt;code&gt;aria-hidden&lt;/code&gt; puisque l&#39;on va s&#39;en servir comme clip mais on ne veut pas qu&#39;il soit visible ou qu&#39;il prenne de la place en dehors de cette usage.&lt;br&gt;
La deuxième c&#39;est que l&#39;on va spécifiquement définir ce tracé en tant que tracé de clip en le mettant dans un élément &lt;code&gt;&amp;lt;clipPath&amp;gt;&lt;/code&gt;.&lt;br&gt;
La troisième c&#39;est qu&#39;on va un peu réduire sa taille de moitié avec un &lt;code&gt;transform=&amp;quot;scale(.5)&lt;/code&gt; mais c&#39;est purement cosmétique ici.&lt;/p&gt;
&lt;p&gt;Puis on ajoute le clipping…&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.area&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;clip-path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;#clip&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Rien de foufou pour le CSS, ici on va seulement donner l&#39;&lt;code&gt;id&lt;/code&gt; ou plutôt l&#39;ancre du &lt;code&gt;clipPath&lt;/code&gt; défini. Si le SVG avait été externe on aurait donc écrit à la place :&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.area&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;clip-path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;svg/mon-clip.svg#clip&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Et on obtient ce qui suit.&lt;/p&gt;
&lt;iframe title=&quot;Clipping SVG&quot; srcdoc=&quot;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;body{font-size:1.25em;font-family:system-ui,-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Roboto,Ubuntu,&amp;quot;Helvetica Neue&amp;quot;,Oxygen,Cantarell,sans-serif;color:hsl(0 0% 80%);background-color:hsl(0 0% 20%);line-height:1.6}&amp;lt;/style&amp;gt;&amp;lt;style&amp;gt;.area,.svg{display:block;max-width:500px;height:250px;margin:2rem auto;overflow:hidden}img{width:100%;height:auto}.lgbt{background:linear-gradient(to bottom,#e40303,#e40303 16.67%,#ff8c00 16.67%,#ff8c00 33.33%,#ffed00 33.33%,#ffed00 50%,#008026 50%,#008026 66.67%,#004dff 66.67%,#004dff 83.33%,#750787 83.33%,#750787)}.clip{clip-path:url(#clip)}&amp;lt;/style&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;svg xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; width=&amp;quot;50%&amp;quot; viewBox=&amp;quot;0 0 475.528 475.528&amp;quot; aria-hidden=&amp;quot;true&amp;quot; style=&amp;quot;position:absolute;width:0;height:0;overflow:hidden&amp;quot;&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;clipPath id=&amp;quot;clip&amp;quot;&amp;gt;&amp;lt;path transform=&amp;quot;scale(.5)&amp;quot; fill=&amp;quot;red&amp;quot; d=&amp;quot;M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706
                c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953
                C-54.844,154.658,26.437,351.092,237.376,436.245z&amp;quot;/&amp;gt;&amp;lt;/clipPath&amp;gt;&amp;lt;/defs&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;div class=&amp;quot;area clip&amp;quot;&amp;gt;&amp;lt;p&amp;gt;Je t&amp;#39;adore à l&amp;#39;égal de la voûte nocturne,&amp;lt;br&amp;gt;Ô vase de tristesse, ô grande taciturne,&amp;lt;br&amp;gt;Et t&amp;#39;aime d&amp;#39;autant plus, belle, que tu me fuis,&amp;lt;br&amp;gt;Et que tu me parais, ornement de mes nuits,&amp;lt;br&amp;gt;Plus ironiquement accumuler les lieues&amp;lt;br&amp;gt;Qui séparent mes bras des immensités bleues.&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;Je m&amp;#39;avance à l&amp;#39;attaque, et je grimpe aux assauts,&amp;lt;br&amp;gt;Comme après un cadavre un chœur de vermisseaux,&amp;lt;br&amp;gt;Et je chéris, ô bête implacable et cruelle !&amp;lt;br&amp;gt;Jusqu&amp;#39;à cette froideur par où tu m&amp;#39;es plus belle !&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;area clip&amp;quot;&amp;gt;&amp;lt;img eleventy:ignore src=&amp;quot;https://picsum.photos/200/300&amp;quot; alt=&amp;quot;Lorem picsum&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div class=&amp;quot;area clip lgbt&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&quot; frameborder=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;/iframe&gt;
&lt;h3 id=&quot;le-responsive&quot;&gt;Le Responsive&lt;/h3&gt;
&lt;p&gt;L&#39;un des intérêts majeurs du SVG par rapport aux images bitmap est que, comme il s&#39;agit de vectoriel, il répond très bien aux changements de taille. Qu&#39;il soit rétréci ou agrandi le SVG restera propre et non pixélisé. Un petit bémol toutefois, si vous rétrécissez fortement votre SVG vous pourriez avoir un rendu des tracés un peu trop gros ou non proportionnels mais ça pourra être prévu en amont.&lt;/p&gt;
&lt;p&gt;Mais ce n&#39;est pas ce dont nous allons parler. À la place nous allons voir ce qu&#39;on peut faire avec un SVG et une &lt;em&gt;Media Query&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;De toute évidence on pourrait juste changer la taille du SVG selon la taille du viewport mais ce serait franchement pas drôle.&lt;br&gt;
À la place on va carrément changer le dessin en fonction de la taille de l&#39;écran.&lt;/p&gt;
&lt;p&gt;Pour ça il nous un peu de CSS et un SVG avec plusieurs tracés.&lt;/p&gt;
&lt;p&gt;On va donc dès le départ cacher un tracé pendant que l&#39;autre reste en place et selon la taille de l&#39;écran on inversera ça.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.rwd-svg&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 20rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 20rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2rem auto&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.full&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;.broken&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; screen &lt;span class=&quot;token keyword&quot;&gt;and&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;min-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 64em&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token selector&quot;&gt;.full&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token selector&quot;&gt;.broken&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Puis un SVG avec nos deux &lt;code&gt;path&lt;/code&gt; que je peux distinguer grâce aux classes &lt;code&gt;full&lt;/code&gt; et &lt;code&gt;broken&lt;/code&gt;.&lt;/p&gt;
&lt;pre class=&quot;language-xml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-xml&quot;&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;rwd-svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;xmlns&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;http://www.w3.org/2000/svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;viewBox&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0 0 475.528 475.528&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;path&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;full&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;red&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706
    c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953
    C-54.844,154.658,26.437,351.092,237.376,436.245z&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;path&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;scale(2.5)&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;broken&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;red&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;M158.513,18.41c-20.862-11.524-48.007-7.782-64.96,8.604C76.693,10.741,49.215,6.951,28.564,18.41
		C10.954,28.098,0,46.6,0,66.752c0,5.742,0.922,11.46,2.618,16.499c8.93,40.155,84.825,88.229,88.049,90.244l2.886,1.827
		l2.887-1.827c3.239-2.009,79.074-50.059,87.928-89.721c1.766-5.449,2.691-11.173,2.691-17.016
		C187.059,46.6,176.123,28.068,158.513,18.41z M13.076,80.382c-1.486-4.479-2.213-9.048-2.213-13.637
		c0-16.182,8.778-31.045,22.95-38.852c6.509-3.604,13.923-5.52,21.394-5.52c12.65,0,24.466,5.456,32.873,14.827L71.782,69.815
		c-0.801,1.565-0.767,3.416,0.049,4.95c0.792,1.532,2.302,2.594,4.028,2.862l21.884,3.124l-19.61,22.993
		c-1.032,1.218-1.483,2.807-1.215,4.366c0.238,1.564,1.148,2.94,2.481,3.763l20.304,12.58l-9.584,35.664
		C72.266,148.097,19.796,110.613,13.076,80.382z M173.906,80.894c-6.04,27.088-50.162,60.645-71.56,75.576l8.866-33.102
		c0.608-2.301-0.341-4.768-2.387-6.004l-18.344-11.387L112.381,80.3c1.267-1.501,1.645-3.599,0.943-5.425
		c-0.7-1.857-2.362-3.178-4.305-3.471L84.819,67.96l15.835-31.654c0.049-0.106-0.024-0.213,0.024-0.326
		c13.651-13.679,35.5-17.528,52.604-8.099c14.158,7.779,22.95,22.688,22.95,38.858C176.208,71.435,175.49,76.01,173.906,80.894z
		 M166.721,66.752c0,3.654-0.585,7.228-1.718,10.668c-0.365,1.142-1.425,1.851-2.569,1.851c-0.292,0-0.584-0.024-0.84-0.131
		c-1.425-0.478-2.205-2.012-1.718-3.422c0.95-2.886,1.449-5.897,1.449-8.966c0-10.75-5.821-20.627-15.198-25.791
		c-4.487-2.469-9.268-3.702-14.273-3.702c-1.51,0-2.709-1.19-2.709-2.713s1.188-2.7,2.709-2.7c5.932,0,11.588,1.446,16.867,4.332
		C159.852,42.34,166.721,54.038,166.721,66.752z&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Et voilà !&lt;/strong&gt; Redimensionnez donc la fenêtre de votre navigateur jusqu&#39;à être inférieur à 1024px pour voir la forme changer. Notez que si vous lisez ce billet sur un téléphone ou sur une petite tablette vous n&#39;allez pas pouvoir voir le résultat. Réessayez sur un plus grand écran à la maison ou chez vos voisins plus tard dans ce cas.&lt;/p&gt;
&lt;style&gt;
  .rwd-svg {
		display: block;
  	width: 20rem;
    height: 20rem;
    margin: 2rem auto;
  }
  .full {display: none;}
  .broken {display: block;}
  @media screen and (min-width: 64em) {
    .full {display: block;}
    .broken {display: none;}
  }
&lt;/style&gt;
&lt;svg class=&quot;rwd-svg&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 475.528 475.528&quot;&gt;
  &lt;path class=&quot;full&quot; fill=&quot;red&quot; d=&quot;M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706
                      c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953
                      C-54.844,154.658,26.437,351.092,237.376,436.245z&quot;&gt;&lt;/path&gt;
  &lt;path transform=&quot;scale(2.5)&quot; class=&quot;broken&quot; fill=&quot;red&quot; d=&quot;M158.513,18.41c-20.862-11.524-48.007-7.782-64.96,8.604C76.693,10.741,49.215,6.951,28.564,18.41
	C10.954,28.098,0,46.6,0,66.752c0,5.742,0.922,11.46,2.618,16.499c8.93,40.155,84.825,88.229,88.049,90.244l2.886,1.827
	l2.887-1.827c3.239-2.009,79.074-50.059,87.928-89.721c1.766-5.449,2.691-11.173,2.691-17.016
	C187.059,46.6,176.123,28.068,158.513,18.41z M13.076,80.382c-1.486-4.479-2.213-9.048-2.213-13.637
	c0-16.182,8.778-31.045,22.95-38.852c6.509-3.604,13.923-5.52,21.394-5.52c12.65,0,24.466,5.456,32.873,14.827L71.782,69.815
	c-0.801,1.565-0.767,3.416,0.049,4.95c0.792,1.532,2.302,2.594,4.028,2.862l21.884,3.124l-19.61,22.993
	c-1.032,1.218-1.483,2.807-1.215,4.366c0.238,1.564,1.148,2.94,2.481,3.763l20.304,12.58l-9.584,35.664
	C72.266,148.097,19.796,110.613,13.076,80.382z M173.906,80.894c-6.04,27.088-50.162,60.645-71.56,75.576l8.866-33.102
	c0.608-2.301-0.341-4.768-2.387-6.004l-18.344-11.387L112.381,80.3c1.267-1.501,1.645-3.599,0.943-5.425
	c-0.7-1.857-2.362-3.178-4.305-3.471L84.819,67.96l15.835-31.654c0.049-0.106-0.024-0.213,0.024-0.326
	c13.651-13.679,35.5-17.528,52.604-8.099c14.158,7.779,22.95,22.688,22.95,38.858C176.208,71.435,175.49,76.01,173.906,80.894z
	 M166.721,66.752c0,3.654-0.585,7.228-1.718,10.668c-0.365,1.142-1.425,1.851-2.569,1.851c-0.292,0-0.584-0.024-0.84-0.131
	c-1.425-0.478-2.205-2.012-1.718-3.422c0.95-2.886,1.449-5.897,1.449-8.966c0-10.75-5.821-20.627-15.198-25.791
	c-4.487-2.469-9.268-3.702-14.273-3.702c-1.51,0-2.709-1.19-2.709-2.713s1.188-2.7,2.709-2.7c5.932,0,11.588,1.446,16.867,4.332
	C159.852,42.34,166.721,54.038,166.721,66.752z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;h2 id=&quot;interagir-avec-un-svg-depuis-le-svg-lui-meme&quot;&gt;Interagir avec un SVG depuis le SVG lui-même&lt;/h2&gt;
&lt;p&gt;Tout ce que l&#39;on a vu jusque là peut aussi être mis directement dans le SVG ce qui peut avoir plusieurs intérêts. Notamment de s&#39;assurer que les CSS et JS propres au SVG seront toujours embarqué avec ce dernier. Particulièrement pratique si ce SVG est appelé sur plusieurs pages ou même plusieurs autres sites.&lt;/p&gt;
&lt;p&gt;C&#39;est en soi très pratique cependant on pourrait objecter en disant que c&#39;est bien mignon tout ça mais l&#39;auteur du SVG n&#39;aura pas forcément la main sur la façon dont sera intégré son œuvre, ce qui n&#39;est pas faux. Ceci étant, à titre de rappel, si le SVG est chargé via une balise &lt;code&gt;img&lt;/code&gt; par exemple, les CSS embarqués n&#39;écouteront certes pas la page &lt;strong&gt;mais&lt;/strong&gt; afficheront néanmoins la première frame de ce SVG ce qui permet donc d&#39;envisager un rendu fallback. Au moins ça n&#39;aura pas l&#39;air cassé.&lt;/p&gt;
&lt;p&gt;Par exemple, j&#39;ai repris mon petit cœur sur lequel j&#39;ai ajouté quelques petits détails.&lt;/p&gt;
&lt;pre class=&quot;language-xml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-xml&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;svg&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;xmlns&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;http://www.w3.org/2000/svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;viewBox&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0 0 475.528 475.528&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token style&quot;&gt;&lt;span class=&quot;token language-css&quot;&gt;/* &lt;/span&gt;&lt;span class=&quot;token included-cdata&quot;&gt;&lt;span class=&quot;token cdata&quot;&gt;&amp;lt;![CDATA[&lt;/span&gt;&lt;span class=&quot;token language-css&quot;&gt; &lt;span class=&quot;token selector&quot;&gt;*/
    :root&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;--hue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 348&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token selector&quot;&gt;path&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;hsl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--hue&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 83%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 35%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;transform-origin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;scale&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;transition&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; all ease-in 300ms&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token selector&quot;&gt;path:hover&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;fill&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;hsl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--hue&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 83%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 47%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;scale&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;.9&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  /* &lt;/span&gt;&lt;span class=&quot;token cdata&quot;&gt;]]&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token language-css&quot;&gt; */&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;path&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;heart&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706
    c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953
    C-54.844,154.658,26.437,351.092,237.376,436.245z&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token included-cdata&quot;&gt;&lt;span class=&quot;token cdata&quot;&gt;&amp;lt;![CDATA[&lt;/span&gt;&lt;span class=&quot;token language-javascript&quot;&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; heart &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;heart&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;clickHandler&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      heart&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setProperty&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;--hue&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; Math&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;random&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;360&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    heart&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;click&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; clickHandler&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token cdata&quot;&gt;]]&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token language-javascript&quot;&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;svg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Vous pouvez remarquer que les styles CSS ou même le JavaScript sont encapsulés dans des &amp;quot;balises&amp;quot; &lt;code&gt;CDATA&lt;/code&gt; pour la simple et bonne raison qu&#39;en temps normal, dans un SVG, seuls sont attendus des balises formatées à la XML et, jusqu&#39;à preuve du contraire, ni CSS ni JS ne le sont. Du coup, si on veut qu&#39;ils soient interprétés comme ce qu&#39;ils sont on doit les encapsuler dans du &lt;code&gt;CDATA&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Bref, j&#39;ai ajouté des petits styles au hover qui change couleur et taille et un &lt;code&gt;addEventListener&lt;/code&gt; sur le tracé pour carrément changer la base de couleur au hasard.&lt;/p&gt;
&lt;p&gt;Et voici le SVG en question… dans une balise &lt;code&gt;img&lt;/code&gt;. Pas de hover ni d&#39;événement au click, comme vous pouvez le constater mais le cœur est rouge car on a prévu le coup et le style par défaut contient une couleur de base.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-400.avif 400w, https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-476.avif 476w, https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-812.avif 812w, https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-1400.avif 1400w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-400.webp 400w, https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-476.webp 476w, https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-812.webp 812w, https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-1400.webp 1400w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/12/13/svg-css/fe5qqtVX4L-476.svg&quot; alt=&quot;&quot; width=&quot;476&quot; height=&quot;476&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Par contre, si on met le même fichier dans une balise &lt;code&gt;object&lt;/code&gt;… tout fonctionne comme prévu. Passez donc votre souris dessus et cliquez sans parcimonie !&lt;/p&gt;
&lt;object type=&quot;image/svg+xml&quot; data=&quot;https://blog.foojin.com/2022/12/13/svg-css/img/svg-animation.svg&quot;&gt;
  Un cœur gros comme ça.
&lt;/object&gt;
&lt;p&gt;Bon j&#39;ai surtout fait des exemples simples parce que je suis plus un codeur qu&#39;un designer mais ça devrait vous montrer que la vraie limite concernant SVG et CSS est surtout notre imagination. 😉&lt;/p&gt;
&lt;script&gt;
  const iframes = document.querySelectorAll(&quot;iframe&quot;);  
  iframes.forEach(item =&gt; {
  	item.onload = function(){
  		item.style.height = item.contentWindow.document.documentElement.scrollHeight
 + &#39;px&#39;;
 		};
  });
&lt;/script&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 12</title>
    <link href="https://blog.foojin.com/2022/11/27/eurotour-vol-12/" />
    <updated>2022-11-27T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/11/27/eurotour-vol-12/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-7-juin-2045&quot;&gt;Entrée du 7 juin 2045&lt;/h2&gt;
&lt;p&gt;On vient de clôturer la tournée française en finissant avec brio cette étape bordelaise. Tout s&#39;est bien passé. Pas de tueur à gage, pas de virée nocturne. Nickel ! J&#39;aime quand une tournée se déroule sans accroc.&lt;/p&gt;
&lt;p&gt;Par contre on vient de nous apprendre que notre date à Lisbonne du 9 juin a été annulée. La réputation qui accompagne notre cher Jack a eu raison du gouvernement portugais. Ils ont eu trop peur des débordements qui ont suivi les concerts jusque là. Bon je vais pas les blâmer de flairer le plan foireux vu tout ce qu&#39;on a vécu depuis le début ce serait bien mal venu de ma part.&lt;/p&gt;
&lt;p&gt;Pour combler ce creux dans le calendrier, le manager de la tournée a décidé qu&#39;on ferait tous une étape de 3 jours à Bern en Suisse du 8 au 10, pour se reposer en attendant le concert de Venise le 11.&lt;/p&gt;
&lt;p&gt;Moi tant que c&#39;est tout frais payé, je prends. 😜&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-9-juin-2045&quot;&gt;Entrée du 9 juin 2045&lt;/h2&gt;
&lt;p&gt;J&#39;ai passé 3 jours à bidouiller tranquille des trucs à moi et aux autres. Ça faisait longtemps que j&#39;avais pas eu le temps de faire ça et ça m&#39;avait manqué. Y a que comme ça que je me ressource.&lt;/p&gt;
&lt;p&gt;J&#39;en ai quand même profité pour mettre à jour mes implants optiques. J&#39;avais repéré quelques trucs sympa dans un catalogue que je voulais tester alors j&#39;ai profité de cette pause en Suisse pour faire ça.&lt;br&gt;
J&#39;espère avoir fait le bon choix.&lt;/p&gt;
&lt;p&gt;Bon faut que je prépare mon sac, demain matin on part en bus pour Venise !&lt;br&gt;
O sole mio ! 🤣&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-10-juin-2045&quot;&gt;Entrée du 10 juin 2045&lt;/h2&gt;
&lt;p&gt;On est arrivé à Venise en fin de matinée. C&#39;est très pittoresque, putain ! Si je pensais que la France avait rien à voir avec Night City, j&#39;ai encore pris une claque avec Venise. Ces européens sont des fous.&lt;/p&gt;
&lt;p&gt;Bon à peine arrivé, on nous briefe, les armes c&#39;est niet en Italie. On peut éventuellement se trimballer avec un cracheur sous la veste mais vaut mieux que personne ne le sache et ne le voit. Ces européens… je comprends pas…&lt;/p&gt;
&lt;p&gt;On a été logé à l&#39;hôtel Regina, à 500 mètres de la place Saint Marc où aura lieu le concert demain. Vu que toute la scène est en cours d&#39;installation par un prestataire externe, aujourd&#39;hui c&#39;est relâche pour nous, place donc à la visite.&lt;/p&gt;
&lt;p&gt;Et ben tu me crois, tu me crois pas, mais à peine 20-30 minutes après avoir commencé à se balader on s&#39;est fait accoster par de la flicaille… Ils nous ont demandé de les suivre sur un de leur rafiot à la con. Et quand on est arrivé à destination, on a accosté devant un bâtiment qui n&#39;avait pas &lt;strong&gt;du tout&lt;/strong&gt; l&#39;air d&#39;un poste de police.&lt;br&gt;
Ça puait l&#39;embrouille cette connerie. C&#39;était ça ou alors tous les postes de police de Venise avait un majordome tiré à quatre épingles avec un balai bien profond dans le cul pour accueillir les visiteurs. 🤷&lt;/p&gt;
&lt;p&gt;Mais on a quand même suivi Alfred et on a rejoint un bureau où un mec type mafieux mais en moins patibulaire discutait avec notre putain de Ace…&lt;br&gt;
Ce mafieux était en fait M. Mantegna, le boss de &lt;strong&gt;WORTRAC&lt;/strong&gt; Italy, notre représentant local pour le concert. C&#39;est eux qui géraient l&#39;installation de la scène notamment.&lt;/p&gt;
&lt;p&gt;Il nous a donc appris au cours d&#39;une conversation qu&#39;on avait pas demandé qu&#39;un de leur concurrent allemand, la &lt;strong&gt;SEAL&lt;/strong&gt;, comptait saboter notre concert avec l&#39;aide du &lt;strong&gt;SALVEN&lt;/strong&gt;, un groupe d&#39;eco-terrorriste local plutôt chauvin pour pas dire xénophobe. Et donc, comme on était les meilleurs, Ace nous a demandé d&#39;enquêter là dessus.&lt;/p&gt;
&lt;p&gt;Pas de repos pour les braves à ce qu&#39;il parait.&lt;/p&gt;
&lt;p&gt;Seul hic dans cette histoire c&#39;est que le bougre n&#39;avait aucune info à nous filer, pas un nom d&#39;un connard de chez SEAL ou même un connard local qui connaitrait le monde underground. Que dalle. Fils de chacal !&lt;/p&gt;
&lt;p&gt;Le concert est demain, on connait pas les lieux, ni la langue et on est censé trouver un groupe terroriste et l’empêcher de nuire. Super. Top of the pop, man ! 👍&lt;/p&gt;
&lt;p&gt;Tant de conneries ont eu raison de la patience de Ranni, en admettant qu&#39;elle en ait une, qui a pété une durite en insultant le mafieux. Franchement c&#39;était mérité. On a peut être pas de majordome nous mais faut arrêter de nous prendre des pigeons aussi. Si ces paumards de terroristes arrive à leur fins, je suis sûr que ça va nous retomber sur la gueule…&lt;/p&gt;
&lt;p&gt;Bref on a tenté le coup, on a rien sans rien il paraît, mais bizarrement… bah on a trouvé que dalle. Étonnant, non ?&lt;/p&gt;
&lt;p&gt;J&#39;ai bien tenté d&#39;aller voir les flics pour savoir ce qu&#39;il pouvait nous filer comme info sur SALVEN mais ces rats ont rien lâché. Crevures.&lt;/p&gt;
&lt;p&gt;Et puis, comme un Deus Ex Machina, une gonzesse nous a accosté en donnant rendez-vous demain à la Chiesa di San Giobbe. Rien de plus puis elle s&#39;est barrée.
Je vais vraiment commencer à croire qu&#39;on a des gueules de pigeon.&lt;/p&gt;
&lt;p&gt;Ça a pas plus à Ranni qui l&#39;a coursé et qui a fini par lui faire cracher le morceau que c&#39;était pour nous donner des infos sur le SALVEN mais… qu&#39;il fallait être discret. C&#39;est mal parti 😆&lt;/p&gt;
&lt;p&gt;Bref j&#39;imagine qu&#39;on verra demain ce qu&#39;il en sera. C&#39;est la seule piste qu&#39;on ait pu avoir alors bon… autant la tenter.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 11</title>
    <link href="https://blog.foojin.com/2022/11/23/eurotour-vol-11/" />
    <updated>2022-11-23T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/11/23/eurotour-vol-11/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-5-juin-2045-suite&quot;&gt;Entrée du 5 juin 2045 - suite&lt;/h2&gt;
&lt;p&gt;Cédric nous a alors bien &amp;quot;gentiment&amp;quot; accompagné et nous a guidé à travers Neuilly, un quartier de bourges de Paris, jusqu&#39;à la supposée adresse de Béatrice.&lt;br&gt;
C&#39;était vraiment très, voire trop, chic et riche là-bas. J&#39;étais vraiment pas à l&#39;aise.&lt;br&gt;
Puis on s&#39;est stoppé devant un portail en fer forgé vert et Cédric nous a dit qu&#39;on y était.&lt;/p&gt;
&lt;p&gt;On a tenté une approche douce en forçant Cédric à sonner à l&#39;interphone … sauf que manifestement Béatrice n&#39;avait plus envie de voir sa gueule… ce que franchement je peux envisager. Alors on a opté pour l&#39;autre méthode douce : l&#39;infiltration discrète. Enfin quand je dis on… on l&#39;a décidé tous ensemble mais c&#39;est Ranni qui a fait tout le boulot ou presque en définitive.&lt;br&gt;
Pendant qu&#39;elle s&#39;est immiscée dans la propriété, Vinz et Ousma en ont fait un peu le tour pour repérer d&#39;éventuelles options de fuite et moi j&#39;ai fait le babysitter de Cédric en restant devant.&lt;/p&gt;
&lt;p&gt;Une fois passé les buissons Ranni est tombée nez à nez sur un molosse modifié avec du chrome. Le genre de chien qui peut faire vraiment mal en plus d&#39;avoir une connexion directe aux forces de l&#39;ordre en cas d&#39;alerte. Ça puait !&lt;br&gt;
Mais il dormait le clébard alors elle a continué plus loin jusque trouver un point d&#39;accès pour finalement réussir à couper les caméras de sécurité.&lt;/p&gt;
&lt;p&gt;Pendant ce temps j&#39;ai réessayé de sonner à l&#39;interphone, sans grande conviction, et cette connasse m&#39;a raccroché au nez. 😠
J&#39;ai dû faire un petit effet malgré tout parce que Ranni, après s&#39;être infiltrée par une fenêtre ouverte, a entendu du mouvement à l&#39;intérieur. Le genre qui sonne comme quelqu&#39;un de paniqué et de pressé.&lt;/p&gt;
&lt;p&gt;Son cracheur au poing elle est descendue de l&#39;étage jusque trouver Béatrice et, tout en la braquant, lui a demandé avec autant de bienveillance dont Ranni puisse faire preuve de nous ouvrir la porte. Bon ça a pas servi à grand chose parce que j&#39;ai réussi à ouvrir la porte tout seul grâce à mes doigts de fée, je sais pas trop comment d&#39;ailleurs mais j&#39;ai réussi à débloquer le portail. Mais c&#39;est sûr c&#39;était avant que Béatrice ne l&#39;ouvre à distance… Si si c&#39;est certain !&lt;/p&gt;
&lt;p&gt;Une fois à l&#39;intérieur on a enfin pu discuter sereinement. Enfin… Béatrice et Cédric se sont engueulé en français devant nous et on a capté ce qu&#39;on pouvait comme un nom, Nick ou Nicolas Géro ou Jiro ou un truc dans le genre. Mais ils en finissaient pas alors on a monté le ton en leur disant de traduire.&lt;/p&gt;
&lt;p&gt;Il s&#39;est avéré que… Cédric pensait que ce Nicolas Giraud faisait partie de l&#39;équipe de Béatrice et Béatrice pensait que ce même mec faisait partie de l&#39;équipe de Cédric… Ces deux paumards se sont faits entubés par un solo qui manifestement n&#39;avait pas du tout l&#39;intention de kidnapper Jack mais bien de lui fumer sa gueule.
Allez savoir pour le compte de qui par contre.&lt;br&gt;
Putain d&#39;amateurs ! Et on dit que c&#39;est une des meilleurs fixers à l&#39;international… mon cul ouais !&lt;/p&gt;
&lt;p&gt;Puis Béatrice nous a dit qu&#39;elle venait de lui dénicher un pass backstage pour le concert de ce soir à Bercy… alors forcément, ni une ni deux, mais quand même après avoir eu sa description physique, on a foncé à la bagnole pour rejoindre la salle. En chemin, on a prévenu Ace du danger imminent et qu&#39;il devait renforcer la sécurité autour de Jack.&lt;/p&gt;
&lt;p&gt;Une fois arrivé on a fouillé partout, on a même demandé à Tinker qu&#39;elle provoque une réunion globale du staff pour qu&#39;on puisse repérer éventuellement ce fils de chacal. Mais rien. Rien ni personne.&lt;br&gt;
On a alors commencé à se dire qu&#39;il devait pas être là et qu&#39;il se pointerait plutôt aux alentours du début du concert, quand Jack fera une apparition publique.&lt;/p&gt;
&lt;p&gt;Puis alors que Ranni et moi on vérifiait une nouvelle fois au niveau de la scène, Vinz et Ousma sont allés faire un tour sur les passerelles où se postent les gars qui font la fuite. Et là ils ont vu un truc bizarre, une sorte de couverture sombre au sol… mais bombée… comme si quelque chose ou quelqu&#39;un se cachait en dessous.&lt;/p&gt;
&lt;p&gt;Ouais c&#39;était un sniper… c&#39;était Giraud. Sauf qu&#39;il a entendu venir Ousma alors il lui a tiré dessus avec son fusil. 2 fois. Et nous en bas on a rien entendu parce que cet enfant de putain avait un silencieux.&lt;/p&gt;
&lt;p&gt;Mais Ousma déconne pas non plus et malgré les deux pruneaux que son gilet avait arrêtés il lui a foncé dessus, lui a fait une prise pour le désarmer mais Giraud non plus c&#39;est pas un amateur alors la bataille au corps à corps s&#39;est avérée difficile et sanglante. Sentant qu&#39;il était trop mal en point pour le finir Ousma s&#39;est retiré non sans nous prévenir nous deux en bas. C&#39;est là qu&#39;on est rentré dans le game et qu&#39;on a défouraillé sur sa petite gueule de rat depuis en bas.&lt;/p&gt;
&lt;p&gt;Sentant le vent tourner en sa défaveur il a tenté une fuite risquée en se laissant tomber du haut de la passerelle. Et ça se serait probablement pas trop mal passé si Vinz lui avait pas collé un pruneau dans sa caboche juste avant la chute. L&#39;atterrissage est tout à coup devenu mortel. M&#39;enfin je le plaindrai pas.
On a eu beau le fouiller, il avait rien sur lui. Faut croire qu&#39;on ne saura jamais qui était le commanditaire qui voulait la peau de Jack.&lt;/p&gt;
&lt;p&gt;Enfin toujours est-il qu&#39;on a &lt;strong&gt;encore&lt;/strong&gt; sauvé la vie de Jack. C&#39;est ça aussi d&#39;être un professionnel. J&#39;espère qu&#39;on aura un bonus.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 10</title>
    <link href="https://blog.foojin.com/2022/11/14/eurotour-vol-10/" />
    <updated>2022-11-14T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/11/14/eurotour-vol-10/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-4-juin-2045-suite&quot;&gt;Entrée du 4 juin 2045 - suite&lt;/h2&gt;
&lt;p&gt;J&#39;ai buté un paumard presque pour rien…&lt;/p&gt;
&lt;p&gt;Ouais ce foutu Karim a enfin bavé, non sans mal, qu&#39;il connaissait en effet Béatrice mais qu&#39;il y avait tout un protocole pour la contacter et qu&#39;il pouvait pas le faire comme ça sur le fil. Nova !&lt;/p&gt;
&lt;p&gt;On a alors débattu entre nous pour savoir ce qu&#39;on allait faire de lui. Mais faut dire il a pas aidé ce con, je comprends qu&#39;il ait été tendu et qu&#39;il nous aimait pas vraiment, et franchement entre l&#39;effraction, les coups de feu et la tête éclatée j&#39;aurais probablement réagi encore moins bien que lui, mais quand il nous a dit que s&#39;il nous retrouvait il nous flinguerait ça a pas vraiment jouer en sa faveur.&lt;/p&gt;
&lt;p&gt;Je voulais éviter encore une mort inutile mais il m&#39;aidait pas à le défendre. Puis il s&#39;est rappelé que dans ses habitués il avait une jeune actrice porno qui flirtait avec un mec qui apparemment connaissait très bien Béatrice mais il ignorait son nom. Y avait plus qu&#39;à attendre qu&#39;elle se pointe pour connaître l&#39;identité du gars. En gros, la vie de Karim ne tenait qu&#39;à la décision d&#39;une jeune fêtarde presque innocente à venir se mettre une race dans sa boîte ce soir même.&lt;/p&gt;
&lt;p&gt;Sacré coup de poker j&#39;ai envie de dire ! Mais il était confiant. Il nous soutenait qu&#39;elle était là presque tous les soirs. Alors on a décidé de monter l&#39;opération. J&#39;allais prendre la place du gorille que j&#39;avais fumé à l&#39;entrée, en tant que physionomiste/casseur de gueule de bourré, Ranni allait attendre dans la boîte en bas le bon moment pour voler et pirater l&#39;agent de la donzelle pendant que Vinz et Ousma, bien blessés, gardaient un œil fébrile sur Karim dans le bureau parce qu&#39;on lui faisait pas confiance (faut pas déconner non plus) et puis de toute façon deux paumards qui pissaient le sang ça faisait un peu tâche, faut avouer.&lt;/p&gt;
&lt;p&gt;Quel malaise c&#39;était de bosser comme videur à côté du collègue du mec dont je venais d&#39;exploser la face. 😖 Je sais pas lequel de nous deux était le plus mal à l&#39;aise pour tout dire. Enfin bref, au bout d&#39;un moment je vois débarquer un troupeau de jeunes femmes dont une qui ressemblait à la description que m&#39;avait faite Karim.&lt;/p&gt;
&lt;p&gt;Je lui demande sa carte d&#39;identité en lui faisant croire que je faisais ça parce que j&#39;étais nouveau et que je la connaissais pas. Elle s&#39;appelait Sofia. Je suis pas branché minette mais elle avait clairement ce qu&#39;il fallait pour bosser dans l&#39;industrie du porno faut admettre. Je l&#39;ai alors laissé rentrer et j&#39;ai prévenu Ranni via mon agent de se préparer à son arrivée.&lt;/p&gt;
&lt;p&gt;Ranni est chiante, immature, instable et imprévisible mais putain qu&#39;elle est douée que ce soit pour le hack ou pour le pickpocket. Elle lui a tiré son agent avant même qu&#39;elle ait reçu sa première conso. Elle est allée ensuite dans les chiottes pour hacker ça mais elle a eu besoin de mes doigts de fée pour le débloquer. Je suis pas encore complètement osbolète faut croire. Héhé. On a ensuite rapidement eu l&#39;info qu&#39;on cherchait. Son mec, celui-là même qui était le choom de Béatrice, s&#39;appelait Cédric Vernier.&lt;/p&gt;
&lt;p&gt;On a alors commencé à remballer, Ranni a remis l&#39;agent de Sofia dans son sac ni vu ni connu et les gars dans le bureau ont commencé à foutre le camp par l&#39;arrière en laissant Karim attaché à sa chaise et moi je partais par l&#39;avant. Une fois tout le monde sorti et à l&#39;abri je devais prévenir l&#39;autre videur qu&#39;il pouvait aller libérer son patron. Enfin ça c&#39;était le plan.&lt;/p&gt;
&lt;p&gt;À la place Ranni a prétexté vouloir revenir dans la réserve chercher une dernière boisson énergétique sauf qu&#39;à la place elle est revenu chercher du sang. Elle étranglé ce pauvre Karim, alors incapable de se défendre, à l&#39;aide d&#39;un câble ou je sais pas quoi. Elle a essayé de nier mais en mentant tellement mal que… c&#39;est comme si elle voulait avouer avec fierté de manière détournée. Bref, j&#39;ai rien dit à l&#39;autre videur du coup et j&#39;ai préféré foutre le camp dans la rue en prétextant devoir passer un coup de bigot. Puis on a couru, vite.&lt;/p&gt;
&lt;p&gt;On a fait un passage par l&#39;hôtel parce qu&#39;il fallait que les kamikazes aient des soins. Il s&#39;avère que Ousma avait une côte cassée et Vinz avait pris tellement cher à sa main qu&#39;elle était au delà de tout sauvetage possible. Il allait devoir installer du nouveau Chrome. Comme moi y a pas si longtemps. Note que je regrette pas pour autant, cette nouvelle main outil que j&#39;ai fait poser est tellement d&#39;un pratique pour bricoler que je pourrais plus m&#39;en passer aujourd&#39;hui.&lt;/p&gt;
&lt;p&gt;Pendant que Ousma se faisait ausculter et que Vinz allait à l&#39;hôpital en urgence, Ranni et moi on est allé se reposer dans nos chambres. Y avait bien un concert le soir mais le boss a dit qu&#39;on était excusé. J&#39;allais pas m&#39;en plaindre. Ça m&#39;a crevé cette journée.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-5-juin-2045&quot;&gt;Entrée du 5 juin 2045&lt;/h2&gt;
&lt;p&gt;Ranni et moi on a passé la matinée à jouer à un nouveau jeu : le cat fishing 💖&lt;br&gt;
On s&#39;est fait passer pour une collègue de travail de Sofia qui venait d&#39;Ukraine auprès de Cédric et on a flirté comme pas possible, on lui a fait tellement de rentre dedans qu&#39;il a pas pu dire non quand on lui a proposé un rendez-vous dans l&#39;après midi dans un motel.&lt;/p&gt;
&lt;p&gt;Pour une fois on était préparé comme des pros… que l&#39;on est censé être. J&#39;avais réservé la chambre du motel en mon nom mais une fois arrivé Ranni a ensuite piraté le système pour supprimer le nom renseigné, puis elle fait en sorte qu&#39;on ne soit pas enregistré sur les caméras de surveillance et enfin une fois dans la chambre Vinz et moi on est resté dans la salle de bain à attendre Cédric, Ousma à l&#39;extérieur, pour empêcher toute fuite, prêt à rentrer quand il aurait le feu vert et Ranni qui faisait la bimbo sur le lit dans le noir.&lt;/p&gt;
&lt;p&gt;Et il est arrivé. Un jeune branleur de corpo tout peureux, j&#39;en étais presque déçu. Il a bavé tout ce qu&#39;il avait à dire sans qu&#39;on ait eu besoin de le menacer de quoique ce soit. À ce moment là j&#39;étais vraiment déçu. Par contre, on avait touché le gros lot ! Ce paumard était en fait celui qui avait engagé Béatrice pour approcher Jack. Le but était de le kidnapper pour le ramener à ses boss afin de se faire bien voir et monter dans la hiérarchie. Jack est vraiment pas très apprécié au sein de beaucoup de corpo, ce qui tient la route du coup.&lt;/p&gt;
&lt;p&gt;Le seul hic c&#39;est que personne devait mourir. Et il sait pas ce qu&#39;il s&#39;est passé mais Béatrice a répondu à aucun de ses messages depuis. Plus on remue la merde autour plus ça pue cette histoire. Puis il se chiait tellement dessus le gamin qu&#39;il nous a filé direct le numéro de tel et l&#39;adresse où créchait Béatrice.&lt;/p&gt;
&lt;p&gt;Je crois qu&#39;on est reparti pour une nouvelle excursion…&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 9</title>
    <link href="https://blog.foojin.com/2022/11/01/eurotour-vol-9/" />
    <updated>2022-11-01T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/11/01/eurotour-vol-9/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-4-juin-2045-suite&quot;&gt;Entrée du 4 juin 2045 - suite&lt;/h2&gt;
&lt;p&gt;Face à tous ces refus de partout et de tout le monde on a décidé de creuser notre seule et dernière piste : Karim Bouranne, le patron de la boite de nuit.
On est donc retourné là-bas vers 17h mais y avait toujours personne pour ouvrir alors on décidé d&#39;entrer de gré ou de force.&lt;/p&gt;
&lt;p&gt;Bon on allait pas forcer l&#39;entrée principale, y avait trop de monde dans la rue, ça faisait trop de témoins potentiels. On a alors cherché un moyen d&#39;entrer par derrière sauf que y avait pas moyen d&#39;arriver derrière le bâtiment. On s&#39;est dit que y avait peut être moyen d&#39;y avoir accès en passant par un bâtiment voisin. Alors Ranni nous a fait le coup de la demoiselle en détresse à l&#39;interphone d&#39;à côté puis on nous a ouvert et BINGO les deux bâtiments partageaient une cour intérieure.&lt;/p&gt;
&lt;p&gt;Bon y avait bien un grillage qui séparait les deux propriétés mais y avait rien qui n&#39;aurait résisté à mes outils. J&#39;ai donc forcé ça et on s&#39;est infiltré dans la cour de la boîte de nuit. Y avait bien une caméra et on aurait pas pu l&#39;éviter ou la pirater de toute façon alors on a foncé en espérant qu&#39;on aurait accès aux enregistrements une fois à l&#39;intérieur pour effacer nos traces si besoin.&lt;/p&gt;
&lt;p&gt;De la cour on a forcé une porte qui s&#39;avérait être la porte de la réserve d&#39;alcool. J&#39;aurais bien pris un peu de vodka dans une des caisses mais à température ambiante c&#39;est niet. Je me respecte trop pour tomber si bas. Dans cette salle, une autre porte menait à un bureau, le genre bureau de patron, le genre qu&#39;on allait bien évidemment s&#39;amuser à fouiller. On n&#39;y a trouvé qu&#39;un NAS avec très certainement les enregistrements des caméras, alors je l&#39;ai mis dans mon sac.&lt;/p&gt;
&lt;p&gt;Vinz et Ousma ont visité le reste de la boîte mais y avait rien ni personne. Alors on a attendu comme des cons. Bon on a quand même élaboré un semblant de plan :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Ranni et moi on attendrait dans la réserve, prêts à débarquer, pour ajouter un peu de pression;&lt;/li&gt;
&lt;li&gt;Vinz attendrait dans le noir, dans le bureau assis sur le fauteuil, c&#39;est lui qui a la tchatche et comme on voulait juste discuter pour trouver un moyen de contacter Béatrice, c&#39;était le meilleur endroit où le mettre;&lt;/li&gt;
&lt;li&gt;Ousma quant à lui allait attendre caché derrère le guichet, à l&#39;extérieur du bureau, pour prendre le gars à revert et l&#39;empêcher de fuir si jamais la tronche de Vinz lui revenait pas, ce qui en toute honnêteté était plus que probable.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;On a attendu une bonne heure comme ça. Ranni explosait la réserve de boisson énergétique et moi… et moi j&#39;ai bu de la vodka à température ambiante. Ne me jugez pas. L&#39;inaction et l&#39;attente ont cet effet dévastateur sur mon orgueil.&lt;/p&gt;
&lt;p&gt;Et puis quelqu&#39;un a fini par arriver, mais ils étaient plusieurs. Quand ils ont débarqué dans le bureau, lumières toutes éteintes, et que Vinz leur a sorti un sombre &amp;quot;Entrez et fermez la porte derrière vous&amp;quot;, un des mecs s&#39;est jeté au sol et ça a dû faire peur à ce branque de Vinz parce qu&#39;il a sorti son flingue et il a commencé à tirer… Putain… On était censé juste lui parler à ce Karim, pas lui faire peur à en chier ses boyaux.&lt;/p&gt;
&lt;p&gt;Bref c&#39;est parti en sucette, très vite et très fort. J&#39;ai déboulé vite dans le bureau en allumant la lumière les bras levés pour montrer ma bonne foi et tenter de désamorcer la situation mais autant pisser dans un violon. Y avait deux gorilles, mais genre des trucs immenses et épais, et un mec au sol. Le mec au sol était définitivement Karim et il a aussi définitivement essayé de foutre le camp du bureau. Derrière lui, Ousma avait dû oublier ce qu&#39;il avait appris à son stage de ninja parce qu&#39;il s&#39;était bien fait gauler par une des armoires à glace et il l&#39;avait maintenant sur le dos.&lt;/p&gt;
&lt;p&gt;Quand Karim a décidé de se barrer, Ranni, pas certaine que Ousma ait été en capacité de l&#39;arrêter, a décidé de tenter de le prendre à revers en repassant par la cour intérieure jusque dans la rue. Pendant ce temps, j&#39;ai dégainé ma belle Lucille et j&#39;ai tiré dans le lard d&#39;un des mastodontes, Vinz lui a fini par se planquer derrière le bureau parce qu&#39;il avait déjà pris quelques pruneaux et Ousma est parti en mode combat corps à corps contre son Godzilla, le taré.&lt;/p&gt;
&lt;p&gt;Tout du long j&#39;ai essayé de convaincre mon King Kong de se rendre parce que je voyais bien qu&#39;il avait commencé à sérieusement pisser du sang mais il a fini par se planquer de l&#39;autre côté du pas de la porte. Tant pis je me suis dis, allons-y pour le finish. Alors j&#39;ai déboulé en sautant proche du sol pour éviter de me faire avoir à hauteur d&#39;homme, je visais déjà dans la bonne direction prêt à appuyer sur la détente… ce que j&#39;ai fait dès que je l&#39;ai eu en ligne de mire.&lt;/p&gt;
&lt;p&gt;C&#39;est seulement une fraction de seconde après avoir appuyé sur cette foutue détente que je me suis rendu compte qu&#39;il avait les mains en l&#39;air au dessus de sa tête… enfin jusqu&#39;à ce qu&#39;il n&#39;y ait plus de tête…&lt;/p&gt;
&lt;p&gt;Ousma pendant sa valse avec son malabar a eu la présence d&#39;esprit de choper le Karim, le restreindre et le menacer pour que la valse finisse enfin.
Ranni a fini par arriver à la porte, on lui a alors ouvert puis on a entamé les discussions.&lt;/p&gt;
&lt;p&gt;C&#39;est même pas dit qu&#39;on obtienne ce qu&#39;on est venu récupérer.&lt;/p&gt;
&lt;p&gt;Putain de journée sans fin.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 8</title>
    <link href="https://blog.foojin.com/2022/10/25/eurotour-vol-8/" />
    <updated>2022-10-25T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/10/25/eurotour-vol-8/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-4-juin-2045&quot;&gt;Entrée du 4 juin 2045&lt;/h2&gt;
&lt;p&gt;Je me suis levé tard ce matin… enfin ce midi plutôt. C&#39;est le vide dans mon bide qui m&#39;a réveillé. Il faisait faim. J&#39;ai du coup rejoint Vinz et Ousma au resto de l&#39;hôtel et là Vinz nous raconte qu&#39;au petit déj il a croisé Angus sappé et maquillé comme Jack. Apparemment il avait prévu de revoir Bax-machin-chose à la Galerie, un café proche du Louvre, en tant que Jack pour lui dire de bien rester loin de notre star à tous.&lt;/p&gt;
&lt;p&gt;C&#39;était marrant comme info… jusqu&#39;à ce qu&#39;on voit à la télé de l&#39;hôtel, dans un flash spécial, qu&#39;une fusillade meurtrière avait eu lieu ce matin au café la Galerie. Et Angus qui répondait pas sur son agent… Ça puait du cul sévère là. On a alors enfilé ce qu&#39;il fallait de café et de croissant et on est parti là-bas pour en découvrir plus. Fallait qu&#39;on sache, même si c&#39;était pour confirmer que c&#39;était Angus le cadavre.&lt;/p&gt;
&lt;p&gt;Au Louvre c&#39;était la cohue. Les flics avaient tout bouclé et on avait accès à rien. La Galerie était manifestement sous la pyramide, dans la galerie marchande, ce qui réduisait considérablement nos options d&#39;infiltration. Ousma a quand même tenté le coup du bluff, alors même qu&#39;il est clairement pas bâti pour ça. À base de &amp;quot;Hello, I&#39;m agent Ousma du Federal Bureau of Americans from America…&amp;quot; 😆&lt;br&gt;
Ça avait beau être de l&#39;agent de police de bas étage il était pas dupe. Et encore moins quand Ousma a dû montrer son alien card au flic qui voyait bien que c&#39;était de la grosse connerie.&lt;/p&gt;
&lt;p&gt;Quand vous avez besoin de muscles pour une opération militaire, appelez Ousma, mais c&#39;est à peu près tout ce qu&#39;il fera avec brio. Remarque je m&#39;en plains pas, il fait ça super bien et c&#39;est justement pour ça qu&#39;il a été embauché et qu&#39;il est dans notre team.&lt;/p&gt;
&lt;p&gt;Bref on a dû trouver une alternative, alors Ranni est allé faire ce qu&#39;elle fait de mieux après boire des boissons énergétiques et se planquer : Pirater.&lt;br&gt;
Elle nous a pris le contrôle des caméras tellement vite que j&#39;ai pas eu le temps d&#39;allumer mon cigare.&lt;br&gt;
Malheureusement le flux video nous a permis de confirmer que le cadavre était celui d&#39;Angus. 😭&lt;/p&gt;
&lt;p&gt;En fouillant un peu plus le système informatique elle a fini par nous dégoter les enregistrements de la matinée. Sauf que ça a soulevé plus de questions que ça n&#39;en a résolu. Angus est arrivé au café vers 9h30 et il a rejoint Bax-3 à sa table. Les vidéos n&#39;avaient pas le son mais on voyait bien qu&#39;ils s&#39;engueulaient et là, tout d&#39;un coup, la tête d&#39;Angus explose… PAF Pastèque ! C&#39;était clairement une arme à feu mais elle était hors champ et le coup venait de… derrière lui.&lt;br&gt;
Vue la réaction de Bax-3, avec son visage recouvert de sang et de morceaux de cervelle d&#39;Angus, elle était carrément surprise et s&#39;attendait pas à ça. Puis elle a fuit la scène.&lt;/p&gt;
&lt;p&gt;On a eu beau vérifier tous les angles des caméras sur plusieurs minutes, avant et après l&#39;assassinat, on a jamais vu le tireur. Le seul truc louche qu&#39;on a trouvé c&#39;est une Peugeot 909 sans plaque qui quittait le parking juste après le coup de feu.&lt;/p&gt;
&lt;p&gt;Autant dire que c&#39;était mince pour avancer dans notre enquête. On s&#39;est dit que la seule constante dans tout ce beau bordel c&#39;était Bax-3 alors on s&#39;est mis bille en tête de la retrouver… ce qui allait pas être une mince affaire.&lt;/p&gt;
&lt;p&gt;On a appelé Ace pour qu&#39;il contacte Frederic Germain, le mec qui avait organisé la teuf de la veille, lui devait savoir comment la joindre vu qu&#39;il l&#39;avait invitée.&lt;/p&gt;
&lt;p&gt;Il nous a eu un rendez-vous pour 14h, même endroit que la fête. On avait encore un peu de temps alors Vinz est allé gratter du côté des médias aglutinés autour du lieu du crime, peut être qu&#39;ils savaient quelque chose. Après tout, cette meuf trainait avec le gratin, quelqu&#39;un devait bien savoir quelque chose. Mais aucun n&#39;a été capable de l&#39;identifier, y en a un par contre qui nous a confirmé qu&#39;elle trainait souvent avec un certain Karim Bouranne, elle est toujours avec lui sur les photos people qui trainet ici et là. Ce mec c&#39;est le patron d&#39;une boîte de nuit apparemment.&lt;/p&gt;
&lt;p&gt;La boîte en question était sur le chemin de chez M. Germain alors on a fait un arrêt mais évidemment vers midi, dans une boîte de nuit, y a personne. Tant pis on repassera plus tard.&lt;/p&gt;
&lt;p&gt;On est arrivé chez le bourge à l&#39;heure et on nous a accueilli comme il fallait, peut être bien mieux qu&#39;on ne s&#39;y attendait. Malheureuseument il avait pas beaucoup d&#39;info à nous partager, non pas qu&#39;il voulait pas parler, seulement cette meuf c&#39;est un peu un mystère. Tout ce qu&#39;il a pu nous dire c&#39;est que son vrai blaze était &lt;strong&gt;Béatrice Fahida,&lt;/strong&gt; en gros on l&#39;invite parce qu&#39;il faut l&#39;inviter, question business ou un truc du genre mais c&#39;est définitivement pas une célébrité. Et elle trainerait beaucoup avec un certain Frank Sera de chez Orbital Air, une Delphine Muller de chez EBM (avec qui elle était venu à la teuf de la veille) et un Grégory Delanoix de chez Thalès. À part ça il avait aucun moyen de la contacter.&lt;/p&gt;
&lt;p&gt;On l&#39;a alors remercié puis en le quittant on se dit qu&#39;on tenterait bien un plan bluff, genre on essaye d&#39;inviter les trois pour une teuf organisée par Jack. Alors on a appelé les standards de chacune de leur entreprise mais ça passe pas. Aucun des trois d&#39;ailleurs. Soit on est vraiment nuls, soit ils veulent être foutrement discrets ces enfoirés.&lt;/p&gt;
&lt;p&gt;J&#39;imagine qu&#39;il nous reste plus que ce fameux Karim à interroger mais ça devra attendre ce soir du coup. En attendant on a débrief avec Ace en lui disant de renforcer la sécurité sur Jack parce qu&#39;on est toujours pas sûr qu&#39;Angus était la véritable cible. Ça pourrait très bien être Jack dans les faits.&lt;/p&gt;
&lt;p&gt;Bon je vais aller me préparer pour la soirée moi.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 7</title>
    <link href="https://blog.foojin.com/2022/10/16/eurotour-vol-7/" />
    <updated>2022-10-16T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/10/16/eurotour-vol-7/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-2-juin-2045&quot;&gt;Entrée du 2 juin 2045&lt;/h2&gt;
&lt;p&gt;Le concert à l&#39;&lt;em&gt;Europa Field&lt;/em&gt; de Bruxelles s&#39;est bien passé. L&#39;œuvre de Jacques a bien fait son effet, on en parle même partout à l&#39;étranger il parait.&lt;br&gt;
Aujourd&#39;hui c&#39;est relâche alors j&#39;en profite pour me remettre de cette virée artistique et de retaper mon armure ainsi que celle d&#39;Ousma.&lt;br&gt;
Faut que je sois en forme parce qu&#39;ensuite on enchaîne 3 dates à Paris.
D&#39;ailleurs je vais aussi préparer mes affaires parce qu&#39;on part ce soir dans la nuit. Arrivée prévue au petit matin à Paris.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-3-juin-2045&quot;&gt;Entrée du 3 juin 2045&lt;/h2&gt;
&lt;p&gt;Y a pas à chier Paris c&#39;est classe, rien à voir avec NC architecturalement parlant, voire même question mode. Nous on est classe dans notre façon de se saper mais à la mode de NC, ici tout le monde est classe++, bande de gros bâtards de parisiens.&lt;br&gt;
Genre on fait un peu tâche ici en vrai. Enfin bon on est des touristes donc ça passe.&lt;/p&gt;
&lt;p&gt;Sinon on a préparé la scène cette aprem au palais omnisport pour les 3 prochaines dates. On commence à être rodé alors on a torché ça vite fait bien fait. Mais vers 14h y a Angus Kessler, le garde du corps de Jack, qui nous a appellé dans sa chambre. Une fois là-bas il nous a expliqué que le soir après le concert y aurait une méga grosse teuf, genre 200-300 personnes, organisé par un bourgeois du nom de Frédéric Germain en l&#39;honneur de notre cher et adoré Jack… et bref on était convié mais pas vraiment en tant qu&#39;invité, non non, on est personne nous, mais en tant que gardes du corps discrets supplémentaires.&lt;/p&gt;
&lt;p&gt;L&#39;idée d&#39;être invité dans une teuf comme ça pour les mauvaises raisons m&#39;ont pas vraiment plus au départ mais il a réussi à me convaincre avec hors d&#39;œuvre français et champagne. Je suis un homme de goût, que voulez-vous ?&lt;/p&gt;
&lt;p&gt;C&#39;était bien beau tout ça mais fallait qu&#39;on soit classe comme des parisiens alors Catherine Clements nous a accompagné faire du shopping, on avait un budget de 200 eddies par personne ce qui, ne nous leurrons pas, est bien mais pas top.&lt;br&gt;
Ça m&#39;a rappelé un vieux film qui s&#39;appelait Pretty Woman je crois dans lequel un gros riche solitaire embauchait une pute pour être sa meuf officielle et du coup une des scènes mémorables c&#39;était lui qui l&#39;emmenait faire du shopping dans toutes les boutiques de bourges. Bah là c&#39;était pareil, sauf que Catherine c&#39;était la bourge et nous les putes.&lt;/p&gt;
&lt;p&gt;Catherine était partie s&#39;occuper de Ranni pendant que Vinz, Ousma et moi on était laissé seuls à la proie des vendeurs… c&#39;était pas beau à voir. Vinz, ayant un grand sens du style (à la mode NC hein) a voulu s&#39;occuper de ses fringues lui-même. Quant à Ousma et moi on était un peu comme des chiots perdus. Moi je me suis fait recueillir par les vendeurs qui mon sorti un truc sobre mais classe et qui m&#39;allait comme un gant. Ils ont l&#39;œil ces enfoirés.&lt;/p&gt;
&lt;p&gt;Ousma lui a été pris en pitié par Vinz qui l&#39;a aidé à trouver un truc classe. Grossière erreur de la part d&#39;Ousma mais pour sa défense il connait pas Vinz aussi bien que moi, il s&#39;est fait avoir comme un bleu. Enfin bref il a sorti un truc de son chapeau le Vinz… même moi qui ne suis pas un pro du style je voyais que ça déconnait sévère et j&#39;ai eu confirmation quand j&#39;ai vu les vendeurs pouffer dans leur coin. HAHAHA pauvre Ousma.
Enfin au bout d&#39;un moment Vinz lui a trouvé un truc un peu plus passe partout heureusement.&lt;/p&gt;
&lt;p&gt;On est rentré ensuite se poser un peu avant le concert puis on a fait le show. Jack avait bien trouvé son flow et tout s&#39;est passé crème. Puis comme prévu on est allé se changer avec nos nouvelles fringues pour partir à la soirée.&lt;br&gt;
Y avait 2 limousines pour nous prendre tous. La classe à Dallas !&lt;br&gt;
Elles nous ont emmené sur les quais de Seine devant un grand bâtiment blanc, genre comme en nacre, et vu le nombre de paumard de fans en tout genre qui trainaient là devant l&#39;entrée c&#39;était pas un secret cette teuf.&lt;/p&gt;
&lt;p&gt;On était clairement pas à notre place ici, y avait que du gratin. Plein de gens que j&#39;avais déjà vu à la TV mais dont j&#39;avais oublié le nom, plein d&#39;autres que j&#39;avais jamais vu nulle part mais vu le nombre de gens qui trainaient autour ça devait être des gens importants.&lt;br&gt;
Puis Angus nous briefe. Il devrait pas y avoir de soucis de sécurité ici, par contre, fallait qu&#39;on fasse tout notre possible, en utilisant la force si besoin, pour que Jack rentre seul ce soir. Apparemment il a la facheuse habitude de ramener des femmes quand il rentre de soirée mais c&#39;était pas autorisé par Angus ce soir-là.
You&#39;re the boss, boss!&lt;/p&gt;
&lt;p&gt;Perso j&#39;ai vite décidé que je surveillerais les buffets. On se méfie jamais assez de ça. Du coup j&#39;ai pas mal bouffé et bu… mais hey, fallait bien se fondre dans la masse et pas avoir l&#39;air de garde du corps, alors j&#39;ai fait ce qu&#39;on attendait de moi, je me suis investi personnellement dans la mission. Tout en gardant un œil sur Jack évidemment. Je suis un professionnel.&lt;/p&gt;
&lt;p&gt;À un moment Angus nous a fait signe et une fois tous à sa hauteur il nous a dit que la meuf avait qui parlait Jack s&#39;appelait &lt;strong&gt;Bax-3&lt;/strong&gt;, une fixeuse de renom qui est pas connue pour avoir beaucoup d&#39;éthique. Il l&#39;avait connu en bossant chez Orbital Air et fallait s&#39;en méfier comme de la peste.&lt;/p&gt;
&lt;p&gt;Le truc c&#39;est que elle et Jack était vite monté au stade du flirt, qu&#39;on allait tous rentrer et, ce qui devait arriver arriva, il a voulu rentrer avec elle. C&#39;était un double non là. On s&#39;est donc interposé, on lui a dit de prendre son numéro et qu&#39;il l&#39;a reverrait plus tard, en espérant que ce soit jamais en fait.&lt;br&gt;
Il a un peu gueulé c&#39;est sûr mais une fois dans la voiture, il s&#39;est endormi comme une merde.&lt;/p&gt;
&lt;p&gt;On est alors arrivé à l&#39;hôtel et on est tous aller se coucher. C&#39;est d&#39;ailleurs ce que je vais faire tout de suite. Je pense que je vais dormir jusque midi au moins et skip le petit déj pour cette fois. De toute façon avec tout ce que j&#39;ai bouffé cette nuit je suis tranquille.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 6</title>
    <link href="https://blog.foojin.com/2022/10/09/eurotour-vol-6/" />
    <updated>2022-10-09T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/10/09/eurotour-vol-6/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-31-mai-2045-suite&quot;&gt;Entrée du 31 mai 2045 - suite&lt;/h2&gt;
&lt;p&gt;On était enfin prêt à partir, tel un commando de militaires en mission pour sauver le monde, sauf qu&#39;on allait vandaliser un bâtiment, qu&#39;on était pas tous frais et que Vinz s&#39;était déguisé en parfait petit clodo. On fait avec ce qu&#39;on a, hein.&lt;/p&gt;
&lt;p&gt;Toujours est-il qu&#39;une fois arrivé sur le chantier on a commencé à faire du repérage, moi j&#39;ai sorti mon drone et j&#39;ai fait joujou. On a pu remarqué plusieurs choses :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;que le bâtiment de 30 étages était qu&#39;à moitié fini. Et par là je veux dire que seuls les 15 premiers étages avaient des murs;&lt;/li&gt;
&lt;li&gt;qu&#39;il y avait une grue, un ascenceur de chantier et des caméras de sécurité;&lt;/li&gt;
&lt;li&gt;que c&#39;était loin d&#39;être désert, le chantier était blindé d&#39;ouvriers en grève surveillés par genre 5 vigiles qui patrouillaient par paire pendant 30 minutes;&lt;/li&gt;
&lt;li&gt;qu&#39;à l&#39;extérieur y avait plein de médias qui aussi surveillaient ça de près et que des patrouilles de flics passaient en permanence dans le coin.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Notre mission était de nous infiltrer discretos, grimper en hauteur, tagger un mur et se casser illico presto. Sur le papier ça avait l&#39;air simple mais en vrai c&#39;était plus compliqué que ça en avait l&#39;air.&lt;/p&gt;
&lt;p&gt;Déjà rien que pour l&#39;infiltration on en a chié. On s&#39;était dit que ça pourrait le faire d&#39;utiliser les médias et négocier un scoop avec eux mais Jacques voulait pas qu&#39;on puisse à coup sûr le lier à cette histoire.&lt;/p&gt;
&lt;p&gt;Alors on a pensé à négocier avec les grévistes, en leur disant qu&#39;on était chaud pour les aider en mettant une grosse bannière sur un mur du bâtiment. C&#39;est pour ça qu&#39;on a envoyé Vinz, le super clodo, négocier mais ces connards de prolo belges parlaient que le français. Déjà quel genre de paumard ne parle qu&#39;une langue qui n&#39;est pas de son propre pays mais celle du voisin…? Aucune dignité les mecs. Et puis ensuite ils ont dit qu&#39;ils avaient pas besoin d&#39;abrutis d&#39;américains pour les aider, qu&#39;on pouvait pas comprendre. Genre on est stupide quoi…&lt;/p&gt;
&lt;p&gt;Enfin bref, du coup, plan B pour l&#39;infiltration et on a opté pour l&#39;effraction. Y a que ça de vrai de toute façon. On a choisi de forcer l&#39;entrée par derrière, au niveau de la grue. Pendant que j&#39;ouvrais le passage pour que Osman et Vinz accompagnent Jacques et ses potos à l&#39;intérieur, Ranni, elle, essayait de trouver un point d&#39;accès pour pirater tout le système et prendre à terme le contrôle de l&#39;ascenceur.&lt;br&gt;
Elle a assuré la petite. Elle nous a piraté ça comme si c&#39;était un jeu d&#39;enfant et au final elle a pris de contrôle de l&#39;ascenceur mais aussi des caméras et on a fait passé un boucle dessus pour que notre infiltration passe crème.&lt;/p&gt;
&lt;p&gt;De mon côté, j&#39;avais ouvert ma brêche et j&#39;ai donné le go aux autres après avoir fait une dernière vérif de la position de la patrouille de vigile. Les gars sont passés inaperçus et ont atteint l&#39;ascenceur sans soucis, sans attirer l&#39;attention de qui que ce soit. Une fois là haut, Osman et Vinz ont monté la garde pendant que Jacques et ses potes commençaient leur taf d&#39;artiste. Ils nous avaient prévenu qu&#39;ils taggeraient avec une peinture spéciale qui n&#39;apparaissait que 30 minutes plus tard mais tout de même c&#39;était chelou à regarder.&lt;/p&gt;
&lt;p&gt;Jusque là tout allaient bien. Ranni surveillaient les alentours avec les caméras, moi je filmais et surveillais tout avec mon drone (on sait jamais, si on avait un jour besoin de le faire chanter ce Jacques… perso j&#39;aime bien les garanties).&lt;/p&gt;
&lt;p&gt;Mais c&#39;est là que ça a merdé. Enfin je dis ça mais ça a pas merdé à cause de nous, pour une fois. Non, c&#39;est ce foutu constructeur qui a décidé de venir casser la grève à ce moment là, juste quand on était là pour notre opération secrète. Quel enfoiré !&lt;/p&gt;
&lt;p&gt;Le gars a fait venir un bus avec des ouvriers remplaçants et surtout des super vigiles avec protections en pagaille et armés bien comme il faut. De vrais robocops. Ça a commencé à péter grave et ils faisaient pas semblant de se mettre sur la gueule. Jacques lui avaient fini son job mais l&#39;exflitration allait s&#39;avérer plus tendu qu&#39;un string. Le groupe a pris tout de même l&#39;ascenceur mais ils se sont fait gauler par des robocops alors ils ont décidé de s&#39;arrêter au premier étage et de finir à patte par les escaliers en sortant ensuite par l&#39;arrière. Pendant tout ce temps Ranni et moi on les guidait comme on pouvait avec les informations qu&#39;on obtenait des caméras et de mon drone.&lt;/p&gt;
&lt;p&gt;Ils sont finalement sortis par l&#39;arrière, au niveau de la grue, mais fallait encore qu&#39;ils rejoignent ma brêche et ça s&#39;est pas très bien passé. En passant ils se sont fait repérés par deux robocops et des balles ont fusé. Un des potes de Jacques s&#39;est ramassé la gueule et comme c&#39;était une cible facile il a pris une balle ensuite. Jacques et son autre pote étaient déjà sortis, Osman et Vinz aussi mais on a laissé personne derrière. Osman a fait un tir de suppression et… comment dire… ils avaient de robocop que la dégaine. À l&#39;intérieur c&#39;était des fragiles. Y en a un qui était resté planté là, comme tétanisé, pendant que l&#39;autre s&#39;était mis à couvert. Tout ça a laissé le temps au pote de Jacques de bouger son cul et sortir de là malgré la douleur.&lt;/p&gt;
&lt;p&gt;On s&#39;est vite engouffré dans nos caisses et on a filé doucement mais sûrement avant que la peinture ne s&#39;affiche parce qu&#39;on entendait déjà les hélicos de la police arriver.&lt;/p&gt;
&lt;p&gt;Comme on est pas vache on a amené le pote de Jacques se faire soigner et puis on les a laissé là. Nous on est retourné à l&#39;hôtel pour souffler et se reposer. Je vais bien ronquer cette nuit moi, je le sens.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-1er-juin-2045&quot;&gt;Entrée du 1er juin 2045&lt;/h2&gt;
&lt;p&gt;Je viens de me lever et j&#39;ai regardé tout de suite les infos. Ils en parlaient sur tout les chaînes. J&#39;ai enfin vu ce que Jacques et ses potes avaient fait. C&#39;est magnifique !&lt;/p&gt;
&lt;p&gt;On y voyait le logo de Jack Entropy et la queue du Y pointait sur une chiotte avec écrit en tout petit &amp;quot;Flush Johnny Silverhandle&amp;quot; ! Hahaha du génie !&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 5</title>
    <link href="https://blog.foojin.com/2022/09/24/eurotour-vol-5/" />
    <updated>2022-09-24T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/09/24/eurotour-vol-5/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-31-mai-2045-suite&quot;&gt;Entrée du 31 mai 2045 - suite&lt;/h2&gt;
&lt;p&gt;On était là avec Ousma à se la couler douce, moi avec mon cigare et Ousma avec… rien en fait… ça se voit que c&#39;est un ancien militaire ce gars, il est capable de pas bouger sans rien faire et il en est content, enfin bref on se la coulait douce quand on a reçu un coup de bigot de la gamine nous disant qu&#39;il était possible que Jacques ait été en fait au musée le Nouvel International.&lt;/p&gt;
&lt;p&gt;On s&#39;apprêtait à se mettre en route tous les deux quand les deux fêtards sont sortis accompagnés d&#39;un mec chelou, propre sur lui mais chelou, un genre un peu péteux, le genre qui pète plus haut que son cul et qui chouine quand il s&#39;est pris une mandale pour un mot de travers, tu vois le genre ? Bref, il nous a pointé du doigt tout en parlant au videur. Je crois qu&#39;il lui a dit qu&#39;on était ses potes et du coup le videur nous a laissé passer. J&#39;ai pas trop compris pourquoi ils nous ont fait rentrer alors qu&#39;on devait tracer au musée mais je me suis dit qu&#39;ils avaient peut être chopé d&#39;autres infos entre temps.&lt;/p&gt;
&lt;p&gt;Une fois à l&#39;intérieur ce mec chelou, que je vais appeler Connard, nous a dit qu&#39;il savait où était Jacques et qu&#39;il nous le dirait pour quelques eddies. J&#39;avoue que je l&#39;avais mauvaise là. Mais on s&#39;était dit qu&#39;on essayerait de pas faire de vague alors on a négocié et je l&#39;ai payé 200 eddies en insistant bien que s&#39;il nous avait menti je le retrouverais et je ferais de ses rotules de la poudre.&lt;/p&gt;
&lt;p&gt;Connard a compris le message je crois. Mais, PUTAIN, j&#39;ai jamais eu autant la rage de ma vie de paumard… Connard nous a dit que Jacques était à ce putain de musée Nouvel International de mes couilles… ce qu&#39;on savait déjà donc.&lt;br&gt;
Comment claquer 200 eddies pour rien pour les nuls…&lt;br&gt;
Mais Connard nous avait pas menti alors je l&#39;ai laissé partir avec sa prise.&lt;/p&gt;
&lt;p&gt;J&#39;étais rageux mais j&#39;avais l&#39;info alors on a décollé mais c&#39;était sans compter qu&#39;une meuf, manifestement pétée de tune, nous interpelle. Elle était accompagnée de ses deux frères, Tweedledum et Tweedledee (c&#39;était sûrement pas ça leur vrais noms, mais je m&#39;en fous) et elle a dit s&#39;appeller Leona Walder. Elle nous a parlé comme si on était ses grouillots et que si on allait voir Jacques, fallait qu&#39;on lui transmette un message de sa part.&lt;/p&gt;
&lt;p&gt;Alors je lui ai dit &amp;quot;OK, pour 200 eddies&amp;quot;. 😆&lt;/p&gt;
&lt;p&gt;Elle a pas ri. Elle a pas aimé en fait. Et elle nous a encore plus mal parlé. J&#39;ai pas aimé non plus en retour alors je lui ai dit de bien aller se faire foutre. Je crois qu&#39;elle a pas trop apprécié, c&#39;est pour ça qu&#39;elle a dit à Tweedledum et Tweedledee de nous casser la gueule pendant qu&#39;elle-même allait casser la gueule de Ranni.&lt;/p&gt;
&lt;p&gt;Les deux guignols étaient pas bien costauds mais putain ce qu&#39;ils étaient rapide, j&#39;ai pris plusieurs pains dans le gueule et j&#39;en ai pas mis autant. Mais moi quand ça touchait ça faisait mal, hinhin. Ousma est clairement un meilleur bastonneur que moi du coup il a couché le sien en un clin d&#39;œil ou presque… et il a dû m&#39;aider en tenant le mien pour être sûr que je le rate pas. Ce que j&#39;ai fait dans un premier temps mais je suis rattrapé et je l&#39;ai couché aussi.&lt;/p&gt;
&lt;p&gt;Pendant ce temps Ranni a fusionné avec les fougères de la salle pour semer Leona. C&#39;est marrant de se dire qu&#39;elle a réussi à être discrète alors que c&#39;est un peu une grande gueule pour une gamine de 16 ans.&lt;br&gt;
Enfin du coup après notre victoire on s&#39;est barré au musée.&lt;/p&gt;
&lt;p&gt;Une fois arrivés on est rentré directement, non sans laisser nos armes à l&#39;accueil. J&#39;imagine qu&#39;on doit comprendre mieux l&#39;art moderne quand on se sent en insécurité mais moi, avec tout le temps que j&#39;ai passé là-bas, je peux dire que j&#39;ai toujours rien compris. Ousma non plus, on est un peu pareil lui et moi. D&#39;ailleurs on s&#39;est bien marré quand j&#39;ai cru reconnaître une bite sur un œuvre d&#39;art mais qu&#39;en fait c&#39;était pas une œuvre d&#39;art, c&#39;était… une clim… 🤣&lt;/p&gt;
&lt;p&gt;Si on était tous les deux perdus à ne rien comprendre et à ne reconnaître personne, c&#39;était pas le cas de Ranni et Vinz qui ont vite retrouvé la trace de Jacques. Il était déguisé comme quelqu&#39;un qui voulait pas être reconnu. C&#39;est con parce que du coup ça attirait le regard. Pendant que lui et Vinz faisaient connaissance et négiociaient, Ranni nous a rejoint. Mais je suis pas resté longtemps, j&#39;en ai eu marre de voir Vinz galérer et aussi j&#39;avais un peu peur qu&#39;il nous mette encore dans un plan foireux, alors j&#39;y suis allé. On a négocié et il a accepté. 🙌&lt;/p&gt;
&lt;p&gt;Mais là, comme si une fois ne suffisait pas, débarquent Leona, ses deux loques de frères et quelques paumards de gangsters qui avaient néanmoins réussi à mettre hors service la sécurité du musée en les attachant. Elle commence à me saouler puissance 1000 cette poufiasse !&lt;/p&gt;
&lt;p&gt;Là elle a embrouillé Jacques, en gros en le traitant de vendu, et à dégainer un flingue de paintball puis elle a tiré sur ses œuvres. Sauf que c&#39;était pas de la peinture mais de l&#39;acide. À ce moment-là, Ranni s&#39;est barré vers l&#39;accueil et quand j&#39;en ai eu marre de son cinéma à l&#39;autre grosse conne, je lui ai fait une prise, mis une beigne, piqué son flingue, braqué sa sale tronche et je lui ai dit de se mettre à genoux et fermer sa gueule sinon je lui faisais un lifting façon post-moderne.&lt;/p&gt;
&lt;p&gt;Inutile de dire que son service de sécurité n&#39;a pas apprécié du tout et nous a foncé dessus armé de couteau… deuxième baston de la soirée à cause de la même meuf, c&#39;est fou ça ! Vinz s&#39;est eclipsé pendant que Ousma et moi on gérait les 4 connards.
On était à poil alors j&#39;ai pris cher. Ousma, lui, esquive bien mieux que moi, alors au bout d&#39;un moment je l&#39;ai laissé seul et je me suis barré vers l&#39;entrée pour récupérer mes joujous.&lt;/p&gt;
&lt;p&gt;Pendant tout ce temps Ranni en avait profité pour détacher les gardes et Vinz pour ouvrir le coffre qui renfermait nos armes. J&#39;arrivais pile poil pour la distribution. Heureusement j&#39;ai pas eu à m&#39;en servir et la sécurité a fait son taf au final. On a pu vite se barrer avec Ousma qui tirait Jacques comme si c&#39;était un gamin.&lt;/p&gt;
&lt;p&gt;Vu l&#39;heure, on a décidé de pas trainer et de tracer chez Jacques récupérer du matos pour l&#39;œuvre à accomplir dans la nuit. Ça a pris un peu de temps. Et en plus il devait appeler des potes à lui pour qu&#39;ils lui donnent un coup de main. Pendant ce temps j&#39;ai zoné dans son atelier à la recherche d&#39;un nouveau Kevlar parce que le mien ne tenait qu&#39;à un fil mais j&#39;ai rien trouvé.&lt;/p&gt;
&lt;p&gt;Du coup, là, j&#39;écris dans mon journal mais je continuerai plus tard parce qu&#39;on est prêt à décoller.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 4</title>
    <link href="https://blog.foojin.com/2022/09/20/eurotour-vol-4/" />
    <updated>2022-09-20T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/09/20/eurotour-vol-4/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-27-mai-2045&quot;&gt;Entrée du 27 mai 2045&lt;/h2&gt;
&lt;p&gt;La grâce mat&#39; m&#39;a fait du bien. J&#39;étais frais et pimpant quand Ranni est venu frapper à ma porte. Elle était pas vraiment contente de sa soirée la veille alors elle a voulu établir un plan pour empêcher que se reproduisent les même événements mais un jour où on aurait moins de chance.&lt;/p&gt;
&lt;p&gt;Son plan consistait à traquer Jack en implantant à son insu une puce GPS sur lui ou sur un objet qu&#39;il a tout le temps sur lui. C&#39;est pour ça qu&#39;elle est venu me voir. La bidouille c&#39;est ma came. On s&#39;est dit qu&#39;on ferait mieux d&#39;en parler avec Angus et ça tombait bien parce qu&#39;il nous avait tous appelés pour faire un debrief de la veille.&lt;/p&gt;
&lt;p&gt;Une fois tout mis à plat on l&#39;a chopé à part pour lui parler de notre plan. Bien qu&#39;il trouvait pas le plan déconnant il pouvait pas se permettre d&#39;être impliqué personnellement et nous a dit qu&#39;il voulait rien savoir… mais qu&#39;il nous empêcherait pas de le mettre en action.&lt;/p&gt;
&lt;p&gt;Alors on s&#39;est rabattu sur Tammi. Elle est proche de Jack et était bien sur les nerfs après ce qu&#39;il s&#39;était passé alors on a misé sur sa coopération. Et bingo !&lt;/p&gt;
&lt;p&gt;Elle était opé pour nous suivre mais… c&#39;est elle qui garderait le tracker. On a pas moufté, après tout c&#39;est aussi sa vie privée à elle. On a alors mis en place le plan avec l&#39;aide de Tammi pour installer la puce GPS dans le flingue de Jack, il se déplace jamais sans, c&#39;était le meilleur endroit. Et en deux coups de cuillère à pot c&#39;était fait, ni vu, ni connu je t&#39;embrouille. C&#39;est la garantie Zed ! 😉&lt;/p&gt;
&lt;p&gt;On était prêt pour n&#39;importe quelle connerie Jack ferait par la suite.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-29-mai-2045&quot;&gt;Entrée du 29 mai 2045&lt;/h2&gt;
&lt;p&gt;On a fini la tournée en Angleterre avec cette 3ème et dernière date. C&#39;était à Londres au &lt;em&gt;Wembley Stadium&lt;/em&gt;. Y a pas eu un pet de travers, de l&#39;extérieur ou de l&#39;intérieur (Jack…), tout le monde s&#39;est tenu à carreau.&lt;/p&gt;
&lt;p&gt;Le prochain concert sera le 1er juin à Bruxelles, au &lt;em&gt;Europa Field&lt;/em&gt;. Faut que je prépare mes affaires, on décolle demain.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-31-mai-2045&quot;&gt;Entrée du 31 mai 2045&lt;/h2&gt;
&lt;p&gt;On est bien arrivé à Bruxelles. C&#39;est très différent de NC ou de l&#39;Angleterre. Ici c&#39;est Interpol qui gère la sécurité, comme dans la majorité de l&#39;Europe. Et on a appris qu&#39;ils avaient des gangs un peu chelous. Y aurait les &lt;em&gt;Data Jackers&lt;/em&gt;, un gang de pro-technologie un peu has-been qui utilisent des masques à LED pour afficher leur émotions… et les &lt;em&gt;Saxe-Cobourg&lt;/em&gt; qui sont genre retro-punk, sappés comme y a deux siècles… c&#39;est vraiment des paumards ces européens.&lt;/p&gt;
&lt;p&gt;Sinon on a tous été convoqués au penthouse pour préparer le concert de demain. Jack voulait qu&#39;on fasse sa promo à Bruxelles comme jamais personne ne l&#39;avait fait auparavant. Il voulait marquer les esprits. C&#39;est là qu&#39;est rentré en scène un petit gars du nom d&#39;&lt;em&gt;Anton Pentre&lt;/em&gt;, un français, qui connait les bonnes personnes pour ce job de promotion. Il nous a parlé d&#39;un certain &lt;em&gt;Jacques Rêve&lt;/em&gt;, une sorte de Banksy contemporain qui serait parfait pour ça. Faut juste le trouver, qu&#39;il accepte et qu&#39;on l&#39;aide à faire son œuvre, une énorme tête de Jack taggée sur un gratte-ciel.&lt;/p&gt;
&lt;p&gt;Catherine nous a donné les moyens pécuniaires et psychologique de le convaincre mais il reste un ou plutôt plusieurs hics dans cette histoire :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Faut le trouver ce Jacques et il se cache parce qu&#39;il est recherché pour vandalisme;&lt;/li&gt;
&lt;li&gt;Faut qu&#39;il accepte le job;&lt;/li&gt;
&lt;li&gt;Le concert est demain soir et il est 20h déjà.&lt;/li&gt;
&lt;li&gt;Le bâtiment, le New Age Building, est un futur bâtiment de Biotechnica, la grosse corpo&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Le seul début de piste qu&#39;on avait c&#39;était qu&#39;il trainait souvent au &lt;em&gt;Jaded Flower&lt;/em&gt; un bar hype de Bruxelles. Alors on a pas trainé vu le temps qu&#39;il nous restait. Mais sur le chemin on s&#39;est fait controler par Interpol. Je sais pas qui a bavé mais ils avaient l&#39;air de nous connaître ainsi que la réputation de Jack. Ils nous ont tenu la jambe juste pour nous faire chier et pour finir ils nous ont dit qu&#39;ils nous avaient à l&#39;œil, qu&#39;on avait pas intérêt à faire de connerie… Putain ça promet cette mission artistique clandestine.&lt;/p&gt;
&lt;p&gt;On est finalement arrivé au bar mais Ousma et moi on est resté planté à l&#39;extérieur parce qu&#39;il fallait être sappé &lt;em&gt;classe&lt;/em&gt; pour rentrer. Plutôt crever que de me travestir en corpo. Vinz et Ranni sont rentrés eux pour faire le repérage, Ranni est passée en feintant et Vinz a fait la queue comme un paumard. 😂&lt;/p&gt;
&lt;p&gt;Et là on attend de leur nouvelles… du coup je gratte dans mon journal en fumant un cigare…&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 3</title>
    <link href="https://blog.foojin.com/2022/09/13/eurotour-vol-3/" />
    <updated>2022-09-13T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/09/13/eurotour-vol-3/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-26-mai-2045-suite&quot;&gt;Entrée du 26 mai 2045 - suite&lt;/h2&gt;
&lt;p&gt;Reprenons.&lt;br&gt;
Le SUV s&#39;est finalement arrêté devant l&#39;&lt;em&gt;Olympus&lt;/em&gt; dans &lt;em&gt;Little Hong Kong&lt;/em&gt;, un genre de mix entre tripot et bordel, je suis pas très sûr en vrai. En tout cas ce qui est sûr c&#39;est que le quartier était tellement mal famé que la MLA n&#39;y foutait jamais les pieds. Un peu comme les no man&#39;s land de Night City en définitive.&lt;/p&gt;
&lt;p&gt;Bref les cinq mecs sont sortis du SUV et ont commencé à observer les alentours, alors le groupe s&#39;était tout naturellement arrêté lui aussi quelques mètres plus tôt.&lt;br&gt;
Avant qu&#39;ils aient eu le temps de dire ou faire quoi que ce soit, à part pour certains de sortir du taxi, une bagnole a déboulé du coin de la rue poursuivie par un corpo en panique. Une fois la caisse partie loin le corpo s&#39;est pointé vers le groupe, l&#39;air pas très frais, en criant à l&#39;aide parce qu&#39;un taré lui avait piqué la caisse de sa femme. Le taré en question semblait bizarrement correspondre à la description de Jack et le corpo était en panique parce que sa caisse était en mode auto vers chez lui où l&#39;attendait sa femme… elle l&#39;attendait lui, pas Jack. Quelque part je comprends sa panique.&lt;/p&gt;
&lt;p&gt;Mais la bonne nouvelle c&#39;est qu&#39;ils avaient retrouvé la trace de Jack, enfin en tout cas ils savaient vers où il allait. La mauvaise c&#39;est qu&#39;ils n&#39;étaient pas les seuls à avoir entendu la complainte du corpo. Les 5 ont été attirés par le bruit et c&#39;est devenu un gros problème quand ils ont reconnu Tinker… l&#39;un d&#39;eux a sorti son flingue pour le pointer sur la tête du chauffeur de taxi pour l&#39;empêcher de partir en trombe. Ils voulaient des réponses. Ils auraient des réponses, d&#39;une manière ou d&#39;une autre. Enfin ça c&#39;est ce qu&#39;ils s&#39;imaginaient.&lt;/p&gt;
&lt;p&gt;Parce que Ranni, qui n&#39;était pas sorti du taxi, en avait décidé autrement. Discrètement, elle a débranché le câble neural du chauffeur pour prendre le contrôle du taxi. Là, en un éclair, Ousma a désarmé le gorille pendant que Tinker et Vinz sautaient dans le taxi, puis il sauta à son tour pendant que Ranni démarrait en trombe. Les 5 n&#39;ont pas abandonné pour autant et une course poursuite dans les rues dégueulasses et mal famées s&#39;est engagée.&lt;/p&gt;
&lt;p&gt;Ranni n&#39;étant qu&#39;une gamine elle a rapidement redonné le contrôle du taxi au chauffeur qui a dû s&#39;improviser pilote de course pendant que les autres tiraient sur le SUV derrière eux. Ils ont réussi à s&#39;en sortir in extremis en semant ces mafieux puis se sont cachés et ont appelé Angus.&lt;/p&gt;
&lt;p&gt;C&#39;est là que j&#39;arrive en piste.&lt;/p&gt;
&lt;p&gt;C&#39;est à cette même planque qu&#39;on les a rejoint et qu&#39;on est donc parti sur la piste de la voiture de corpo que Jack avait volée. On a alors pris le chemin que le GPS proposait en se disant qu&#39;une bagnole en mode automatique aurait fait de même. Et bingo ! On est tombé sur la voiture du corpo… encastrée dans un mur à côté d&#39;un bar qui lui-même attirait les gars douteux comme une merde attire des mouches. On s&#39;est tout de même arrêtés pour aller l&#39;inspecter malgré le fait qu&#39;on était tous assez certains que cet enfoiré de Jack aurait foutu le camp depuis bien longtemps.&lt;/p&gt;
&lt;p&gt;Les mecs qui trainaient là trainaient aussi autour de l&#39;épave et aussi frêles et drogués qu&#39;ils étaient, nous, on était clairement en sous nombre. Alors on l&#39;a joué fine, pour changer. On a fait les candides attirés uniquement par l&#39;accident et non le chauffeur. Et je crois qu&#39;on a bien fait parce que un des mecs, sûrement une sorte de leader, avait pas l&#39;air content du pilote. On a fait genre ne pas le connaître pour tirer le maximum d&#39;info en douceur et au bout d&#39;un moment ce mec nous a raconté que Jack est arrivé en trombe, s&#39;est pris le mur, est descendu de la caisse, s&#39;est invité au deal de drogue qu&#39;était en train de conclure ces mecs et un autre gang, a planté son nez dans la poudre pour prendre le rail du siècle puis s&#39;est barré comme il était venu. L&#39;autre gang a cru à une embrouille et a sorti les flingues… S&#39;en est suivi une grosse fusillade ce qui a permis, dans la confusion, à Jack de foutre le camp sans trop de problème bien qu&#39;apparemment il ait été légèrement blessé. Compte tenu de ce qu&#39;il nous a raconté, je comprends qu&#39;il soit pas très content le mec.&lt;/p&gt;
&lt;p&gt;En apparence on était sur le cul, comme des gamins à qui on racontait une histoire de dingue, mais à l&#39;intérieur on commençait à claquer des fesses. Quand on a compris ce dont était capable un Jack à peu près sobre, on osait pas imaginer ce qu&#39;il ferait avec une dose de cheval de drogue dans le pif.&lt;br&gt;
On lui alors demandé quelle direction il avait pris “afin de l&#39;éviter”. Je sais pas s&#39;il était trop con ou si c&#39;était un coup de génie de notre part, toujours est-il qu&#39;on a eu l&#39;info sans qu&#39;il nous soupçonne de quoique ce soit. On a alors fait mine de prendre la direction opposée avec la voiture pour mieux contourner le pâté de maison.&lt;/p&gt;
&lt;p&gt;Là on a joué aux petits détectives, en parcourant au ralenti les rues, à la recherche du moindre petit indice puis on a fini par tombé sur deux mecs manifestement du même gang que l&#39;autre gros con qui avaient l&#39;air d&#39;observer un truc au sol. Du coup, je me suis arrêté et j&#39;ai feint de demander mon chemin pour très vite m&#39;apercevoir qu&#39;ils observaient une flaque de sang fraîche. On les a aussi embobiné pour découvrir qu&#39;ils cherchaient eux aussi la trace de Jack et que c&#39;était son sang. Putain ces boloss c&#39;est pas des flèches quand même. Enfin bref, Ousma a sorti ses lunettes spéciales qui font ressortir les traces de sang et on a suivi la trace de notre côté en voiture.&lt;/p&gt;
&lt;p&gt;La trace stoppait devant un chantier arrêté où le grillage avait été éventré. Pas de doute possible, il était passé par là. Alors qu&#39;on s&#39;apprêtait à entrer, l&#39;un d&#39;entre nous a gaulé un mec qui nous filmait de l&#39;autre côté de la rue. Jimenez et Angus avait été très clair sur ce point, on ne devait pas faire de vague ou bien si ça devait arriver les preuves devaient disparaître alors on est allé le voir, puis il a pris peur et a couru mais on l&#39;a ratrappé sans problème. Enfin moi j&#39;y suis allé en voiture. Courir pour courir… très peu pour moi. Bref, grâce à notre talent, notre charisme et surtout notre portefeuille on a pu obtenir les enregistrements où l&#39;on voyait justement clairement Jack entrer dans le chantier. Ce journaliste s&#39;appelait Irving Spyers. Je note ça là au cas où on doive le retrouver un jour parce qu&#39;il aurait trop parlé.&lt;/p&gt;
&lt;p&gt;Ce petit contre-temps réglé on est retourné au chantier mais tout ce qu&#39;on avait trouvé c&#39;était un regroupement d&#39;une trentaine de gangsters en pleine cérémonie de quelque chose… en fait c&#39;était deux gangs qui se préparaient à régler un problème dans les règles. En 1 contre 1. Ça devait avoir quelque chose à voir avec une meuf ligotée au milieu du cercle de barils faisant office de braseros. Très tribal comme activité je dois avouer. Je crois que la meuf ligotée était une ancienne du gang 1, qui s&#39;appelait les Démons, mais elle avait rejoint le gang 2 qui s&#39;appelait les Roses, exclusivement composé de meuf. Je suis resté à l&#39;écart planqué comme les autres sans trop prêter plus que ça attention à leur baston… enfin jusqu&#39;à ce qu&#39;un mec chancelant ait déboulé et qui, après s&#39;être mis en hauteur, a commencé un monologue mystique… j&#39;ai rien compris à ce qu&#39;il déblatérait mais je crois qu&#39;il considérait la meuf ligotée comme sa reine d&#39;un nouvel âge réminiscent. Forcément ce mec qui s&#39;invite dans une baston de gang à l&#39;improviste… c&#39;était Jack.&lt;/p&gt;
&lt;p&gt;On s&#39;est alors tous mobilisé pour s&#39;approcher, les enfumer avec un nouveau bobard et très vite foutre le camp. Ça aurait pu marcher… si Jack avait pas sorti son flingue et tiré une balle dans la tête du leader des Démons.&lt;br&gt;
On a alors changé de stratégie… en fait chacun avait la sienne. Ousma et Vinz se sont approchés discrètement pour tenter de choper Jack. Ranni a tenté le coup de bluff pour qu&#39;ils butent pas Jack et moi… moi j&#39;ai fait ce que je fais de mieux. J&#39;ai foutu mon cul à l&#39;intérieur d&#39;une de ses grosses machine qui fore les tunnels et je l&#39;ai bidouillé pour la démarrer.&lt;br&gt;
Ousma avait été discret, Vinz beaucoup moins… faut dire il était déjà blessé le pauvre et Ranni… disons juste qu&#39;elle est bien meilleure pour obtenir ce qu&#39;elle veut des systèmes informatiques que des gens.&lt;br&gt;
Sentant la situation merder puissance mille, j&#39;ai fait comme à la maison : quand la diplomatie échoue, je rentre dans le lard… en l&#39;occurence cette fois-ci avec une foreuse de plusieurs milliers de tonnes.&lt;/p&gt;
&lt;p&gt;Avec les phares surpuissants dans la gueule et le bruit assourdissant d&#39;une foreuse en marche, j&#39;ai attiré à tous leur attention. Et je leur ai foncé dessus. Bon, c&#39;est une foreuse, pas un dragster alors ils m&#39;ont tous évité, à ma grande déception, mais j&#39;ai assez foutu le bordel pour que Ousma récupère Jack dans la cohue. Enfin devrais-je dire Jack et sa femme du nouvel âge réminiscent. Parait qu&#39;il voulait pas partir sans. Ils ont tous fuit et … nous aussi on a pas trainé parce que des hélicos arrivaient au loin. Que ce soit la MLA ou la presse, c&#39;était pas bon.&lt;/p&gt;
&lt;p&gt;Une fois tout le monde dans la caisse on s&#39;est barré. On avait mis la meuf dans le coffre mais à un feu rouge on a dit à Ousma de la sortir. Ça l&#39;aurait foutu mal pendant un contrôle de la MLA. Jack a protesté mais comme Ousma l&#39;avait désarmé, ses arguments n&#39;avait plus de poids à nos yeux.&lt;br&gt;
Finalement on a appelé Angus pour rassurer le staff qu&#39;on était sur le chemin du retour avec la cible. Une fois arrivés on a eu le droit au comité d&#39;accueil le plus froid que j&#39;ai jamais vu, Tammi Lu avait un regard noir à te faire subir une syncope et Angus était visiblement énervé mais rassuré à la fois. Et pour nous remercier, on nous a offert la grâce mat… non mais sans déc&#39;… les rats.&lt;/p&gt;
&lt;p&gt;Enfin bref… sacrée nuit. Et sacrée bête cette foreuse. Je m&#39;en souviendrai.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 2</title>
    <link href="https://blog.foojin.com/2022/09/09/eurotour-vol-2/" />
    <updated>2022-09-09T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/09/09/eurotour-vol-2/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-25-mai-2045&quot;&gt;Entrée du 25 mai 2045&lt;/h2&gt;
&lt;p&gt;Aujourd&#39;hui on a préparé la salle pour le premier concert de la tournée au Deaside Leisure centre de Liverpool. Ça fait plaisir un job tranquille pour changer. J&#39;étais comme un poisson dans l&#39;eau, apprécié pour mes skills de techie et entouré par mes pairs.&lt;/p&gt;
&lt;p&gt;Enfin bref, tout s&#39;est bien passé avant, pendant et après le concert. Contre toute attente. Faut dire j&#39;étais pas confiant. Jack Entropy est connu pour un être rocker pur et dur, à l&#39;ancienne, un vieux certes mais un vrai tout de même. Il envoie encore du lourd et le show était démentiel. Je sais pas d&#39;où il tire son énergie… de la drogue sûrement. La foule était à la hauteur et vu ce dont j&#39;ai été témoin la veille au pub je m&#39;attendais sincèrement à des débordements. Mais non.&lt;/p&gt;
&lt;p&gt;Le concert s&#39;est fini en apothéose et la vie a repris son cours, les techos ont rangé, la sécu a accompagné la foule vers la sortie et les stars sont parties en loge avec les groupies.&lt;/p&gt;
&lt;p&gt;Tous crevés par cette journée on est rentré se coucher. Ce que je vais faire de suite d&#39;ailleurs.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-26-mai-2045&quot;&gt;Entrée du 26 mai 2045&lt;/h2&gt;
&lt;p&gt;J&#39;ai été réveillé à 4h du mat par le tambourinement d&#39;un poing sur la porte de ma piaule. C&#39;était Angus, le garde du corps de Jack. J&#39;ai pas tout pigé de suite. Il était là debout devant moi en tenant un carton rempli de flingues et m&#39;a demandé si je savais conduire. J&#39;ai bredouillé que oui puis il m&#39;a tendu le carton en me disant que j&#39;avais 3 minutes pour me couvrir le cul et qu&#39;il m&#39;attendait au garage de l&#39;hôtel. C&#39;est à ce moment-là que je me suis rendu compte que j&#39;étais à poil, le zob à l&#39;air…&lt;/p&gt;
&lt;p&gt;Arrivé en bas, Angus m&#39;a filé les clés d&#39;une bagnole pendant qu&#39;il se dirigeait vers une autre et m&#39;a dit de le suivre. Je lui ai demandé alors ce qu&#39;on allait foutre et il m&#39;a répondu qu&#39;on allait rejoindre des membres du staff dans la merde qui étaient à la recherche de Jack. J&#39;ai pas osé poser plus de questions sur le moment. Et je sais pas pourquoi j&#39;ai tout de suite su que Vinz était dans le coup et comme d&#39;hab j&#39;ai vu juste.&lt;/p&gt;
&lt;p&gt;On a fini par les rejoindre dans un quartier manifestement pas penché sur l&#39;hospitalité. J&#39;ai vite remarqué que le groupe en question était composé de &lt;strong&gt;Vinz&lt;/strong&gt;, forcément, de &lt;strong&gt;Ousma&lt;/strong&gt; le gars de la sécu, &lt;strong&gt;Ranni&lt;/strong&gt; la gamine netrunneuse et Tinker ma chef. Cette dernière est montée dans la caisse d&#39;Angus pendant que les autres montaient dans la mienne. Moi j&#39;étais là comme un con à toujours pas comprendre ce qu&#39;il se passait et Vinz m&#39;a filé une adresse où on devait se rendre juste avant de me dire qu&#39;il allait m&#39;expliquer.&lt;/p&gt;
&lt;p&gt;Putain, apparemment j&#39;ai raté l&#39;after du siècle.&lt;/p&gt;
&lt;p&gt;Mais je vais gratter ça là parce que ça mérite de rester dans les annales quelque part.&lt;/p&gt;
&lt;p&gt;Donc ce petit monde a été réveillé vers minuit ou 1 heure parce Jack avait disparu. Après la classique fête dans les loges il serait remonté dans sa suite avec Tammi Lu, sa gonzesse, ils auraient baisé comme des lapins puis il serait sorti de la chambre puis il aurait disparu. C&#39;est là que l&#39;enquête aurait commencé.&lt;/p&gt;
&lt;p&gt;En bref, ils ont cherché Jack partout dans l&#39;hôtel, ils ont vérifié les caméras et enregistrements, ils ont questionné plusieurs personnes du staff et clients de l&#39;hôtel mais rien. Aucune foutue trace de Jack. La seule issue non surveillée par les caméras serait par l&#39;arrière, via la cour de livraison de l&#39;hôtel. Mais le technicien en charge de cette zone était formel, il aurait reçu une alerte si quelqu&#39;un était passé par là. Je sais pas s&#39;ils l&#39;ont pas cru ou quoi mais ils sont sortis dans la cour pour vérifier et ils sont tombés sur un clodo qui leur a dit qu&#39;il avait gaulé un mec et une meuf, avec des masques, se barrer par là et foutre le camp dans la rue. Ils avaient l&#39;air complètement perchés tous les deux mais la description du gars correspondait à celle de Jack.&lt;/p&gt;
&lt;p&gt;Ils ont décidé de refaire le tour du staff de la tournée pour tirer un max d&#39;info et se sont rendu compte que Tinker manquait à l&#39;appel. Ils ont fait ouvrir sa chambre et, surprise, y a une troisième mi-temps qui a lieu là-bas, à base d&#39;alcool et de drogue. En fouillant, ils ont trouvé sur son ordi des recherches de casino du coin et puis ils ont trouvé aussi sa &lt;em&gt;yellow card&lt;/em&gt;, une carte qu&#39;on est censé avoir sur nous si on veut pouvoir sortir malgré le couvre-feu imposé par la MLA, des militaires avec le sens de l&#39;humour par super développé apparemment. Parait que Jack aussi était parti sans sa &lt;em&gt;yellow card&lt;/em&gt; ni sa carte d&#39;abonnement de &lt;em&gt;TraumTeam&lt;/em&gt;. Ça craignait. S&#39;ils leur arrivait une merde ça puait sévèrement du fiac.&lt;/p&gt;
&lt;p&gt;Ils se sont dit alors qu&#39;ils avaient dû prendre un taco. Aussi drogués qu&#39;ils étaient ils auraient pas été assez cons pour trainer dans les rues à pieds. Coup de bol, la plus grosse compagnie de taco de Liverpool, la &lt;em&gt;Green Line&lt;/em&gt;, avait en effet envoyé un taco à une heure correspondante à l&#39;hôtel. Par contre, impossible d&#39;avoir le chauffeur au bout du fil, ils ont dû le faire venir pour qu&#39;il les emmène directement à la même destination.&lt;/p&gt;
&lt;p&gt;Ils sont donc arrivé au &lt;em&gt;Blind Lady&lt;/em&gt;. Un casino, qui sans être super huppé, ne laisse pas entrer n&#39;importe qui habillé n&#39;importe comment. Ils ont fouillé le casino, interrogé les clients et staff mais aucune trace des deux drogués. C&#39;est alors que Ranni a décidé d&#39;aller poser son cul bordé de nouille aux toilettes pour pisser et là elle est tombé sur Tinker qui se planquait dans les chiottes. Manifestement en panique et en pleine redescente elle lui a expliqué qu&#39;elle a trafiqué une machine à sous et que Jack a gagné pour quelque chose comme 120k d&#39;eddies. Sauf qu&#39;ils se sont fait gaulés et ils ont fuit. Elle aux chiottes et lui on ne sait où avec pour 120k de jetons de casino dans le froc.&lt;/p&gt;
&lt;p&gt;Ils ont sorti Tinker discrètement du casino et une fois sur le trottoir ils ont vu la team sécu partir en trombe dans un SUV. Le groupe s&#39;est dit que poursuivre un mec qui a volé 120k d&#39;eddies était très certainement une bonne raison de partir à 5 comme ça en trombe. Alors ils ont chopé un taxi qui, tu me crois tu me crois pas, était encore le même… c&#39;te chatte de l&#39;enfer, et ils ont décidé de suivre le SUV.&lt;/p&gt;
&lt;p&gt;C&#39;est là que c&#39;est vraiment parti en couilles. Oui parce que jusque là ça allait encore. Enfin bref, je finirai cette histoire plus tard, là faut que j&#39;aille chier.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Eurotour vol. 1</title>
    <link href="https://blog.foojin.com/2022/08/30/eurotour-vol-1/" />
    <updated>2022-08-30T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/08/30/eurotour-vol-1/</id>
    <content type="html">&lt;p&gt;&lt;em&gt;DISCLAIMER : Ceci est un compte-rendu d&#39;une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys &amp;quot;Zed&amp;quot; Zedinski, un techie, sur la campagne Eurotour. Tout ceci n&#39;est donc que fiction. Toute ressemblance bla bla bla…&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&quot;entree-du-16-mai-2045&quot;&gt;Entrée du 16 mai 2045&lt;/h2&gt;
&lt;p&gt;Mon charcudoc m&#39;a conseillé de tenir à jour un carnet de bord. Enfin ses mots précis étaient plutôt que je devrais tenir &amp;quot;un journal intime et d&#39;y relater tout ce que je fais&amp;quot;. C&#39;est censé m&#39;aider à gérer ma colère. Mais j&#39;ai une colère d&#39;adulte, pas de gamin de 10 ans alors ce sera un carnet de bord.&lt;/p&gt;
&lt;p&gt;Là on est le 14 mars, on en a enfin fini avec ces plans foireux avec les Tyger claws, Biotechnica et compagnie. Vraiment besoin de vacances. De se poser un peu, fumer des cigares en sirotant un bon whiskey.&lt;/p&gt;
&lt;p&gt;Groot, lui, il connait pas les vacances, il est reparti en mission, en solo, comme le solo qu&#39;il est. Pendant ce temps, je m&#39;occupe doucement comme je peux et je bulle aussi, beaucoup même.&lt;/p&gt;
&lt;p&gt;Philip, notre medic préféré, nous a appelé Vinz et moi, il veut nous proposer un plan, certes, mais un plan vacances et ça ça m&#39;intéresse vraiment.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-17-mai-2045&quot;&gt;Entrée du 17 mai 2045&lt;/h2&gt;
&lt;p&gt;Bonne nouvelle, Philip nous propose de venir avec lui passer quelques vacances en Angleterre. YES !
Mauvaise nouvelle, Philip y va pour un enterrement dans sa famille. (ᵟຶ︵ ᵟຶ)&lt;/p&gt;
&lt;p&gt;On part dans quelques jours, je vais préparer mon sac, moi.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-20-mai-2045&quot;&gt;Entrée du 20 mai 2045&lt;/h2&gt;
&lt;p&gt;Mon choom Vinz a pour une fois des relations qui auront servi à quelque chose. Grâce à elles, j&#39;ai pu amener Lucille avec moi. Il parait que les lois sur les armes en Angleterre sont beaucoup plus sévères qu&#39;à Night City donc même si on a pu amener nos armes, et surtout mon fusil à pompe préféré, faudra la jouer fine.&lt;/p&gt;
&lt;p&gt;Fais gaffe Liverpool, j&#39;arrive !&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-22-mai-2045&quot;&gt;Entréé du 22 mai 2045&lt;/h2&gt;
&lt;p&gt;On est bien arrivé. On loge chez la famille de Philip.
Pendant qu&#39;il gère ses histoires de famille, Vinz et moi on va visiter les meilleures attractions de la ville : ses pubs !
J&#39;espère que ces brits ont de l&#39;alcool de qualité.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-23-mai-2045&quot;&gt;Entrée du 23 mai 2045&lt;/h2&gt;
&lt;p&gt;Putain mais quelle soirée ! Ah ça a fait du bien, ça faisait longtemps que j&#39;avais pas passé une si bonne soirée pour souffler.&lt;/p&gt;
&lt;p&gt;On est allé dans un de ces pubs, je sais plus le nom, et on s&#39;est mis à boire et se marrer avec Vinz.
On faisait un peu tâche par contre. Non pas que les brits avaient une meilleure descente, juste ils y connaissent rien en classe vestimentaire apparemment, on était parmi les plus stylés. Y avait bien un autre groupe plus loin fringué un peu à la Night City aussi, il devait pas être du coin non plus.&lt;/p&gt;
&lt;p&gt;Enfin même s&#39;ils ont pas de style ces brits savent vivre il faut l&#39;avouer.&lt;/p&gt;
&lt;p&gt;La soirée se passe et une bagarre éclate entre deux mecs au niveau du bar pas très loin de nous. Je commence à prendre les paris avec Vinz et le duo de boxeurs s&#39;invite à notre table avec fracas. J&#39;ai à peine eu le temps de sauver ma bouteille.&lt;/p&gt;
&lt;p&gt;Vinz, lui, a préféré sauver sa bouteille pour la fracasser sur la tête du mec qui s&#39;était étalé sur la table. Je comprends pas toujours pourquoi il fait ce qu&#39;il fait… mais toujours est-il qu&#39;un des potes costauds du gars en question a vu ça et s&#39;est ramené pour remettre les idées de Vinz en place. Hahaha il m&#39;aurait demandé je lui aurait dit que c&#39;était vain mais bon. Je l&#39;ai laissé faire. En sirotant mon scotch. Le sourire aux lèvres.&lt;/p&gt;
&lt;p&gt;J&#39;ai dû m&#39;interposer à un moment parce que Vinz avait toujours la technique mais la visée et la force plutôt approximative. C&#39;est pas comme ça qu&#39;il l&#39;aurait mis au tapis le costaud, par contre lui il aurait fini au sol et hors de question que je le ramène en portant son gros cul. Donc je lui ai montré au brit de quel bois se chauffait un techie de NC. Je crois que ça a fait son effet mais on sera jamais sûr parce que c&#39;est à ce moment là que les vigiles sont arrivés pour séparer tout le monde.&lt;/p&gt;
&lt;p&gt;C&#39;est après ça qu&#39;un des mecs de l&#39;autre groupe sappé à la NC est venu nous voir. Il marchait le dos droit et il était propre comme un sou neuf, pas un pli sur ses fringues, rien. Sûrement un ex-militaire.
Il s&#39;approche donc et nous dit direct qu&#39;il aime notre style (je sais pas s&#39;il parlait de nos fringues ou de la baston mais dans un cas comme dans l&#39;autre ça aurait été vrai héhé) et nous demande d&#39;où on vient. Il a l&#39;air enchanté de savoir qu&#39;on vient de NC et là il nous propose un job.
Bon je suis pas enchanté par l&#39;idée de prime abord, je suis en vacances bordel.&lt;/p&gt;
&lt;p&gt;Mais le gars, qui s&#39;est présenté sous le nom de Ace, nous propose de bosser sur la tournée européenne de Jack &lt;em&gt;fucking&lt;/em&gt; Entropy, bordel de merde, cette star de rock de légende sur le retour. Un boulot tranquille de techie pour bibi tout en visitant l&#39;Angleterre, la Belgique, la France, l&#39;Italie, Suède et la République Tchèque en étant payé ET nourri, logé, blanchi. Le rêve ! Bien plus tranquille que tous ces jobs qu&#39;on a fait dernièrement. Au moins là je risquerai pas ma vie et rien que pour ça ça vaut le coup. Entre temps on a rejoint sa table et il nous a présenté son acolyte : un solo du nom d&#39;Ousma, un gars qui a l&#39;air d&#39;avoir de la bouteille dans le métier.&lt;/p&gt;
&lt;p&gt;Bon on a pas dit oui tout de suite, on voulait en parler à Philip d&#39;abord mais on a pris ses coordonnées et on lui a dit qu&#39;on le tiendrait au courant.&lt;/p&gt;
&lt;p&gt;Puis on est parti pas longtemps après parce que tu me crois, tu me crois pas mais les pubs ferment pas longtemps après qu&#39;une foutue cloche sonne là-bas. Va comprendre…&lt;/p&gt;
&lt;p&gt;Bon maintenant que la tête tourne moins, je vais aller me coucher.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Note pour plus tard&lt;/strong&gt; : On peut pas fumer à l&#39;intérieur des foutus bâtiments en Angleterre. Heureusement qu&#39;ils ont du bon alcool pour se rattrapper.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;entree-du-24-mai-2045&quot;&gt;Entrée du 24 mai 2045&lt;/h2&gt;
&lt;p&gt;Bordel, j&#39;ai mal à la tête.&lt;/p&gt;
&lt;p&gt;Bon on a causé avec Philip, il voit pas de soucis pour qu&#39;on fasse cette tournée. Tant mieux parce que je pense que l&#39;aurais faite quand même.&lt;/p&gt;
&lt;p&gt;Du coup avec Vinz on est allé à l&#39;hôtel où crèchent Ace et son équipe. On a rencontré son boss, un certain Jimenez et on a négocié. Avec brio, pour une fois.&lt;/p&gt;
&lt;p&gt;On est retourné chercher nos affaires avec Vinz pour être logé dans le même hôtel, puis on a dû droit à un briefing avec tout le staff de la tournée.
On a recroisé Ousma en plus de Ace. Pas eu les noms des autres connards. Y a juste les chefs qui se sont présentés en fait et on nous a aussi présenté la petite protégée de la copine de Jack, une netrunneuse.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Ranni, une gamine netrunneuse&lt;/li&gt;
&lt;li&gt;Jimenez donc qui est le manager de la tournée&lt;/li&gt;
&lt;li&gt;Catherine Clemens qui est la directrice de marketing&lt;/li&gt;
&lt;li&gt;Ace qui, on l&#39;apprend, est le directeur de la sécurité&lt;/li&gt;
&lt;li&gt;Tinker qui sera sûrement ma boss puisqu&#39;elle est Techie en chef&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;C&#39;est parti ! Les vacances pépouze en Europe tout frais payé, nous voilà !&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>L&#39;alchimie pour les béotiens</title>
    <link href="https://blog.foojin.com/2022/08/29/lalchimie-pour-les-beotiens/" />
    <updated>2022-08-29T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/08/29/lalchimie-pour-les-beotiens/</id>
    <content type="html">&lt;p&gt;Je suis maître de jeu dans une partie de Donjon et Dragons 5ème édition et mes joueurs ont pris des cours d&#39;alchimie dans une école de sorciers, une sorte de Poudlard pour sorciers malfaisants, tout ça dans le but de créer leurs propres potions de soin. J&#39;aurais dû le voir venir…&lt;/p&gt;
&lt;p&gt;En attendant, je me suis retrouvé comme un con parce qu&#39;il n&#39;y a pas de règles officielles pour l&#39;alchimie et je ne peux pas leur dire qu&#39;ils ne pourront pas en préparer. J&#39;ai merdé, donc j&#39;assume.&lt;/p&gt;
&lt;p&gt;Du coup j&#39;ai créé une nouvelle règle pour ça et je l&#39;ai mise en page avec le super outil en ligne &lt;a href=&quot;https://homebrewery.naturalcrit.com/&quot;&gt;The Homebrewery&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Amis rôlistes, consœurs MJ, n&#39;hésitez pas à le télécharger ci-dessous, l&#39;utiliser, le modifier et surtout me faire savoir si vous voyez des erreurs ou avez des idées d&#39;amélioration.&lt;br&gt;
Cette règle n&#39;est clairement pas éprouvée.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://blog.foojin.com/2022/08/29/lalchimie-pour-les-beotiens/L-alchimie-pour-les-beotiens---v1.0.0.pdf&quot; download=&quot;&quot;&gt;Télécharger le PDF &lt;span class=&quot;metadata&quot;&gt;L-alchimie-pour-les-beotiens---v1.0.0.pdf (~2Mo)&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Appareil photo reflex cherche nouveau propriétaire</title>
    <link href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/" />
    <updated>2022-08-22T00:00:00Z</updated>
    <id>https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/</id>
    <content type="html">&lt;p&gt;Je me suis vendu à la cause hybride et je me déleste donc de mon cher reflex adoré et de tout ce qui va avec.&lt;/p&gt;
&lt;h2 id=&quot;canon-eos-7d&quot;&gt;Canon EOS 7D&lt;/h2&gt;
&lt;p&gt;Quelques éraflures sur l&#39;écran d&#39;information mais l&#39;écran LCD et tout le reste de l&#39;appareil est nickel.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/nHoRFUMg7u-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/zoIlTj415L-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/xxTlXs-heh-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OMjOjTYP2k-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/NodS4yxe9g-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;canon-grip-bg-e7&quot;&gt;Canon Grip BG-E7&lt;/h2&gt;
&lt;p&gt;En très bon état, vient avec une batterie supplémentaire Canon LP-E6 et adaptateur pour pile si vous préférez les piles.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/-Q-wMUlsho-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Hz-Opr7hUA-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/0fO_7dEblL-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/WPxKH8KLIb-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H-NWh1oF9d-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/uEjeXlTWxN-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;flash-canon-430ex-ii-speedlite&quot;&gt;Flash Canon 430EX II Speedlite&lt;/h2&gt;
&lt;p&gt;Comme neuf, je ne l&#39;ai quasiment jamais utilisé pour être honnête. Je préfère travailler avec la lumière naturel en général.&lt;/p&gt;
&lt;p&gt;Il vient avec son pied amovible et sa sacoche de transport.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/IJwGt1nzoh-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/cciH-3B0Vu-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/OWoNCdroSe-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ADAbJiH3wb-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tOJbjPK94L-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;objectif-canon-ef-50mm-f-1-8&quot;&gt;Objectif Canon EF 50mm f/1.8&lt;/h2&gt;
&lt;p&gt;Mon petit préféré. Parfait pour les portraits avec sa grande ouverture.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/AfLWdrRc1C-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/v2XOSAiHf7-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/pTWUKD8GVP-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;objectif-canon-ef-s-10-22mm-f-3-5-4-5-usm&quot;&gt;Objectif Canon EF-S 10-22mm f/3.5-4.5 USM&lt;/h2&gt;
&lt;p&gt;Un peu plus usé que les autres car c&#39;est déjà une deuxième main. Mais c&#39;est un bon grand angle avec une ouverture décente. Il vient avec un filtre UV Hoya mais sans capuchon (je l&#39;ai acheté sans déjà à l&#39;époque).&lt;/p&gt;
&lt;p&gt;Bien que le plus usé, il ne s&#39;agit là que d&#39;usure superficielle comme des annotations légèrement effacées et légères éraflures sur la peinture sinon il fonctionne toujours très bien.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/njMa9XFWRi-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZAdGnI0M7m-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/SLD8EOin9R-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDu5ofy9TF-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Us6cNXTbub-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;objectif-canon-ef-28-80mm-f-3-5-5-6&quot;&gt;Objectif Canon EF 28-80mm f/3.5-5.6&lt;/h2&gt;
&lt;p&gt;Objectif somme toute standard mais très correct pour un zoom/dézoom léger.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6QF2nd7Gwu-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Wgc9fVH3ut-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/PnyAWBK-Nz-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;objectif-canon-ef-s-55-250mm-f-4-5-6-is&quot;&gt;Objectif Canon EF-S 55-250mm f/4-5.6 IS&lt;/h2&gt;
&lt;p&gt;Bon objectif avec un très bon zoom de départ et stabilisation d&#39;image s&#39;il vous plait. Parfait pour jouer les paparazzis d&#39;animaux en restant à distance et garantir une image assez nette.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/F73KgHnbRO-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/5DtXKFym_W-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/tTlx7IEziJ-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/2vuqVq1Qn3-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;objectif-canon-ef-s-18-55mm-f-3-5-5-6-ii&quot;&gt;Objectif Canon EF-S 18-55mm f/3.5-5.6 II&lt;/h2&gt;
&lt;p&gt;Objectif &amp;quot;de base&amp;quot; qui est vendu avec l&#39;appareil d&#39;origine.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/UrTbWHpZ3Z-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/ZDmRuSTA44-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Q4UJ1qXYaP-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;objectif-canon-ef-75-300mm-f-4-5-6-iii&quot;&gt;Objectif Canon EF 75-300mm f/4-5.6 III&lt;/h2&gt;
&lt;p&gt;Zoom plus puisssant que le précédent mais sans stabilisateur par contre.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/iogZXhESJ--2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/db9O3hUDRd-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/H4RMPDEyuT-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/1EJeNt_kwj-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;et-les-petits-accessoires-qui-vont-avec&quot;&gt;Et les petits accessoires qui vont avec…&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Lanière&lt;/li&gt;
&lt;li&gt;Cartes mémoires (1Go, 4Go, 8Go)&lt;/li&gt;
&lt;li&gt;Télécommande pour déclenchement à distance (je garantie pas que le pile soit de toute jeunesse par contre mais elle se change facilement)&lt;/li&gt;
&lt;li&gt;Sacoche DeviantArt pour ranger tout ce beau monde&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-2000.avif 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-2000.webp 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-400.jpeg&quot; alt=&quot;&quot; width=&quot;2000&quot; height=&quot;1500&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/FsKckr7531-2000.jpeg 2000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-1500.avif 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-1500.webp 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-400.jpeg&quot; alt=&quot;&quot; width=&quot;1500&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/Ib7okRu_7J-1500.jpeg 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-1500.avif 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-1500.webp 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-400.jpeg&quot; alt=&quot;&quot; width=&quot;1500&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/A6T0auuFbo-1500.jpeg 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-400.avif 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-812.avif 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-1400.avif 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-1500.avif 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-400.webp 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-812.webp 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-1400.webp 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-1500.webp 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-400.jpeg&quot; alt=&quot;&quot; width=&quot;1500&quot; height=&quot;2000&quot; srcset=&quot;https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-400.jpeg 400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-812.jpeg 812w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-1400.jpeg 1400w, https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/6kMML8CE6x-1500.jpeg 1500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;ok-et-combien&quot;&gt;Ok et combien ?&lt;/h2&gt;
&lt;p&gt;Tout ceci côté à l&#39;argus, en ajustant un peu ici et là et en offrant les accessoires ci-dessus on arrive à 956€ que je vais arrondir à 900€.&lt;/p&gt;
&lt;p&gt;Si vous êtes intéressé, n&#39;hésitez pas à me contacter sur &lt;a href=&quot;https://twitter.com/GoOz&quot;&gt;Twitter&lt;/a&gt; ou par mail &lt;a href=&quot;mailto:shiny.beach9281@fastmail.com&quot;&gt;shiny.beach9281@fastmail.com&lt;/a&gt; (c&#39;est un mail temporaire alors pas la peine de l&#39;enregistrer.)&lt;/p&gt;
&lt;p&gt;C&#39;est tout pour moi. Merci.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Sobre.</title>
    <link href="https://blog.foojin.com/2021/12/08/sobre/" />
    <updated>2021-12-08T00:00:00Z</updated>
    <id>https://blog.foojin.com/2021/12/08/sobre/</id>
    <content type="html">&lt;p&gt;C&#39;est fou ce qu&#39;on peut amasser en une vie… et je ne suis même pas encore &amp;quot;vieux&amp;quot;. Pourtant je vois chez moi dès que je tourne la tête, ici et là, des objets plus ou moins utiles. M&#39;en vient alors les questions de pourquoi j&#39;amasse et pourquoi je ne me débarrasse pas de certains de ces objets.&lt;/p&gt;
&lt;p&gt;Il y a quelques années je me suis débarrassé déjà de mes CDs et DVDs, ne gardant que ceux qui avait une valeur sentimentale. Aujourd&#39;hui je les vois dans une case de mon bureau et je me rends compte que je n&#39;ai ni écouté, ni regardé aucun d&#39;entre eux depuis le grand ménage. Et ça doit faire 5 ans maintenant.&lt;br&gt;
D&#39;aucun pourrait conclure qu&#39;il est temps de dire au revoir et s&#39;en débarrasser mais je ne sais pas si je suis prêt encore. Le constat est là toutefois : je garde par nostalgie.&lt;br&gt;
Ma nostalgie prend littéralement de la place dans ma vie, que ce soit de manière abstraite dans ma tête ou physiquement sur une étagère.&lt;/p&gt;
&lt;p&gt;Ça me laisse pensif.&lt;/p&gt;
&lt;p&gt;Puis je vois ma collection de BD et autres comics. J&#39;ai claqué une somme inavouable dans cette collection de plus de 600 albums. Je ne relirai très probablement aucun d&#39;entre eux ou alors très peu. Et pourtant je garde mais je pense sérieusement à me débarrasser d&#39;un gros morceau ne gardant que ceux qui m&#39;ont particulièrement plu. Je ne suis toutefois pas dupe, je sais que ça finira comme ces foutus CDs et DVDs… de la pure nostalgie.&lt;/p&gt;
&lt;p&gt;Ça me laisse pensif.&lt;/p&gt;
&lt;p&gt;Est-ce sain de consommer des œuvres comme ça et les laisser ensuite prendre la poussière dans un coin ? Quel est donc le but ? Tire-je donc une certaine satisfaction de tout ça ? Je n&#39;en suis même pas certain.&lt;/p&gt;
&lt;p&gt;Ça me laisse pensif.&lt;/p&gt;
&lt;p&gt;Mmmh 🤔&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>La grande migration (ou presque)</title>
    <link href="https://blog.foojin.com/2021/02/01/la-grande-migration/" />
    <updated>2021-02-01T00:00:00Z</updated>
    <id>https://blog.foojin.com/2021/02/01/la-grande-migration/</id>
    <content type="html">&lt;p&gt;Cela fait déjà quelques années que j&#39;ai commencé à &amp;quot;dégoogliser&amp;quot; mon internet afin de garder mes données perso pour ma tronche. J&#39;ai bien réduit ma relation avec Google mais il me restait à restreindre ma relation avec Marko Zuckerberg et son mastodonte de Facebook.&lt;br&gt;
Je pense qu&#39;il est temps de passer la seconde.&lt;/p&gt;
&lt;h2 id=&quot;resume-des-episodes-precedents&quot;&gt;Résumé des épisodes précédents&lt;/h2&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:56%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/tQcCMlkyvRL0TsPOdt&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;p&gt;Je me suis séparé de &lt;strong&gt;GMail&lt;/strong&gt; il y a donc quelques années. Je suis passé chez &lt;strong&gt;FastMail&lt;/strong&gt; et j&#39;en suis très content. Il est certain que ce n&#39;est pas le fournisseur de mail le plus &lt;em&gt;secure&lt;/em&gt; (&lt;strong&gt;ProtonMail&lt;/strong&gt; si tu nous entends) mais je trouve qu&#39;il fait tout de même très bien son job et ne fait rien avec mes données, lui.&lt;/p&gt;
&lt;p&gt;Pour mes flux RSS, j&#39;avais déjà dû me séparer de &lt;strong&gt;Google Reader&lt;/strong&gt; parce qu&#39;ils l&#39;avaient fermé d&#39;eux-même. Du coup j&#39;étais passé par &lt;strong&gt;Feedly&lt;/strong&gt; et ensuite juste &lt;strong&gt;Reeder&lt;/strong&gt; comme lecteur avec une synchro des flux via iCloud (c&#39;est pas optimal mais j&#39;ai tout de même un peu plus confiance en Apple pour pas trifouiller mes données).&lt;/p&gt;
&lt;p&gt;Pour la navigation sur internet, j&#39;ai toujours été un fervent défenseur de Firefox et je n&#39;ai jamais utilisé Chrome, si ce n&#39;est pour le travail à des fins de tests, donc là on change rien.&lt;/p&gt;
&lt;p&gt;Pour la recherche internet c&#39;était plus difficile. Il faut dire ce qui est, &lt;strong&gt;Google&lt;/strong&gt; est bon à ce petit jeu. J&#39;ai longtemps essayé &lt;strong&gt;DuckDuckGo&lt;/strong&gt; et &lt;strong&gt;Qwant&lt;/strong&gt; mais j&#39;ai été un peu déçu. Alors bon j&#39;ai fait le choix de rester sur &lt;strong&gt;Google&lt;/strong&gt; MAIS sans me logger sur un compte et en utilisant un petit plugin pour Firefox appelé &lt;a href=&quot;https://addons.mozilla.org/fr/firefox/addon/searchonymous/&quot;&gt;Searchonymous&lt;/a&gt; qui s&#39;assure que toute recherche faite reste anonyme.&lt;/p&gt;
&lt;p&gt;Le seul qui résiste est &lt;strong&gt;Youtube&lt;/strong&gt;… Bon les alternatives n&#39;arrivent pas à la cheville de &lt;strong&gt;Youtube&lt;/strong&gt; en terme de contenu donc j&#39;y reste. Pour le moment en tout cas.&lt;/p&gt;
&lt;p&gt;Le résultat n&#39;est pas parfait mais c&#39;est déjà pas mal.&lt;/p&gt;
&lt;h2 id=&quot;closing-the-facebook&quot;&gt;Closing the Facebook&lt;/h2&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:81%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/3oz8xsNvoV8gmrBPPi&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;p&gt;Je n&#39;ai jamais été un grand consommateur de Facebook pour être honnête (enfin si à ses tous débuts mais on était tous les deux jeunes et insouciants à cette époque) donc on pourrait croire que c&#39;est facile de s&#39;en débarrasser… et bien pas tellement.&lt;/p&gt;
&lt;p&gt;Je ne suis pas très doué pour garder contact avec des proches que je ne vois quasi jamais et Facebook était un bon moyen de garder ce &amp;quot;contact&amp;quot;. Sauf que je ne poste quasi jamais rien, je ne commente quasi jamais (sauf pour faire une bonne blague), je ne discute avec personne… en gros je n&#39;y fais rien… je suis une sorte de voyeur du web quoi.&lt;/p&gt;
&lt;p&gt;De plus, j&#39;ai pris conscience que la vie est ce qu&#39;elle est et qu&#39;il est normal qu&#39;elle nous sépare doucement les uns des autres, qu&#39;elle nous divise graduellement en opinion et choix de vie. J&#39;ai certains potes d&#39;antan qui s&#39;éloignent trop idéologiquement de ce que je suis aujourd&#39;hui et c&#39;est pas tous les jours facile à vivre. Ça dégrade l&#39;image très certainement fantasmée que j&#39;avais d&#39;eux. Parfois l&#39;ignorance c&#39;est bien en fait. Je pense que je préfère ne plus avoir de nouvelle que ce genre de nouvelle.&lt;/p&gt;
&lt;p&gt;En bref, Facebook ne m&#39;apporte rien de bon dans ma vie, alors autant lui dire au revoir.&lt;/p&gt;
&lt;p&gt;Mais par quoi le remplacer ? Et plus important encore, faut-il le remplacer ?&lt;/p&gt;
&lt;h2 id=&quot;whatsapp-bro&quot;&gt;Whatsapp, bro?&lt;/h2&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:53%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/kigKjAJryWTZK&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;p&gt;Vous devriez le savoir déjà mais Whatsapp, qui appartient à Zucky, va piocher dans nos métadonnées en plus de bientôt y rajouter des pubs.&lt;br&gt;
Il était temps de partir donc. J&#39;ai préféré, pour plein de raisons que je ne discuterai pas là, Signal à Telegram.
Bizarrement, étant donné que Signal est une très bonne alternative, c&#39;est passé tout seul.&lt;/p&gt;
&lt;h2 id=&quot;instagram-je-t-aime-moi-non-plus&quot;&gt;Instagram, je t&#39;aime moi non plus&lt;/h2&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:49%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/mWO9gCz9v4Ak3cJJMO&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;p&gt;Tout comme pour &lt;strong&gt;Youtube&lt;/strong&gt;, je suis emmerdé avec &lt;strong&gt;Instagram&lt;/strong&gt;. Je trouve pas d&#39;alternative satisfaisante. C&#39;est pas tant pour poster mes photos et la visibilité que ça me procure(rait), honnêtement je m&#39;en fous un peu, mais plus pour suivre le travail de mes photographes préférés. J&#39;ai été aussi un utilisateur assidu de 500px pendant une période aussi mais mon avis sur eux est mitigé depuis le rachat.&lt;/p&gt;
&lt;p&gt;Bref pour suivre les travaux de photographes, j&#39;ai pas trouvé le remplaçant idéal…Si vous avez des choses à partager, ne vous retenez pas.&lt;/p&gt;
&lt;p&gt;Je ne sais pas combien de temps je vais y rester mais j&#39;étudie la question très sérieusement.&lt;/p&gt;
&lt;h2 id=&quot;twitter-le-peche-mignon&quot;&gt;Twitter, le péché mignon&lt;/h2&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:100%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/THrYOidLs0z9WCOvGi&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;p&gt;Je crois que le plus difficile à quitter serait &lt;strong&gt;Twitter&lt;/strong&gt;. C&#39;est de loin le réseau social que j&#39;utilise le plus et, j&#39;ai beau avoir aussi un compte &lt;strong&gt;Mastodon&lt;/strong&gt;, j&#39;ai toujours du mal à décrocher l&#39;oiseau bleu. Vil salopard qui joue avec mes sentiments.&lt;/p&gt;
&lt;h2 id=&quot;au-final&quot;&gt;Au final&lt;/h2&gt;
&lt;p&gt;Au final on y est pas. Je dépends encore de certains. Mais je me soigne.&lt;/p&gt;
&lt;p&gt;C&#39;est pas toujours facile de trouver l&#39;outil de remplacement parfait et quand on en trouve un c&#39;est pas toujours facile d&#39;y rameuter les potos.&lt;/p&gt;
&lt;p&gt;Un jour peut être j&#39;arriverai à faire une migration 100% privacy, mais c&#39;est pas pour aujourd&#39;hui.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Orange, ô désespoir</title>
    <link href="https://blog.foojin.com/2020/11/14/orange-o-desespoir/" />
    <updated>2020-11-14T00:00:00Z</updated>
    <id>https://blog.foojin.com/2020/11/14/orange-o-desespoir/</id>
    <content type="html">&lt;p&gt;Cela faisait presque 3 ans que j&#39;avais déménagé dans une contrée charmante et calme mais sans fibre internet, seulement dotée d&#39;une faiblarde ADSL fatiguée et surexploitée, ce qui rendait difficiles les conditions pour télétravailler.&lt;br&gt;
Mais ces jours sombres sont révolus car j&#39;ai la fibre désormais… enfin ça n&#39;a pas été une sinécure non plus pour y arriver…&lt;/p&gt;
&lt;p&gt;**NB: **Je vais parler d&#39;Orange ici car c&#39;est l&#39;opérateur que j&#39;ai choisi mais je ne pourrais dire avec certitude que l&#39;herbe aurait été plus verte chez un concurrent. Ce billet n&#39;est pas un pamphlet contre la société au fruit amère, plutôt sur les processus rigide et le manque de souplesse qu&#39;on peut trouver parfois chez certaines entreprises.&lt;/p&gt;
&lt;h2 id=&quot;les-premices-d-un-mood-chancelant&quot;&gt;Les prémices d&#39;un mood chancelant&lt;/h2&gt;
&lt;p&gt;Tout d&#39;abord je ne m&#39;attarderai pas plus que ça sur l&#39;arrivée leeeeeennnnntttttteee de l&#39;installation de l&#39;infrastructure mais je vous le signale pour que vous puissiez imaginer l&#39;état d&#39;esprit ambiant:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Il y a 2 ans j&#39;entendais &amp;quot;La fibre arrive chez nous ! 🎉&amp;quot;&lt;/li&gt;
&lt;li&gt;Il y a 1 an j&#39;entendais &amp;quot;La région est en train d&#39;installer la fibre dans notre ville et sera disponible pour tout le monde très bientôt ! 🎉&amp;quot;&lt;/li&gt;
&lt;li&gt;Il y a 6 mois j&#39;entendais &amp;quot;Ça y est la fibre est dispo vous pouvez y aller… sauf quelques rues où certains raccordements restent à faire. 😐&amp;quot; Vous vous doutez bien que c&#39;était mon cas.&lt;/li&gt;
&lt;li&gt;Il y a 1 mois j&#39;entendais &amp;quot;C&#39;est bon vous êtes raccordable ! 🎉&amp;quot;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Il y a donc 1 mois, après un rapide &lt;em&gt;benchmark&lt;/em&gt; sur les internets aidé par les copains du web, je faisais le choix d&#39;Orange comme fournisseur et c&#39;est là que tout a dérapé…&lt;/p&gt;
&lt;h2 id=&quot;la-promesse-de-jours-meilleurs&quot;&gt;La promesse de jours meilleurs&lt;/h2&gt;
&lt;p&gt;L&#39;inscription à la fibre d&#39;Orange se passe sans heurt. La date d&#39;intervention du technicien est posée. J&#39;ai récupéré ma Livebox dans un relais colis. Plus que deux petites semaines d&#39;attente. Je trépigne. Comme jamais.&lt;/p&gt;
&lt;p&gt;Le jour-j, monsieur le technicien arrive, prépare son matériel, fait son repérage, vérifie s&#39;il pourra passer par les gaines prévues à cet effet ou s&#39;il faudra percer, etc
Tout est bon… &lt;strong&gt;sauf&lt;/strong&gt;… que son ordre de mission lui dit qu&#39;il doit opérer sur le bâtiment B et j&#39;habite au bâtiment J.&lt;br&gt;
Ainsi, protocole oblige, c&#39;est avec ton désolé qu&#39;il m&#39;annonce qu&#39;il ne pourra pas installer la fibre chez moi à cause de ce &lt;em&gt;petit&lt;/em&gt; problème administratif.&lt;/p&gt;
&lt;p&gt;Je l&#39;ai vraiment mauvaise. Genre &lt;em&gt;over 9000&lt;/em&gt;. Mais soit, j&#39;ai attendu 3 ans, je peux attendre 2 semaines de plus pour avoir un nouveau rendez-vous. Mais avant tout ça, il faut que j&#39;appelle le support pour corriger cette erreur administrative.&lt;/p&gt;
&lt;h2 id=&quot;l-enfer-c-est-le-support-telephonique-des-autres&quot;&gt;L&#39;enfer c&#39;est le support téléphonique des autres&lt;/h2&gt;
&lt;p&gt;J&#39;appelle donc le support Orange qui n&#39;a pas vraiment l&#39;air de comprendre ce qu&#39;il s&#39;est passé mais me rassure en me disant qu&#39;ils font la correction et qu&#39;il suffit de joindre le service commercial pour poser un nouveau rendez-vous technique. La personne au bout du fil tente de me rediriger vers le fameux service commercial… pendant 15 min… en vain, suite à quoi elle m&#39;annonce qu&#39;il vaudrait mieux annuler la première commande et en créer une toute nouvelle en ligne.&lt;/p&gt;
&lt;p&gt;Je suis dubitatif, plein de scepticisme comme jamais, mais j&#39;accepte quand elle me garantie qu&#39;elle suivra mon dossier personnellement (&lt;em&gt;spoiler alert&lt;/em&gt;: elle le suivra, en effet, mais a posteriori, pas a priori).&lt;br&gt;
Je lui expose toutefois un doute, qui aura son importance, sur le fait que j&#39;ai déjà réceptionné la box de la première inscription et que, selon toute logique, je devrais en recevoir une nouvelle qui ne servira donc à rien.
&lt;em&gt;Pas de problème&lt;/em&gt; me dit-elle, vous n&#39;aurez qu&#39;à la récupérer et la rendre dans une boutique Orange. Ça me casse un peu les valseuses mais si c&#39;est le prix à payer pour avoir rapidement la fibre, alors faisons ça.&lt;br&gt;
À partir de ce moment-là, elle m&#39;annule ma première inscription et de mon côté j&#39;en fais une nouvelle en ligne.&lt;/p&gt;
&lt;p&gt;Pas fou que je suis, une fois l&#39;inscription validée, je rappelle le support quelques jours plus tard, tu sais, parce que je vois pas pourquoi une nouvelle inscription aurait changé quoique ce soit quant à mon &lt;em&gt;problème&lt;/em&gt; administratif, et comme j&#39;ai bien fait.&lt;/p&gt;
&lt;p&gt;C&#39;est toujours la mauvaise adresse… je fais donc le changement, à nouveau.&lt;/p&gt;
&lt;p&gt;Je reçois quelques jours plus tard des courriers d&#39;Orange toujours à la mauvaise adresse. Je rappelle alors le support qui me confirme que dans leur système c&#39;est toujours la mauvaise adresse qui est renseignée mais il me rassure me disant qu&#39;ils vont directement notifier le prestataire pour que l&#39;ordre de mission soit le bon.
Ouf, je suis sauvé.&lt;/p&gt;
&lt;p&gt;Quant à la nouvelle box, à cause de tonton Covid-19, le colis n&#39;est pas allé au relais colis prévu mais un autre bien plus loin et je n&#39;avais que quelques jours pour aller le récupérer ce que je n&#39;ai donc jamais fait. Le colis est reparti à l&#39;expéditeur comme il est venu. Mais je m&#39;en fous j&#39;en ai déjà une et on m&#39;a dit que je pouvais garder l&#39;une ou l&#39;autre, que c&#39;était pareil.&lt;/p&gt;
&lt;h2 id=&quot;l-expectative-d-une-inquietude&quot;&gt;L&#39;expectative d&#39;une inquiétude&lt;/h2&gt;
&lt;p&gt;Tout à l&#39;air ok mais j&#39;arrive pas à être rassuré quand vient le nouveau technicien pour le second rendez-vous. J&#39;ai peur d&#39;une nouvelle mauvaise surprise.&lt;br&gt;
Et effectivement… il n&#39;a pas la bonne référence de boitier fibre dans son ordre de mission.&lt;/p&gt;
&lt;p&gt;Toutefois il est très professionnel, plein de ressources et, à grand coup de téléphone, il me règle tout, fait les branchements qu&#39;il faut où il faut, me branche tout et, ô miracle, j&#39;ai enfin la fibre. Je suis comme un gamin devant l&#39;emballage d&#39;un gros jouet. Je suis SUPAYR CONTENT !!!&lt;/p&gt;
&lt;p&gt;Jusqu&#39;ici tout va bien, je passe mon premier jour de boulot connecté sur un internet des plus rapides et je suis SUPAYR CONTENT !!!&lt;/p&gt;
&lt;h2 id=&quot;quand-la-procedure-te-rattrape&quot;&gt;Quand la procédure te rattrape&lt;/h2&gt;
&lt;p&gt;J&#39;étais tellement SUPAYR CONTENT que je l&#39;ai pas vu venir s&#39;immiscer dans mon dos, le retour de la procédure, la procédure contre-attaque, &lt;em&gt;the dark side of the procédure…&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;30h après avoir eu la fibre activée je la perdais à 20h. Pouf, comme ça, sans crier gare, sans raison apparente.&lt;br&gt;
J&#39;étais SUPAYR BOUGON !!&lt;br&gt;
Trop tard pour le support, on appellera le lendemain.&lt;/p&gt;
&lt;p&gt;Le lendemain matin je reçois un mail d&#39;Orange me demandant de… rendre la box…&lt;/p&gt;
&lt;p&gt;J&#39;appelle donc, plein d&#39;aigreur, le support à nouveau avec qui j&#39;apprends plusieurs choses :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;L&#39;ancienne inscription a bien été clôturée en date… de la veille. 🤔&lt;/li&gt;
&lt;li&gt;Ma nouvelle inscription est bien toujours valide et infrastructurellement parlant tout va bien. 🤷‍♂️&lt;/li&gt;
&lt;li&gt;La box qu&#39;on utilise a bien une incidence ! Chaque box envoyée est liée par un numéro de série à un contrat… et quand un contrat est clôturé, la box qui y est liée est désactivée 😲&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Avec l&#39;aide du service technique, on a pu procéder à la mise à jour des informations de mon contrat, du numéro de série de la box, etc. Et tout a refonctionné. 🎉&lt;/p&gt;
&lt;p&gt;Normalement, c&#39;est fini. &lt;em&gt;Normalement&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;On m&#39;a dit d&#39;ignorer le mail de demande de renvoi du matériel du coup, mais on m&#39;a dit beaucoup de choses ces dernière semaines… alors je me méfie. 🤨&lt;/p&gt;
&lt;p&gt;Morale de l&#39;histoire: Les ascenseurs émotionnels c&#39;est nul. À éviter.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Les choses changent et se ressemblent</title>
    <link href="https://blog.foojin.com/2019/09/12/les-choses-changent-et-se-ressemblent/" />
    <updated>2019-09-12T00:00:00Z</updated>
    <id>https://blog.foojin.com/2019/09/12/les-choses-changent-et-se-ressemblent/</id>
    <content type="html">&lt;p&gt;Quand je suis entré dans le métier, il y a plus de 10 ans, il y avait les dev backend qui s&#39;occupaient de tout ce qui se passait sur le serveur, PHP et MySQL par exemple et les intégrateurs, comme moi, de tout ce qui se passait côté navigateur c&#39;est à dire HTML et CSS principalement. Le JS servait alors peu mais quand les jQuery et autres Mootools ont explosé on s&#39;y est mis aussi.&lt;/p&gt;
&lt;p&gt;Et puis le JS a évolué, beaucoup évolué pour prendre la place qu&#39;il prend aujourd&#39;hui.&lt;/p&gt;
&lt;h2 id=&quot;frontend-backend&quot;&gt;Frontend ? Backend ?&lt;/h2&gt;
&lt;p&gt;Mais qu&#39;en est-il vraiment aujourd&#39;hui ? Avec l&#39;effervescence des Single Page Applications on fait maintenant tout ou presque en JS mais on est allé nettement plus loin que ce que l&#39;on faisait dans le temps avec jQuery.&lt;/p&gt;
&lt;p&gt;On est allé tellement loin qu&#39;on a remplacé la majorité de ce que faisait les langages serveurs mais avec un langage interprété par le navigateur.&lt;/p&gt;
&lt;p&gt;Définir ce qui fait quoi et qui est quoi devient alors bien compliqué quand on se rend compte qu&#39;on utilise désormais une technologie frontend pour faire un job originellement backend. Qu&#39;est-ce qui détermine ce qui est frontend ou ce qui est backend ? Le langage utilisé ? Le métier ? Je ne suis pas sûr de pouvoir répondre à cette question.&lt;/p&gt;
&lt;p&gt;Mais quelle est donc la place de l&#39;intégrateur dans ce nouveau paradigme ? À l&#39;époque je faisais bien un peu de PHP mais c&#39;était principalement pour le templating, pour créer le DOM des pages mais je ne touchais rien au code métier, aux accès et traitement de la base de données, etc.&lt;/p&gt;
&lt;p&gt;Pour moi c&#39;est ça le frontend, créer et maintenir le DOM, sa mise en page et avec un peu d&#39;interactivité, c&#39;est tout.&lt;/p&gt;
&lt;p&gt;C&#39;est déveloper l&#39;interface utilisateur, pas ce qui y est inséré.&lt;/p&gt;
&lt;h2 id=&quot;aujourd-hui&quot;&gt;Aujourd&#39;hui…&lt;/h2&gt;
&lt;p&gt;La plupart des offres de poste pour développeur frontend que je vois passer concernent plutôt des développeurs capable de monter une complète architecture d&#39;application, monter une API complexe, créer une bibliothèque de fonction de traitement de données, etc.&lt;/p&gt;
&lt;p&gt;Et c&#39;est clairement ce que faisait les dev backend à l&#39;époque.&lt;/p&gt;
&lt;p&gt;J&#39;en viens donc à me dire que les dev frontend d&#39;aujourd&#39;hui sont les nouveaux dev backend d&#39;hier. Et moi, mon métier c&#39;est faire ce qui se voit dans le navigateur et pas ce qu&#39;il y a sous le capot. C&#39;est pourquoi j&#39;ai décidé de me définir comme UI Developer puisque c&#39;est bien le boulot que je fais en définitif.&lt;/p&gt;
&lt;p&gt;Sauf que… des offres pour UI Developer ou assimilé, ça court pas les rues. De facto, comme les entreprises cherchent des développeurs JS, qui est une technologie frontend, elles &amp;quot;pensent&amp;quot; que ces même développeurs en savent tout autant sur les autres technologies frontend, comme le HTML et le CSS. Mais, si je doute pas un seul instant qu&#39;ils en connaissent les rudiments, tout comme les anciens dev backend d&#39;ailleurs, la plupart du temps ils sont loin d&#39;en être experts. Et je ne les blâme pas. Ces métiers n&#39;ont absolument rien à voir.&lt;/p&gt;
&lt;p&gt;Du coup, on fait quoi maintenant ? Qu&#39;on ne me fasse pas croire que dès qu&#39;on développe une SPA on a plus besoin de spécialistes du HTML et CSS !&lt;/p&gt;
&lt;p&gt;Laissez les experts faire leur travail… et donnez-moi du travail dans ce sens ! :)&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Je suis un parasite</title>
    <link href="https://blog.foojin.com/2019/07/12/il-parait-que-je-suis-un-parasite/" />
    <updated>2019-07-12T00:00:00Z</updated>
    <id>https://blog.foojin.com/2019/07/12/il-parait-que-je-suis-un-parasite/</id>
    <content type="html">&lt;p&gt;Ça fait un peu plus de 10 ans que je suis entré dans la &amp;quot;vie active&amp;quot;, non-stop depuis 2007 en enchaînant chaque nouveau poste , et là, d&#39;un coup sans vraiment prévenir, je me retrouve donc au &lt;strong&gt;chômage&lt;/strong&gt; en pleine période estivale alors… comment dire… vu que le recrutement est un peu désert à ce moment précis, ça va pas être une période cool.&lt;/p&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:68%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/a6zGGyjGKq7GE&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;p&gt;Je ne sais pas avec exactitude d&#39;où ça me vient mais cette situation me laisse comme un mauvais arrière goût dans la bouche…&lt;br&gt;
Ça ne me plait que très modérément. Pourtant j&#39;aurais le droit aux assedic, donc je devrais pas trop être dans la mouise financièrement parlant. Pourtant, quand je me pose 5 minutes pour y réfléchir, ça arrive à un tas de gens très bien de devenir chômeur. Pourtant je sais que je suis un privilégié, mon secteur recrute plutôt facilement et même plutôt à outrance de manière générale, donc je ne m&#39;imagine pas rester chômeur très longtemps.&lt;/p&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:56%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/l4hmWKVDDUpiq355K&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;p&gt;Mais d&#39;où me vient donc ce sentiment de dégoût pour ma situation ?&lt;/p&gt;
&lt;p&gt;Il y a sûrement un peu du fait que clairement, quand on travaille dans le web, on trouve plutôt facilement du travail sans même avoir à traverser la route et que le fait de n&#39;avoir rien trouvé pour le moment me laisse un sentiment d&#39;échec, comme si je le devais à tous ceux qui galèrent vraiment à trouver un job stable.&lt;br&gt;
Alors oui, la période estivale est plutôt calme en matière de recrutement et oui je recherche quelque chose d&#39;assez précis mais cela n&#39;empêche pas que je me sens un peu mal.&lt;/p&gt;
&lt;p&gt;Et puis je me dis aussi qu&#39;on entend tellement de mal des chômeurs dans les médias, et ce à injuste titre, à les considérer comme des parasites fainéants qu&#39;ils ont réussi à me faire sentir coupable ces cons…&lt;br&gt;
Je ne suis même pas au chômage depuis plus de 24h et je me sens déjà comme la merde qu&#39;on nous décrit partout.&lt;/p&gt;
&lt;p&gt;Bon je relativise quand même après coup, je &lt;strong&gt;sais&lt;/strong&gt; qu&#39;il n&#39;y a absolument rien de honteux à perdre son emploi, que vu l&#39;état du marché du travail actuel il serait bien malvenu de reprocher quoique ce soit aux chômeurs de longue comme courte date.&lt;br&gt;
Mais que voulez-vous ? Le matraquage médiatique a eu, au moins pendant un temps, raison de moi.&lt;/p&gt;
&lt;p&gt;Bref, je suis un sale parasite fainéant qui vit aux crochets de la société mais je me soigne.&lt;/p&gt;
&lt;div style=&quot;width:100%;height:0;padding-bottom:56%;position:relative;&quot;&gt;&lt;iframe src=&quot;https://giphy.com/embed/xEGqih6o0meyY&quot; width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;position:absolute&quot; frameBorder=&quot;0&quot; class=&quot;giphy-embed&quot; allowFullScreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;
</content>
  </entry>
  <entry>
    <title>Engagez-moi, rengagez-moi qu&#39;ils disaient</title>
    <link href="https://blog.foojin.com/2019/05/24/engagez-moi/" />
    <updated>2019-05-24T00:00:00Z</updated>
    <id>https://blog.foojin.com/2019/05/24/engagez-moi/</id>
    <content type="html">&lt;p&gt;Le dernier billet en date de ce blog fêtait mes deux ans chez Cozy. Je n&#39;en ferai pas trois. Ça a été une aventure mémorable et malgré les aléas de la vie d&#39;une startup j&#39;en garderai un très bon souvenir.&lt;/p&gt;
&lt;p&gt;Toujours est-il que je suis donc disponible pour un nouveau job.&lt;/p&gt;
&lt;h2 id=&quot;qu-est-ce-que-je-sais-faire&quot;&gt;Qu&#39;est ce que je sais faire ?&lt;/h2&gt;
&lt;p&gt;De l&#39;expertise dans le HTML et le CSS qualitatif principalement, de l&#39;Accessibilité et du JS aussi dans une, un peu, moindre mesure.&lt;br&gt;
J&#39;ai aussi de l&#39;expérience, pour du contexte backend, dans le PHP, Rails, .Net ou même Node.&lt;br&gt;
Question Framework JavaScript, j&#39;ai surtout fait du (p)React et du Backbone mais j&#39;ai effleuré du Vue.js et du Ember.js aussi.&lt;br&gt;
Git est mon ami, SVN un ami de longue date mais je n&#39;ai jamais rencontré Mercurial.&lt;/p&gt;
&lt;p&gt;Pour plus de détails, je vous invite à regarder &lt;a href=&quot;https://blog.foojin.com/cv/&quot;&gt;mon CV&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;qu-est-ce-que-je-veux-faire&quot;&gt;Qu&#39;est-ce que je veux faire ?&lt;/h2&gt;
&lt;p&gt;Je ne sais pas trop en fait. J&#39;ai bien aimé travailler sur un produit chez Cozy. C&#39;était différent de ce que j&#39;avais connu avant.&lt;br&gt;
Travailler sur un projet long terme apporte des défis différents comme la maintenance pointue, la surveillance des performances, les refactoring intelligents, etc.&lt;br&gt;
Mais j&#39;aime aussi le travail en agence pour des défis opposés comme la possibilité de tester plein de choses, nouvelles ou non, le fort potentiel aux nouvelles connaissances qui sont un bon carburant pour mon cerveau.&lt;/p&gt;
&lt;p&gt;En fait, je ne sais pas ce que je veux faire mais je sais ce que je ne veux pas faire.&lt;/p&gt;
&lt;p&gt;Je ne veux pas être &amp;quot;chez l&#39;éditeur de site&amp;quot; dans une très grosse structure. Les process y sont souvent longs et je m&#39;y ennuie très vite.&lt;br&gt;
Je ne veux pas retourner en ESN (ex-SSII), je n&#39;ai pas que de bons souvenirs de ces perpétuels changements de bureau. J&#39;aime la nouveauté de connaissance mais je préfère la stabilité géographique.&lt;/p&gt;
&lt;h2 id=&quot;ou-est-ce-que-je-veux-le-faire&quot;&gt;Où est-ce que je veux le faire ?&lt;/h2&gt;
&lt;p&gt;De préférence ? de chez moi 😁&lt;br&gt;
J&#39;habite un peu dans la cambrousse yvelinoise et je préfère autant ne pas perdre 3 heures de ma journée dans les transports.&lt;br&gt;
Donc globalement télétravail ou dans l&#39;ouest parisien, ce serait parfait.&lt;/p&gt;
&lt;p&gt;Si mon profil vous intéresse, n&#39;hésitez pas et envoyez moi un mail sur 📧 gooz &lt;strong&gt;at&lt;/strong&gt; foojin.com. 👋&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>2 ans chez Cozy 🎂</title>
    <link href="https://blog.foojin.com/2018/11/07/faire-de-lopen-source-sans-en-faire/" />
    <updated>2018-11-07T00:00:00Z</updated>
    <id>https://blog.foojin.com/2018/11/07/faire-de-lopen-source-sans-en-faire/</id>
    <content type="html">&lt;p&gt;Ça va faire deux ans ce mois-ci que je suis chez Cozy. Et même si je continue à me faire spammer par des recruteurs de propositions à ne plus savoir quoi en faire, je m&#39;y sens trop bien pour changer.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;2 ans en télétravail, 2 ans à bosser sur un projet auquel je crois, 2 ans à côtoyer des gens brillants et bienveillants. Non vraiment, j&#39;y suis bien.&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;2-ans-de-teletravail&quot;&gt;2 ans de télétravail&lt;/h2&gt;
&lt;p&gt;C&#39;était une des inconnues, un de mes challenges personnels et je dois dire que ça marche plutôt bien. Je suis globalement plus serein, le fait de ne plus avoir à prendre les transports n&#39;y est sans doute pas pour rien.&lt;br&gt;
De plus je me suis mis à des activités dans la semaine qui me font voir des gens et ça me donne mon quota d&#39;interaction sociales tranquillement.&lt;br&gt;
on me demande souvent si je me sens pas trop seul quand je dis que je suis à 100% en télétravail. Mais non.&lt;br&gt;
Et puis on est jamais vraiment seul finalement, on a beaucoup de video-conférences, quotidiennement.&lt;/p&gt;
&lt;h2 id=&quot;2-ans-a-bosser-sur-un-projet-auquel-je-crois&quot;&gt;2 ans à bosser sur un projet auquel je crois&lt;/h2&gt;
&lt;p&gt;C&#39;est bien de faire un boulot qu&#39;on aime, c&#39;est mieux de le faire dans un contexte qui nous plait.&lt;br&gt;
Ça donne vraiment envie de bien faire, de faire plus, pour moi, pour les utilisateurs, pour les collègues.&lt;br&gt;
Ceci dit, je sais que c&#39;est un privilège que peu ont la chance de partager malheureusement.&lt;/p&gt;
&lt;h2 id=&quot;2-ans-a-bosser-avec-des-gens-brillants-et-bienveillants&quot;&gt;2 ans à bosser avec des gens brillants et bienveillants&lt;/h2&gt;
&lt;p&gt;Est-ce par pure chance, par une exceptionnelle suite de recrutement ou plus simplement le fait que le télétravail implique une forte attention aux choses qu&#39;on dit et leur ton, toujours est-il que mes collègues sont bienveillants et ça fait du bien au quotidien.&lt;br&gt;
Naturellement il arrive certains accrochages de temps en temps, on ne peut pas toujours être d&#39;accord sur tout, mais rien qui ne dure et n&#39;envenime les situations sur le long terme. En tout cas je ne l&#39;ai jamais remarqué de ma fenêtre.&lt;/p&gt;
&lt;h2 id=&quot;l-open-source&quot;&gt;L&#39;Open Source&lt;/h2&gt;
&lt;p&gt;Je me suis fait la réflexion récemment. J&#39;ai la vilaine sensation de n&#39;avoir jamais fait aussi peu d&#39;Open Source que depuis que je bosse dans une boîte qui fait de l&#39;Open Source. Paradoxalement.&lt;/p&gt;
&lt;p&gt;Évidemment ce n&#39;est pas du tout le cas. En deux ans, j&#39;ai écrit plus d&#39;Open-Source que durant le reste de ma carrière mais toujours est-il que, comme c&#39;est dans le cadre de mon emploi, et que cet emploi me prend beaucoup de temps, je ne fais plus rien à côté et j&#39;ai toujours quelque part dans ma tête cette idée que l&#39;on fait de l&#39;Open Source sur son temps libre… Allez comprendre.&lt;/p&gt;
&lt;p&gt;Bref, je suis content. ⊙▽⊙&lt;/p&gt;
&lt;p&gt;PS: Au fait, &lt;a href=&quot;https://www.welcometothejungle.co/companies/cozy-cloud&quot;&gt;on recrute !&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>J&#39;ai eu tort…</title>
    <link href="https://blog.foojin.com/2018/03/06/jai-eu-tort/" />
    <updated>2018-03-06T00:00:00Z</updated>
    <id>https://blog.foojin.com/2018/03/06/jai-eu-tort/</id>
    <content type="html">&lt;p&gt;Une vie sans apprendre sur soi ou sur ce qui nous entoure n&#39;est pas vraiment une vie.&lt;/p&gt;
&lt;p&gt;Cela fait plus de 10 ans que je travaille dans le web, toujours quasi dans le même contexte, et il y a un peu plus d&#39;1 an j&#39;ai rejoint une Start-Up, &lt;strong&gt;Cozy Cloud&lt;/strong&gt;, qui était comme un tout nouveau paradigme pour moi. Non pas parce que c&#39;était une Start-Up mais pour ce que j&#39;y faisais, que ce soit les technologies, les manières de travailler, l&#39;environnement, etc.&lt;/p&gt;
&lt;p&gt;En bref, je suis passé d&#39;open-space à un bureau chez moi en télétravail, je suis passé d&#39;une organisation en silo stricte à une organisation agile transversale, je suis passé du sempiternel PHP/HTML/CSS à JS/CSS.&lt;/p&gt;
&lt;p&gt;Beaucoup de changements, beaucoup de pertes de repère et donc beaucoup de doutes.&lt;/p&gt;
&lt;p&gt;Le changement d&#39;organisation a peut-être été le seul qui ne m&#39;a apporté que de la sérénité. Adieu la frustration de la dernière roue du carosse, on travaille tous vraiment &lt;em&gt;ensemble&lt;/em&gt; et ça fonctionne bien.&lt;/p&gt;
&lt;p&gt;Le changement d&#39;environnement apporte son lot de challenge au quotidien mais rien d&#39;insurmontable. Étant de nature assez introverti et à l&#39;aise avec la solitude à faible dose, le fait d&#39;être seul chez moi pour travailler ne m&#39;a pas vraiment posé de problème. La communication par contre s&#39;en voit chamboulée. Si auparavant on pouvait discuter de ceci et de cela autour de la machine à café ou sur le coin d&#39;un bureau, désormais il faut être nettement plus strict mais, encore une fois, rien qu&#39;un peu de discipline ne puisse vraiment régler.&lt;/p&gt;
&lt;p&gt;Le vrai changement anxiogène, c&#39;est celui de la tâche de travail en elle-même. J&#39;ai un passé technique très orienté HTML/CSS et là j&#39;étais propulsé dans un monde de (p)React/HTML/CSS sur une webapp. C&#39;était tout nouveau, c&#39;était excitant mais ça voulait dire qu&#39;il me fallait m&#39;accrocher au wagon pour ne pas être perdu.&lt;/p&gt;
&lt;p&gt;Et pour m&#39;être accroché, je me suis accroché…&lt;/p&gt;
&lt;p&gt;De peur d&#39;être le boulet de service, je me suis appliqué à coder, lire, écrire, comprendre tout ce que faisait tout le monde en tirant un trait sur ma veille notamment mais aussi en mettant de côté Twitter/Mastodon et IRC où je conversais beaucoup avec des gens du métier. Je me suis enfermé dans ma bulle technique pour rattraper un retard discutable.&lt;/p&gt;
&lt;p&gt;Et j&#39;ai eu tort.&lt;/p&gt;
&lt;p&gt;J&#39;ai eu tort parce que malgré toute la bonne volonté du monde à force de trop ingurgiter sans pause pour digérer, on ingurgite mal.&lt;/p&gt;
&lt;p&gt;J&#39;ai eu tort parce que à cause du télétravail et donc la diminution de contact humain, j&#39;ai un peu perdu le moral à ne plus échanger avec tous ces gens du métier que j&#39;apprécie.&lt;/p&gt;
&lt;p&gt;J&#39;ai eu tort parce que à trop vouloir comprendre le métier de mes collègues, j&#39;ai laissé mes connaissances sur mon corps de métier, ce pourquoi j&#39;ai été embauché, stagner et ne plus se mettre à jour.&lt;/p&gt;
&lt;p&gt;Ce qui m&#39;a fait arriver à un point où je n&#39;étais pas spécialement meilleur dans les technologies que je ne maîtrisais pas, un peu déprimé de ne plus causer avec les copains et moins bon sur les technologies que je maîtrisais.&lt;/p&gt;
&lt;p&gt;Bref à trop vouloir bien faire, j&#39;ai fini par mal faire. J&#39;ai eu tort, et maintenant il est temps de revenir à l&#39;état exaltation que je voulais en premier lieu.&lt;/p&gt;
&lt;p&gt;En solution à ce problème, j&#39;ai décidé de faire machine arrière ou plutôt lever le pied. Retour à la veille, retour aux copains, continuer d&#39;apprendre ce que j&#39;ai à apprendre à une vitesse plus juste et plus saine.&lt;/p&gt;
&lt;p&gt;Parce que quand ton travail, celui que tu as la chance d&#39;aimer, devient un fardeau c&#39;est que t&#39;es allé trop loin, bien trop loin.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;EDIT:&lt;/strong&gt; Suite à plusieurs réactions, je tiens à préciser que ni mon entreprise, ni mes collègues, ni le télétravail ne sont fautifs dans cette histoire, ce n&#39;est que moi qui ai personnellement mal géré mon appréhension des choses et que donc à ce titre je n&#39;ai aucunement l&#39;envie de changer de boulot ou d&#39;entreprise. Je vais juste me recentrer. 🙂&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Snippets de merde !</title>
    <link href="https://blog.foojin.com/2016/12/17/snippets-de-merde/" />
    <updated>2016-12-17T00:00:00Z</updated>
    <id>https://blog.foojin.com/2016/12/17/snippets-de-merde/</id>
    <content type="html">&lt;p&gt;Aaaah Noël…&lt;br&gt;
C&#39;est la période de l&#39;année où l&#39;on voit passer beaucoup de calendriers de l&#39;avent. Parmi tout ceux qui trainent il y a celui de &lt;a href=&quot;https://www.myadvent.net/calendars/?id=60a3f8cf02141a43ec6efbd8a76a02a6&quot;&gt;Cozy Cloud&lt;/a&gt; que j&#39;apprécie beaucoup mais aussi et surtout celui d&#39;&lt;a href=&quot;https://www.alfredapp.com/xmascalendar/&quot;&gt;Alfred&lt;/a&gt;, vous savez l&#39;app OS X dont je vous ai parlé &lt;a href=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/&quot;&gt;il n&#39;y a pas si longtemps&lt;/a&gt; ?&lt;/p&gt;
&lt;p&gt;Et bien en passant en revue tous leurs trucs et astuces, je me suis rendu compte que je n&#39;utilisais que trop peu la gestion des snippets alors je me suis amusé à faire ma propre collection…&lt;/p&gt;
&lt;p&gt;Je m&#39;en servais déjà avec des collections d&#39;emoji et d&#39;ascii art mais c&#39;était tout.&lt;/p&gt;
&lt;p&gt;Et là je me suis dit qu&#39;il y a avait plein de répliques que je sortais souvent (peut-être trop souvent diraient certains), souvent tirées de films mythiques comme… &lt;strong&gt;La Classe américaine&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Alors youpla boom, je me suis fait chier à remplir ma collection de snippets pour sortir mes répliques préférées du film facilement et rapidement.&lt;/p&gt;
&lt;p&gt;Vous pouvez télécharger la collection en question modestement appelée &amp;quot;&lt;strong&gt;Snippets de merde&lt;/strong&gt;&amp;quot; sur &lt;a href=&quot;https://github.com/GoOz/snippetsdemerde&quot;&gt;github&lt;/a&gt; et puis même faire des issues, bande de petits coquins.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Enjoy!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Et considérez ça comme mon cadeau de noël, les enfants.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>De l&#39;adaptation de Preacher sur les écrans</title>
    <link href="https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/" />
    <updated>2016-06-10T00:00:00Z</updated>
    <id>https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/</id>
    <content type="html">&lt;p&gt;Je ne suis pas un critique émérite de séries télé ou même de comics mais hé, je me suis dit que ça couterait rien de donner mon avis sur cette fraîche nouvelle série qu&#39;est &lt;strong&gt;Preacher&lt;/strong&gt; et de quelques autres adaptation de comics.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;GARANTI 100% SANS SPOIL&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;on-dit-que-je-ressemble-a-alain-deloin&quot;&gt;On dit que je ressemble à Alain Deloin&lt;/h2&gt;
&lt;p&gt;Comme je disais, je lis les comics de &lt;em&gt;Preacher&lt;/em&gt; et je les adore. Du bon _&lt;a href=&quot;https://fr.wikipedia.org/wiki/Vertigo_%28DC*Comics%29&quot;&gt;Vertigo&lt;/a&gt;* comme on fait plus, vraiment.&lt;/p&gt;
&lt;p&gt;Alors quand j&#39;ai appris son adaptation télévisuelle j&#39;ai tout de suite été intrigué. Je suivais son actu et j&#39;avais lu que les créateurs annonçaient d&#39;emblée que la série ne suivrait pas les comics.&lt;/p&gt;
&lt;p&gt;Et en effet...&lt;/p&gt;
&lt;p&gt;Les intrigues donc ne se suivent finalement pas des masses. Que ce soit l&#39;arrivée de &amp;quot;l’entité&amp;quot;, les rencontres des personnages ou le démarrage de la série tout court, tout ça ne se passe pas du tout comme ça dans les comics. Ils avaient prévenu en même temps. Il est trop tôt pour parler de différences dans l&#39;intrigue étant donné que deux épisodes c&#39;est bien trop peu pour ça mais ça commence très vite loin de l&#39;original alors passons à autre chose.&lt;/p&gt;
&lt;p&gt;Les personnages par contre sont globalement fidèles, à quelques nuances près.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Jesse Custer&lt;/strong&gt;, le pasteur, joué par &lt;strong&gt;&lt;a href=&quot;https://fr.wikipedia.org/wiki/Dominic_Cooper&quot;&gt;Dominic Cooper&lt;/a&gt;&lt;/strong&gt; est bien un pasteur torturé au passé trouble et à la foi branlante. Physiquement on est à peu près dedans. Évidemment l&#39;acteur ne ressemblent pas comme à deux gouttes d&#39;eau au personnage des comics mais finalement on s&#39;en fout de ça.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/diRmVOhPs3-400.avif 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/diRmVOhPs3-652.avif 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/diRmVOhPs3-400.webp 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/diRmVOhPs3-652.webp 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/diRmVOhPs3-400.jpeg&quot; alt=&quot;Comparaison Jesse Custer&quot; width=&quot;652&quot; height=&quot;477&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/diRmVOhPs3-400.jpeg 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/diRmVOhPs3-652.jpeg 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Tulip O&#39;Hare&lt;/strong&gt;, l&#39;ex petite amie de Jesse et jouée par &lt;strong&gt;&lt;a href=&quot;https://fr.wikipedia.org/wiki/Ruth_Negga&quot;&gt;Ruth Negga&lt;/a&gt;&lt;/strong&gt; par contre est un brin différente.&lt;/p&gt;
&lt;p&gt;Déjà parce qu&#39;au lieu d&#39;être blanche aux cheveux blonds et lisses comme dans les comics, elle est métisse au cheveux courts bouclés dans la série. Ça a dû faire encore une polémique chez l&#39;oncle Sam mais, personnellement, je dis &amp;quot;et pourquoi pas&amp;quot;. Absolument rien dans son histoire ne justifie qu&#39;elle soit caucasienne donc…&lt;/p&gt;
&lt;p&gt;Puis, alors que dans les comics elle ne cesse de se battre pour prouver à Jesse qu&#39;elle n&#39;est pas une faible femme à protéger, dans la série elle est directement montrée comme une femme à forte caractère, complètement autonome, sachant rester féminine en prime, ce qui est assez rarement le cas des femmes badass dans les fictions pour le noter.&lt;/p&gt;
&lt;p&gt;Et pour ceux qui la voit comme une vile tentatrice, c&#39;est loin d&#39;être le cas dans les comics, au contraire, et j&#39;espère que les auteurs de la série garderont cet aspect. C&#39;est pas parce qu&#39;elle est badass que c&#39;est une vilaine succube qui détournera le &amp;quot;héros&amp;quot; du droit chemin.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/LHTQQ5OO6z-400.avif 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/LHTQQ5OO6z-652.avif 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/LHTQQ5OO6z-400.webp 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/LHTQQ5OO6z-652.webp 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/LHTQQ5OO6z-400.jpeg&quot; alt=&quot;Comparaison Tulip&quot; width=&quot;652&quot; height=&quot;292&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/LHTQQ5OO6z-400.jpeg 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/LHTQQ5OO6z-652.jpeg 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Cassidy&lt;/strong&gt;, le vampire irlandais, joué par &lt;strong&gt;&lt;a href=&quot;https://fr.wikipedia.org/wiki/Joseph_Gilgun&quot;&gt;Joseph Gilgun&lt;/a&gt;&lt;/strong&gt; (que j&#39;ai adoré dans Misfits) n&#39;est physiquement pas très proche. Là où dans les comics, il garde perpétuellement ses lunettes de soleil en plus d&#39;être blond/châtain clair lui aussi, on perd tout ça dans la série. Mais est-ce gênant ? Je suis un peu déçu pour les lunettes, mais globalement non, on s&#39;en fout.&lt;/p&gt;
&lt;p&gt;Il garde son accent irlandais, son franc parler et ses faiblesses et forces de vampire.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/lDWfthKaLU-400.avif 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/lDWfthKaLU-652.avif 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/lDWfthKaLU-400.webp 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/lDWfthKaLU-652.webp 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/lDWfthKaLU-400.jpeg&quot; alt=&quot;Comparaison Cass&quot; width=&quot;652&quot; height=&quot;262&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/lDWfthKaLU-400.jpeg 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/lDWfthKaLU-652.jpeg 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Arseface&lt;/strong&gt; ou &lt;em&gt;Eugène Root&lt;/em&gt;, joué par &lt;strong&gt;Ian Colletti&lt;/strong&gt; est sûrement, à mon goût, le plus fidèle aux comics, physiquement et psychologiquement.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/qaU-xW-z9s-400.avif 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/qaU-xW-z9s-652.avif 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/qaU-xW-z9s-400.webp 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/qaU-xW-z9s-652.webp 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/qaU-xW-z9s-400.jpeg&quot; alt=&quot;Comparaison Arseface&quot; width=&quot;652&quot; height=&quot;376&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/qaU-xW-z9s-400.jpeg 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/qaU-xW-z9s-652.jpeg 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Son père, le shérif &lt;strong&gt;Hugo Root&lt;/strong&gt;, joué par &lt;strong&gt;&lt;a href=&quot;https://fr.wikipedia.org/wiki/W._Earl_Brown&quot;&gt;W. Earl Brown&lt;/a&gt;&lt;/strong&gt; lui... C&#39;est le plus éloigné de tous, en tout point. Je vais même pas m&#39;étendre à lister les différences. Je me demande juste, même si j&#39;en doute fortement, s&#39;il lui arrivera les même choses que dans les comics qui m&#39;ont vraiment bien fait marrer.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/1TlgNcpNUh-400.avif 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/1TlgNcpNUh-652.avif 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/1TlgNcpNUh-400.webp 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/1TlgNcpNUh-652.webp 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/1TlgNcpNUh-400.jpeg&quot; alt=&quot;Comparaison Sheriff Root&quot; width=&quot;652&quot; height=&quot;446&quot; srcset=&quot;https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/1TlgNcpNUh-400.jpeg 400w, https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/1TlgNcpNUh-652.jpeg 652w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;et-pourtant&quot;&gt;Et pourtant...&lt;/h2&gt;
&lt;p&gt;Et pourtant malgré ces &amp;quot;digressions&amp;quot; ça m&#39;a l&#39;air bien prometteur. Ils ont apparemment gardé ce qu&#39;il fallait de l&#39;intrigue pour faire un scénario qui tienne la route tout en gardant l&#39;essence de l&#39;histoire des comics.&lt;/p&gt;
&lt;p&gt;La force des dialogues a l&#39;air ancré dans l&#39;esprit elle-aussi qui est un point très fort dans l&#39;œuvre originale.&lt;/p&gt;
&lt;p&gt;Et puis j&#39;ai trouvé la réalisation et mise en scène vraiment sympa. Une bonne ambiance texane pesante, bien comme il faut, bien dosée. Il y a aussi de bien magnifiques plans &amp;quot;pour une série&amp;quot;.&lt;/p&gt;
&lt;p&gt;J&#39;attends d&#39;en voir un peu plus pour forger mon avis. Mais je suis plutôt emballé pour le moment.&lt;/p&gt;
&lt;h2 id=&quot;une-bonne-adaptation-ou-une-adaptation-bonne&quot;&gt;Une bonne adaptation ou une adaptation bonne ?&lt;/h2&gt;
&lt;p&gt;Je n&#39;ai pas la recette pour une bonne adaptation, je ne saurais dire. Certaines sont plus fidèles que d&#39;autres mais est-ce que la fidélité fait la bonne adaptation finalement ? Je n&#39;en suis pas si sûr.&lt;/p&gt;
&lt;p&gt;Prenons les adaptations de comics en série par exemple.
&lt;strong&gt;The Walking Dead&lt;/strong&gt;, même si elle a adapté avec le concours du même scénariste que les comics, a perdu beaucoup de sens à mon goût. J&#39;ai arrêté de la regarder, c&#39;est dire.&lt;/p&gt;
&lt;p&gt;Les zombies n&#39;étant vraiment qu&#39;un contexte dans les comics, c&#39;est le comportement humain qui est au centre de tout et je trouve que, même si c&#39;est toujours bien présent dans la série, on la perd beaucoup. Et c&#39;est dommage.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Constantine&lt;/strong&gt; (&lt;strong&gt;Hellblazer&lt;/strong&gt; en comics en fait, puisque Constantine n&#39;est que le nom du héros) a eu le droit a plusieurs adaptations. Notamment une &lt;a href=&quot;https://fr.wikipedia.org/wiki/Constantine_(s%C3%A9rie_t%C3%A9l%C3%A9vis%C3%A9e)&quot;&gt;série&lt;/a&gt; en 2014 qui n&#39;a eu le droit qu&#39;à une saison de 13 épisodes et un &lt;a href=&quot;https://fr.wikipedia.org/wiki/Constantine_(film)&quot;&gt;film&lt;/a&gt; avec &lt;strong&gt;Keanu Reeves&lt;/strong&gt; en 2005.&lt;/p&gt;
&lt;p&gt;Concernant le film, je dirai que c&#39;est une mauvaise adaptation mais une adaptation bonne. C&#39;est à dire que je trouve le film plutôt sympa à voir mais qui n&#39;a pas franchement pas grand chose à voir avec Hellblazer. Différente ambiance, psychologie et physique des personnages très loin de l&#39;original. Ça n&#39;a de Constantine que le nom.&lt;/p&gt;
&lt;p&gt;La série, elle, est beaucoup plus proche, sur plusieurs point, c&#39;est une bien meilleure adaptation mais qui avait peut être un scénario un peu juste en rebondissement et en intensité. C&#39;est sûrement une des raisons de son arrêt d&#39;ailleurs. Et c&#39;est bien dommage.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Daredevil&lt;/strong&gt; et &lt;strong&gt;Jessica Jones&lt;/strong&gt; qu&#39;on peut voir sur &lt;a href=&quot;http://www.netflix.com&quot;&gt;Netflix&lt;/a&gt; sont de plutôt bonnes adaptations aussi. Ayant pris le parti de ne pas trop insisté sur le côté super-héros et plus sur le côté Noir de l&#39;ambiance et la construction des personnages. Et c&#39;est plutôt une très bonne idée.&lt;/p&gt;
&lt;p&gt;Je pourrais continuer longtemps comme ça…&lt;/p&gt;
&lt;p&gt;J&#39;ai trouvé que &lt;strong&gt;V pour Vendetta&lt;/strong&gt; passait complètement à côté des idéologies anarchistes qu&#39;on y trouve mais reste un bon divertissement, que &lt;strong&gt;Sin City&lt;/strong&gt; et &lt;strong&gt;300&lt;/strong&gt; était beaux mais essayaient trop de ressembler à la BD même si les mediums différaient en bien trop de points au risque de perdre une intention, que &lt;strong&gt;Watchmen&lt;/strong&gt; aussi voulait peut être un peu trop rester fidèle visuellement en perdant quelques notions sur les psychologies des caractères. Mais je les tous bien aimé ces films malgré tout. C&#39;était loin d&#39;être dégueulasse en tant que tel.&lt;/p&gt;
&lt;p&gt;Bref, Il y a toujours de gros fans hardcore pour bitcher mais je me pose la question sur l&#39;idée d&#39;une bonne adaptation.&lt;/p&gt;
&lt;p&gt;Est-ce qu&#39;une bonne adaptation de comics est une adaptation fidèle ? et si oui, fidèle à quel niveau ? Visuellement ? dans l&#39;ambiance ? dans l&#39;essence des personnages ou du contexte ?&lt;/p&gt;
&lt;p&gt;Pourquoi une adaptation ne serait-elle pas bonne si elle ne fait que prendre un personnage d&#39;une série et le planter dans un nouveau contexte jusque là inconnu à ce personnage ? N&#39;est-ce pourtant pas ce qu&#39;il se passe lorsqu&#39;un nouvel arc ou un reboot ou que sais-je se passe dans les comics. Pourquoi est-ce plus tolérable dans ce cas ?&lt;/p&gt;
&lt;p&gt;Je pense que, naïvement, on attend d&#39;une adaptation à l&#39;écran qu&#39;elle soit le reflet de l&#39;œuvre originale et c&#39;est un tort. Pourquoi ne pourrait-elle pas juste étendre l&#39;univers de l&#39;originale, plutôt que de le mimer ? N&#39;en sortirait-on pas tous plus riche ?&lt;/p&gt;
&lt;p&gt;Tout ça pour dire que je pense que la série &lt;strong&gt;Preacher&lt;/strong&gt; peut franchement être sympa même si elle ne suit presque rien des comics.&lt;/p&gt;
&lt;p&gt;Donnez-lui une chance si vous avez lu les comics et êtes frileux à l&#39;idée de l&#39;adaptation.&lt;/p&gt;
&lt;p&gt;Et allez lire les comics pour les autres, c&#39;est vraiment de la bombe et en plus &lt;a href=&quot;http://www.urban-comics.com/preacher/&quot;&gt;Urban Comics&lt;/a&gt; est en train de les rééditer.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Alfred, le messie des feignasses</title>
    <link href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/" />
    <updated>2016-05-05T00:00:00Z</updated>
    <id>https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/</id>
    <content type="html">&lt;p&gt;Plus les années passent, moins je touche à ma souris. C&#39;est un fait. Je pense que la raison principale est que je passe beaucoup de mon temps sur ma machine à coder et que ça, ça se fait uniquement au clavier.&lt;/p&gt;
&lt;p&gt;Du coup, on apprend vite les raccourcis pour ne pas avoir à lâcher ce clavier. C&#39;est sûrement ce qui m&#39;a le plus attiré chez les &lt;em&gt;launchers&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Au commencement &lt;strong&gt;&lt;a href=&quot;https://support.apple.com/fr-fr/HT204014&quot;&gt;Spotlight&lt;/a&gt;&lt;/strong&gt; n&#39;existait pas. Mais on avait &lt;strong&gt;&lt;a href=&quot;https://qsapp.com/&quot;&gt;Quicksilver&lt;/a&gt;&lt;/strong&gt;. Pas franchement très connu et pas toujours très stable, il avait le mérite d&#39;être déjà très pratique à l&#39;époque.&lt;/p&gt;
&lt;p&gt;Mais vint le sauveur des feignasses, celui qui faisait beaucoup et promettait encore plus : &lt;strong&gt;&lt;a href=&quot;https://www.alfredapp.com/&quot;&gt;Alfred&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Si je vous en parle aujourd&#39;hui c&#39;est surtout que la v3 va très bientôt sortir et que je me suis rendu compte que trop peu de personnes connaissaient ce &lt;em&gt;launcher&lt;/em&gt; et même ceux qui le connaissaient, n&#39;étaient pas au fait de son grand pouvoir.&lt;/p&gt;
&lt;p&gt;Alors oui, la version gratuite d&#39;&lt;strong&gt;Alfred&lt;/strong&gt; n&#39;a pas grand chose de plus que &lt;strong&gt;Spotlight&lt;/strong&gt; si ce n&#39;est tout de même une plus grande souplesse et &amp;quot;configurabilité&amp;quot;. Mais je ne vais pas là vous faire un comparatif, je vais juste vous montrer quelques trucs que peut faire Alfred… en version &lt;strong&gt;&lt;a href=&quot;https://www.alfredapp.com/powerpack/&quot;&gt;Powerpack&lt;/a&gt;&lt;/strong&gt;, c&#39;est à dire payante mais honnêtement, le logiciel vaut son pesant de cacahuète.&lt;/p&gt;
&lt;p&gt;En plus de permettre des recherches sur des moteurs classiques et lancer des applications, Alfred permet aussi de :&lt;/p&gt;
&lt;h2 id=&quot;personnaliser-vos-moteurs-de-recherches&quot;&gt;Personnaliser vos moteurs de recherches.&lt;/h2&gt;
&lt;p&gt;En plus d&#39;avoir les grands classiques comme Google, Bing, Duckduckgo, Wikipedia, Youtube, Twitter, etc vous pouvez donc ajouter ceux de vos sites préférés.&lt;/p&gt;
&lt;p&gt;Par exemple, j&#39;ai ajouté celui de MDN ou celui du conjugueur. Pour la configuration, pas besoin d&#39;accès à l&#39;API, il suffit de connaitre l&#39;URL des recherches, pour peu que le site en question le permette.&lt;/p&gt;
&lt;p&gt;Ça ressemble globalement à ça :
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-400.avif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-812.avif 812w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-1152.avif 1152w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-812.webp 812w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-1152.webp 1152w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-400.png&quot; alt=&quot;Custom search&quot; width=&quot;1152&quot; height=&quot;712&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-400.png 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-812.png 812w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/MFWr4DFHIV-1152.png 1152w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Tout est expliqué et c&#39;est plutôt simple tout de même.&lt;/p&gt;
&lt;p&gt;Pour l&#39;utilisation, tapez juste le &lt;em&gt;keyword&lt;/em&gt; choisi puis votre recherche. Simple, non?
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-400.avif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-812.avif 812w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-1328.avif 1328w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-812.webp 812w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-1328.webp 1328w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-400.png&quot; alt=&quot;MDN search&quot; width=&quot;1328&quot; height=&quot;288&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-400.png 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-812.png 812w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/W5lnTRcR9T-1328.png 1328w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Vous pouvez aussi imaginer un moteur de recherche avec des suggestions mais pour ça il faudra passer par un workflow et on verra ça plus tard. :)&lt;/p&gt;
&lt;h2 id=&quot;une-gestion-du-presse-papier-clipboard-au-petits-oignons&quot;&gt;Une gestion du presse-papier (clipboard) au petits oignons&lt;/h2&gt;
&lt;p&gt;Alfred intègre un gestionnaire de clipboard, qui va mémoriser tout ce que vous y mettez, sauf quand ça provient d&#39;applications que vous aurez blacklistées. Par défaut, Keychain, Wallet et 1Password sont dans cette liste notamment, pour des raisons évidentes de sécurité.&lt;/p&gt;
&lt;p&gt;Toujours est-il que vous avez la possibilité de configurer beaucoup de choses, comme la durée du cache des choses copiées (image ou texte), avoir la possibilité de fusionner des éléments, pour peu qu&#39;ils soient &amp;quot;fusionnables&amp;quot;.&lt;/p&gt;
&lt;h2 id=&quot;gerer-vos-fichiers-sans-avoir-besoin-de-finder&quot;&gt;Gérer vos fichiers sans avoir besoin de Finder&lt;/h2&gt;
&lt;p&gt;Vous venez de faire une capture d&#39;écran et vous voulez l&#39;ouvrir dans un logiciel, ou bien vous ne vous souvenez où vous avez foutu ce pdf du manuel du &lt;a href=&quot;http://www.keeptalkinggame.com/&quot;&gt;super jeu&lt;/a&gt; que vous venez d&#39;acheter de fiche de personnage de votre jeu de rôle préféré mais vous voulez l&#39;ouvrir et vite ?&lt;/p&gt;
&lt;p&gt;Pas de problème !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/_BHJ7muxqz-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/_BHJ7muxqz-700.webp 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/_BHJ7muxqz-400.gif&quot; alt=&quot;Alfred find&quot; width=&quot;700&quot; height=&quot;499&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/_BHJ7muxqz-400.gif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/_BHJ7muxqz-700.gif 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Les possibilités sont grandes. :)&lt;/p&gt;
&lt;h2 id=&quot;le-plein-de-petits-trucs-sympatoche&quot;&gt;Le plein de petits trucs sympatoche…&lt;/h2&gt;
&lt;p&gt;Comme…&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;L&#39;intégration de &lt;strong&gt;1Password&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Gérer &lt;strong&gt;iTunes&lt;/strong&gt; depuis Alfred&lt;/li&gt;
&lt;li&gt;Chercher et afficher ses contacts en un éclair&lt;/li&gt;
&lt;li&gt;Envoyer des commandes Shell directement depuis Alfred&lt;/li&gt;
&lt;li&gt;Config qui peut être sync via &lt;strong&gt;Dropbox&lt;/strong&gt; (nativement) ou bien vous pouvez le faire à la main via un &lt;code&gt;ln -s&lt;/code&gt; ou autre solution comme &lt;a href=&quot;https://github.com/lra/mackup&quot;&gt;Mackup&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Une calculatrice de compétition&lt;/li&gt;
&lt;li&gt;Fouiller dans le dictionnaire&lt;/li&gt;
&lt;li&gt;Ajouter et gérer des snippets directement dans Alfred.&lt;/li&gt;
&lt;li&gt;etc…&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;mais-surtout-des-workflows&quot;&gt;…mais surtout, des Workflows&lt;/h2&gt;
&lt;p&gt;C&#39;est la pièce maitresse d&#39;Alfred, pouvoir créer ses propres fonctions automatiques. Un peu ce que permettait &lt;strong&gt;Automator&lt;/strong&gt; mais en mieux (d&#39;ailleurs Alfred gère vos fichiers Automator, je dis ça, je dis rien)&lt;/p&gt;
&lt;p&gt;Tout ce que fait de base Alfred n&#39;est limité que par l&#39;imagination du developpeur d&#39;Alfred. Heureusement il a permis à tout ceux qui ont leur propre problèmes et tâches répétitives de laisser leur imagination porter Alfred encore plus loin.&lt;/p&gt;
&lt;p&gt;Ces workflows, il en existe déjà beaucoup sur la toile. Je vous recommande d&#39;ailleurs le très bon site &lt;a href=&quot;http://www.packal.org/&quot;&gt;Packal&lt;/a&gt; pour faire votre marché.&lt;/p&gt;
&lt;p&gt;Vous y trouverez des workflows qui intéragissent directement avec une app installée sur votre machine comme &lt;strong&gt;Wunderlist&lt;/strong&gt;, &lt;strong&gt;Evernote&lt;/strong&gt;, &lt;strong&gt;Spotify&lt;/strong&gt;, etc.&lt;/p&gt;
&lt;p&gt;Par exemple, j&#39;utilise &lt;a href=&quot;https://kapeli.com/dash&quot;&gt;Dash&lt;/a&gt; pour avoir de la doc en local, quand je n&#39;ai pas de connexion. Et bien il y a un workflow qui permet de lancer une recherche directement dans &lt;strong&gt;Dash&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Et puis il y a les petits workflows plus ou moins inutiles mais définitivement indispensables.&lt;/p&gt;
&lt;h3 id=&quot;colors&quot;&gt;Colors&lt;/h3&gt;
&lt;p&gt;On me file un code couleur hexadecimal d&#39;une charte graphique mais moi, je veux du RGB…&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/SORaSyfcoD-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/SORaSyfcoD-700.webp 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/SORaSyfcoD-400.gif&quot; alt=&quot;Alfred colors&quot; width=&quot;700&quot; height=&quot;499&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/SORaSyfcoD-400.gif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/SORaSyfcoD-700.gif 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;hopla, je clique (ou je tape entrée) et le code RGB est dans mon presse-papier.&lt;/p&gt;
&lt;h3 id=&quot;convert&quot;&gt;Convert&lt;/h3&gt;
&lt;p&gt;Parfois, à force de trainer sur des sites anglosaxons, je galère à faire la conversion d&#39;unités de mesure, ou bien encore de devises. Pas de problème, j&#39;ai &lt;em&gt;convert&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/ZQGvqtRcOO-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/ZQGvqtRcOO-700.webp 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/ZQGvqtRcOO-400.gif&quot; alt=&quot;Alfred conv&quot; width=&quot;700&quot; height=&quot;499&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/ZQGvqtRcOO-400.gif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/ZQGvqtRcOO-700.gif 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;down-for-everyone&quot;&gt;Down for everyone&lt;/h3&gt;
&lt;p&gt;Un problème de proxy ? Un problème de DNS ? Je ne sais pas mais je n&#39;ai pas accès à ce site. Est-ce juste moi ou…&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/was1uCXiQX-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/was1uCXiQX-700.webp 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/was1uCXiQX-400.gif&quot; alt=&quot;Alfred down&quot; width=&quot;700&quot; height=&quot;499&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/was1uCXiQX-400.gif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/was1uCXiQX-700.gif 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;encode-decode&quot;&gt;Encode/Decode&lt;/h3&gt;
&lt;p&gt;Parfois, je dois faire (encore…) un bon vieux mailto et j&#39;ai besoin d&#39;encoder du texte, mais je ne connais pas par cœur les codes. Pas de problème !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/VDeENYDJOy-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/VDeENYDJOy-700.webp 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/VDeENYDJOy-400.gif&quot; alt=&quot;Alfred encode&quot; width=&quot;700&quot; height=&quot;499&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/VDeENYDJOy-400.gif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/VDeENYDJOy-700.gif 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;une-traduction-avec-wordreference&quot;&gt;Une traduction avec WordReference&lt;/h3&gt;
&lt;p&gt;Bien plus fiable que Google Translate, WordReference ne me trompe jamais, mais dieu que c&#39;est énervant de devoir aller sur son navigateur préféré, ouvrir un onglet, aller sur le site et enfin faire sa recherche alors qu&#39;avec Alfred…&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/jYI7towVcE-400.webp 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/jYI7towVcE-700.webp 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/jYI7towVcE-400.gif&quot; alt=&quot;Alfred translate&quot; width=&quot;700&quot; height=&quot;499&quot; srcset=&quot;https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/jYI7towVcE-400.gif 400w, https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/jYI7towVcE-700.gif 700w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Pour celui-ci par contre, il vous faudra une APIKey, disponible gratuitement, c&#39;est juste pour éviter le flood.&lt;/p&gt;
&lt;h3 id=&quot;et-puis-aussi&quot;&gt;Et puis aussi…&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;faire un screenshot et l&#39;envoyer directement sur votre Dropbox&lt;/li&gt;
&lt;li&gt;Faire un ping rapidement&lt;/li&gt;
&lt;li&gt;Chercher dans vos favoris &lt;strong&gt;Github&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Faire une recherche avec suggestions sur &lt;strong&gt;Stack Overflow&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Connaitre l&#39;heure dans tel pays en ce moment même&lt;/li&gt;
&lt;li&gt;Savoir quel logiciel prend le plus de ressource processeur&lt;/li&gt;
&lt;li&gt;Kill une application qui prend beaucoup trop de ressources processeur&lt;/li&gt;
&lt;li&gt;Des raccourcis pour vos emoticons les plus compliqués à mémoriser&lt;/li&gt;
&lt;li&gt;Faire des calculs de pourcentage en un clin d&#39;œil&lt;/li&gt;
&lt;li&gt;Faire une recherche dans le catalogue de &lt;strong&gt;Netflix&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Lancer Firefox avec un différent &lt;em&gt;profile&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;Ouvrir une connexion FTP avec Filezilla alors que l&#39;app n&#39;est même pas encore lancée&lt;/li&gt;
&lt;li&gt;Et toujours plus… la limite n&#39;est que celle de votre imagination.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Je n&#39;ai pas mis la liste exhaustive de tout ce que j&#39;utilise mais vous voyez l&#39;idée.&lt;/p&gt;
&lt;p&gt;Vous pouvez retrouver sur &lt;a href=&quot;https://github.com/willfarrell/alfred-workflows&quot;&gt;cette page Github&lt;/a&gt; une liste de workflows spécialement pour les dev web pour aller encore plus loin.&lt;/p&gt;
&lt;p&gt;Finalement, &lt;strong&gt;Alfred&lt;/strong&gt; n&#39;est pas juste un concurrent de Spotlight, son but est vraiment de vous rendre plus productif à &lt;strong&gt;TOUS&lt;/strong&gt; les niveaux.&lt;/p&gt;
&lt;p&gt;En espérant que j&#39;aurais réussi à vous apprendre des trucs, et si vous avez des questions, n&#39;hésitez pas à me les poser sur &lt;a href=&quot;https://twitter.com/GoOz&quot;&gt;Twitter&lt;/a&gt; ou IRC (##openweb sur Freenode).&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Cover de &lt;a href=&quot;https://www.flickr.com/photos/clickonkirai/7175120640/&quot;&gt;clickonkirai&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>De la nécessité de la documentation</title>
    <link href="https://blog.foojin.com/2016/03/07/de-la-necessite-de-la-documentation/" />
    <updated>2016-03-07T00:00:00Z</updated>
    <id>https://blog.foojin.com/2016/03/07/de-la-necessite-de-la-documentation/</id>
    <content type="html">&lt;p&gt;J&#39;ai récemment été confronté à un soucis qui n&#39;a rien de rare et qui emmerde tout nouvel arrivant sur un projet : &lt;strong&gt;l&#39;absence de documentation&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Alors je ne vous cache pas que chez mon précédent employeur, tout le monde utilisait les mêmes outils, les mêmes &lt;em&gt;frameworks&lt;/em&gt;, etc. Il y avait bien quelques subtilités par projet mais globalement on codait tous avec le même système.&lt;/p&gt;
&lt;p&gt;Du coup, la &lt;em&gt;doc&lt;/em&gt; était &amp;quot;un peu&amp;quot; superflue. Non pas qu&#39;elle était inutile mais disons qu&#39;on n&#39;avait pas forcément besoin d&#39;aller la lire pour comprendre les subtilités.&lt;/p&gt;
&lt;p&gt;Je sais bien que la documentation est une nécessité, qu&#39;il faut se faire violence et l&#39;écrire et qu&#39;il ne faut pas passer à côté quand on reprend un projet. Mais je n&#39;ai jamais vraiment été dans le cas où j&#39;ai souffert de son absence, soit parce que je connaissais déjà tous les outils (comme je l&#39;ai dit plus haut), soit parce qu&#39;on me faisait une bonne passation de projet.&lt;/p&gt;
&lt;p&gt;Jamais jusque récemment…&lt;/p&gt;
&lt;p&gt;Voyez-vous, j&#39;ai donc, il y a peu, changé d&#39;entreprise. Je suis dans une toute petite boîte de moins de 15 personnes.&lt;/p&gt;
&lt;p&gt;Sûrement était-ce dû à la taille justement mais cette nécessité de documentation ne s&#39;est pas fait sentir à la seule et unique personne faisant du &lt;em&gt;front&lt;/em&gt; avant que j&#39;arrive.&lt;/p&gt;
&lt;p&gt;Honnêtement, je ne la blâme pas, je pense que je serais tombé aussi dans le piège si j&#39;avais été à sa place.&lt;/p&gt;
&lt;p&gt;Le fait est que peu de projets historiques ont un tronc commun, beaucoup d&#39;outils ou de &lt;em&gt;frameworks&lt;/em&gt; changent et ce qui est une évidence pour celui qui l&#39;a codé l&#39;est beaucoup moins pour celui qui reprend.&lt;/p&gt;
&lt;p&gt;Vous pourriez me dire que j&#39;aurais pu demander une passation et c&#39;est ce que j&#39;ai fait la plupart du temps jusqu&#39;au jour où la personne eut la très mauvaise idée de prendre des congés (enfin, mauvaise idée pour moi).&lt;/p&gt;
&lt;p&gt;J&#39;ai repris un vieux projet et je n&#39;ai pas compris un poil de cul de comment ce bouzin fonctionnait.&lt;/p&gt;
&lt;p&gt;Il y avait bien un &lt;em&gt;readme.md&lt;/em&gt; à la racine du projet, quasi vide, ne donnait quasi aucune information…&lt;/p&gt;
&lt;p&gt;J&#39;ai donc dû fouiller chaque recoin de chaque dossier et fichier de ce foutu projet pour comprendre.&lt;/p&gt;
&lt;p&gt;Ça m&#39;a demandé 4h pour comprendre.&lt;/p&gt;
&lt;p&gt;4h pour changer… &lt;strong&gt;un logo&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Autant vous dire que ça devait être ma demi-journée la moins productive depuis bien longtemps.&lt;/p&gt;
&lt;p&gt;Donc chers amis, de grâce, même si c&#39;est chiant, même si vous avez l&#39;impression de perdre votre temps, et comme le dit mon cher ex-collègue &lt;a href=&quot;https://twitter.com/JeremiePat&quot;&gt;Jérémie Patonnier&lt;/a&gt;, dit le &lt;em&gt;Rédacteur Technique de White Chapel&lt;/em&gt;, dit &lt;em&gt;le Grizzli du MDN&lt;/em&gt;, dit &lt;em&gt;l&#39;abominable homme des docs&lt;/em&gt; : &lt;strong&gt;faites vos putain de docs, bande d&#39;enfoirés.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Bon, je vous retranscris ça de pèle-mêle aussi...&lt;/p&gt;
&lt;p&gt;Et de la part de tous les parachutés sur des projets, &lt;strong&gt;MERCI&lt;/strong&gt;. :)&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Cover de &lt;a href=&quot;https://www.flickr.com/photos/light_seeker/7571188852/&quot;&gt;Viewminder&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>ZNC + Bitlbee + Client IRC = MEGA WIN</title>
    <link href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/" />
    <updated>2016-02-16T00:00:00Z</updated>
    <id>https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/</id>
    <content type="html">&lt;p&gt;Cela vous est-il déjà arrivé de vous dire qu&#39;entre Gtalk (Hangout), IRC, le chat Facebook, Twitter, voire même Slack maintenant vous ne saviez plus où donner de la tête ?&lt;/p&gt;
&lt;p&gt;Que vous aviez peur de râter des conversations intéressantes alors que vous deviez vous déconnecter parce que quelque chose sur le feu sonnait à la porte ?&lt;/p&gt;
&lt;p&gt;Si oui, alors vous avez connu ce que j&#39;ai connu.&lt;/p&gt;
&lt;p&gt;J&#39;ai une sainte horreur d&#39;avoir à jouer la girouette. Je veux pouvoir discuter avec les tous les gens que je côtoie numériquement au même endroit, dans le même logiciel et sans en perdre une miette.&lt;/p&gt;
&lt;p&gt;Je ne vais pas vous mentir, utiliser tous ces protocoles différents dans un seul et même logiciel, pas forcément optimisé pour ces derniers, implique &lt;strong&gt;quelques concessions&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Vous pourrez dire au revoir à toutes les spécificités et fonctionnalités du logiciel lié au protocole en question, comme les conversations audio/video de Hangout, les superbes commandes comme &lt;code&gt;/giphy&lt;/code&gt; dans Slack, les superbes emojis animés de chatons faisant la macarena dans… je sais pas mais je suis sûr que ça existe.&lt;/p&gt;
&lt;p&gt;Vous aurez aussi besoin d&#39;une manière ou d&#39;une autre d&#39;une machine constamment connecté à Internet, comme un serveur local ou distant, un NAS, ou juste un ordinateur de bureau.&lt;/p&gt;
&lt;p&gt;Et puis finalement, il va falloir mettre les mains dans le cambouis les enfants : on va parler, mis à part le client IRC, de logiciel en ligne de commande. Mais comme vous avez bien suivi &lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/&quot;&gt;mes articles&lt;/a&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/&quot;&gt;pour pimper&lt;/a&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/&quot;&gt;votre shell&lt;/a&gt;, vous êtes forcément compétents pour ce qui suivra. :)&lt;/p&gt;
&lt;h2 id=&quot;de-quels-ingredients-aurez-vous-besoin&quot;&gt;De quels ingrédients aurez-vous besoin ?&lt;/h2&gt;
&lt;h3 id=&quot;1-un-gateway-irc&quot;&gt;1/ Un Gateway IRC&lt;/h3&gt;
&lt;p&gt;Pour ceux qui n&#39;y connaissent vraiment rien à IRC (Internet Relay Chat), c&#39;est comme &lt;a href=&quot;http://slack.com/&quot;&gt;Slack&lt;/a&gt;, un protocole de chat à plusieurs mais en libre et ouvert, qui a fait ses preuves, et surtout nettement moins &lt;em&gt;hype&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Donc déjà, vous aurez besoin d&#39;un &lt;em&gt;Gateway IRC&lt;/em&gt; pour tous ces protocoles divers et variés de messagerie instantanée, en l&#39;occurence, ce sera &lt;strong&gt;&lt;a href=&quot;https://www.bitlbee.org&quot;&gt;Bitlbee&lt;/a&gt;&lt;/strong&gt; qui jouera ce rôle.&lt;/p&gt;
&lt;p&gt;Un &lt;em&gt;Gateway IRC&lt;/em&gt; retranscrira sous forme de flux IRC toutes les communications que vous recevrez. En gros, avec Bitlbee vous vous connecterez sur les comptes de messagerie instantanée, puis Bitlbee se transformera en un pseudo serveur IRC et enverra toutes vos conversations comme un &lt;em&gt;channel&lt;/em&gt; (ou salon) IRC.&lt;/p&gt;
&lt;p&gt;Bitlbee supporte nativement pléthore de protocoles et pour ceux qu&#39;il ne supporte pas directement, il propose des plugins ou redirige vers d&#39;autres solutions. Je vous laisse scruter leur &lt;a href=&quot;https://wiki.bitlbee.org/&quot;&gt;wiki&lt;/a&gt; pour vos propres besoins.&lt;/p&gt;
&lt;p&gt;Je ne vais pas m&#39;attarder sur son installation, le &lt;a href=&quot;https://wiki.bitlbee.org/GettingStarted&quot;&gt;wiki&lt;/a&gt; fera ça beaucoup mieux que moi. Sachez juste que si vous avez un NAS &lt;strong&gt;Synology&lt;/strong&gt;, il existe une app, plutôt bien mise à jour et qui fonctionne très bien.&lt;/p&gt;
&lt;p&gt;Pour ce qui est de la configuration, on verra par la suite.&lt;/p&gt;
&lt;h3 id=&quot;2-un-bouncer-bnc&quot;&gt;2/ Un Bouncer (BNC)&lt;/h3&gt;
&lt;p&gt;Un &lt;em&gt;Bouncer IRC&lt;/em&gt; ou &lt;em&gt;BNC&lt;/em&gt; est un proxy IRC, c&#39;est à dire que vous devez passer par lui pour vous connecter à IRC.&lt;/p&gt;
&lt;p&gt;À quoi bon me direz-vous ? Et bien le plus gros intérêt, pour ne pas dire le seul, c&#39;est qu&#39;il sera connecté en permanence à IRC, ce qui a priori ne sera pas votre cas.&lt;/p&gt;
&lt;p&gt;Et comme il est tout le temps sur IRC, vous serez toujours disponible pour recevoir des messages que vous pourrez lire plus tard, une fois connecté au BNC.&lt;/p&gt;
&lt;p&gt;C&#39;est tout l&#39;intérêt, non ?&lt;/p&gt;
&lt;p&gt;En guise de BNC, nous utiliserons donc &lt;a href=&quot;http://wiki.znc.in/ZNC&quot;&gt;ZNC&lt;/a&gt;, qui lui aussi a son app sur les NAS Synology, sauf que lui n&#39;est plus mis à jour sur les modèles pour particuliers, ils ne sont pas assez puissant. Je déconseille donc de l&#39;utiliser sur NAS parce qu&#39;une des fonctionnalités manquantes est justement qu&#39;il ne retransmet pas l&#39;historique des messages privés reçu pendant votre absence, ce qui plombe le but qu&#39;on se fixe aujourd&#39;hui.&lt;/p&gt;
&lt;p&gt;Même histoire pour l&#39;installation de ZNC, je vous laisse suivre les indications sur le &lt;a href=&quot;http://wiki.znc.in/Installation&quot;&gt;wiki&lt;/a&gt; et on verra ensuite pour la configuration.&lt;/p&gt;
&lt;h3 id=&quot;3-un-client-irc&quot;&gt;3/ Un client IRC.&lt;/h3&gt;
&lt;p&gt;Un client IRC c&#39;est donc un logiciel qui permet de se connecter à IRC et donc, chatter.&lt;/p&gt;
&lt;p&gt;Il en existe &lt;a href=&quot;https://en.wikipedia.org/wiki/Comparison_of_Internet_Relay_Chat_clients&quot;&gt;moult&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Personnellement, je suis sur mac donc je connais mieux ceux de cet OS mais voilà ceux que j&#39;ai le plus souvent rencontré :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Windows : L&#39;indécrottable &lt;strong&gt;mIRC&lt;/strong&gt;, &lt;strong&gt;HexChat&lt;/strong&gt;,…&lt;/li&gt;
&lt;li&gt;Linux : &lt;strong&gt;irssi&lt;/strong&gt; (cli), &lt;strong&gt;weechat&lt;/strong&gt; (cli), &lt;strong&gt;xChat&lt;/strong&gt;,…&lt;/li&gt;
&lt;li&gt;OSX : &lt;strong&gt;irssi&lt;/strong&gt; (cli), &lt;strong&gt;weechat&lt;/strong&gt;(cli), &lt;strong&gt;Limechat&lt;/strong&gt;, &lt;strong&gt;Colloquy&lt;/strong&gt;, &lt;strong&gt;Linkinus&lt;/strong&gt;, &lt;strong&gt;Textual&lt;/strong&gt;,…&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;em&gt;ceux notés &amp;quot;cli&amp;quot; sont en ligne de commande&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Je ne sais trop quoi vous conseiller, c&#39;est du feeling, n&#39;hésitez pas à tester, beaucoup sont soit gratuits, soit avec période d&#39;essai.&lt;/p&gt;
&lt;p&gt;Pour ma part, sur OSX, je suis resté longtemps sur &lt;strong&gt;Limechat&lt;/strong&gt; et puis je suis passé sur &lt;strong&gt;weechat&lt;/strong&gt; parce que j&#39;avais besoin de plus de liberté dans mon arrangement de fenêtre, mais c&#39;est vraiment au besoin de chacun.&lt;/p&gt;
&lt;p&gt;Maintenant que nous avons vu tous les ingrédients dont nous aurons besoin, passons à l&#39;assemblage.&lt;/p&gt;
&lt;h2 id=&quot;assembler-les-briques&quot;&gt;Assembler les briques&lt;/h2&gt;
&lt;p&gt;Comme tout transitera par IRC, et donc par votre BNC, voyons donc d&#39;abord comment configurer le cœur de notre système.&lt;/p&gt;
&lt;h3 id=&quot;configurer-znc&quot;&gt;Configurer ZNC&lt;/h3&gt;
&lt;p&gt;Je pars donc du principe que vous avez déjà installé &lt;strong&gt;ZNC&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Si vous n&#39;avez pas encore créé votre fichier de conf après le &lt;code&gt;make install&lt;/code&gt;, je vous invite à le faire maintenant en tapant &lt;code&gt;znc --makeconf&lt;/code&gt;. ZNC vous demandera plusieurs choses, laissez tout par défaut au départ si vous ne savez pas trop quoi mettre, rien n&#39;est immuable de toute façon, mais retenez au moins le &lt;em&gt;nom de user&lt;/em&gt;, le mot de passe et le port d&#39;écoute que vous aurez choisis.&lt;/p&gt;
&lt;p&gt;Configurer ZNC en ligne de commande, c&#39;est possible mais comme on est pas trop con et qu&#39;il y a une interface d&#39;administration, on va plutôt aller faire ça là-bas.&lt;/p&gt;
&lt;p&gt;Pour ce faire, ouvrez votre navigateur et tapez l&#39;adresse de votre serveur où est installé ZNC, c&#39;est à dire l&#39;ip locale de la machine si c&#39;est un serveur local, 127.0.0.1 (j&#39;imagine) si c&#39;est votre ordinateur de bureau, l&#39;ip ou le DNS si c&#39;est un serveur distant.&lt;/p&gt;
&lt;p&gt;Dans tous les cas, avant de taper sur &lt;em&gt;entrée&lt;/em&gt;, n&#39;oubliez pas de rajouter le port que vous aviez choisi auparavant.&lt;/p&gt;
&lt;p&gt;Ça devrait donner un truc comme ça &lt;code&gt;http://IpOuDnsDuServer.tld:1337&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Vous devriez arriver sur une page de login comme ça.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-1400.avif 1400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-1902.avif 1902w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-1400.webp 1400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-1902.webp 1902w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-400.png&quot; alt=&quot;ZNC login&quot; width=&quot;1902&quot; height=&quot;1370&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-1400.png 1400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/fYDSIRL8xJ-1902.png 1902w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Loggez-vous donc comme il se doit avec les identifiants que vous avez renseignés à l&#39;installation et une fois ceci fait allez directement aux &amp;quot;&lt;em&gt;Global settings&lt;/em&gt;&amp;quot;.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-1360.avif 1360w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-1360.webp 1360w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-400.png&quot; alt=&quot;ZNC listen ports&quot; width=&quot;1360&quot; height=&quot;360&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qKWmCGw5r0-1360.png 1360w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;Listen ports&lt;/em&gt;&amp;quot; apparait le port que vous avez choisi à l&#39;installation. Mais vous pouvez en ajouter autant que vous le souhaitez même si je vous conseille d&#39;avoir une putain de bonne raison de le faire. Notez que vous ne pouvez éditer ou supprimer le port en cours d&#39;utilisation.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-1268.avif 1268w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-1268.webp 1268w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-400.png&quot; alt=&quot;ZNC settings&quot; width=&quot;1268&quot; height=&quot;1274&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/d6joMrW5s2-1268.png 1268w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;settings&lt;/em&gt;&amp;quot;, vous pouvez vous amuser à changer le theme de l&#39;admin de ZNC mais ils sont tous moches, soyons honnêtes. Le thème &amp;quot;&lt;em&gt;Ice&lt;/em&gt;&amp;quot; est peut être le moins dégueulasse mais bon, faites comme bon vous semble, ce n&#39;est pas important.&lt;/p&gt;
&lt;p&gt;Ce qui est important par contre c&#39;est le &amp;quot;&lt;em&gt;Maximum Buffer Size&lt;/em&gt;&amp;quot;, c&#39;est le nombre de lignes gardées en mémoire tampon pour &lt;strong&gt;chaque&lt;/strong&gt; &lt;em&gt;buffer&lt;/em&gt; (c&#39;est à dire salon IRC/Slack et message privé) pendant votre absence sur ZNC; pas votre absence devant l&#39;écran, celle passée à être déconnecté de ZNC. Je l&#39;ai passé à 1000 parce que je passais beaucoup de temps dans les transports déconnecté de ZNC mais 500 est déjà pas mal raisonnable.&lt;/p&gt;
&lt;p&gt;Vous pouvez laisser le reste de cette section par défaut.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-1394.avif 1394w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-1394.webp 1394w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-400.png&quot; alt=&quot;ZNC global modules&quot; width=&quot;1394&quot; height=&quot;1262&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/WNRCd8r0IU-1394.png 1394w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;Global modules&lt;/em&gt;&amp;quot;, s&#39;activent et se désactivent les modules disponibles embarqués avec ZNC concernant l&#39;administration et la gestion de ZNC.&lt;/p&gt;
&lt;p&gt;Rien de vraiment intéressant ici pour vous à moins que vous décidiez de devenir fournisseur de bouncer pour vos copains. Et si c&#39;est le cas, allez lire la doc, c&#39;est pas le propos de ce billet. :)&lt;/p&gt;
&lt;p&gt;Allez donc cliquer sur &amp;quot;&lt;em&gt;Your settings&lt;/em&gt;&amp;quot; dans la navigation et vous arriverez sur la page de configuration de votre compte (logique, non ?).&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;Authentication&lt;/em&gt;&amp;quot; les options ne concernent que les informations pour se connecter à cette même admin. Rien à voir avec les serveurs IRC qu&#39;on renseignera plus tard. Donc à moins de vouloir modifier vos identifiants, ne touchez à rien.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-952.avif 952w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-952.webp 952w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-400.png&quot; alt=&quot;ZNC auth&quot; width=&quot;952&quot; height=&quot;572&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/yp_IXkkZvy-952.png 952w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;IRC Information&lt;/em&gt;&amp;quot; seront les informations par défaut de connexion aux serveurs IRC. Les mêmes que l&#39;on renseigne quand on se connecte sans BNC à IRC finalement, rien de neuf. Retenons surtout les trois premiers champs &lt;em&gt;Nickname&lt;/em&gt;, &lt;em&gt;Alt. Nickname&lt;/em&gt; et &lt;em&gt;Ident&lt;/em&gt;.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;Nickname&lt;/em&gt; sera votre pseudo visible, il doit être unique sur le serveur&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Alt. Nickname&lt;/em&gt; sera votre pseudo alternatif, utilisé quand quelqu&#39;un d&#39;autre a déjà pris votre pseudo, ce qui arrive quand on enregistre pas son pseudonyme sur le serveur IRC&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Ident (ou username)&lt;/em&gt;, contrairement au &lt;em&gt;nickname&lt;/em&gt;, n&#39;est pas forcément unique. L&#39;&lt;em&gt;idents&lt;/em&gt; apparaitra surtout lors de votre connexion à un salon ou si une personne utilise un &lt;code&gt;whois&lt;/code&gt; sur vous. Habituellement &lt;em&gt;nickname&lt;/em&gt; et &lt;em&gt;idents&lt;/em&gt; sont identiques mais rien ne vous l&#39;oblige.&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Realname&lt;/em&gt; sera votre identité. Rien ne vous oblige à mettre vos véritables nom et prénom, moi je ne le fais pas, mais c&#39;est là que vous pouvez le renseigner si vous le souhaitez.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-1342.avif 1342w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-1342.webp 1342w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-400.png&quot; alt=&quot;ZNC irc infos&quot; width=&quot;1342&quot; height=&quot;674&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/uILHSKCT5w-1342.png 1342w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;Networks&lt;/em&gt;&amp;quot; se trouvent tous les serveurs que vous avez ajoutés, et comme on ne l&#39;a pas encore vu, vous ne devriez rien avoir, à part peut-être Freenode si vous avez laissé ZNC installer ce serveur par défaut. Pour l&#39;instant, on n&#39;y fera rien mais retenez que c&#39;est ici qu&#39;il faudra aller pour éditer vos serveurs.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-1014.avif 1014w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-1014.webp 1014w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-400.png&quot; alt=&quot;ZNC networks&quot; width=&quot;1014&quot; height=&quot;334&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/7CRrwSMKHE-1014.png 1014w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;Modules&lt;/em&gt;&amp;quot; se trouvent vos modules par défaut qui seront activés sur tous les serveurs, à moins que vous ne disiez le contraire dans la configuration de chaque serveur. Il y en a pléthore et je ne vais pas passer tout en revue mais vous pouvez cliquer sur le lien du nom pour avoir plus d&#39;infos.&lt;/p&gt;
&lt;p&gt;Ce que je vais vous dire par contre, c&#39;est de cocher le module &amp;quot;&lt;em&gt;clearbufferonmsg&lt;/em&gt;&amp;quot; qui sert à garder le tampon intact tant que l&#39;on n&#39;a pas fait une action (écrire un message quelque part par exemple) ce qui permettra de garder les entrées en mémoire tampon même si une connexion est faite ailleurs sur un autre terminal (comme votre ordinateur à votre travail).&lt;/p&gt;
&lt;p&gt;Et ce sera tout de nécessaire mais je conseille tout de même de laisser tout par défaut à moins que vous sachiez exactement ce que vous faites.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-1400.avif 1400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-1410.avif 1410w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-1400.webp 1400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-1410.webp 1410w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-400.png&quot; alt=&quot;ZNC modules&quot; width=&quot;1410&quot; height=&quot;1266&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-1400.png 1400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/qGbJswS5nU-1410.png 1410w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;Default Settings&lt;/em&gt;&amp;quot;, vous pourrez définir surtout la taille du tampon pour votre propre utilisateur. Mettons que vous gériez le &lt;em&gt;bouncer&lt;/em&gt; pour plusieurs personnes, vous pouvez mettre le &lt;em&gt;buffer size&lt;/em&gt; global à 200 et booster le vôtre à 1000 parce que vous êtes une radasse de gros chacal. Mais ce n&#39;est qu&#39;un exemple.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/IldEfu7CIv-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/IldEfu7CIv-754.avif 754w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/IldEfu7CIv-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/IldEfu7CIv-754.webp 754w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/IldEfu7CIv-400.png&quot; alt=&quot;ZNC default settings&quot; width=&quot;754&quot; height=&quot;312&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/IldEfu7CIv-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/IldEfu7CIv-754.png 754w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;Flags&lt;/em&gt;&amp;quot;, surtout, &lt;strong&gt;SURTOUT&lt;/strong&gt;, décochez les deux options &lt;em&gt;Auto Clear Chan Buffer&lt;/em&gt; et &lt;em&gt;Auto Clear Query Buffer&lt;/em&gt;, sinon l&#39;option &lt;em&gt;clearbufferonmsg&lt;/em&gt; que vous avez coché auparavant ne servira à rien. Comme leur nom l&#39;indique, ces deux options vident le tampon des salons et messages privés si vous êtes quelque part connecté à ZNC.&lt;/p&gt;
&lt;p&gt;Pour le reste, vous pouvez laisser par défaut.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-1172.avif 1172w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-1172.webp 1172w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-400.png&quot; alt=&quot;ZNC flags&quot; width=&quot;1172&quot; height=&quot;252&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/99J1J2655b-1172.png 1172w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Dans la section &amp;quot;&lt;em&gt;ZNC Behavior&lt;/em&gt;&amp;quot;, rien à signaler, éditez si vous le souhaitez mais rien n&#39;est vraiment très important.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-1370.avif 1370w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-1370.webp 1370w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-400.png&quot; alt=&quot;ZNC behaviour&quot; width=&quot;1370&quot; height=&quot;1432&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/u5nvTKEgA0-1370.png 1370w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Bien ! Là, globalement, ZNC est configuré, il ne reste qu&#39;à ajouter des serveurs. Sur ce point je ne vais pas m&#39;attarder, c&#39;est assez simple.&lt;/p&gt;
&lt;p&gt;Vous donnez un nom à votre serveur, vous pouvez laisser vide les champs relatifs aux nickname et idents si vous les avez déjà renseignés sur la page &amp;quot;&lt;em&gt;Your Settings&lt;/em&gt;&amp;quot;, sinon ajoutez les nouveaux.&lt;/p&gt;
&lt;p&gt;Puis renseignez l&#39;url du serveur avec son port et l&#39;affaire est dans le sac.&lt;/p&gt;
&lt;p&gt;Vous pouvez aussi dès maintenant ajouter les salons que vous souhaitez rejoindre. Sachez cependant que ZNC les gardera en mémoire automatiquement si vous les joignez via IRC.&lt;/p&gt;
&lt;p&gt;Vous pouvez aussi activer/désactiver des modules propres à ce serveur.&lt;/p&gt;
&lt;p&gt;Voilà, ZNC c&#39;est fait !&lt;/p&gt;
&lt;p&gt;Next…&lt;/p&gt;
&lt;h3 id=&quot;configurer-le-client-irc&quot;&gt;Configurer le client IRC&lt;/h3&gt;
&lt;p&gt;Je finirai par Bitlbee si vous me le permettez, vous verrez, c&#39;est plus logique.&lt;/p&gt;
&lt;p&gt;Quelque soit votre choix de client IRC, qu&#39;il ait une UI ou qu&#39;il soit en cli, c&#39;est toujours le même credo : renseignez le serveur et votre nickname.&lt;/p&gt;
&lt;p&gt;Bon ok, il va falloir renseigner d&#39;autres choses pour se connecter à ZNC.&lt;/p&gt;
&lt;p&gt;Je vais montrer la fenêtre type sur Limechat pour l&#39;exemple.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/wdy44uk3lS-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/wdy44uk3lS-411.avif 411w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/wdy44uk3lS-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/wdy44uk3lS-411.webp 411w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/wdy44uk3lS-400.png&quot; alt=&quot;ZNC limechat&quot; width=&quot;411&quot; height=&quot;535&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/wdy44uk3lS-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/wdy44uk3lS-411.png 411w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Passons tout en revue :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Dans le champ &lt;em&gt;Network Name&lt;/em&gt; mettez bien ce que vous voulez. Si vous voulez vous connecter sur Freenode depuis votre ZNC, mettez &amp;quot;Freenode&amp;quot;, &amp;quot;Freenode|ZNC&amp;quot; ou bien &amp;quot;J&#39;aimeLesSucettesAlAnis&amp;quot;… vraiment on s&#39;en fout, c&#39;est pour vous, pour vous y retrouver.&lt;/li&gt;
&lt;li&gt;Dans le champ &lt;em&gt;server&lt;/em&gt;, il ne faut pas se tromper, ne mettez pas le dns officiel de Freenode hein, mettez le dns (ou l&#39;ip si vous êtes très pauvre) du serveur où est installé ZNC.&lt;/li&gt;
&lt;li&gt;N&#39;oubliez pas le port que vous avez renseigné lors de votre installation de ZNC.&lt;/li&gt;
&lt;li&gt;Dans le &lt;em&gt;Server Password&lt;/em&gt; mettez jute le même password que vous utilisez pour vous connecter à l&#39;admin de ZNC&lt;/li&gt;
&lt;li&gt;Le &lt;em&gt;nickname&lt;/em&gt; est techniquement inutile, puisque c&#39;est ZNC qui se connecte à IRC à votre place et qui utilisera donc ses propres informations de connexion. Malgré tout, nombreux sont les clients qui ne vous laisseront pas ajouter un serveur sans ajouter un &lt;em&gt;nickname&lt;/em&gt; alors mettez ce que vous voulez, de toute façon&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;ça ne sera pas utilisé.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Dans le champ &lt;em&gt;Login name&lt;/em&gt; par contre, faites comme suit : &lt;strong&gt;VotrePseudoZNC/NomDuServeurZNC&lt;/strong&gt;. Par exemple mon nom d&#39;utilisateur sur ZNC est &amp;quot;GoOz&amp;quot; et le serveur que je veux ajouter a pour nom &amp;quot;Freenode&amp;quot; sur ZNC, donc dans le champ &lt;em&gt;login name&lt;/em&gt; je mets &amp;quot;GoOz/Freenode&amp;quot;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Et c&#39;est tout, laissez le reste vide car ça ne servira absolument à rien.&lt;/p&gt;
&lt;h3 id=&quot;configurer-bitlbee&quot;&gt;Configurer Bitlbee&lt;/h3&gt;
&lt;p&gt;Vous allez voir, c&#39;est simple comme bonjour… sauf que Bitlbee, contrairement à ZNC, n&#39;a pas d&#39;interface d&#39;administration et, honnêtement, les développeurs ont eu raison de ne pas se faire chier avec ça car ça n&#39;en vaut pas la peine.&lt;/p&gt;
&lt;p&gt;Tout d&#39;abord, comme je l&#39;ai dit plus tôt, Bitlbee se comporte comme un serveur IRC donc nous allons l&#39;ajouter à ZNC comme tel. La seule petite nuance avec lui est de bien déterminer l&#39;URL à renseigner :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Si vous installez Bitlbee sur la même machine que ZNC, que ce soit votre machine fixe à la maison, votre serveur local ou un serveur distant, vous n&#39;avez qu&#39;à mettre &lt;em&gt;127.0.0.1 6667&lt;/em&gt; (6667 si vous avez laissé le port par défaut à l&#39;installation) dans le champ &amp;quot;&lt;em&gt;Servers of this IRC Network&lt;/em&gt;&amp;quot; dans ZNC&lt;/li&gt;
&lt;li&gt;Si vous l&#39;avez installé sur une autre machine que ZNC, il va falloir soit renseigner l&#39;IP de cette machine, soit y lier un DNS. Si vous l&#39;avez installé sur votre NAS synology, sachez que la marque propose un système de DNS gratuit. Il suffit de vous créer un compte sur &lt;a href=&quot;https://account.synology.com/fr-fr&quot;&gt;leur site&lt;/a&gt; et de suivre les directives. Dans tous les cas, renseignez le champ &amp;quot;&lt;em&gt;Servers of this IRC Network&lt;/em&gt;&amp;quot; avec l&#39;IP ou le DNS suivi de l&#39;IP par défaut (6667) ou celle que vous aurez choisi à l&#39;installation.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Un fois ceci fait, allez dans votre client IRC et ajoutez ce serveur comme n&#39;importe quel autre serveur IRC et connectez-vous.&lt;/p&gt;
&lt;p&gt;Un salon particulier apparait normalement et devrait s&#39;appeler &lt;strong&gt;&amp;amp;bitlbee&lt;/strong&gt;. C&#39;est le salon de contrôle : vous devrez y faire toutes vos commandes.&lt;/p&gt;
&lt;p&gt;Allez donc sur ce salon et tapez &lt;code&gt;help&lt;/code&gt; pour voir tous les types de commandes disponibles. Pour faire ça bien je vous conseille de taper &lt;code&gt;help quickstart&lt;/code&gt; puisque c&#39;est votre toute première fois. Ça devrait vous expliquer plein de choses comme, notamment, le fait que vous devez créer un compte. Alors faites-le en tapant &lt;code&gt;register votrenouveaumotdepasse&lt;/code&gt; et mémorisez-le. Avant de faire autre chose, retournez dans ZNC, et dans le champ où vous aviez renseigné l&#39;URL du serveur, ajoutez juste après le port, sans virgule ni rien, un espace suivi de votre mot de passe. De cette manière, vous serez automatiquement connecté à Bitlbee sur votre compte.&lt;/p&gt;
&lt;p&gt;Passons donc à la suite. Toujours dans le salon de contrôle, tapez &lt;code&gt;help quickstart2&lt;/code&gt; et tout devrait vous être expliqué. Pour information, le protocole pour gtalk est jabber. Vous n&#39;avez plus qu&#39;à suivre les instructions et taper des commandes du style &lt;code&gt;account add jabber MonAdresseGtalk@gmail.com MonMotDePasse&lt;/code&gt; et ainsi de suite pour tous vos comptes de messagerie instantanée.&lt;/p&gt;
&lt;p&gt;De bien utiles informations vous seront fournies si vous continuez le quickstart en tapant les commandes &lt;code&gt;help quickstartn&lt;/code&gt; où &lt;em&gt;n&lt;/em&gt; va jusqu&#39;à 6. Si vous voulez lire le quickstart de façon plus agréable, vous pouvez aussi le voir &lt;a href=&quot;https://wiki.bitlbee.org/quickstart&quot;&gt;en ligne&lt;/a&gt;. N&#39;hésitez pas non plus à lire la page dédiée à l&#39;utilisation de &lt;a href=&quot;https://wiki.bitlbee.org/HowtoGtalk&quot;&gt;Gtalk dans Bitlbee&lt;/a&gt;, vous pourrez y voir comment activer l&#39;OAuth mais aussi pourquoi les noms de certains de vos contacts ont l&#39;air foireux. &lt;em&gt;Spoiler alert : Google+ est un con&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Désormais, vous ne devriez plus avoir de conversations perdues dans les méandres des internets et en prime tout se passe dans un seul et même logiciel. C&#39;est y pas beau le progrès.&lt;/p&gt;
&lt;p&gt;Voilà, vous avez toutes les bases et n&#39;oubliez pas que Google est votre ami (bien curieux mais tout de même) et la doc est votre meilleure amie.&lt;/p&gt;
&lt;p&gt;En bonus, voici à quoi ressemble mon client IRC en action.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-400.avif 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-812.avif 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-1277.avif 1277w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-400.webp 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-812.webp 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-1277.webp 1277w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-400.png&quot; alt=&quot;Weechat&quot; width=&quot;1277&quot; height=&quot;816&quot; srcset=&quot;https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-400.png 400w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-812.png 812w, https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/XAalzwB3Nm-1277.png 1277w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Comme je l&#39;ai dit plus tôt, j&#39;utilise &lt;a href=&quot;https://weechat.org/&quot;&gt;weechat&lt;/a&gt;, un client en lige de commande.&lt;/p&gt;
&lt;p&gt;Vous pouvez observer plusieurs zones distinctes :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;en 1&lt;/strong&gt; vous avec la barre des serveurs sur lesquels je suis connecté et les salons divers où je fais acte de présence. Les salons weechat, chanmon, highmon et iset sont des outils propres à weechat, &lt;strong&gt;Bitlbee&lt;/strong&gt; (IM) avec deux comptes gmail (Pro et Perso), &lt;strong&gt;Freenode&lt;/strong&gt; (IRC), &lt;strong&gt;Mozilla&lt;/strong&gt; (IRC), &lt;strong&gt;SlackClever&lt;/strong&gt; et &lt;strong&gt;SlackOonops&lt;/strong&gt; (Slack to IRC)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;en 2&lt;/strong&gt; vous avez la fenêtre principale de discussion. Dans cette fenêtre s&#39;affiche donc le salon dans lequel je suis en train de parler. Notez qu&#39;avec weechat, je peux avoir plusieurs fenêtres de discussion ouvertes en même temps.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;en 3&lt;/strong&gt; vous avez la nicklist (liste des users présents) associée au salon dans la fenêtre principale.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;en 4&lt;/strong&gt; j&#39;y ai mis le plugin &lt;em&gt;chanmon&lt;/em&gt; de weechat qui me permet d&#39;avoir un œil sur ce qu&#39;il se passe dans les autres salons, sans avoir à y aller directement depuis ma fenêtre principale.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;en 5&lt;/strong&gt; j&#39;y ai mis le plugin &lt;em&gt;highmon&lt;/em&gt; de weechat qui me permet de voir tous les &lt;em&gt;highlight&lt;/em&gt; ou &lt;em&gt;ping&lt;/em&gt; de n&#39;importe quel salon ainsi que tous les messages privés et de juger si cela vaut mon attention immédiate ou non.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Si certains aventuriers sont intéressés par ma configuration de &lt;strong&gt;weechat&lt;/strong&gt;, je peux aussi en faire un prochain billet.&lt;/p&gt;
&lt;p&gt;Bref, voilà, j&#39;espère que ça vous a plu et si vous avez des questions, n&#39;hésitez pas à me les poser sur &lt;a href=&quot;http://twitter.com/GoOz&quot;&gt;Twitter&lt;/a&gt;.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>On nous ment, on nous spolie.</title>
    <link href="https://blog.foojin.com/2016/02/16/on-nous-ment-on-nous-spolie/" />
    <updated>2016-02-16T00:00:00Z</updated>
    <id>https://blog.foojin.com/2016/02/16/on-nous-ment-on-nous-spolie/</id>
    <content type="html">&lt;p&gt;Hier, &lt;a href=&quot;http://twitter.com/borisschapira&quot;&gt;Boris&lt;/a&gt; réagissait sur un article du &lt;a href=&quot;http://correcteurs.blog.lemonde.fr/2016/01/30/le-pronom-nous-est-il-entre-en-zone-omineuse/&quot;&gt;Monde.fr&lt;/a&gt; à propos de la douce mais pernicieuse infection du &amp;quot;&lt;strong&gt;nous&lt;/strong&gt;&amp;quot; par le &amp;quot;&lt;strong&gt;on&lt;/strong&gt;&amp;quot;, sur les impacts sémantiques, de la disparition de la responsabilité.&lt;/p&gt;
&lt;p&gt;Qu&#39;on le veuille ou non, &amp;quot;nous&amp;quot; sera remplacé par &amp;quot;on&amp;quot;. La langue française est vivante et évolue et se simplifie par le biais de son utilisation au jour le jour par ceux qui la parlent. Et n&#39;allez pas me faire croire que le français est une langue simple. Elle est excessivement compliquée. La conjugaison est un monstre horrible, les règles grammaticales perverses et l&#39;orthographe un punk à chien qui ne respecte que ce qu&#39;il veut bien respecter.&lt;/p&gt;
&lt;p&gt;Notez que je ne parle même pas de la propension qu&#39;à un français à faire des métaphores et autres images analogiques à tire-lartigot.&lt;/p&gt;
&lt;p&gt;La simplification est une bonne chose, et je dois dire que je suis souvent pour, pourtant je suis un amoureux de la langue mais j&#39;ai bien conscience que l&#39;amour rend aveugle.&lt;/p&gt;
&lt;p&gt;Alors oui, &amp;quot;on&amp;quot; est un pronom indéfini et qu&#39;il a encore cette fonction.&lt;/p&gt;
&lt;p&gt;Exemple: &amp;quot;&lt;em&gt;On a volé mon vélo cette nuit&lt;/em&gt;&amp;quot;&lt;/p&gt;
&lt;p&gt;Clairement, &amp;quot;on&amp;quot; rapporte à l&#39;indéfini, et non pas à &amp;quot;nous&amp;quot;.&lt;/p&gt;
&lt;p&gt;Mais &amp;quot;on&amp;quot; a naturellement pris le pas sur &amp;quot;nous&amp;quot; et ça ne pose aucun soucis.&lt;/p&gt;
&lt;p&gt;Exemple: &amp;quot;&lt;em&gt;On a raté notre avion à cause des bouchons sur l&#39;autoroute&lt;/em&gt;&amp;quot;&lt;/p&gt;
&lt;p&gt;Clairement, &amp;quot;on&amp;quot; est défini, c&#39;est nous.&lt;/p&gt;
&lt;p&gt;Si dans la tête des gens &amp;quot;on&amp;quot; remplace &amp;quot;nous&amp;quot; dans certains contextes, alors je ne vois aucun problème sur la question de la responsabilité.&lt;/p&gt;
&lt;p&gt;&amp;quot;on&amp;quot; ≠ indéfini systématiquement.&lt;/p&gt;
&lt;p&gt;Si &amp;quot;on&amp;quot; = collectif = &amp;quot;nous&amp;quot;, alors pas de problème.&lt;/p&gt;
&lt;p&gt;Dans l&#39;exemple donné par &lt;a href=&quot;http://www.nicolas-hoffmann.net/source/1560-J-ai-decide-d-arreter-de-sauver-le-monde.html&quot;&gt;Nicolas&lt;/a&gt;, le problème n&#39;est pas tant l&#39;utilisation du &amp;quot;on&amp;quot; que l&#39;utilisation du collectif pour ne pas directement dire &amp;quot;tu&amp;quot;.&lt;/p&gt;
&lt;p&gt;Pourquoi la perte du &amp;quot;nous&amp;quot; n&#39;est pas foncièrement une mauvaise chose ? Parce que c&#39;était compliqué, voilà tout. Les gens veulent pouvoir parler sans réfléchir à la putain de conjugaison, des exceptions à foison et autres. &amp;quot;on&amp;quot; c&#39;est la troisième personne du singulier, c&#39;est simple, ça marche, c&#39;est tout.&lt;/p&gt;
&lt;p&gt;Et vous pourriez me dire que ça rajoute une complexité à cause du double sens de &amp;quot;on&amp;quot; mais je vous dirais que la complexité ajoutée est bien moindre comparée à la simplification qu&#39;elle a engendré.&lt;/p&gt;
&lt;p&gt;Mais si vous voulez on peut aussi parler de &amp;quot;vous&amp;quot;… Je veux dire, ça fait des décennies que &amp;quot;vous&amp;quot; est à la fois la deuxième personne du pluriel, ainsi que la deuxième personne du singulier de politesse mais aussi la deuxième personne du pluriel de politesse et ça n&#39;a pas eu l&#39;air de poser de problème à quiconque.&lt;/p&gt;
&lt;p&gt;En bref, je suis plutôt pour la lente mais certaine disparition du &amp;quot;nous&amp;quot;. Si vous n&#39;êtes pas d&#39;accord, faites-le moi savoir sur &lt;a href=&quot;http://twitter.com/GoOz&quot;&gt;Twitter&lt;/a&gt; :)&lt;/p&gt;
&lt;p&gt;_Cover par &lt;a href=&quot;https://www.flickr.com/photos/erebos_/6169168565/&quot;&gt;~ Erebos&lt;/a&gt;_&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>De la problématique de la goutte de trop.</title>
    <link href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/" />
    <updated>2015-03-17T00:00:00Z</updated>
    <id>https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/</id>
    <content type="html">&lt;p&gt;Je me baladais un jour dans la &lt;a href=&quot;https://www.google.fr/maps/place/Foret+de+Marly,+Marly+le+Roi+Forest,+78620+L%27%C3%89tang-la-Ville/@48.8628984,2.0564139,16z/data=!4m2!3m1!1s0x47e687d57299aba3:0x482779b4764984f?hl=en&quot;&gt;forêt de Marly&lt;/a&gt; avec ma douce et tendre, et une conversation en amenant une autre, elle vient à me parler du &lt;a href=&quot;http://www.pissedebout.fr/&quot;&gt;pisse debout&lt;/a&gt; et remarque qu&#39;elle pourrait enfin savoir ce que c&#39;est que pisser debout et peut-être même comprendre le pourquoi de la goutte de pisse sur la cuvette.&lt;/p&gt;
&lt;p&gt;Là, je prends mon plus bel air narquois, non pas parce que je suis un macho phallocrate et misogyne mais parce que je suis juste un simple connard, et je lui dis qu&#39;elle ne comprendrait qu&#39;une partie mais pas tout, car le &amp;quot;pisse-debout&amp;quot; n&#39;est malgré tout pas un pénis. Et c&#39;est alors que j&#39;ai essayé de lui expliquer toutes les possibles explications de la goutte de trop.&lt;/p&gt;
&lt;p&gt;Et je vais tenter de vous retranscrire tout ça, de la manière la plus exhaustive possible.&lt;/p&gt;
&lt;p&gt;Tout d&#39;abord, il vous faut avoir en tête l&#39;image du doux instrument qu&#39;est le pénis. Je m&#39;en voudrais de remettre en cause votre connaissance du dit appareil mais je préfère encore faire un petit rappel pour que nous partions tous sur des bases communes. Alors voici :&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-400.avif 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-812.avif 812w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-1080.avif 1080w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-400.webp 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-812.webp 812w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-1080.webp 1080w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-400.png&quot; alt=&quot;Schéma du pénis&quot; width=&quot;1080&quot; height=&quot;864&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-400.png 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-812.png 812w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/fFQzp2yFeG-1080.png 1080w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;C&#39;est bon ? vous l&#39;avez bien en tête ?&lt;/p&gt;
&lt;h2 id=&quot;prepuce-or-not-prepuce-that-is-the-question&quot;&gt;Prépuce or not prépuce, that is the question.&lt;/h2&gt;
&lt;p&gt;Je pense que nous devons tout d&#39;abord parler du prépuce. Il est très significatif dans cette notion de la goutte de trop.&lt;/p&gt;
&lt;p&gt;Le prépuce est donc cette peau en rab qui couvre le gland, elle a plusieurs fonctions dont au moins une protectrice. C&#39;est d&#39;autant plus cocasse quand on sait que la circoncision a aussi ce rôle protecteur quand ce n&#39;est pas pour une raison religieuse.&lt;/p&gt;
&lt;p&gt;Bref, toujours est-il qu&#39;à peu près 30% de la population masculine mondiale est circoncise. Donc près d&#39;un tiers des hommes ne comprendra pas ce dont je vais parler en premier.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/DEtiRgjLp6-400.webp 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/DEtiRgjLp6-480.webp 480w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/DEtiRgjLp6-400.gif&quot; alt=&quot;&quot; width=&quot;480&quot; height=&quot;360&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/DEtiRgjLp6-400.gif 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/DEtiRgjLp6-480.gif 480w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;la-situation&quot;&gt;La situation&lt;/h3&gt;
&lt;p&gt;Imaginez vous un peu ce surplus de peau recouvrant entièrement le gland du pénis, tout ça emballé dans un slip ou boxer bien moulant, ou pire dans cette invention du diable qu&#39;est le pantalon &amp;quot;slim&amp;quot;.&lt;/p&gt;
&lt;p&gt;Dans cette situation, tout est compressé, bien au chaud.&lt;/p&gt;
&lt;p&gt;Voici donc notre prépuce, toujours légèrement humide car un de ses rôle protecteur est d&#39;empêcher le dessèchement du gland, qui voit enfin l&#39;air libre quand vous allez pisser.&lt;/p&gt;
&lt;h3 id=&quot;le-probleme&quot;&gt;Le problème&lt;/h3&gt;
&lt;p&gt;Tout est collé, il n&#39;y a pas de sortie possible pour l&#39;urine… en apparence car ça serait sans compter sur le pouvoir magique de la pression.&lt;/p&gt;
&lt;p&gt;Et voici que notre urine trouve son chemin sur l&#39;endroit le plus faible du collage de prépuce.&lt;/p&gt;
&lt;p&gt;Est-ce que cette faille est juste en face du &lt;em&gt;méat&lt;/em&gt; (c&#39;est le nom poli pour le trou du pipi) ? NOOOOOOON bien sûr, il est un peu plus à droite ou à gauche… &lt;strong&gt;ou pire&lt;/strong&gt; un double bingo à droite &lt;strong&gt;et&lt;/strong&gt; à gauche.&lt;/p&gt;
&lt;p&gt;Bref, vous commencez à pisser de biais et vous aviez beau vous être positionné comme il fallait, pour au moins une fraction de seconde, &lt;strong&gt;vous pissez à côté… sur la cuvette&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;D&#39;aucuns vous diraient que la situation est facilement contournable en prenant le soin de bien décaloter le prépuce avant de commencer à uriner et ils auraient raison, mais soyons sérieux, nous ne sommes pas toujours 100% &lt;em&gt;aware&lt;/em&gt; surtout pour un pipi dans la nuit ou au réveil. Enfin je dis ça…&lt;/p&gt;
&lt;h2 id=&quot;sous-pression&quot;&gt;Sous pression&lt;/h2&gt;
&lt;p&gt;L&#39;urine est un flux liquide et comme tout flux, il n&#39;est pas toujours facilement mesurable et n&#39;est pas toujours homogène… cet enfoiré.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/WPFKCQqGcI-400.webp 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/WPFKCQqGcI-500.webp 500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/WPFKCQqGcI-400.gif&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;336&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/WPFKCQqGcI-400.gif 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/WPFKCQqGcI-500.gif 500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;la-situation-2&quot;&gt;La situation&lt;/h3&gt;
&lt;p&gt;Vous avez bu 3 pintes de bière et vous avez beau vous retenir parce que vous ne voulez pas râter la chute de la blague sexiste de votre beauf de pote sur trois péripatéticiennes dans un ascenceur, il vous faut rendre à la nature ce que le houblon vous a donné.&lt;/p&gt;
&lt;p&gt;Tout le monde le sait, pour un litre de bière bu, vous avez le droit à deux litres d&#39;urine. Et ça fait beaucoup pour votre petite vessie pleine à rabord. Beaucoup de pression tout ça.&lt;/p&gt;
&lt;p&gt;Du coup vous allez aux toilettes, vous décalotez parce que vous faites ça bien mais ça ne suffira pas.&lt;/p&gt;
&lt;h3 id=&quot;le-probleme-2&quot;&gt;Le problème&lt;/h3&gt;
&lt;p&gt;Vous avez manifestement sous-estimé la pression. Votre urine est telle &lt;em&gt;Usain Bolt&lt;/em&gt; sur ses starting blocks et telle &lt;em&gt;Usain Bolt&lt;/em&gt; elle part comme une fusée. Trop pour vous. Trop pour l&#39;orientation que vous avez choisi pour votre pénis. Et là c&#39;est le drame, &lt;strong&gt;un bout du premier jet part sur la cuvette…&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Mais attendez, cette connasse de pression n&#39;en a pas fini avec vous. Au tout début, le flux est continu, homogène; votre vessie se dégonfle, se vide au rythme de votre satisfaction, et plus elle se vide, plus la pression diminue.&lt;/p&gt;
&lt;p&gt;Alors que profitiez sereinement de votre vidange, vous ne faites plus attention, l&#39;orientation de votre pénis n&#39;est plus optimale pour viser le centre &lt;strong&gt;ET BIM CUVETTE !&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Ou alors vous aviez prévu cette baisse de pression et ré-orienté votre pénis mais alors que le flux paraissait arriver au bout vous forcez votre muscle pour presser la vessie comme une éponge et là, surprise, il en restait plus que prévu et du coup augmentation du flux, orientation du pénis erronée, &lt;strong&gt;BIM CUVETTE !&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Ce sera, je pense, le seul et unique cas reproduisible par le &lt;a href=&quot;http://www.pissedebout.fr/&quot;&gt;pisse debout&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;le-piege-de-l-elastique&quot;&gt;Le piège de l&#39;élastique&lt;/h2&gt;
&lt;p&gt;Dans le même genre que la problématique et sournoise pression, vous avez le piège de l&#39;élastique du slip ou du caleçon.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/5PqH9i5BxG-320.webp 320w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/5PqH9i5BxG-320.gif&quot; alt=&quot;&quot; width=&quot;320&quot; height=&quot;213&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;la-situation-3&quot;&gt;La situation&lt;/h3&gt;
&lt;p&gt;Vous allez aux toilettes, sortez votre engin de son écrin de coton, et décidez de ne pas retenir l&#39;élastique de votre slibard et le laissez délicatement posé à la base de votre pénis parce que vous avez un mickey dans le nez des plus coriaces et que vous êtes persuadé d&#39;être un pro du &lt;em&gt;multitasking&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Rien d&#39;affolant jusque-là. Mais connaissez-vous la blague de l&#39;arroseur arrosé ? Avec le gars qui tord le tuyau d&#39;eau ? Mais siiiii, j&#39;en suis sûr.&lt;/p&gt;
&lt;h3 id=&quot;le-probleme-3&quot;&gt;Le problème&lt;/h3&gt;
&lt;p&gt;Vous avez vaincu votre mickey, avez fini d&#39;uriner aux vues de votre sensation de vide dans la vessie et de la manifeste faible quantité d&#39;urine qui coule encore.&lt;/p&gt;
&lt;p&gt;Vous vous apprêtrez à remballer le matériel dans son paquetage quand, tout à coup, en relevant l&#39;élastique, un nouveau jet fait éruption… &lt;strong&gt;ET BIM CUVETTE&lt;/strong&gt; voire même, si vous êtes rapide en besogne, &lt;strong&gt;DOUBLE COMBO SLIP&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Mais pourquoi, ô grand dieu, cela vous est-til arrivé ? Bah déjà par ce que c&#39;était arrogant de votre part de croire que vous pouviez faire convenablement deux choses en même temps, et puis aussi parce que quand la pression de l&#39;urine est forte, elle suffit à contrer la pression de l&#39;élastique mais quand la pression du flux faiblit, l&#39;urine sortie de la vessie reste bloquée dans l&#39;urêtre au niveau de l&#39;élastique. C&#39;est aussi con que ça.&lt;/p&gt;
&lt;h2 id=&quot;la-debandade&quot;&gt;La débandade&lt;/h2&gt;
&lt;p&gt;Si vous demandez à n&#39;importe quelle homme normalement constitué, il vous dira qu&#39;il lui est impossible d&#39;uriner alors qu&#39;il est en mode Super Saiyan (comprendre : quand il a une gaule d&#39;enfer). C&#39;est normal.&lt;/p&gt;
&lt;p&gt;Au même titre que des rails d&#39;une voies ferrée, l&#39;urêtre est la seule et unique voie qui sort du pénis. Or, vous n&#39;êtes pas sans savoir que l&#39;homme est capable de rejeter deux types de liquide par son pénis : le liquide séminal et le liquide urinaire.&lt;/p&gt;
&lt;p&gt;Pour des raisons évidentes de bien-séance, il y a un embranchement pour accéder à l&#39;urêtre que se partagent la vessie et les roubignoles (je fais bref hein) et c&#39;est pour ça que vous ne pisserez pas du sperme ou que vous n&#39;éjaculerez pas de l&#39;urine (sous réserve d&#39;une constitution normale).&lt;/p&gt;
&lt;p&gt;Par contre, vous pouvez uriner alors que votre érection n&#39;est pas complètement redescendue.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/BxH_sMyDYT-400.webp 400w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/BxH_sMyDYT-400.gif&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;267&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;la-situation-4&quot;&gt;La situation&lt;/h3&gt;
&lt;p&gt;On est dimanche matin, vous venez de vous réveiller et vous avez encore des restes du houblon de la veille. Il vous faut vite aller aux toilettes. Vite. Mais vous avez une puissante gaule matinale, le genre qui vous rendrait fier en temps normal mais qui dans le cas présent vous emmerde bien comme il faut.&lt;/p&gt;
&lt;h3 id=&quot;le-probleme-4&quot;&gt;Le problème&lt;/h3&gt;
&lt;p&gt;Vous devez attendre que le sang présent dans vos corps caverneux se fasse la malle et ramollisse la barre à mine que vous avez à la place du pénis. Mais votre envie de vider votre vessie est si puissante qu&#39;à la moindre impression de faiblesse vous commencez à pousser avec votre muscle sur votre vessie.&lt;/p&gt;
&lt;p&gt;Seul hic, quand vous urinez d&#39;habitude, votre pénis ne forme pas une putain d&#39;équerre. Il est nettement moins aisé de viser le centre de la cuvette dans ces conditions.&lt;/p&gt;
&lt;p&gt;Vous sentez alors que vous pouvez le faire si vous réussissez à réduire la quantité de fluide qui sort afin de produire un faible jet qui tombera directement en dans le trou. Mais la forte pression de votre vessie pousse avec rage alors avec votre muscle, si vous avez réussi à éviter la cuvette jusque-là, vous coupez le flux.&lt;/p&gt;
&lt;p&gt;Sauf que pour une raison que j&#39;ignore il s&#39;agit du même muscle, ou un autre juste à côté, qui vous fait remonter le phallus (les hommes comprendront) et là sur la fin du jet stoppé… &lt;strong&gt;BIM CUVETTE !&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&quot;les-circonstances-attenuantes&quot;&gt;Les circonstances atténuantes&lt;/h2&gt;
&lt;p&gt;Il y a quelques autres situations bien moins complexes mais belles et bien génératrices de gouttes de trop.&lt;/p&gt;
&lt;h3 id=&quot;la-cuvette-est-le-coupable&quot;&gt;La cuvette est le coupable&lt;/h3&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/4pbreme-yQ-400.webp 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/4pbreme-yQ-500.webp 500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/4pbreme-yQ-400.gif&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;281&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/4pbreme-yQ-400.gif 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/4pbreme-yQ-500.gif 500w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Croyez-le ou non, mais il y a des gens qui étudient la forme et l&#39;ergonomie des cuvettes de toilette. Et donc il y a des gens qui testent à coup de jet si les angles sont les plus adequats pour éviter la génération de goutte. Le truc étant que tout le monde n&#39;achète pas sa cuvette de chiotte en fonctione de sa note ergonomique et que vous tomberez forcément un jour sur une de ces cuvettes innommables. Vous viserez bien comme il faut au milieu et vous mettrez malgré vous des gouttes sur la cuvette…&lt;/p&gt;
&lt;p&gt;Monde de merde.&lt;/p&gt;
&lt;h3 id=&quot;la-secousse&quot;&gt;La secousse&lt;/h3&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/YgDY3nHYMo-400.webp 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/YgDY3nHYMo-457.webp 457w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/YgDY3nHYMo-400.gif&quot; alt=&quot;&quot; width=&quot;457&quot; height=&quot;304&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/YgDY3nHYMo-400.gif 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/YgDY3nHYMo-457.gif 457w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Nous aimons bien, nous fiers détenteurs de pénis, nous secouer le zob pour faire tomber la dernière goutte qui refuse de tomber tout seule. Comme un amical petit coup de pouce. Sauf que parfois, elle résiste, elle prouve qu&#39;elle existe et plus nous y mettons du nôtre, moins nous avons le contrôle sur le point de chute. Et… bon ben pas besoin d&#39;en dire plus vous avez compris.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;C&#39;est pas toujours facile d&#39;être un homme, au moins pour ça, si ce n&#39;est pas uniquement pour ça.&lt;/p&gt;
&lt;p&gt;Alors oui, on pourrait tous s&#39;assoir comme nos amies les femmes, ça nous éviterait bien des problèmes mais merde, on a un moyen de pisser sans toucher aux vils germes des toilettes publiques alors je vois pas pourquoi on devrait s&#39;en priver.&lt;/p&gt;
&lt;p&gt;Ceci étant ça n&#39;excuse pas du tout le fait de ne pas nettoyer ses saloperies. Sérieusement les gars, faites pas les porcs.&lt;/p&gt;
&lt;p&gt;Si tu pisses sur la cuvette, n&#39;en laisse pas une gouttelette.&lt;/p&gt;
&lt;p&gt;De toute façon, je vous surveille !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/mlC5sj-7P1-400.webp 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/mlC5sj-7P1-480.webp 480w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/mlC5sj-7P1-400.gif&quot; alt=&quot;&quot; width=&quot;480&quot; height=&quot;261&quot; srcset=&quot;https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/mlC5sj-7P1-400.gif 400w, https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/mlC5sj-7P1-480.gif 480w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Cover par &lt;a href=&quot;https://www.flickr.com/photos/az1172/2267066030&quot;&gt; André Zehetbauer&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Sur la formation de la plèbe</title>
    <link href="https://blog.foojin.com/2014/11/10/sur-la-formation-de-la-plebe/" />
    <updated>2014-11-10T00:00:00Z</updated>
    <id>https://blog.foojin.com/2014/11/10/sur-la-formation-de-la-plebe/</id>
    <content type="html">&lt;p&gt;Vous savez quand on a un métier dont le savoir est en perpétuelle évolution, et c&#39;est le cas du mien l&#39;intégration web / le développement front-end, on a, pour peu que notre propre n&#39;égo ne se sente pas pousser des ailes, l&#39;immuable sensation d&#39;être une sous-merde.&lt;/p&gt;
&lt;p&gt;Nous sommes, nous autres intégrateurs, sous le joug au mieux d&#39;une humilité sans faille, au pire d&#39;un sentiment d&#39;imposture. Marie &amp;quot;&lt;a href=&quot;https://twitter.com/kreestal&quot;&gt;kReEsTaL&lt;/a&gt;&amp;quot; Guilllaumet, dans son billet &amp;quot;&lt;a href=&quot;http://www.lesintegristes.net/2013/03/19/integration-web-humilite/&quot;&gt;L&#39;intégration web, cette leçon d&#39;humilité&lt;/a&gt;&amp;quot;, le résume à la perfection.&lt;/p&gt;
&lt;p&gt;J&#39;ai toujours su les sujets que je connaissais et su des sujets que j&#39;ignorais (mais que je pouvais savoir en poussant l&#39;étude). Cependant j&#39;ignorais ce que j&#39;ignorais. Rien de bien alarmant en soi, c&#39;est on ne peut plus logique. Non, ce qui me faisait peur, c&#39;était l&#39;ampleur même de cette ignorance.&lt;/p&gt;
&lt;p&gt;Cette ignorance, parlons-en. Je me suis laissé bouffer bien longtemps par ça. J&#39;ai longtemps été dans des petites équipes front qui avaient peu ou prou le même niveau que moi mais pour faire ma veille je suivais des &lt;em&gt;kadors&lt;/em&gt;, des &lt;em&gt;ninjas&lt;/em&gt; ou encore des &lt;em&gt;gourous&lt;/em&gt;. Le genre de personne qui vont font baver et qui surtout vous font ressentir ce sentiment d&#39;infériorité.&lt;/p&gt;
&lt;p&gt;Et puis le temps passe, mon savoir s&#39;enrichit, mon niveau augmente naturellement, sans que je ne cherche à atteindre quoique ce soit. Et avant même que je n&#39;ai le temps de faire un bilan personnel, on me propose de donner des formations web. L&#39;expérience me semblait intéressante alors j&#39;ai sauté dans le bateau et me voilà &lt;strong&gt;formateur&lt;/strong&gt;.&lt;/p&gt;
&lt;h2 id=&quot;ego&quot;&gt;EGO++&lt;/h2&gt;
&lt;p&gt;Quand on vous propose de devenir formateur, et que donc, implicitement, on admet votre capacité et votre niveau de compétence technique, vous vous sentez bien. Quelque part, au fond à droite, vous vous dites : &amp;quot;Hey, je suis peut-être plus la sous-merde que je pensais être !&amp;quot;&lt;/p&gt;
&lt;p&gt;Je ne dis pas pour autant que le savoir suffit à devenir un bon fomateur. Loin s&#39;en faut. Et je ne dis pas que je suis le meilleur formateur non plus, je reconnais la difficulté de l&#39;exercice, car sachez-le, la plupart du temps, ces stagiaires qui viennent assister à vos formations sont souvent des personnes qui n&#39;ont pas le temps ou ne savent pas faire leur propre veille donc ils ont souvent un niveau moindre qu&#39;escompté.&lt;/p&gt;
&lt;p&gt;Et alors me direz-vous ? Et alors, en sachant ça, laissez au placard votre peur de vous planter, qu&#39;un stagiaire en sache plus que vous, etc. Au pire, si cela arrive vraiment, il pourra vous apprendre quelque chose à condition que vous le prenez dans le bon sens mais il y a de fortes chances que vous ayez plus de choses à lui apprendre que lui à vous apprendre.&lt;/p&gt;
&lt;h2 id=&quot;easy&quot;&gt;Easy--&lt;/h2&gt;
&lt;p&gt;Mais ce n&#39;est pas ça le plus difficile. Le plus complexe est d&#39;essayer de transmettre votre savoir à des personnes qui n&#39;ont pas justement votre niveau, ou ceux de vos collègues. Vous n&#39;allez pas leur parler ou expliquer les choses de la même manière. Vous allez devoir extrapoler, simplifier, vulgariser, voire même user d&#39;allégories ou de métaphores parfois.&lt;/p&gt;
&lt;p&gt;Je me suis surpris à devoir réexpliquer des choses que je maîtrise depuis des années et que naïvement je croyais que tout le monde savait.&lt;/p&gt;
&lt;p&gt;Croire que ce que vous savez n&#39;est que le B.A.BA sera votre première erreur.&lt;/p&gt;
&lt;p&gt;Vous allez naturellement sous-estimer la valeur de votre savoir et surestimer ce savoir à être acquis simplement par le premier venu.&lt;/p&gt;
&lt;p&gt;De plus si vous devez expliquer des choses techniques à des personnes non-techniques mais qui ont besoin de connaître les possiblités techniques malgré tout, comme ça m&#39;est arrivé, vous allez vous confronter à une sorte de choc de culture. Exit la sous-merde que vous pensiez être, vous êtes désormais un extra-terrestre. Vous aurez du mal à communiquer parce que vous n&#39;avez pas forcément le même vocabulaire à la base.&lt;/p&gt;
&lt;h2 id=&quot;et-donc&quot;&gt;Et donc ?&lt;/h2&gt;
&lt;p&gt;Et donc ces quelques formations que j&#39;ai pu faire m&#39;ont prouvé une chose principalement.&lt;/p&gt;
&lt;p&gt;Pendant des années j&#39;ai pensé être une merde parce qu&#39;il y avait tant de choses à apprendre en continu et que je ne les maîtrisais pas toutes. Alors j&#39;ai lu, testé, éprouvé des choses pendant des années pour me tenir à niveau pour me rendre compte finalement que je savais énormément de choses. Qu&#39;il m&#39;en restait beaucoup à savoir mais qu&#39;il me reste du temps pour les apprendre.&lt;/p&gt;
&lt;p&gt;Bref, sachez qu&#39;il y aura toujours moins bon que vous et meilleur que vous mais peu importe, ce qui importe encore le plus est que vous appréciez ce que vous faites car c&#39;est ça qui vous donnera l&#39;envie d&#39;apprendre et d&#39;avoir votre propre niveau.&lt;/p&gt;
&lt;p&gt;Oubliez ce que vous ignorez que vous ignorez et son ampleur, concentrez-vous sur ce que vous savez que vous ignorez car ce n&#39;est ni plus ni moins que du savoir en devenir.&lt;/p&gt;
&lt;p&gt;Restez humble, le profane d&#39;aujourd&#39;hui n&#39;est que l&#39;initié de demain.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Pimp my shell pour les béotiens — Les meilleurs sont des flemmards (Partie 3)</title>
    <link href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/" />
    <updated>2014-10-13T07:45:20Z</updated>
    <id>https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/</id>
    <content type="html">&lt;p&gt;Dans cette troisième partie, nous allons voir ensemble le pouvoir des commandes et leur options cachées ainsi que la toute puissance des &lt;em&gt;aliases&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;NB&lt;/strong&gt; : je risque d&#39;écrire des choses dans cette partie qui paraîtront évidentes mais je pars du principe que quand on parle à des profanes du terminal, rien n&#39;est jamais évident. Alors, accrochez-vous, vous apprendrez peut-être quelque chose dans le tas.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Je vais donc tenter de vous faire une rapide présentation des commandes que vous utiliserez le plus.&lt;/p&gt;
&lt;h2 id=&quot;les-commandes&quot;&gt;Les commandes&lt;/h2&gt;
&lt;p&gt;Commençons par les commandes liées aux répertoires.&lt;/p&gt;
&lt;h3 id=&quot;pwd-print-working-directory&quot;&gt;pwd (Print Working Directory)&lt;/h3&gt;
&lt;p&gt;La commande &lt;code&gt;pwd&lt;/code&gt; que vous avez entraperçue dans la partie précédente sert tout simplement à connaître votre emplacement actuel. Au cas où vous seriez perdu, c&#39;est assez utile.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/kAjf7NFi29-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/kAjf7NFi29-569.webp 569w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/kAjf7NFi29-400.gif&quot; alt=&quot;sh-pwd&quot; width=&quot;569&quot; height=&quot;367&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/kAjf7NFi29-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/kAjf7NFi29-569.gif 569w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;cd-change-directory&quot;&gt;cd (Change Directory)&lt;/h3&gt;
&lt;p&gt;La commande &lt;code&gt;cd&lt;/code&gt; permet de naviguer dans les répertoires. Elle prend en argument le ou les noms des répertoires dans lesquels vous souhaitez aller.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/gtCkWlvcRE-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/gtCkWlvcRE-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/gtCkWlvcRE-400.gif&quot; alt=&quot;sh-cd&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/gtCkWlvcRE-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/gtCkWlvcRE-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Si vous souhaitez revenir dans le dossier parent, il vous faudra taper &lt;code&gt;cd ..&lt;/code&gt;, ou revenir dans le dossier parent du dossier parent, vous devrez taper &lt;code&gt;cd ../../&lt;/code&gt;, &lt;em&gt;..&lt;/em&gt; étant l&#39;équivalent d&#39;un dossier donc il faut séparer par des slash &lt;em&gt;/&lt;/em&gt; si vous en avez plusieurs; et ainsi de suite.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Unfc8XH3NZ-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Unfc8XH3NZ-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Unfc8XH3NZ-400.gif&quot; alt=&quot;sh-cd-bis&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Unfc8XH3NZ-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Unfc8XH3NZ-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Si vous êtes bien en profondeur dans votre arborescence et que vous souhaitez revenir dans votre &lt;em&gt;home directory&lt;/em&gt;, tapez la commande &lt;code&gt;cd&lt;/code&gt; sans argument ou &lt;code&gt;cd ~&lt;/code&gt; (~ se fait en tapant &lt;code&gt;⌥+n&lt;/code&gt;). Le caractère &lt;em&gt;~&lt;/em&gt; représente symboliquement votre &lt;em&gt;home directory&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Par exemple si vous êtes dans un lointain dossier et souhaitez aller directement dans votre dossier &amp;quot;foobar&amp;quot; à la racine de la home, vous pourrez taper simplement &lt;code&gt;cd ~/foobar&lt;/code&gt;, et ce d&#39;où que vous soyiez.&lt;/p&gt;
&lt;p&gt;Pour finir, si vous tapez &lt;code&gt;cd -&lt;/code&gt;, vous irez directement dans le dossier où vous étiez précédemment.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/y7Tx0_UxoA-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/y7Tx0_UxoA-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/y7Tx0_UxoA-400.gif&quot; alt=&quot;sh-cd-ter&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/y7Tx0_UxoA-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/y7Tx0_UxoA-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;mkdir-make-directories&quot;&gt;mkdir (MaKe DIRectories)&lt;/h3&gt;
&lt;p&gt;Naviguer dans les répertoires c&#39;est bien, encore faut-il qu&#39;ils existent. &lt;code&gt;mkdir&lt;/code&gt; sert donc à ça.&lt;/p&gt;
&lt;p&gt;Tapez donc &lt;code&gt;mkdir nomdudossier&lt;/code&gt; pour le créer.&lt;/p&gt;
&lt;p&gt;Vous pouvez directement créer une arborescence en ajoutant l&#39;option &lt;em&gt;-p&lt;/em&gt; qui spécifie que si le dossier n&#39;existe pas, il faudra le créer. Par exemple &lt;code&gt;mkdir -p nomdudossier/sousdossier&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Si vous souhaitez créer plusieurs dossiers en même temps et au même niveau, utilisez les &lt;em&gt;{}&lt;/em&gt; en tapant &lt;code&gt;mkdir {foo,bar}&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Yt6PCm_aKF-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Yt6PCm_aKF-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Yt6PCm_aKF-400.gif&quot; alt=&quot;sh-mkdir&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Yt6PCm_aKF-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/Yt6PCm_aKF-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;rmdir-remove-directory&quot;&gt;rmdir (ReMove DIRectory)&lt;/h3&gt;
&lt;p&gt;Faut aussi pouvoir les supprimer ces dossiers, alors hop, entre en scène &lt;code&gt;rmdir&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;La petit subtilité qu&#39;il faut connaître c&#39;est que &lt;em&gt;rmdir&lt;/em&gt; ne supprime &lt;strong&gt;que&lt;/strong&gt; les dossiers vides. C&#39;est pour cette raison que je ne m&#39;en sers que très rarement.&lt;/p&gt;
&lt;p&gt;À l&#39;instar de &lt;code&gt;mkdir&lt;/code&gt;, si vous souhaitez supprimer plusieurs dossiers d&#39;une arborescence, il faudra rajouter l&#39;option &lt;em&gt;-p&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/8-puwM05W3-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/8-puwM05W3-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/8-puwM05W3-400.gif&quot; alt=&quot;sh-rmdir&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/8-puwM05W3-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/8-puwM05W3-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Passons donc aux commandes qui touchent aux fichiers…&lt;/p&gt;
&lt;h3 id=&quot;ls-list-directory-contents&quot;&gt;ls (LiSt directory contents)&lt;/h3&gt;
&lt;p&gt;Vous l&#39;avez peut-être remarqué dans les exemples précédents, j&#39;ai déjà utilisé la commande &lt;code&gt;ls&lt;/code&gt; et si vous êtes malins vous aurez deviné qu&#39;elle servait à lister le contenu d&#39;un dossier.&lt;/p&gt;
&lt;p&gt;Cette commande a… énormément d&#39;options. Je vais donc vous parler des plus importantes.&lt;/p&gt;
&lt;p&gt;Comme la quasi totalité des commandes, celle-ci prend ses options précédées d&#39;un &lt;em&gt;-&lt;/em&gt;. Par exemple, &lt;code&gt;ls -la&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Vous aurez donc dans les plus notables :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;a&lt;/code&gt; affiche les fichiers et dossiers cachés, ceux qui dont le nom commence par un &lt;em&gt;.&lt;/em&gt;, croyez-moi vous en aurez besoin.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;F&lt;/code&gt; sert à ajouter des &amp;quot;/&amp;quot; à la fin des dossiers, des &amp;quot;*&amp;quot; à la fin des executables et des &amp;quot;@&amp;quot; à la fin des symlinks (ou lien virtuel) et d&#39;autres trucs que vous ne verrez sûrement jamais.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;G&lt;/code&gt; sert à coloriser l&#39;output.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;h&lt;/code&gt; sert à rendre la chose plus lisible pour l&#39;œil humain en supprimant le superflu de l&#39;output (les poids des fichiers notamment)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;l&lt;/code&gt; sert à afficher le résultat sous forme de liste avec les éléments les uns en dessous des autres.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Il y a en beaucoup d&#39;autres, plus ou moins utiles, mais notez surtout que vous pouvez enchainer les options, sans ordre particulier, à ceci près que certaines options s&#39;annulent les unes les autres.&lt;/p&gt;
&lt;h3 id=&quot;touch&quot;&gt;touch&lt;/h3&gt;
&lt;p&gt;On a vu comment créer et supprimer des dossiers, comment naviguer entre dossiers et comment lister le contenu d&#39;un dossier… mais sans fichier, tout ça paraît bien vide.&lt;/p&gt;
&lt;p&gt;La commande &lt;strong&gt;touch&lt;/strong&gt; permet de créer un fichier vide à la volée. Comprenez bien qu&#39;il n&#39;y aura strictement rien dans ce fichier, si vous souhaitez créer un fichier en lui donnant directement du contenu, il faudra passer par un éditeur de texte (Sublime Text, atom, vim, pico, etc).&lt;/p&gt;
&lt;p&gt;Normalement, le but premier de la commande &lt;strong&gt;touch&lt;/strong&gt; n&#39;est pas de créer des fichiers mais de modifier le &lt;em&gt;timestamp&lt;/em&gt; d&#39;un fichier, c&#39;est à dire les méta-données de date de modification, création, etc, mais passons, il crée bien des fichiers vides et c&#39;est tout ce qu&#39;on lui demandera.&lt;/p&gt;
&lt;p&gt;Notez que vous pouvez créer à la volée une multitude de fichier en une fois.&lt;/p&gt;
&lt;p&gt;Tapez donc &lt;code&gt;touch nomdefichier.extension&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/dDsUOM7RlU-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/dDsUOM7RlU-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/dDsUOM7RlU-400.gif&quot; alt=&quot;sh-touch&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/dDsUOM7RlU-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/dDsUOM7RlU-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;cp-copy-files&quot;&gt;cp (CoPy files)&lt;/h3&gt;
&lt;p&gt;Si vous devez faire une déclinaison d&#39;un fichier, ne vous embêtez pas à aller dans le &lt;em&gt;Finder&lt;/em&gt; pour faire un copier/coller, utilisez la commande &lt;strong&gt;cp&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;D&#39;autant plus qu&#39;avec elle vous pouvez copier &lt;strong&gt;et&lt;/strong&gt; changer la destination du nouveau fichier créé. C&#39;est-y-pas-beau ?&lt;/p&gt;
&lt;p&gt;Ainsi, pour dupliquer un fichier dans un autre dossier tapez &lt;code&gt;cp fichier.txt dossier/fichier2.txt&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Pensez à rajouter l&#39;option &lt;code&gt;-R&lt;/code&gt; si vous souhaitez dupliquer un dossier et son contenu.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/ud3iQnVd9--400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/ud3iQnVd9--571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/ud3iQnVd9--400.gif&quot; alt=&quot;sh-cp&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/ud3iQnVd9--400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/ud3iQnVd9--571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;mv-move-files&quot;&gt;mv (MoVe files)&lt;/h3&gt;
&lt;p&gt;Dans le même genre, déplacez des fichiers peut vite être laborieux avec &lt;em&gt;Finder&lt;/em&gt; alors qu&#39;avec le terminal… il suffit d&#39;utiliser la commande &lt;strong&gt;mv&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;C&#39;est assez simple, tapez &lt;code&gt;mv fichier.txt dossier/fichier.txt&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Le petit plus c&#39;est que vous pouvez déplacer &lt;strong&gt;et&lt;/strong&gt; renommer le fichier en même temps. D&#39;ailleurs c&#39;est la commande &lt;strong&gt;mv&lt;/strong&gt; qu&#39;on utilise quand on souhaite renommer un fichier.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/cYNFgdA0ZJ-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/cYNFgdA0ZJ-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/cYNFgdA0ZJ-400.gif&quot; alt=&quot;sh-mv&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/cYNFgdA0ZJ-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/cYNFgdA0ZJ-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;rm-remove-directory-entries&quot;&gt;rm (ReMove directory entries)&lt;/h3&gt;
&lt;p&gt;Et si on supprimait des fichiers superflus ?&lt;/p&gt;
&lt;p&gt;Rien de bien folichon ici, tapez &lt;code&gt;rm (dossier/)fichier.txt&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Si vous avez bien suivi depuis tout à l&#39;heure, &lt;strong&gt;rmdir&lt;/strong&gt; ne permet de supprimer que des dossiers vides. C&#39;est là qu&#39;intervient &lt;code&gt;rm -rf&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;L&#39;option &lt;strong&gt;-r&lt;/strong&gt; pour récursif, c&#39;est-à-dire qu&#39;il va s&#39;occuper de la cible et tout ses enfants, et &lt;strong&gt;-f&lt;/strong&gt; pour le forcer sans être obligé de confirmer chaque suppression, sinon il y a des risques de se faire envoyer bouler.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/TOfLqmAoEF-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/TOfLqmAoEF-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/TOfLqmAoEF-400.gif&quot; alt=&quot;sh-rm&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/TOfLqmAoEF-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/TOfLqmAoEF-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;more-less-head-tail&quot;&gt;more/less/head/tail&lt;/h3&gt;
&lt;p&gt;Si comme moi, parfois, vous avez envie de vérifier le contenu d&#39;un fichier sans volonté de le changer, il existe plusieurs outils à votre disposition :&lt;/p&gt;
&lt;h4 id=&quot;more&quot;&gt;more&lt;/h4&gt;
&lt;p&gt;Il permet d&#39;afficher le contenu d&#39;un fichier, sans avoir à le charger complètement ce qui explique sa rapidité d&#39;affichage.
&lt;code&gt;more fichier.txt&lt;/code&gt;&lt;/p&gt;
&lt;h4 id=&quot;less&quot;&gt;less&lt;/h4&gt;
&lt;p&gt;&lt;strong&gt;less&lt;/strong&gt;, c&#39;est &lt;strong&gt;more&lt;/strong&gt; mais en mieux.  Finalement &lt;strong&gt;less&lt;/strong&gt; c&#39;est &lt;em&gt;more&lt;/em&gt; que &lt;strong&gt;more&lt;/strong&gt; d&#39;où la blague &lt;em&gt;less is more&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;En bref, il fait tout comme son prédécesseur mais en mieux, alors ne réfléchissez pas trop et choisissez plutôt &lt;strong&gt;less&lt;/strong&gt;
&lt;code&gt;less fichier.txt&lt;/code&gt;&lt;/p&gt;
&lt;h4 id=&quot;head&quot;&gt;head&lt;/h4&gt;
&lt;p&gt;Il vous affichera quant à lui les premières lignes de votre fichier cible, et uniquement les premières.
&lt;code&gt;head fichier.txt&lt;/code&gt;&lt;/p&gt;
&lt;h4 id=&quot;tail&quot;&gt;tail&lt;/h4&gt;
&lt;p&gt;Il… bah… ne vous affichera que la fin du contenu du fichier cible.
&lt;code&gt;tail fichier.txt&lt;/code&gt;&lt;/p&gt;
&lt;h3 id=&quot;du-disk-usage&quot;&gt;du (Disk Usage)&lt;/h3&gt;
&lt;p&gt;Puisqu&#39;on parle de dossiers et de fichiers, ils vous est sûrement arrivé de vouloir connaître le poids de tout un dossier, non ? Vous devez donc savoir à quel point c&#39;est loin d&#39;être pratique avec le Finder.&lt;/p&gt;
&lt;p&gt;Alors ne perdez plus votre temps et utilisez la commande &lt;strong&gt;du&lt;/strong&gt; dont vous apprécierez l&#39;option &lt;code&gt;-h&lt;/code&gt; qui transcrit les octets en quelque chose de plus lisible (KO, MO, GO, TO…)&lt;/p&gt;
&lt;p&gt;Tapez donc &lt;code&gt;du -h&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/aH0LbMcBtm-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/aH0LbMcBtm-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/aH0LbMcBtm-400.gif&quot; alt=&quot;sh-du&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/aH0LbMcBtm-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/aH0LbMcBtm-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;man-manuel&quot;&gt;man (MANuel)&lt;/h3&gt;
&lt;p&gt;Et enfin la dernière commande indispensable, et pas des moindres, puisque, je le sais ausi bien que vous, vous ne retiendrez pas tout par cœur du premier coup donc il vous faut une doc complète et explicite. C&#39;est le rôle de &lt;strong&gt;man&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Tapez donc &lt;code&gt;man nomdelacommande&lt;/code&gt; pour lire la doc et retrouver des options oubliées notamment.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;NB: tout comme &lt;strong&gt;more&lt;/strong&gt; ou &lt;strong&gt;less&lt;/strong&gt;, tapez &amp;quot;q&amp;quot; pour sortir de la documentation. D&#39;ailleurs &lt;strong&gt;man&lt;/strong&gt; devrait ouvrir le document avec &lt;strong&gt;less&lt;/strong&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/g96s3On98w-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/g96s3On98w-571.webp 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/g96s3On98w-400.gif&quot; alt=&quot;sh-man&quot; width=&quot;571&quot; height=&quot;369&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/g96s3On98w-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/g96s3On98w-571.gif 571w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h2 id=&quot;les-aliases&quot;&gt;Les aliases&lt;/h2&gt;
&lt;p&gt;Maintenant que les commandes basiques n&#39;ont plus de secret pour vous, poussons un peu peu plus loin.&lt;/p&gt;
&lt;p&gt;Je sais que vous allez dire qu&#39;il y a plein d&#39;options sympathiques pour chaque commande mais ça va être chiant de tout taper à chaque fois. Et vous aurez raison.&lt;/p&gt;
&lt;p&gt;C&#39;est là que les &lt;strong&gt;aliases&lt;/strong&gt; entrent en jeu.&lt;/p&gt;
&lt;p&gt;Un &lt;em&gt;alias&lt;/em&gt; ce n&#39;est ni plus ni moins qu&#39;un raccourci. Faisons donc en sorte qu&#39;à chaque fois que vous taperez &lt;code&gt;ls&lt;/code&gt;, vous enverrez en fait &lt;code&gt;ls -GFh&lt;/code&gt; au shell pour avoir un tout joli output.&lt;/p&gt;
&lt;p&gt;Pour ce faire :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;subl ~/.bashrc&lt;/code&gt; (ou &lt;em&gt;.zshrc&lt;/em&gt;)&lt;/li&gt;
&lt;li&gt;ajoutez la ligne
&lt;code&gt;alias ls=&#39;ls -GFh&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;enregistrez et quittez&lt;/li&gt;
&lt;li&gt;tapez &lt;code&gt;ls&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;???&lt;/li&gt;
&lt;li&gt;Profit&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Les &lt;em&gt;aliases&lt;/em&gt; sont une des plus grandes forces du shell, leur pouvoir ne connait aucune limite si ce n&#39;est celle de votre imagination.&lt;/p&gt;
&lt;p&gt;À noter que si vous avez choisi de prendre &lt;em&gt;oh-my-zsh&lt;/em&gt;, il est livré avec pléthore d&#39;&lt;em&gt;aliases&lt;/em&gt;, liste qui s&#39;allonge encore si vous avez ajouté des plugins à &lt;em&gt;oh-my-zsh&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Pour savoir où vous en êtes et quels aliases vous avez jusque là, tapez la commande &lt;code&gt;alias&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Quelques exemples chez moi :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Pour aller dans le dossier parent &lt;code&gt;..=&#39;cd ..&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Pour aller dans le dossier parent du parent &lt;code&gt;...=&#39;cd ../..&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;bi=&#39;bower install&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;bl=&#39;bower list&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;bs=&#39;bower search&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;grl=&#39;grunt live&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;grw=&#39;grunt watch&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ni=&#39;npm install&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Pour connaître son IP locale rapidement &lt;code&gt;ip=&#39;ipconfig getifaddr en0&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;ls en affichant les fichiers systèmes en liste et avec les poids lisible pour &amp;quot;humains&amp;quot; &lt;code&gt;l=&#39;ls -lah&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;ls simple juste en colorisant l&#39;output &lt;code&gt;ls=&#39;ls -G&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Recharger la config de votre shell &lt;code&gt;reload=&#39;source ~/.zshrc&#39;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Relancer apache &lt;code&gt;restart=&#39;sudo apachectl restart&#39;&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Je vous laisse le loisir de faire vos propres &lt;em&gt;aliases&lt;/em&gt; maintenant. :)&lt;/p&gt;
&lt;p&gt;S&#39;il vous vient l&#39;exquise idée de faire des alias git, je vous conseille de plutôt les écrire non pas dans votre fichier de config shell mais dans celui de git directement.&lt;/p&gt;
&lt;p&gt;Pour ce faire, tapez &lt;code&gt;subl ~/.gitconfig&lt;/code&gt; et ajoutez vos &lt;em&gt;aliases&lt;/em&gt; sous la section &lt;em&gt;[alias]&lt;/em&gt; en ommettant l&#39;implicite commande &lt;em&gt;git&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Par exemple :&lt;/p&gt;
&lt;pre class=&quot;language-sh&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-sh&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;alias&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; 
st &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; status 
br &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; branch
…&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&quot;les-plugins&quot;&gt;Les plugins&lt;/h2&gt;
&lt;h3 id=&quot;homebrew&quot;&gt;Homebrew&lt;/h3&gt;
&lt;p&gt;Installer des outils CLI sur OSX et les maintenir peut parfois s&#39;avérer laborieux.&lt;/p&gt;
&lt;p&gt;C&#39;est pourquoi je vous conseille fortement de ne pas vous emmerder et gérer tout ça avec &lt;a href=&quot;http://brew.sh/index_fr.html&quot;&gt;Homebrew&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Ça vous servira à installer beaucoup d&#39;outils simplement, notamment ceux qui suivent.&lt;/p&gt;
&lt;h3 id=&quot;z-autojump-et-fasd&quot;&gt;z, autojump et fasd&lt;/h3&gt;
&lt;p&gt;Que ce soit &lt;a href=&quot;https://github.com/rupa/z&quot;&gt;z&lt;/a&gt;, &lt;a href=&quot;https://github.com/joelthelion/autojump&quot;&gt;autojump&lt;/a&gt; ou &lt;a href=&quot;https://github.com/clvv/fasd&quot;&gt;fasd&lt;/a&gt;, ces trois scripts font en gros la même chose : ils vous permettent de naviguer plus rapidement dans les dossiers où vous vous rendez souvent.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/QPlnSMdunm-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/QPlnSMdunm-539.webp 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/QPlnSMdunm-400.gif&quot; alt=&quot;sh-z&quot; width=&quot;539&quot; height=&quot;366&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/QPlnSMdunm-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/QPlnSMdunm-539.gif 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Pour les installer, le plus simple est encore de passer par &lt;strong&gt;homebrew&lt;/strong&gt;&lt;/p&gt;
&lt;h3 id=&quot;ranger&quot;&gt;ranger&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://ranger.nongnu.org/&quot;&gt;ranger&lt;/a&gt; est un explorateur de fichier &amp;quot;à la Finder&amp;quot; mais dans le shell en utilisant les flèches du clavier.&lt;/p&gt;
&lt;p&gt;Je sais, ça parait bizarre comme ça mais c&#39;est très pratique et plus rapide que Finder justement.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/N_gHyZuTBy-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/N_gHyZuTBy-539.webp 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/N_gHyZuTBy-400.gif&quot; alt=&quot;sh-ranger&quot; width=&quot;539&quot; height=&quot;366&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/N_gHyZuTBy-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/N_gHyZuTBy-539.gif 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;À installer via &lt;strong&gt;Homebrew&lt;/strong&gt;&lt;/p&gt;
&lt;h3 id=&quot;ncdu&quot;&gt;ncdu&lt;/h3&gt;
&lt;p&gt;Avec &lt;a href=&quot;http://dev.yorhel.nl/ncdu&quot;&gt;ncdu&lt;/a&gt;, on est toujours dans un explorateur de fichiers mais axé sur l&#39;espace disque. C&#39;est le petit frère de la commande &lt;strong&gt;du&lt;/strong&gt; (disk usage) sauf que &lt;strong&gt;du&lt;/strong&gt; est loin d&#39;être agréable à lire. Grâce à &lt;strong&gt;ncdu&lt;/strong&gt;, vous y verrez beaucoup plus clair sur l&#39;utilisation de votre espace disque.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/SNpJgv1mvr-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/SNpJgv1mvr-539.webp 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/SNpJgv1mvr-400.gif&quot; alt=&quot;sh-ncdu&quot; width=&quot;539&quot; height=&quot;366&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/SNpJgv1mvr-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/SNpJgv1mvr-539.gif 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;À installer via &lt;strong&gt;Homebrew&lt;/strong&gt;&lt;/p&gt;
&lt;h3 id=&quot;htop&quot;&gt;htop&lt;/h3&gt;
&lt;p&gt;Si vous souhaitez toujours avoir un œil sur les performances de votre machine et de l&#39;utilisation de ses ressources, &lt;a href=&quot;http://hisham.hm/htop/&quot;&gt;htop&lt;/a&gt;, petit frère de la commande &lt;strong&gt;top&lt;/strong&gt; imbitable à souhait, est fait pour vous. C&#39;est beau et efficace.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;NB: Il vous faudra lancer htop en sudo (avec les droit admin donc) sinon vous n&#39;afficherez que les processus lancés par votre user, c&#39;est à dire pas grand chose.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/wbGJDJBCzm-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/wbGJDJBCzm-539.webp 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/wbGJDJBCzm-400.gif&quot; alt=&quot;sh-htop&quot; width=&quot;539&quot; height=&quot;366&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/wbGJDJBCzm-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/wbGJDJBCzm-539.gif 539w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;À installer via &lt;strong&gt;Homebrew&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Et voilà, c&#39;est fini, on a fait le tour… des bases en tout cas. Le reste, je le laisse à votre curiosité.&lt;/p&gt;
&lt;p&gt;Des questions ? des retours ? Envoyez-moi un ping sur &lt;a href=&quot;http://twitter.com/GoOz&quot;&gt;Twitter&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Cover par &lt;a href=&quot;https://www.flickr.com/photos/nathancongleton/6857290985&quot;&gt;Nathan Congleton&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Pimp my shell pour les béotiens — Choose your weapons (Partie 2)</title>
    <link href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/" />
    <updated>2014-10-13T07:44:13Z</updated>
    <id>https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/</id>
    <content type="html">&lt;p&gt;C&#39;est là que commence la période la plus obscure de notre voyage, il va falloir toucher à des fichiers de config et coder un peu.&lt;/p&gt;
&lt;p&gt;Sachant que les fichiers de config sont des fichiers cachés, ils seront plus facile à localiser et ouvrir directement depuis le terminal.&lt;/p&gt;
&lt;p&gt;Si vous utilisez &lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/www.sublimetext.com/&quot;&gt;Sublime Text&lt;/a&gt;, je vous invite à mettre en place la commande CLI de ce dernier en suivant &lt;a href=&quot;https://gist.github.com/artero/1236170&quot;&gt;ce tutoriel&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Si vous utilisez &lt;a href=&quot;https://atom.io/&quot;&gt;Atom&lt;/a&gt;, normalement c&#39;est déjà installé pour vous.&lt;/p&gt;
&lt;p&gt;Si vous utilisez n&#39;importe quel autre éditeur de texte, alors démerdez-vous ou bien utilisez &lt;em&gt;vim&lt;/em&gt; ou &lt;em&gt;nano&lt;/em&gt; ou n&#39;importe quoi d&#39;autre.&lt;/p&gt;
&lt;p&gt;Pour mes exemples, j&#39;utiliserai la commande &lt;code&gt;subl&lt;/code&gt; mais évidemment je vous laisse le soin d&#39;adapter la commande avec &lt;code&gt;atom&lt;/code&gt; ou &lt;code&gt;vim&lt;/code&gt; ou &lt;code&gt;nano&lt;/code&gt; selon votre cas.&lt;/p&gt;
&lt;p&gt;Bien, maintenant que vous êtes prêts, c&#39;est parti.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Avec l&#39;offre que je vous ai fait, vous avez dû faire des choix d&#39;application et de shell au moins.&lt;/p&gt;
&lt;p&gt;Alors suivez donc ce tutoriel dont vous êtes le héros :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/#Terminal&quot;&gt;Vous avez choisi Terminal&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/#iTerm2&quot;&gt;Vous avez choisi iTerm2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/#bash&quot;&gt;Vous avez choisi bash&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/#Zsh&quot;&gt;Vous avez choisi Zsh&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Vous avez choisi tout autre chose&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;personnaliser-terminal&quot;&gt;Personnaliser Terminal&lt;/h2&gt;
&lt;p&gt;Si vous avez choisi &lt;strong&gt;Terminal&lt;/strong&gt; et bien il ne reste plus beaucoup de chose à personnaliser.&lt;/p&gt;
&lt;p&gt;Je vous invite toutefois à aller faire un tour dans les options &lt;code&gt;⌘+,&lt;/code&gt; et notamment l&#39;onglet &amp;quot;Profils&amp;quot;, à cocher ce qui vous intéresse.&lt;/p&gt;
&lt;p&gt;Je vous conseille aussi de cocher les options &amp;quot;Utiliser les polices grasses&amp;quot;, &amp;quot;Afficher les couleurs ANSI&amp;quot; et &amp;quot;Utiliser des couleurs vives pour le texte en gras&amp;quot; comme sur la capture ci-dessous.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/lGPI5S7Etz-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/lGPI5S7Etz-738.avif 738w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/lGPI5S7Etz-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/lGPI5S7Etz-738.webp 738w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/lGPI5S7Etz-400.png&quot; alt=&quot;Terminal settings&quot; width=&quot;738&quot; height=&quot;596&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/lGPI5S7Etz-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/lGPI5S7Etz-738.png 738w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Pensez donc à changer de thème aussi, le terminal est déjà tellement rustre de base que laisser la coloration neutre serait encore pis.&lt;/p&gt;
&lt;p&gt;Choisissez donc un des thèmes de base ou, si comme moi vous ne trouvez pas votre bonheur dans le lot parce que, disons les choses, tous sont bien moches, allez fouiller le web.&lt;/p&gt;
&lt;p&gt;Je vous recommande dans ce sens le theme &lt;a href=&quot;https://github.com/tomislav/osx-terminal.app-colors-solarized&quot;&gt;Solarized&lt;/a&gt; ou &lt;a href=&quot;http://color.smyck.org/&quot;&gt;Smyck&lt;/a&gt; ou encore, si vous tenez à le faire vraiment personnalisé, tatez donc du générateur de thème &lt;a href=&quot;http://ciembor.github.io/4bit/&quot;&gt;4bit&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;personnaliser-iterm2&quot;&gt;Personnaliser iTerm2&lt;/h2&gt;
&lt;p&gt;Si vous avez choisi &lt;a href=&quot;http://www.iterm2.com&quot;&gt;iTerm2&lt;/a&gt; et que vous l&#39;avez déjà installé, ouvrez donc les paramètres &lt;code&gt;⌘+,&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Si vous avez déjà regardé les préférences de &lt;strong&gt;Terminal&lt;/strong&gt;, vous remarquerez que iTerm2 peut se targuer d&#39;être plus puissant mais je dois avouer que la moitié, si ce n&#39;est plus, des paramétrages possibles me sont bien obscurs.&lt;/p&gt;
&lt;p&gt;Ceci étant j&#39;en recommande certains à cocher/décocher.&lt;/p&gt;
&lt;p&gt;Comme sur l&#39;onglet &amp;quot;Général&amp;quot;, il vaut mieux décocher (de mémoire il est activé par défaut) l&#39;option &lt;em&gt;Startup &amp;gt; Open profiles window&lt;/em&gt;. Je pars du principe que vous n&#39;aurez pas besoin de plusieurs profils de par votre utilisation du terminal.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/23b3t2-MzF-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/23b3t2-MzF-800.avif 800w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/23b3t2-MzF-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/23b3t2-MzF-800.webp 800w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/23b3t2-MzF-400.png&quot; alt=&quot;iTerm gen&quot; width=&quot;800&quot; height=&quot;533&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/23b3t2-MzF-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/23b3t2-MzF-800.png 800w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Sur l&#39;onglet &lt;em&gt;Profiles &amp;gt; General&lt;/em&gt;, Cochez l&#39;option &amp;quot;Reuse previous session&#39;s directory&amp;quot;. Celle-ci vous permet à chaque nouvelle ouverture de fenêtre de ne pas repartir de la racine de votre dossier utilisateur mais du dernier dossier où vous vous trouviez juste avant.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-812.avif 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-921.avif 921w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-812.webp 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-921.webp 921w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-400.png&quot; alt=&quot;iTerm prof&quot; width=&quot;921&quot; height=&quot;572&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-812.png 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/rLVxCIDxYx-921.png 921w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Enfin, dans &lt;em&gt;Profiles &amp;gt; Colors&lt;/em&gt;, vous pourrez ajouter un theme. Je recommande mes préférés toujours &lt;a href=&quot;https://github.com/altercation/solarized/tree/master/iterm2-colors-solarized&quot;&gt;Solarized&lt;/a&gt;, &lt;a href=&quot;https://github.com/mbadolato/iTerm2-Color-Schemes&quot;&gt;Monokai, Zenburn, Twilight ou plein d&#39;autres encore&lt;/a&gt; ou bien faire vous même le vôtre avec votre pouvoir créatif sur &lt;a href=&quot;http://ciembor.github.io/4bit/&quot;&gt;4bit&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-812.avif 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-927.avif 927w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-812.webp 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-927.webp 927w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-400.png&quot; alt=&quot;iTerm colors&quot; width=&quot;927&quot; height=&quot;711&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-812.png 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/JJgQEnryPI-927.png 927w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Au delà de ça, laissez vous aller à fouiller ce que vous propose iTerm2 mais je vous déconseille de cocher/décocher des options dont vous connaissez pas la portée.&lt;/p&gt;
&lt;h2 id=&quot;personnaliser-bash&quot;&gt;Personnaliser bash&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Bash&lt;/strong&gt; étant le shell par défaut sur mac OSX, on enchaîne direct sur sa configuration.&lt;/p&gt;
&lt;p&gt;Déjà il faut savoir que bash a &lt;strong&gt;deux&lt;/strong&gt; fichiers de config : &lt;em&gt;.bash_profile&lt;/em&gt; et &lt;em&gt;.bashrc&lt;/em&gt; qui ne sont pas utilisés dans les même cas, mais comme vous voudrez a priori hériter de la même chose, on va faire en sorte que le premier importe le deuxième… sauf que le deuxième, &lt;em&gt;.bashrc&lt;/em&gt;, n&#39;existe pas.&lt;/p&gt;
&lt;p&gt;Vous allez donc d&#39;abord vous assurer que vous êtes bien dans votre &lt;em&gt;home directory&lt;/em&gt; à savoir &lt;em&gt;/Users/votreusername&lt;/em&gt; en tapant la commande &lt;code&gt;pwd&lt;/code&gt;. Si vous n&#39;y êtes pas et je me demande bien ce que vous avez fait pour ne pas y être, tapez la commande &lt;code&gt;cd&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Une fois que vous y êtes :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;tapez la commande
&lt;code&gt;cp .bash_profile .bashrc&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;pour créer le fichier &lt;em&gt;.bashrc&lt;/em&gt; en copiant et donc récupérant le contenu de &lt;em&gt;.bash_profile&lt;/em&gt;.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Éditez ensuite le &lt;em&gt;.bash_profile&lt;/em&gt; avec la commande
&lt;code&gt;subl .bash_profile&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;supprimez tout le contenu et ajouter l&#39;appel d&#39;import du &lt;em&gt;.bashrc&lt;/em&gt; avec la ligne
&lt;code&gt;source ~/.bashrc&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;enregistrez et quittez.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Désormais tout se fera dans le fichier &lt;em&gt;.bashrc&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Puisque vous avez décidé d&#39;appliquer un thème super joli à votre application, si on appliquait de la couleur aussi à ces bien mornes lignes de commandes et résultats de commande &lt;code&gt;ls&lt;/code&gt; qui liste le contenu d&#39;un dossier ? C&#39;est parti.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;subl .bashrc&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;pour rendre la ligne de commande colorée, ajoutez la ligne
&lt;code&gt;export CLICOLOR=1&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Pour colorier les résultats &lt;code&gt;ls&lt;/code&gt; ajoutez la ligne
&lt;code&gt;export LSCOLORS=ExFxBxDxCxegedabagacad&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Enregistrez et quittez&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Ça commence à prendre forme mais on ira plus loin un peu plus tard.&lt;/p&gt;
&lt;p&gt;Passons si vous le voulez bien au &lt;em&gt;prompt&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Personnaliser son &lt;em&gt;prompt&lt;/em&gt; paraît très obscur pour les profanes.&lt;/p&gt;
&lt;p&gt;Par exemple, pour obtenir le prompt que j&#39;ai sur mon Terminal avec ces couleurs comme le montre l&#39;image ci-dessous, il vous faut ajouter une ligne telle quelle &lt;code&gt;export PS1=&amp;quot;&#92;[&#92;033[36m&#92;]&#92;u&#92;[&#92;033[m&#92;]@&#92;[&#92;033[32m&#92;]&#92;h:&#92;[&#92;033[33;1m&#92;]&#92;w&#92;[&#92;033[m&#92;]&#92;$ &amp;quot;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/0MS7Zgegt0-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/0MS7Zgegt0-574.avif 574w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/0MS7Zgegt0-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/0MS7Zgegt0-574.webp 574w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/0MS7Zgegt0-400.png&quot; alt=&quot;Bash prompt&quot; width=&quot;574&quot; height=&quot;370&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/0MS7Zgegt0-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/0MS7Zgegt0-574.png 574w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Je ne vais pas vous apprendre à faire ça à la main parce que ce serait, je pense, pousser le bouchon trop loin.&lt;/p&gt;
&lt;p&gt;En revanche, je vais vous donner quelques directions simplifiées. Il existe un générateur de prompt pour bash, qui fonctionne à base de &lt;em&gt;drag &amp;amp; drop&lt;/em&gt;, c&#39;est simple, clair et ça marche.&lt;/p&gt;
&lt;p&gt;Allez donc faire un tour sur &lt;a href=&quot;http://bashrcgenerator.com/&quot;&gt;http://bashrcgenerator.com/&lt;/a&gt; et faites donc votre prompt comme vous le sentez.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ec0rVyMv95-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ec0rVyMv95-812.webp 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ec0rVyMv95-956.webp 956w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ec0rVyMv95-400.gif&quot; alt=&quot;bash gen&quot; width=&quot;956&quot; height=&quot;442&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ec0rVyMv95-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ec0rVyMv95-812.gif 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ec0rVyMv95-956.gif 956w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;NB&lt;/strong&gt; : Les changements que vous faites au prompt ne se chargent pas automatiquement, vous devez ouvrir une nouvelle fenêtre ou mieux, taper la commande &lt;code&gt;source ~/.bashrc&lt;/code&gt; pour recharger le fichier de config et donc les changements effectués.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Si vous êtes une personne bien et que vous utilisez un outil de versioning comme SVN, ou encore mieux Git, en ligne de commande (comme les vrais :P), vous en avez probablement marre de devoir faire des &lt;code&gt;svn/git status&lt;/code&gt; intempestifs pour savoir sur quelle révision/branche vous êtes. Sachez donc que vous pouvez demander au prompt de vous afficher d&#39;emblée ces infos. Et ça c&#39;est über cool.&lt;/p&gt;
&lt;p&gt;Je vous conseille donc de suivre &lt;a href=&quot;http://trevmex.com/post/7320627392/how-to-add-git-and-subversion-info-to-a-bash-prompt&quot;&gt;ce tutoriel de Trevmex&lt;/a&gt; qui fonctionne très bien et qui rendra plus verbeux encore votre prompt en ajoutant donc, dans le cas de SVN, le numéro de révision sur laquelle vous êtes &lt;code&gt;GoOz@MacBook-Air:DepotSVN (svn:306)$&lt;/code&gt;, et dans le cas de Git, le nom de la branche actuelle &lt;code&gt;GoOz@MacBook-Air:DepotGit (master*)$&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Si vous vous sentez chaud et souhaitez vraiment tout comprendre et faire à votre sauce, &lt;a href=&quot;http://blog.twistedcode.org/2008/03/customizing-your-bash-prompt.html&quot;&gt;faites vous plaisir avec toute la palette de variables, couleurs et diverses possiblités que vous offre bash&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;personnaliser-zsh&quot;&gt;Personnaliser Zsh&lt;/h2&gt;
&lt;h3 id=&quot;installation&quot;&gt;Installation&lt;/h3&gt;
&lt;p&gt;Vous avez choisi &lt;strong&gt;Zsh&lt;/strong&gt; et je vous en remercie. Comme vous avez suivi, vous allez me faire le plaisir d&#39;installer &lt;a href=&quot;http://ohmyz.sh/&quot;&gt;oh-my-zsh&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Pour ce faire, ouvrez votre terminal puis tapez
&lt;code&gt;curl -L http://install.ohmyz.sh | sh&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;ou (peu importe)
&lt;code&gt;wget --no-check-certificate http://install.ohmyz.sh -O - | sh&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Laissez l&#39;installation se finir et voilà ! Sauf que en fait comme je vous l&#39;ai dit, le shell par défaut est &lt;strong&gt;bash&lt;/strong&gt;, et pour utiliser &lt;strong&gt;Zsh&lt;/strong&gt; vous avez deux solutions :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Soit vous pouvez rendre &lt;strong&gt;Zsh&lt;/strong&gt; votre shell par défaut à la place de &lt;strong&gt;bash&lt;/strong&gt; en tapant la commande &lt;code&gt;chsh -s /bin/zsh&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Soit vous pouvez choisir le shell dans les préférences de l&#39;application de votre choix&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Avec Terminal&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ea3H3MZRon-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ea3H3MZRon-736.avif 736w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ea3H3MZRon-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ea3H3MZRon-736.webp 736w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ea3H3MZRon-400.png&quot; alt=&quot;Terminal zsh&quot; width=&quot;736&quot; height=&quot;594&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ea3H3MZRon-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/Ea3H3MZRon-736.png 736w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Avec iTerm2&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-812.avif 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-921.avif 921w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-812.webp 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-921.webp 921w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-400.png&quot; alt=&quot;iTerm zsh&quot; width=&quot;921&quot; height=&quot;572&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-812.png 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/OskGYjmDdG-921.png 921w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;h3 id=&quot;les-themes&quot;&gt;Les thèmes&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://ohmyz.sh/&quot;&gt;oh-my-zsh&lt;/a&gt; vient avec pléthore de thèmes qui sont plus des thèmes de &lt;em&gt;prompt&lt;/em&gt; que de coloration puisque vous pourrez écraser facilement les couleurs.&lt;/p&gt;
&lt;p&gt;Allez donc faire vos courses sur le site &lt;a href=&quot;https://github.com/robbyrussell/oh-my-zsh/wiki/Themes&quot;&gt;https://github.com/robbyrussell/oh-my-zsh/wiki/Themes&lt;/a&gt; ou encore le site &lt;a href=&quot;http://zshthem.es/&quot;&gt;http://zshthem.es/&lt;/a&gt; pour trouver chaussure à votre pied.
&lt;em&gt;&lt;strong&gt;NB&lt;/strong&gt; : Certains thèmes requièrent l&#39;installation de polices de caractères particulières voire de scripts shell supplémentaires, je n&#39;en parlerai pas. Donc démerdez-vous :]&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Le theme choisi devrait être dans la liste des thèmes fournis par oh-my-zsh. Il va donc falloir charger votre thème dans la configuration de &lt;strong&gt;Zsh&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Pour ce faire, vous allez ouvrir ce fichier de config qui s&#39;appelle &lt;em&gt;.zshrc&lt;/em&gt; en tapant la commande &lt;code&gt;subl ~/.zshrc&lt;/code&gt; puis…&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;trouvez la ligne &lt;code&gt;ZSH_THEME=&amp;quot;robbyrussell&amp;quot;&lt;/code&gt; qui doit être le thème par défaut et mettez le nom du thème de votre choix.&lt;/li&gt;
&lt;li&gt;enregistrez le fichier&lt;/li&gt;
&lt;li&gt;rechargez la config en tapant &lt;code&gt;source ~/.zshrc&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;???&lt;/li&gt;
&lt;li&gt;Profit&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Si vous souhaitez ajouter un thème de coloration, ce n&#39;est guère plus compliqué que pour &lt;strong&gt;Terminal&lt;/strong&gt;, faites vos courses sur le site &lt;a href=&quot;http://iterm2colorschemes.com/&quot;&gt;http://iterm2colorschemes.com/&lt;/a&gt;, ou sur n&#39;importe quel moteur de recherche, et pour importer un thème allez dans les préférences puis &lt;em&gt;Profiles &amp;gt; Colors&lt;/em&gt; puis cliquez sur la liste déroulante &lt;em&gt;Load Presets &amp;gt; Import…&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Et voilà !&lt;/p&gt;
&lt;h3 id=&quot;la-configuration&quot;&gt;La configuration&lt;/h3&gt;
&lt;p&gt;Ouvrez donc le fichier de config .zshrc en tapant &lt;code&gt;subl .zshrc&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Vous remarquerez qu&#39;il est déjà bien rempli, vous pouvez modifier les paramètres à votre convenance mais sachez juste que par défaut il est plutôt déjà bien configuré. Faites donc gaffe à ce que vous faites.&lt;/p&gt;
&lt;h3 id=&quot;les-plugins&quot;&gt;Les Plugins&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Oh-my-Zsh&lt;/strong&gt; vient aussi avec plusieurs plugins disponibles. Ces plugins ajoute des fonctionnalités et/ou &lt;em&gt;aliases&lt;/em&gt; (ces petits raccourcis fort utiles sur lesquelles on s&#39;attardera dans une autre partie). C&#39;est dans le fichier &lt;em&gt;.zshrc&lt;/em&gt; que vous devrez les charger en ajoutant dans les parenthèses de la ligne &lt;code&gt;plugins=()&lt;/code&gt; les noms de ceux qui vous intéressent.&lt;/p&gt;
&lt;p&gt;Pour voir la liste disponible, faites un tour sur &lt;a href=&quot;https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins&quot;&gt;le wiki de oh-my-zsh&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;C&#39;est à peu près tout pour la base de configuration de &lt;strong&gt;Zsh&lt;/strong&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Vous avez désormais votre application ainsi que votre shell correctement configurés avec les paramètres de base qui vont bien mais ne partez pas tout de suite, on va pousser le shell encore plus loin dans la partie suivante. ;)&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/&quot;&gt;Pimp my shell pour les béotiens — Les meilleurs sont des flemmards (Partie 3)&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Pimp my shell pour les béotiens — Kamoulox ! (Partie 1)</title>
    <link href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/" />
    <updated>2014-10-13T07:43:00Z</updated>
    <id>https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/</id>
    <content type="html">&lt;p&gt;Quand on fait dans le développement Front-end ou dans l&#39;intégration web (chacun ses appellations, je ne rentrerai pas dans le débat), si l&#39;on veut être efficace et rapide, il faut savoir utiliser de nombreux nouveaux outils (Sass, Compass, Grunt, Bundler, Bower, Gulp, etc).&lt;/p&gt;
&lt;p&gt;Outils qui sont pour la plupart uniquement utilisables en ligne de commande (ou CLI) et par conséquent, pour mieux les dompter, il faut se préparer le meilleur des équipements.&lt;/p&gt;
&lt;p&gt;Je me suis rendu compte que beaucoup d&#39;intégrateurs/trices ont peur du terminal. Honnêtement, je ne les blâmerai pas, je suis passé par là aussi, cette interface rustre, sans fioriture, si loin des interfaces rassurantes avec une bonne UI, ça fait peur !&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Spoiler alert&lt;/strong&gt;: c&#39;est loin d&#39;être si méchant finalement et dieu que c&#39;est pratique, intéressant et salvateur.&lt;/p&gt;
&lt;p&gt;Mais trêve de mots superfétatoires, lançons-nous.&lt;/p&gt;
&lt;p&gt;Pour bien comprendre ce que nous allons faire ensemble, il faut distinguer plusieurs parties :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/#app&quot;&gt;L&#39;application&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/#shell&quot;&gt;Le shell&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/#prompt&quot;&gt;Le prompt&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;l-application&quot;&gt;L&#39;application&lt;/h2&gt;
&lt;h3 id=&quot;terminal&quot;&gt;Terminal&lt;/h3&gt;
&lt;p&gt;Votre mac est livré avec sa propre application de terminal, judicieusement appelé &lt;strong&gt;Terminal&lt;/strong&gt;, que vous pourrez trouver dans le dossier &lt;em&gt;Applications&lt;/em&gt; ou recherchez-le avec spotlight &lt;code&gt;⌘ + Space&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/AIM_yAZDcP-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/AIM_yAZDcP-573.avif 573w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/AIM_yAZDcP-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/AIM_yAZDcP-573.webp 573w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/AIM_yAZDcP-400.png&quot; alt=&quot;Terminal&quot; width=&quot;573&quot; height=&quot;370&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/AIM_yAZDcP-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/AIM_yAZDcP-573.png 573w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Ci-dessus, Terminal avec le theme Homebrew&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Terminal&lt;/strong&gt;, même si c&#39;est une application livrée par défaut, est largement suffisant; il fait le boulot et il le fait bien.&lt;/p&gt;
&lt;p&gt;À chaque nouvelle version d&#39;OSX, il rattrape ses concurrents avec des fonctionnalités qui lui manquaient; il n&#39;a désormais plus grand chose à envier à ses comparses.&lt;/p&gt;
&lt;p&gt;Honnêtement, si vous ne vous sentez pas l&#39;âme aventurier bidouilleur, restez avec &lt;strong&gt;Terminal&lt;/strong&gt;, on ne vous jugera pas. Je connais des gens très bien, de bonne famille et tout, qui l&#39;utilisent quotidiennement. :)&lt;/p&gt;
&lt;h3 id=&quot;iterm2&quot;&gt;iTerm2&lt;/h3&gt;
&lt;p&gt;Dans le monde des alternatives à &lt;strong&gt;Terminal&lt;/strong&gt;, on peut trouver &lt;strong&gt;iTerm2&lt;/strong&gt; et… c&#39;est à peu près tout en fait. Les autres sont quasi inexistantes.&lt;/p&gt;
&lt;p&gt;J&#39;aurais pu faire une liste importante des fonctionnalités qui font la différence mais finalement, à ce jour, il n&#39;en reste plus beaucoup.&lt;/p&gt;
&lt;p&gt;On peut noter tout de même ma fonctionnalité préférée, le &lt;em&gt;split view&lt;/em&gt; ou &lt;em&gt;split pane&lt;/em&gt; dont je ne peux plus me passer (raccourci : &lt;code&gt;⌘ + D&lt;/code&gt;).&lt;/p&gt;
&lt;p&gt;En bref, cela permet d&#39;avoir des onglets dans des onglets. Très pratique quand, comme moi, vous aimez avoir un onglet par projet avec une vue dans laquelle une tâche de fond tourne et une autre sur l&#39;arborescence de votre dépôt comme le montre la capture ci-dessous.&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-400.avif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-812.avif 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-1000.avif 1000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-812.webp 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-1000.webp 1000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-400.png&quot; alt=&quot;iTerm&quot; width=&quot;1000&quot; height=&quot;462&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-400.png 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-812.png 812w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/-ngnpGcqfT-1000.png 1000w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;D&#39;aucuns diront que &lt;strong&gt;iTerm2&lt;/strong&gt; propose de nombreuses autres options que &lt;strong&gt;Terminal&lt;/strong&gt; ne propose pas, mais même si c&#39;est vrai, ce sont surtout des options pour un public assez confirmé, donc je n&#39;en parlerai pas. :)&lt;/p&gt;
&lt;p&gt;En bref, il n&#39;y a pas de mauvais choix, vraiment. C&#39;est soit vous n&#39;avez pas envie de vous faire chier, soit vous avez envie de découvrir autre chose.&lt;/p&gt;
&lt;p&gt;Les deux choix me paraissent aussi louable l&#39;un que l&#39;autre.&lt;/p&gt;
&lt;p&gt;Si vous voulez tester et/ou adopter iTerm2, alors &lt;a href=&quot;http://www.iterm2.com/&quot;&gt;rendez-vous sur le site&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;le-shell&quot;&gt;Le shell&lt;/h2&gt;
&lt;p&gt;Le shell est l&#39;interface système, c&#39;est ce qui vous permet de communiquer avec votre machine et ce à base de commandes.&lt;/p&gt;
&lt;p&gt;Je ne vais pas rentrer au fond du sujet pour le shell et ce pour deux raisons.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;je ne suis pas assez calé dans ce domaine.&lt;/li&gt;
&lt;li&gt;on s&#39;en fout un peu, pour l&#39;utilisation que vous en aurez, il n&#39;y a pas besoin de se prendre la tête.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Du coup, je vais juste parler de &lt;strong&gt;bash&lt;/strong&gt; et de &lt;strong&gt;Zsh&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Bash&lt;/strong&gt; est le shell embarqué avec Mac OSX depuis la 10.3. C&#39;est donc celui que vous avez tous par défaut, à moins d&#39;avoir du très, très vieux matériel.&lt;/p&gt;
&lt;p&gt;J&#39;ai pas grand chose à en dire, il est très bien, largement suffisant pour du &lt;em&gt;casual use&lt;/em&gt;, c&#39;est à dire pour nous autres, gens du &lt;em&gt;front&lt;/em&gt;.
&lt;strong&gt;Zsh&lt;/strong&gt; quant à lui est un peu plus poussé que &lt;strong&gt;bash&lt;/strong&gt; sur plusieurs points mais encore une fois, pour du &lt;em&gt;casual use&lt;/em&gt;, vous ne verrez quasi aucune différence. Les gros plus de &lt;strong&gt;Zsh&lt;/strong&gt; seraient son système intégré de complétion de commandes, mais qui existe aussi en plugin &lt;a href=&quot;http://bash-completion.alioth.debian.org/&quot;&gt;bash completion&lt;/a&gt; pour combler ce manque, et l&#39;auto-correction dans les cas où vous vous emmêlez les doigts.&lt;/p&gt;
&lt;p&gt;Donc finalement, c&#39;est kif-kif pour de l&#39;utilisation de base, mais si vous souhaitez vraiment pousser votre savoir en CLI, prenez Zsh, non mais sérieusement, n&#39;hésitez même pas. :)&lt;/p&gt;
&lt;p&gt;D&#39;ailleurs, si vous choisissez Zsh, allez m&#39;installer le Framework bien connu &lt;a href=&quot;http://ohmyz.sh/&quot;&gt;Oh My Zsh&lt;/a&gt;, c&#39;est mieux que mieux.&lt;/p&gt;
&lt;p&gt;Là j&#39;en entends au fond qui raillent et se demande bien pourquoi insister sur ce point du shell si c&#39;est pour en parler aussi peu.&lt;/p&gt;
&lt;p&gt;Et bien, je voulais surtout bien faire comprendre la dissociation qui existe entre l&#39;application et le shell.&lt;/p&gt;
&lt;p&gt;En soi, vous pourriez avoir les couples &lt;em&gt;Terminal+bash&lt;/em&gt;, &lt;em&gt;Terminal+Zsh&lt;/em&gt;, &lt;em&gt;iTerm2+bash&lt;/em&gt;, &lt;em&gt;iTerm2+Zsh&lt;/em&gt; et finalement, il n&#39;y en aurait pas un franchement mieux qu&#39;un autre.&lt;/p&gt;
&lt;h2 id=&quot;le-prompt&quot;&gt;Le prompt&lt;/h2&gt;
&lt;p&gt;Lorsque que le shell est prêt à recevoir une commande il affiche l&#39;invite de commande ou &lt;em&gt;prompt&lt;/em&gt; dans la langue de Shakespeare.&lt;/p&gt;
&lt;p&gt;C&#39;est ce vous pouvez voir tout à gauche d&#39;une nouvelle ligne…&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/mhQi79Ohna-400.webp 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/mhQi79Ohna-596.webp 596w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/mhQi79Ohna-400.gif&quot; alt=&quot;Bash&quot; width=&quot;596&quot; height=&quot;396&quot; srcset=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/mhQi79Ohna-400.gif 400w, https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/mhQi79Ohna-596.gif 596w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;p&gt;Sur cette image vous remarquez donc le prompt qui s&#39;affiche comme suit : &lt;code&gt;GoOz@Macbook-Air:repos$&lt;/code&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;GoOz&lt;/code&gt;, le &lt;em&gt;username&lt;/em&gt; de ma session utilisateur sur ma machine&lt;/li&gt;
&lt;li&gt;&lt;code&gt;@MacBook-Air&lt;/code&gt; étant le &lt;em&gt;hostname&lt;/em&gt; de ma machine&lt;/li&gt;
&lt;li&gt;&lt;code&gt;:&lt;/code&gt;, juste un séparateur&lt;/li&gt;
&lt;li&gt;&lt;code&gt;repos&lt;/code&gt;, le nom du dossier dans lequel je me trouve actuellement&lt;/li&gt;
&lt;li&gt;&lt;code&gt;$&lt;/code&gt;, le séparateur ou indicatif de fin de prompt&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Remarquez comme, après avoir changé de dossier en faisant la commande &lt;code&gt;cd Perso&lt;/code&gt;, &lt;em&gt;repos&lt;/em&gt; devient &lt;em&gt;Perso&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;Cette petite zone, mes amis, est donc ce qu&#39;on appelle le prompt. Et ce qui est sympa avec lui, c&#39;est qu&#39;on peut en faire à peu près ce que l&#39;on veut, sur tous les shells et toutes les applications.&lt;/p&gt;
&lt;h2 id=&quot;en-mega-bref&quot;&gt;En méga bref&lt;/h2&gt;
&lt;p&gt;Il faut voir ce trio application/shell/prompt comme 3 poupées russes :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Le prompt est dépendant du shell puisqu&#39;il est configuré dans le fichier de configuration de ce dernier.&lt;/li&gt;
&lt;li&gt;Le Shell dépend de l&#39;application… enfin ce n&#39;est pas tout à fait juste puisqu&#39;il y a un shell par défaut qui sera utilisé par les applications de terminal sauf si vous leur demandez de faire autrement, mais c&#39;est bien l&#39;application qui charge le shell.&lt;/li&gt;
&lt;li&gt;Et enfin au-dessus de tout, l&#39;application.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Voilà voilà. Vous êtes désormais tous incollables sur le sujet, on va pouvoir passer aux choses sérieuses. :)&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/&quot;&gt;Pimp my shell pour les béotiens — Choose your weapons (Partie 2)&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>I want you!</title>
    <link href="https://blog.foojin.com/2014/09/02/i-want-you/" />
    <updated>2014-09-02T00:00:00Z</updated>
    <id>https://blog.foojin.com/2014/09/02/i-want-you/</id>
    <content type="html">&lt;p&gt;J&#39;ai eu une idée de projet photographique récemment, une idée dont j&#39;avais bien besoin. Mon amour de la photographie ne s&#39;estompe pas avec le temps mais ma motivation pour en faire, elle, est aussi rare que le soleil d&#39;août en France.&lt;/p&gt;
&lt;h2 id=&quot;mon-projet&quot;&gt;Mon projet&lt;/h2&gt;
&lt;p&gt;Je vais demander à des gens de prendre mon appareil et de me tirer le portrait.&lt;/p&gt;
&lt;p&gt;Jusque-là rien de bien folichon me diriez-vous, sauf que le petit plus c&#39;est que je décide au préalable des réglages de l&#39;appareil, donc il sera en manuel complet, et je laisse au photographe d&#39;un moment le choix du lieu, de la pose et du cadrage. Avec un déclic et un seul.&lt;/p&gt;
&lt;p&gt;Il y aura quelques détails en plus qui resteront secret parce qu&#39;il en faut.&lt;/p&gt;
&lt;h2 id=&quot;pourquoi-j-ai-besoin-de-vous&quot;&gt;Pourquoi j&#39;ai besoin de vous ?&lt;/h2&gt;
&lt;p&gt;Si c&#39;est pas assez évident, je vous le dis clairement : &lt;strong&gt;j&#39;ai besoin de cobayes&lt;/strong&gt;. Pas nécessairement des photographes amateurs ou pro, je préfère limite des gros noobs qui ne sauront pas interpréter les réglages sélectionnés, mais n&#39;importe qui fera l&#39;affaire.&lt;/p&gt;
&lt;p&gt;Bref, si vous êtes intéressé(e)s, chopez-moi sur &lt;a href=&quot;http://twitter.com/GoOz&quot;&gt;Twitter&lt;/a&gt;, mailez-moi (&lt;em&gt;cycogooz chez gmail.com&lt;/em&gt;), appelez-moi si vous avez mon numéro de téléphone, faxez-moi (mais il faudra venir m&#39;installer le fax avant) ou chopez-moi en direct si on se voit souvent.&lt;/p&gt;
&lt;p&gt;Dans tous les cas, n&#39;envoyez pas de message via pigeon, je soupçonne mon chat d&#39;intercepter ma correspondance épistolaire.&lt;/p&gt;
&lt;p&gt;Merci !&lt;/p&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://blog.foojin.com/2014/09/02/i-want-you/UZ0Lc3aLHS-314.webp 314w&quot; sizes=&quot;(min-width: 50em) 812px, 100vw&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://blog.foojin.com/2014/09/02/i-want-you/UZ0Lc3aLHS-314.gif&quot; alt=&quot;&quot; width=&quot;314&quot; height=&quot;240&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Faites abstention au loup</title>
    <link href="https://blog.foojin.com/2014/05/26/faites-abstention-au-loup/" />
    <updated>2014-05-26T00:00:00Z</updated>
    <id>https://blog.foojin.com/2014/05/26/faites-abstention-au-loup/</id>
    <content type="html">&lt;p&gt;À chaque nouvelle élection, un phénomène massif pointe le bout de son nez, c&#39;est l&#39;&lt;strong&gt;abstentionnisme&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;À chaque nouvelle élection, on spolie ces gens.&lt;/p&gt;
&lt;p&gt;À chaque nouvelle élection où les partis d&#39;extrêmes font de bons scores, on se laisse aller en diatribes belliqueuses contre cette partie de la population.&lt;/p&gt;
&lt;p&gt;Mais qui sont ces &lt;em&gt;abstentionnistes&lt;/em&gt; ? Quels sont leurs réseaux ?&lt;/p&gt;
&lt;h2 id=&quot;qui-sont-ils&quot;&gt;Qui sont-ils ?&lt;/h2&gt;
&lt;p&gt;J&#39;aimerais qu&#39;on prenne le temps ici de s&#39;intéresser à ces gens, de savoir qui ils sont, d&#39;où ils viennent et pourquoi ils ne se lèvent pas du canapé, parce que même les plus &amp;quot;&lt;em&gt;démocrates&lt;/em&gt;&amp;quot; auto-proclamés, ceux-là même qui défendent la différence de culture, d&#39;ethnicité, d&#39;opinion, ont tendance à cracher sur le lot sans distinction.&lt;/p&gt;
&lt;p&gt;Voici donc une liste non-exhaustive des différents type de &amp;quot;&lt;em&gt;branleurs démocrates&lt;/em&gt;&amp;quot; :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Les ermites&lt;/strong&gt;, ou ceux qui sont dans leur petit monde, refusant de s&#39;intégrer à la vie sociale et donc à la vie politique. Ils n&#39;ont souvent même pas eu vent des élections et ne s&#39;en plaignent d&#39;ailleurs pas.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Les indisposés&lt;/strong&gt;, ou ceux qui étaient inopinément malades, bloqués quelque part avec un empêchement de dernière minute, ceux-là même dont le besoin de se soigner ou de se sortir de leur propre merde était plus important que d&#39;aller mettre un papier dans une boîte.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Les ignorants&lt;/strong&gt;, ou ceux qui ne comprennent rien à rien, ni au tenants et encore moins aux aboutissants, qui ne comprennent pas pourquoi ils doivent voter et à quoi cela servirait. Je vous le demande, qui serait assez insensé pour faire quelque chose machinalement, sans réfléchir ? Personne n&#39;est idiot à ce point ؟&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Les désabusés&lt;/strong&gt;, ou ceux qui n&#39;ont plus foi dans le régime actuel, qui ne voit que répétition d&#39;échec avec pour seule différence l&#39;alternance des bords politiques à chaque mandat, ceux qui prennent conscience que la démocratie représentative s&#39;essouffle.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Les flemmards&lt;/strong&gt;, ou ceux qui… qui préfèrent larver devant la télé, la console ou un bon bouquin, parce que c&#39;est le week end et que sortir acheter du pain c&#39;est déjà un effort surhumain, alors aller voter…&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Les Fans du Blanc&lt;/strong&gt;, ou ceux qui militent pour que le statut du vote blanc soit enfin considéré. Aujourd&#39;hui c&#39;est le cas, le vote blanc est compté et considéré… enfin jusqu&#39;au point où on l&#39;écrit dans les registres, sans avoir de réel poids dans la balance. M&#39;enfin… doit bien rester des déçus, j&#39;imagine.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Les activistes&lt;/strong&gt;, ou ceux qui refusent par principe, par conviction philosophique ou politique de participer à ce qu&#39;ils considèrent comme une masacarade démocratique, car participer ce serait dire qu&#39;on corrobore ce système.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Voilà, on a fait le tour des groupes les plus importants, si j&#39;en ai oublié, des significatifs, envoyez-moi un Fax.&lt;/p&gt;
&lt;h2 id=&quot;le-malaise&quot;&gt;Le malaise&lt;/h2&gt;
&lt;p&gt;Le malaise arrive surtout lorsqu&#39;un parti d&#39;idéologie extrême fait un bon score. On cherche désespérement, sans relâche, un coupable. Il faut blâmer. Il faut un bouc émissaire.&lt;/p&gt;
&lt;p&gt;Accuser le &lt;em&gt;voteur extrême&lt;/em&gt; ? Non, c&#39;est son droit le plus strict de voter, même si l&#39;on est pas d&#39;accord avec lui.&lt;/p&gt;
&lt;p&gt;Accuser le &lt;em&gt;voteur blanc&lt;/em&gt; ? Non, lui aussi s&#39;est exprimé malgré tout.&lt;/p&gt;
&lt;p&gt;Accuser le &lt;em&gt;voteur nul volontaire&lt;/em&gt; ? Ils sont si peu nombreux que ça n&#39;aurait aucun impact.&lt;/p&gt;
&lt;p&gt;Il ne reste donc que les abstentionnistes, ceux qui n&#39;ont pas voulu ou pu prendre part aux élections. Ce sont eux les fautifs. On blâme ceux qui n&#39;ont rien fait au motif fallacieux que ce sont des voix en moins &lt;strong&gt;contre&lt;/strong&gt; ces partis extrêmes, alors que le principe des élections est, et à toujours été, de voter &lt;strong&gt;pour&lt;/strong&gt; ceux que l&#39;on veut voir au pouvoir, mais passons…&lt;/p&gt;
&lt;p&gt;J&#39;insiste sur le caractère fallacieux de cette critique. Rien n&#39;est sûr, tout est supposé. Tous supposent que l&#39;abstentionniste n&#39;aurait pas voté extrême s&#39;il avait bougé son cul; rien ne dit que certains votants extrêmes n&#39;étaient pas d&#39;abord partisans de l&#39;abstention avant de recevoir le matraquage médiatique de l&#39;image du mauvais citoyen qu&#39;ils auraient été s&#39;ils s&#39;étaient retenus.&lt;/p&gt;
&lt;p&gt;Tout n&#39;est qu&#39;allégation maladroite.&lt;/p&gt;
&lt;p&gt;C&#39;est une simili chasse aux sorcières que l&#39;on retrouve là. Combien sont-ils ces pseudos démocrates qui réfutent aux néo-pestiférés leur droit de ne pas être d&#39;accord, qui les insultent, qui les comparent aux collaboteurs du régime nazi, qui leur retirent même le droit de défendre leur intégrité ? Lequel est le plus &amp;quot;fasciste&amp;quot; des deux ? Celui qui impose à l&#39;autre ou celui qui refuse de faire partie du groupe ?&lt;/p&gt;
&lt;p&gt;Est-ce donc ça la démocratie tant vantée ? Celle où l&#39;homme était égal à son prochain et libre ?&lt;/p&gt;
&lt;p&gt;J&#39;ai entendu les pires arguments à chaque fois. Les pires syllogismes. Les pires insultes. Mais rares sont ceux qui comprennent, ou qui cherchent en tout cas à comprendre que tous ne jurent pas par le vote. Rares sont ceux qui prennent conscience que ce n&#39;est pas l&#39;abstentionnisme le pire des maux de la démocratie moderne, mais le système démocratique actuel qui s&#39;essouffle. Que la solution n&#39;est pas l&#39;obligation ou la sanction, que la solution c&#39;est le recul, c&#39;est rendre le pouvoir au peuple pour espérer son implication mais aussi la redéfinition de ce régime bancal.&lt;/p&gt;
&lt;h2 id=&quot;en-bref&quot;&gt;En bref&lt;/h2&gt;
&lt;p&gt;Les abstentionnistes ce sont des gens normaux, comme vous et moi, certains sans véritable raison réfléchie, d&#39;autres avec convictions mais tous (ou presque) ont choisi de garder leur voix pour eux, de garder leur symbolique pouvoir citoyen pour ne rien en faire.&lt;/p&gt;
&lt;p&gt;Le score du FN de cette dernière élection européenne n&#39;a rien à voir avec l&#39;abstentionnisme; Ne blâmez pas des gens de s&#39;être retenus, trouvez l&#39;origine du problème et tentez d&#39;apercevoir une solution. Pour les inciter au vote, ne les forcez pas, donnez-leur une voix qui a du poids, une raison de se dire qu&#39;on peut changer les choses, vraiment changer les choses.&lt;/p&gt;
&lt;h2 id=&quot;bonus&quot;&gt;Bonus&lt;/h2&gt;
&lt;p&gt;Aller arrêtons un peu le sérieux voulez-vous bien et rions un peu avec George Carlin…&lt;/p&gt;
&lt;p&gt;Je vous dirais bien de commenter si vous avez des choses à dire mais j&#39;ai toujours pas de commentaires fonctionnels donc répondez moi sur &lt;a href=&quot;http://twitter.com/GoOz&quot;&gt;Twitter&lt;/a&gt;.&lt;/p&gt;
</content>
  </entry>
</feed>