HaikoOzJournal personnel de GoOz, avec des mots petits et grands.2024-03-20T00:00:00Zhttps://blog.foojin.comGoOzgooz@foojin.comPourquoi faire simple quand on peut faire absurde2024-03-20T00:00:00Zhttps://blog.foojin.com/2024/03/20/pourquoi-faire-simple-quand-on-peut-faire-absurde/<p><strong>En vrac…</strong></p>
<p>J'ai réagi sur un <em>toot</em> de <a href="https://fediverse.zachleat.com/@zachleat/112117301801565699#.">Zach Leatherman</a> qui reprend un <em>tweet</em> d'une personne demandant un outil simple pour pondre quelques pages pour un site personnel et une des réponses était d'utiliser <strong>React</strong>.</p>
<p>Je ne remets pas en cause l'existence même de <strong>React</strong> (encore que ça ne serait pas déconnant mais ce n'est pas le sujet) mais sérieusement… React n'a rien de simple et dans ce contexte c'est utiliser une usine à gaz pour chauffer l'eau de son thé; tant sur le plan technique ou de performance qu'écologique c'est la pire des idées de faire ça pour ce genre de site.</p>
<p>Et ce qui m'a le plus choqué c'est que personne n'a répondu en alertant sur ce sujet. La hype des nouveaux joujoux JS à utiliser à tort et à travers pour tout et n'importe quoi m'exaspère de plus en plus.</p>
<p>Puis je me suis demandé si je devenais vieux et con… peut-être un peu…</p>
<p>Et finalement je suis tombé sur une réponse de <a href="https://twitter.com/doctorbaytas/status/1769271734048276901">@doctorbaytas</a> qui a fini de m'achever :</p>
<blockquote>
<p>I have used <a href="https://twitter.com/eleven_ty">@eleven_ty</a> before for my personal site and it was pretty good <br>
same mindset as <a href="https://twitter.com/jekyllrb">@jekyllrb</a>, built on JS instead of Ruby <br>
(later scrapped it and rebuilt in <a href="https://twitter.com/nextjs">@nextjs</a> because why would you live without <a href="https://twitter.com/reactjs">@reactjs</a>)</p>
</blockquote>
<p>"why would you live without React" ? Non… la bonne question serait plutôt : As-tu <strong>VRAIMENT</strong> besoin de React. Genre <em>vraiment</em> !? Pour un putain de site vitrine pour ta tronche que tu mets à jour tous les 6 mois ?!</p>
<pre><code>(╯°□°)╯︵ ┻━┻
</code></pre>
<p><code>#environdemourir</code></p>
<hr>
<p>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.</p>
<p>Nous avons une salle dans un logement appartenant à la mairie, sauf qu'une salle n'est pas suffisant pour nous alors on "squatte" une autre salle du même logement (que personne d'autre n'utilise jamais) pour pouvoir accueillir plusieurs tables en même temps et parfois un agent de la mairie passe dans le logement pour <em>x</em> raison et ferme cette deuxième salle à clé… sauf que nous n'avons pas la clé, nous n'avons que celle de la première salle qui nous est légitimement attitrée.</p>
<p>Tout ça, la mairie est bien sûr au courant et nous laisse utiliser cette salle supplémentaire en bonne intelligence.</p>
<p>Mais voilà, quand l'agent passe et ferme il nous faut prévenir la mairie pour qu'elle envoie quelqu'un rouvrir la salle ce qui est une opération plutôt simple et directe. Sauf que la dernière fois que c'est arrivé, malgré les multiples relances, il aura fallu 3 mois pour que l'agent passe. Alors c'était durant les vacances d'été donc moins gênant vu la faible fréquentation mais tout de même, ça nous a bien emmerdé quand ça s'est étalé jusqu'à la rentrée.</p>
<p>Et puis l'agent est repassé récemment et a refermé cette foutue porte il y a un mois tout pile.</p>
<p>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'aller rouvrir), désormais la communication c'est "on sait qui a les clés" mais ils ne savent pas qui a fermé et comment résoudre le problème.</p>
<p>Mais nous on s'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'un passe et ouvre cette porte.</p>
<p>Mais ça a l'air vachement compliqué comme requête pour une mairie apparemment.</p>
<p>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'annuler ou reporter des soirées faute de place alors qu'il y en a juste derrière cette porte fermée.</p>
<pre><code>ʕノ•ᴥ•ʔノ ︵ ┻━┻
</code></pre>
<p><code>#environdemourir #leretour</code></p>
Les hauts mais surtout les bas2024-03-15T00:00:00Zhttps://blog.foojin.com/2024/03/15/les-hauts-mais-surtout-les-bas/<p><strong>En vrac</strong></p>
<p>Au cours de mes pérégrinations sur <a href="https://mamot.fr/@GoOz">Mastodon</a> je suis tombé sur deux billets traitant le même sujet : <strong>Ne pas mettre de <code>margin</code> sur un composant réutilisable</strong></p>
<p>Les articles en question :</p>
<ul>
<li><a href="https://kyleshevlin.com/no-outer-margin/">No outer margin</a> par Kyle Shevlin</li>
<li><a href="https://mxstbr.com/thoughts/margin/">Margin considered harmful</a> par Max Stoiber</li>
</ul>
<p>Au delà du fait que cela n'a rien de nouveau, que je fais ça depuis des années comme beaucoup d'autres qui travaillent sur des composants réutilisables et qui sont vite tombés sur ce problème récurrent, ce qui m'a gêné le plus dans ces articles c'est que leurs exemples sont toujours dans un contexte <strong>React/JS</strong> or ce n'est pas du tout un problème lié à ce contexte, c'est un problème inhérent à CSS, complètement agnostique de la stack front utilisée.</p>
<p>On aura le même problème sur n'importe quel framework JS et même en HTML tout simplement.</p>
<p>C'est comme si <em>React</em> était le nouveau défaut. Sauf que non.</p>
<p>Ce n'est peut être que moi mais quand tu parles d'un problème global, je pense que tu devrais faire des exemples qui parlent à tout le monde en utilisant du code neutre.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/F7QhahHBcQ-400.avif 400w, https://blog.foojin.com/img/F7QhahHBcQ-812.avif 812w, https://blog.foojin.com/img/F7QhahHBcQ-1400.avif 1400w, https://blog.foojin.com/img/F7QhahHBcQ-2560.avif 2560w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/F7QhahHBcQ-400.webp 400w, https://blog.foojin.com/img/F7QhahHBcQ-812.webp 812w, https://blog.foojin.com/img/F7QhahHBcQ-1400.webp 1400w, https://blog.foojin.com/img/F7QhahHBcQ-2560.webp 2560w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/F7QhahHBcQ-400.png 400w, https://blog.foojin.com/img/F7QhahHBcQ-812.png 812w, https://blog.foojin.com/img/F7QhahHBcQ-1400.png 1400w, https://blog.foojin.com/img/F7QhahHBcQ-2560.png 2560w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Meme de Peter Griffin de la série Family Guy présentant what really grinds my gears" loading="lazy" decoding="async" src="https://blog.foojin.com/img/F7QhahHBcQ-400.png" width="2560" height="1445"></picture></p>
<hr>
<p>Hier soir avec des amis on a enfin fait la cérémonie de commémoration d'un ami décédé en septembre.</p>
<p>Ça a commencé par dispersion de ses cendres au pied d'un arbre que l'on a planté dans la forêt pour l'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'autres choses.</p>
<p>Il est le deuxième ami parti beaucoup trop tôt à cause d'un cancer.</p>
<p>C'est toujours aussi difficile. Voire même plus. Ça a ravivé des douleurs enfouies depuis des années.</p>
<p>Je ne suis pas religieux, ni même spirituel de quelque manière que ce soit, alors je n'ai pas pu m'imaginer ou souhaiter qu'il soit bien là où il est. Pour moi il n'est nulle part, il n'est juste plus.</p>
<p>Ce qui reste, c'est juste les autres. Nous, avec nous même.</p>
<p>Adieu Gillou…</p>
Un pour l’argent, deux pour le spectacle, et trois pour le caillou.2024-03-12T00:00:00Zhttps://blog.foojin.com/2024/03/12/un-pour-l%E2%80%99argent-deux-pour-le-spectacle-et-trois-pour-le-caillou./<p><strong>En vrac</strong></p>
<p>Je trouve que ça a un effet relaxant d'écrire du CSS moderne. La satisfaction que cela me procure est <em>étrangement</em> inversement proportionnelle à la frustration que j'éprouvais quand je faisais du support IE jadis.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">:where(input[type="file"])</span> <span class="token punctuation">{</span><br> <span class="token property">--color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-main<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">var</span><span class="token punctuation">(</span>--color<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--reset-font-size<span class="token punctuation">)</span> * <span class="token function">var</span><span class="token punctuation">(</span>--size-1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--size-7<span class="token punctuation">)</span> + <span class="token function">var</span><span class="token punctuation">(</span>--size-2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background-dark<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--placeholder<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><br> <span class="token property">padding-inline-end</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-3<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br> <span class="token selector">&::file-selector-button</span> <span class="token punctuation">{</span><br> <span class="token property">margin-inline-end</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-3<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-2<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-3<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--body-light<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token selector">&:where(:hover)</span> <span class="token punctuation">{</span><br> <span class="token property">--color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-dark<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token selector">&:where(:active)</span> <span class="token punctuation">{</span><br> <span class="token property">--color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-darker<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><br> <span class="token selector">&:where([disabled])</span> <span class="token punctuation">{</span><br> <span class="token property">--color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-disabled<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">cursor</span><span class="token punctuation">:</span> not-allowed<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<hr>
<p>A propos du développement frontend (et plus particulièrement CSS)…</p>
<blockquote>
<p>Certain pursuits are validated with importance, dignity, and honor.</p>
<p>Doctors; lawyers; architects; CEOs; software engineers.</p>
<p>Some kinds of work are “serious” work, which is well and good—except that, implicitly, that means other kinds are <em>not</em> serious.</p>
<p>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.</p>
<p>Nurses; paralegals; interior designers; executive assistants; frontend developers.</p>
<p>(Surely it’s a coincidence the first group tends to be more male than the second.)</p>
<p>— <em>Josh Collinsworth</em> ~ <a href="https://joshcollinsworth.com/blog/devaluing-frontend">The quiet, pervasive devaluation of frontend</a></p>
</blockquote>
<p>C'est l'histoire de toute ma carrière…</p>
<hr>
<p>Depuis que je suis sur <a href="https://glass.photo/">Glass</a> (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'ils ou elles ont une sorte de touche personnelle, une sorte de type de photo de prédilection.</p>
<p>Et quand je regarde <a href="https://www.bloogart.com/">ce que je fais</a>, je ne vois aucun fil rouge. Je touche à beaucoup de type de photo, j'expérimente beaucoup, même <a href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">mon challenge pour l'année</a> est aléatoire…</p>
<p>J'arrive pas à me décider si c'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'ai bien une touche perso mais je suis pas assez détaché et objectif pour le voir.</p>
<p>🤷♂️</p>
Il y a un début à tout2024-03-08T00:00:00Zhttps://blog.foojin.com/2024/03/08/il-y-a-un-debut-a-tout/<p><strong>En vrac…</strong></p>
<p>Comme de nombreux copains et copines qui le font déjà depuis de belles lurettes, je vais m'atteler à essayer de poster des billets "fourre-tout", c'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.</p>
<p>La périodicité sera évidemment aussi chaotique que son contenu.</p>
<hr>
<p>J'ai mis un peu à jour ce blog en enlevant des tags pas franchement utiles, voire même embrouillants.</p>
<p>Et puis j'ai rajouté une table des matières ou navigation de page sur les billets (quand y en a besoin). J'aime bien, ça rend bien. :3</p>
<hr>
<p>Élément phare de ma liste de choses à procrastiner et ce depuis des lustres, <a href="https://github.com/tweetback/tweetback">Tweetback</a> est désormais installé <a href="https://tweets.foojin.com/">chez moi</a>.</p>
<p>Pour être honnête je ne suis pas convaincu d'en avoir un jour l'utilité. Faut dire que depuis 2009 (l'année de mon inscription) j'ai écrit beaucoup de conneries et sûrement pas mal de trucs moins cons… mais je ne m'en souviens pas.</p>
<p>C'est plus par soucis de reprise de contrôle de mes conneries que je l'ai fait.</p>
Shuffle, mon challenge photo de l'année2023-12-22T00:00:00Zhttps://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/<p>Depuis quelques temps je me suis un peu poussé au cul pour reprendre la photographie avec plus d'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.</p>
<h2 id="la-genese" tabindex="-1">La génèse <a class="header-anchor" href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">#</a></h2>
<p>Je voulais commencer par un challenge tranquille mais pas trop, donc ce serait un challenge 52, c'est à dire 1 photo par semaine dans l'année, soit 52 photos.<br>
Mais le truc un peu chiant à mon goût c'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'ai pas envie de chercher spécifiquement des jolies fleurs parce que cette semaine là le thème est "fleur".<br>
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'aime pas donc faire un truc que j'aime pas juste pour remplir un challenge, ça me gave.</p>
<p>Oui mais quoi alors ? Il faut des contraintes pour que ce soit un peu fun, sinon c'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'voyez ?</p>
<p>Il me fallait un truc cohérent sur toute l'année, contraignant d'une manière ou d'une autre et fun aussi pendant qu'on y est.</p>
<p>Et puis en bon joueur de jeu de rôle, j'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'exposition par exemple. Des trucs comme les ISO, la vitesse d'obturation et l'ouverture, le triptyque gagnant de base de toute photographie.</p>
<p>C'était décidé ! J'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'aime avec ces contraintes aléatoires. Ceux qui s'y connaissent assez en optique et donc en photographie savent que ça peut vite tourner au vinaigre cette histoire, qu'on a vite fait de se retrouver avec des photos toutes noires ou toutes blanches ou… de manière plus globale des photos qu'on appellerait des ratées.<br>
Mais c'est bien là qu'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.</p>
<h2 id="la-methodologie" tabindex="-1">La méthodologie <a class="header-anchor" href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">#</a></h2>
<p>Je vais vous décrire ici comment je vais procéder pour que, si jamais ça vous tente aussi, vous puissiez reproduire l'expérience de votre côté avec votre propre matériel.</p>
<p>Tout d'abord il vous faut choisir un seul et unique appareil avec un seul et unique objectif.<br>
Pour ma part part ce sera mon <strong>Fujifilm X-T5</strong> avec mon objectif à focale fixe <strong>Fujinon 35mm/f1.4</strong></p>
<p>À 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'obturation, puis faire une dernière fois ça avec votre objectif pour l'ouverture.</p>
<h3 id="sensibilite-iso" tabindex="-1">Sensibilité (ISO) <a class="header-anchor" href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">#</a></h3>
<p>Sur mon appareil j'ai 21 valeurs possible pour les ISO, ce qui donne un tableau de correspondance comme suit :</p>
<table>
<thead>
<tr>
<th>Valeur dé</th>
<th>Valeur ISO</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>125</td>
</tr>
<tr>
<td>2</td>
<td>160</td>
</tr>
<tr>
<td>3</td>
<td>200</td>
</tr>
<tr>
<td>4</td>
<td>250</td>
</tr>
<tr>
<td>5</td>
<td>320</td>
</tr>
<tr>
<td>6</td>
<td>400</td>
</tr>
<tr>
<td>7</td>
<td>500</td>
</tr>
<tr>
<td>8</td>
<td>640</td>
</tr>
<tr>
<td>9</td>
<td>800</td>
</tr>
<tr>
<td>10</td>
<td>1000</td>
</tr>
<tr>
<td>11</td>
<td>1250</td>
</tr>
<tr>
<td>12</td>
<td>1600</td>
</tr>
<tr>
<td>13</td>
<td>2000</td>
</tr>
<tr>
<td>14</td>
<td>2500</td>
</tr>
<tr>
<td>15</td>
<td>3200</td>
</tr>
<tr>
<td>16</td>
<td>4000</td>
</tr>
<tr>
<td>17</td>
<td>5000</td>
</tr>
<tr>
<td>18</td>
<td>6400</td>
</tr>
<tr>
<td>19</td>
<td>8000</td>
</tr>
<tr>
<td>20</td>
<td>10000</td>
</tr>
<tr>
<td>21</td>
<td>12800</td>
</tr>
</tbody>
</table>
<h3 id="vitesse-d-obturation" tabindex="-1">Vitesse d'obturation <a class="header-anchor" href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">#</a></h3>
<p>Sur mon appareil j'ai 14 valeurs possible pour la vitesse d'obturation, ce qui donne un tableau de correspondance comme suit :</p>
<table>
<thead>
<tr>
<th>Valeur dé</th>
<th>Valeur de vitesse</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1"</td>
</tr>
<tr>
<td>2</td>
<td>1/2</td>
</tr>
<tr>
<td>3</td>
<td>1/4</td>
</tr>
<tr>
<td>4</td>
<td>1/8</td>
</tr>
<tr>
<td>5</td>
<td>1/15</td>
</tr>
<tr>
<td>6</td>
<td>1/30</td>
</tr>
<tr>
<td>7</td>
<td>1/60</td>
</tr>
<tr>
<td>8</td>
<td>1/125</td>
</tr>
<tr>
<td>9</td>
<td>1/250</td>
</tr>
<tr>
<td>10</td>
<td>1/500</td>
</tr>
<tr>
<td>11</td>
<td>1/1000</td>
</tr>
<tr>
<td>12</td>
<td>1/2000</td>
</tr>
<tr>
<td>13</td>
<td>1/4000</td>
</tr>
<tr>
<td>14</td>
<td>1/8000</td>
</tr>
</tbody>
</table>
<h3 id="ouverture" tabindex="-1">Ouverture <a class="header-anchor" href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">#</a></h3>
<p>Sur mon objectif j'ai 22 valeurs possible pour l'ouverture, ce qui donne un tableau de correspondance comme suit :</p>
<table>
<thead>
<tr>
<th>Valeur dé</th>
<th>Valeur d'ouverture</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>14</td>
</tr>
<tr>
<td>3</td>
<td>13</td>
</tr>
<tr>
<td>4</td>
<td>11</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>6</td>
<td>9</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>7.1</td>
</tr>
<tr>
<td>9</td>
<td>6.4</td>
</tr>
<tr>
<td>10</td>
<td>5.6</td>
</tr>
<tr>
<td>11</td>
<td>5.0</td>
</tr>
<tr>
<td>12</td>
<td>4.5</td>
</tr>
<tr>
<td>13</td>
<td>4.0</td>
</tr>
<tr>
<td>14</td>
<td>3.6</td>
</tr>
<tr>
<td>15</td>
<td>3.2</td>
</tr>
<tr>
<td>16</td>
<td>2.8</td>
</tr>
<tr>
<td>17</td>
<td>2.5</td>
</tr>
<tr>
<td>18</td>
<td>2.2</td>
</tr>
<tr>
<td>19</td>
<td>2.0</td>
</tr>
<tr>
<td>20</td>
<td>1.8</td>
</tr>
<tr>
<td>21</td>
<td>1.6</td>
</tr>
<tr>
<td>22</td>
<td>1.4</td>
</tr>
</tbody>
</table>
<h3 id="les-jets-de-des" tabindex="-1">Les jets de dés <a class="header-anchor" href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">#</a></h3>
<p>J'ai beau avoir beaucoup de dés pour mes parties de jeu de rôle, j'ai jamais eu, ni trouvé, de dé 21, 22 ou 14.<br>
Alors à la place on va utiliser une application en ligne, en l'occurence <a href="https://rolladie.net/">Roll a Die</a> 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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/a6R4jB9Vgc-400.avif 400w, https://blog.foojin.com/img/a6R4jB9Vgc-812.avif 812w, https://blog.foojin.com/img/a6R4jB9Vgc-1124.avif 1124w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/a6R4jB9Vgc-400.webp 400w, https://blog.foojin.com/img/a6R4jB9Vgc-812.webp 812w, https://blog.foojin.com/img/a6R4jB9Vgc-1124.webp 1124w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/a6R4jB9Vgc-400.png 400w, https://blog.foojin.com/img/a6R4jB9Vgc-812.png 812w, https://blog.foojin.com/img/a6R4jB9Vgc-1124.png 1124w" sizes="(min-width: 50em) 812px, 100vw"><img alt="capture d'écran de l'application Roll a Die" loading="lazy" decoding="async" src="https://blog.foojin.com/img/a6R4jB9Vgc-400.png" width="1124" height="1232"></picture></p>
<h2 id="yaplukafokon" tabindex="-1">Yaplukafokon <a class="header-anchor" href="https://blog.foojin.com/2023/12/22/shuffle-mon-challenge-photo/">#</a></h2>
<p>Et voilà, j'ai décidé d'humblement appeler ce challenge le <strong>Shuffle challenge</strong> !!</p>
<p>Maintenant que tout est prêt, y a plus qu'à se lancer. Ce que je ferai donc dès la première semaine de janvier 2024.</p>
<p>Si jamais le challenge vous a tenté aussi, faites le moi savoir et partagez-moi vos clichés, ça m'intéresse, quant aux miens ce sera comme d'habitude sur <a href="https://www.bloogart.com/">www.bloogart.com/</a></p>
<p><em>Alea jacta est</em> comme disait l'autre.</p>
Niepce, le kit pour portfolio statique2023-12-14T00:00:00Zhttps://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/<p>Depuis que j'ai refait ce blog en site statique avec <a href="https://www.11ty.dev/">Eleventy</a> je suis tombé amoureux de cet outil et j'ai décidé de refaire aussi mon portfolio avec. Mais j'ai remarqué qu'il y avait peu ou pas de starter kit dans la communauté pour créer son portfolio. Alors je l'ai fait… pour moi d'abord et puis pour les autres ensuite.</p>
<h2 id="pourquoi-comment-et-a-quoi-ca-ressemble-donc" tabindex="-1">Pourquoi, comment et à quoi ça ressemble donc ? <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h2>
<p><strong>Niepce</strong> est un <em>starter kit</em> pour vous aider à construire votre portfolio statique avec <strong>Eleventy</strong> sans que vous ayez à tout faire vous même.</p>
<p>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.</p>
<p>Le but premier était de rendre ce <em>starter kit</em> de portfolio souple, configurable et, autant que faire se peut, accessible au plus grand nombre sauf qu'<strong>Eleventy</strong> a beau être génial, on va pas se mentir, c'est pas à la portée du premier ou de la première venue; un certain niveau minimum de savoir technique est requis.<br>
J'ai fait du mieux que j'ai pu mais à un moment il faudra mettre les mains dans le cambouis, pas le choix.</p>
<p>Pour voir à quoi ça ressemble pas besoin d'aller bien loin, je vous invite à aller voir <a href="https://www.bloogart.com/">mon portfolio</a>, c'est encore le plus simple. Vous ne pourrez pas voir toutes les possibilités mais c'est déjà un bon aperçu.</p>
<h2 id="les-fonctionnalites-integrees" tabindex="-1">Les fonctionnalités intégrées <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h2>
<h3 id="logo-personnalise" tabindex="-1">Logo personnalisé <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Si vous avez votre propre logo, vous pourrez l'ajouter facilement.<br>
Si vous n'en avez pas c'est le nom du portfolio qui prendra sa place.</p>
<p>Attention toutefois, le nom devra être court sous peine de passer à la ligne, c'est pourquoi un logo est tout de même préférable.</p>
<h3 id="banniere-pour-les-partages-sociaux-avec-opengraph" tabindex="-1">Bannière pour les partages sociaux avec OpenGraph <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Quand vous ou quelqu'un d'autre partagera un lien vers votre site sur les réseaux sociaux ou sur toute autre plateforme qui gère <a href="https://ogp.me/">Opengraph</a> cela affichera une carte avec les informations essentielles de la page partagée.</p>
<p>Un peu comme ceci :
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/DJbATMgxV3-400.avif 400w, https://blog.foojin.com/img/DJbATMgxV3-794.avif 794w" sizes="400px"><source type="image/webp" srcset="https://blog.foojin.com/img/DJbATMgxV3-400.webp 400w, https://blog.foojin.com/img/DJbATMgxV3-794.webp 794w" sizes="400px"><source type="image/png" srcset="https://blog.foojin.com/img/DJbATMgxV3-400.png 400w, https://blog.foojin.com/img/DJbATMgxV3-794.png 794w" sizes="400px"><img alt="capture d'écran d'un partage sur Twitter usant d'OpenGraph" loading="lazy" decoding="async" src="https://blog.foojin.com/img/DJbATMgxV3-400.png" width="794" height="644"></picture></p>
<p>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.</p>
<h3 id="les-tons-clair-et-obscur" tabindex="-1">Les tons clair et obscur <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Niepce existe en 3 saveurs :</p>
<ul>
<li>en ton clair</li>
<li>en ton obscur</li>
<li>en ton automatique</li>
</ul>
<p>En bref, vous avez le choix de forcer un des deux tons ou de laisser les préférences utilisateurs choisir à votre place.</p>
<p><strong>Le ton clair</strong>
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/uKHdyucR3Z-400.avif 400w, https://blog.foojin.com/img/uKHdyucR3Z-812.avif 812w, https://blog.foojin.com/img/uKHdyucR3Z-1400.avif 1400w, https://blog.foojin.com/img/uKHdyucR3Z-2880.avif 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/uKHdyucR3Z-400.webp 400w, https://blog.foojin.com/img/uKHdyucR3Z-812.webp 812w, https://blog.foojin.com/img/uKHdyucR3Z-1400.webp 1400w, https://blog.foojin.com/img/uKHdyucR3Z-2880.webp 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/uKHdyucR3Z-400.png 400w, https://blog.foojin.com/img/uKHdyucR3Z-812.png 812w, https://blog.foojin.com/img/uKHdyucR3Z-1400.png 1400w, https://blog.foojin.com/img/uKHdyucR3Z-2880.png 2880w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Capture d'écran du ton clair" loading="lazy" decoding="async" src="https://blog.foojin.com/img/uKHdyucR3Z-400.png" width="2880" height="1749"></picture></p>
<p><strong>Le ton obscur</strong>
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/MCpun-omC1-400.avif 400w, https://blog.foojin.com/img/MCpun-omC1-812.avif 812w, https://blog.foojin.com/img/MCpun-omC1-1400.avif 1400w, https://blog.foojin.com/img/MCpun-omC1-2880.avif 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/MCpun-omC1-400.webp 400w, https://blog.foojin.com/img/MCpun-omC1-812.webp 812w, https://blog.foojin.com/img/MCpun-omC1-1400.webp 1400w, https://blog.foojin.com/img/MCpun-omC1-2880.webp 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/MCpun-omC1-400.png 400w, https://blog.foojin.com/img/MCpun-omC1-812.png 812w, https://blog.foojin.com/img/MCpun-omC1-1400.png 1400w, https://blog.foojin.com/img/MCpun-omC1-2880.png 2880w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Capture d'écran du ton obscur" loading="lazy" decoding="async" src="https://blog.foojin.com/img/MCpun-omC1-400.png" width="2880" height="1749"></picture></p>
<h3 id="4-choix-de-presentation" tabindex="-1">4 choix de présentation <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Vous avez le choix entre 4 façons pour présenter les galeries :</p>
<ul>
<li>la grille dite "<em>justified</em>" à la <strong>Flickr</strong> ou <strong>500px</strong></li>
<li>la grille dite "<em>masonry</em>" à la <strong>Pinterest</strong></li>
<li>la grille dite "<em>instagrid</em>" à la <strong>Instagram</strong></li>
<li>pas de grille, en "<em>monocolumn</em>", chaque photo les unes après les autres</li>
</ul>
<p>Dans le portfolio, deux types de page sont candidats à afficher une de ses présentations :</p>
<ul>
<li>la page d'accueil</li>
<li>la page de catégorie (ou de tag)</li>
</ul>
<p>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.</p>
<p><strong>La grille <em>Justified</em></strong>
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/uh7lUdPrFx-400.avif 400w, https://blog.foojin.com/img/uh7lUdPrFx-812.avif 812w, https://blog.foojin.com/img/uh7lUdPrFx-1400.avif 1400w, https://blog.foojin.com/img/uh7lUdPrFx-2880.avif 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/uh7lUdPrFx-400.webp 400w, https://blog.foojin.com/img/uh7lUdPrFx-812.webp 812w, https://blog.foojin.com/img/uh7lUdPrFx-1400.webp 1400w, https://blog.foojin.com/img/uh7lUdPrFx-2880.webp 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/uh7lUdPrFx-400.png 400w, https://blog.foojin.com/img/uh7lUdPrFx-812.png 812w, https://blog.foojin.com/img/uh7lUdPrFx-1400.png 1400w, https://blog.foojin.com/img/uh7lUdPrFx-2880.png 2880w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Capture d'écran de la grille justified" loading="lazy" decoding="async" src="https://blog.foojin.com/img/uh7lUdPrFx-400.png" width="2880" height="1578"></picture></p>
<p><strong>La grille <em>Masonry</em></strong>
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/SCEH6b_nSA-400.avif 400w, https://blog.foojin.com/img/SCEH6b_nSA-812.avif 812w, https://blog.foojin.com/img/SCEH6b_nSA-1400.avif 1400w, https://blog.foojin.com/img/SCEH6b_nSA-2880.avif 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/SCEH6b_nSA-400.webp 400w, https://blog.foojin.com/img/SCEH6b_nSA-812.webp 812w, https://blog.foojin.com/img/SCEH6b_nSA-1400.webp 1400w, https://blog.foojin.com/img/SCEH6b_nSA-2880.webp 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/SCEH6b_nSA-400.png 400w, https://blog.foojin.com/img/SCEH6b_nSA-812.png 812w, https://blog.foojin.com/img/SCEH6b_nSA-1400.png 1400w, https://blog.foojin.com/img/SCEH6b_nSA-2880.png 2880w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Capture d'écran de la grille masonry" loading="lazy" decoding="async" src="https://blog.foojin.com/img/SCEH6b_nSA-400.png" width="2880" height="1580"></picture></p>
<p><strong>La grille <em>Instagrid</em></strong>
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/waGi8PgpU9-400.avif 400w, https://blog.foojin.com/img/waGi8PgpU9-812.avif 812w, https://blog.foojin.com/img/waGi8PgpU9-1400.avif 1400w, https://blog.foojin.com/img/waGi8PgpU9-2880.avif 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/waGi8PgpU9-400.webp 400w, https://blog.foojin.com/img/waGi8PgpU9-812.webp 812w, https://blog.foojin.com/img/waGi8PgpU9-1400.webp 1400w, https://blog.foojin.com/img/waGi8PgpU9-2880.webp 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/waGi8PgpU9-400.png 400w, https://blog.foojin.com/img/waGi8PgpU9-812.png 812w, https://blog.foojin.com/img/waGi8PgpU9-1400.png 1400w, https://blog.foojin.com/img/waGi8PgpU9-2880.png 2880w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Capture d'écran de la grille instagrid" loading="lazy" decoding="async" src="https://blog.foojin.com/img/waGi8PgpU9-400.png" width="2880" height="1580"></picture></p>
<p><strong>La grille <em>Monocolumn</em></strong>
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/uiqRIHAma8-400.avif 400w, https://blog.foojin.com/img/uiqRIHAma8-812.avif 812w, https://blog.foojin.com/img/uiqRIHAma8-1400.avif 1400w, https://blog.foojin.com/img/uiqRIHAma8-2880.avif 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/uiqRIHAma8-400.webp 400w, https://blog.foojin.com/img/uiqRIHAma8-812.webp 812w, https://blog.foojin.com/img/uiqRIHAma8-1400.webp 1400w, https://blog.foojin.com/img/uiqRIHAma8-2880.webp 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/uiqRIHAma8-400.png 400w, https://blog.foojin.com/img/uiqRIHAma8-812.png 812w, https://blog.foojin.com/img/uiqRIHAma8-1400.png 1400w, https://blog.foojin.com/img/uiqRIHAma8-2880.png 2880w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Capture d'écran de la grille monocolumn" loading="lazy" decoding="async" src="https://blog.foojin.com/img/uiqRIHAma8-400.png" width="2880" height="1576"></picture></p>
<h3 id="affichage-des-metadonnees-exif" tabindex="-1">Affichage des métadonnées EXIF <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Vous pouvez décider d'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'utilité.</p>
<p>Les métadonnées récupérées et affichées (si elles sont disponibles) sont :</p>
<ul>
<li>la marque et le modèle de l'appareil photo</li>
<li>la vitesse d'obturation</li>
<li>la focale</li>
<li>l'ouverture</li>
<li>les ISO</li>
<li>la date de prise de vue de la photo</li>
</ul>
<h3 id="affichage-des-tags" tabindex="-1">Affichage des tags <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Dans le portfolio les tags appliqués aux photos servent à générer les catégories qui apparaissent dans le menu latéral.<br>
Il ne vous sera peut être donc pas d'utilité d'afficher ces tags sur la page d'une photo.<br>
Dans tous les cas vous aurez la possibilité d'afficher ces tags ou non.</p>
<h3 id="liens-reseaux-sociaux" tabindex="-1">Liens réseaux sociaux <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Il est souvent utile (malheureusement ?) d'afficher les profils de nos réseaux sociaux.
Un set prédéfinis de réseau n'attendent que vos URLs pour être affichés.</p>
<p>Dans la liste non-exhaustive nous avons pour le moment :</p>
<ul>
<li>500px</li>
<li>Behance</li>
<li>Deviantart</li>
<li>Flickr</li>
<li>Glass</li>
<li>Instagram</li>
<li>Notos</li>
<li>Pixelfed</li>
<li>Tumblr</li>
</ul>
<p>Je n'ai pas mis tous les réseaux pour présenter son travail surtout parce que… pour certains je n'ai pas trouvé des logo en SVG satisfaisant ou je n'ai pas juger bon de le rajouter. Mais ça pourrait évoluer.</p>
<p>Dans tous les cas, il est clairement possible de rajouter ses propres réseaux ou de me demander d'en rajouter un.</p>
<h3 id="liens-externes" tabindex="-1">Liens externes <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>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.</p>
<p>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.</p>
<h2 id="comment-le-mettre-en-place" tabindex="-1">Comment le mettre en place <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h2>
<h3 id="prerequis" tabindex="-1">Prérequis <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Afin de pouvoir installer et utiliser <strong>Niepce</strong> il va falloir un environnement prêt à le recevoir.
Pas besoin de grand chose mais un peu quand même :</p>
<ul>
<li>Git <em>(selon la méthode de récupération du projet)</em></li>
<li>Node >= 16</li>
<li>Et voilà c'est à peu près tout</li>
</ul>
<h3 id="recuperer-les-sources" tabindex="-1">Récupérer les sources <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Tout est sur <a href="https://github.com/GoOz/Niepce">Github</a>.</p>
<p>De là, libre à vous de cloner le dépôt git en ligne de commande</p>
<pre class="language-sh" tabindex="0"><code class="language-sh"><span class="token function">mkdir</span> mon-portfolio<br><span class="token function">git</span> clone https://github.com/GoOz/Niepce.git mon-portfolio</code></pre>
<p>ou de télécharger l'archive directement depuis le bouton télécharger de Github.</p>
<div class="notabene">
vous ne pourrez pas <code>push</code> sur mon dépôt git donc si vous voulez continuer sur git ensuite pour versionner votre portfolio il vous faudra changer le <code>remote</code>.
</div>
<h3 id="mise-en-place-de-l-environnement" tabindex="-1">Mise en place de l'environnement <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Pour commencer il va falloir installer tout ce dont nous avons besoin. Pour ce faire ouvrez votre terminal, si ce n'est déjà fait, et tapez ce qui suit</p>
<pre class="language-sh" tabindex="0"><code class="language-sh"><span class="token builtin class-name">cd</span> mon-portfolio<br><span class="token function">npm</span> <span class="token function">install</span></code></pre>
<p>La commande <code>npm install</code> va aller chercher les quelques dépendances et les installer pour vous. Promis il n'y en a pas beaucoup.</p>
<p>Une fois l'installation terminée, vous devriez être en mesure de lancer le site en local en tapant</p>
<pre class="language-sh" tabindex="0"><code class="language-sh"><span class="token function">npm</span> run start</code></pre>
<p>et une fois que le terminal vous affiche</p>
<pre class="language-sh" tabindex="0"><code class="language-sh"><span class="token punctuation">[</span>11ty<span class="token punctuation">]</span> Watching…<br><span class="token punctuation">[</span>11ty<span class="token punctuation">]</span> Server at http://localhost:8080/</code></pre>
<p>cela voudra dire que c'est prêt, donc ouvrez un nouvel onglet de votre navigateur préféré et aller sur <a href="http://localhost:8080/">http://localhost:8080/</a></p>
<p>Vous devriez y voir la même chose que sur les captures d'écran présentées plus haut.</p>
<h2 id="configuration" tabindex="-1">Configuration <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h2>
<p>Maintenant que votre site tourne localement il est temps d'éditer la configuration pour le transformer en <strong>votre</strong> portfolio.</p>
<p>Toute la configuration se fera dans 2 fichiers :</p>
<ul>
<li><code>_data/metadata.json</code> qui est le fichier de configuration de base d'Eleventy</li>
<li><code>_data/niepce.js</code> qui est le fichier de configuration propre à Niepce.</li>
</ul>
<p>Ces deux fichiers sont déjà partiellement pré-remplis et, de base, vous ne devriez avoir qu'à remplir des champs vides ou éditer des valeurs existantes.</p>
<p>Prenons d'abord le fichier <code>metadata.json</code></p>
<pre class="language-json" tabindex="0"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Niepce"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://portfolio.niepce.tld"</span><span class="token punctuation">,</span><br> <span class="token property">"language"</span><span class="token operator">:</span> <span class="token string">"en"</span><span class="token punctuation">,</span><br> <span class="token property">"locale"</span><span class="token operator">:</span> <span class="token string">"en_US"</span><span class="token punctuation">,</span><br> <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Niepce's personal portfolio"</span><span class="token punctuation">,</span><br> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Nicéphore Niépce"</span><span class="token punctuation">,</span><br> <span class="token property">"email"</span><span class="token operator">:</span> <span class="token string">"nicephore@niepce.tld"</span><span class="token punctuation">,</span><br> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://www.niepce.tld"</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<p>Je ne pense pas qu'il y ait besoin de tout décrire sur ces informations, toutefois je préciserais que :</p>
<ul>
<li>le <code>title</code> est le titre qui apparaitra comme le label de l'onglet du navigateur mais c'est aussi le titre qui apparaitra sur le site si vous n'avez pas spécifié de logo.</li>
<li>la <code>description</code> servira à la fois pour décrire les résultats des moteurs de recherche ainsi que sur les descriptions des cartes OpenGraph sur un partage.</li>
</ul>
<p>Vient ensuite le fichier <code>niepce.js</code> et là je vais rentrer dans le détail.</p>
<pre class="language-js" tabindex="0"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br> <span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token string">"masonry"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">grid_tags</span><span class="token operator">:</span> <span class="token string">"justified"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">"auto"</span><span class="token punctuation">,</span><br> <span class="token literal-property property">logo</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">banner</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">exif</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">tags</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><br> <span class="token literal-property property">socials</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token string-property property">"500px"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">behance</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">deviantart</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">flickr</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">glass</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">instagram</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">notos</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">pixelfed</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">tumblr</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token literal-property property">links</span><span class="token operator">:</span> <span class="token punctuation">[</span><br> <span class="token punctuation">{</span><br> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span><br> <span class="token punctuation">]</span><span class="token punctuation">,</span><br><span class="token punctuation">}</span></code></pre>
<p><strong>Clé</strong> <code>grid</code><br>
<strong>Valeur</strong> <code>masonry | justified | instagrid | monocolumn</code><br>
<em>C'est votre choix de grille pour la home et pour les pages de catégorie.</em></p>
<p><strong>Clé</strong> <code>grid_tags</code><br>
<strong>Valeur</strong> <code>masonry | justified | instagrid | monocolumn</code><br>
<em>C'est votre choix de grille pour les pages de catégorie. Si elle n'est pas définie alors c'est le choix <code>grid</code> qui sera utilisé pour ces pages.</em></p>
<p><strong>Clé</strong> <code>theme</code><br>
<strong>Valeur</strong> <code>light | dark | auto</code><br>
<em>Force un ton en particulier ou bien laisse les préférences utilisateur choisir automatiquement.</em></p>
<p><strong>Clé</strong> <code>logo</code><br>
<strong>Valeur</strong> <code>String</code><br>
<em>Chemin vers votre logo (de n'importe quel format d'image qui soit supporté par une balise HTML <code>img</code>). Il peut être n'importe où, même distant. Si aucun logo n'est spécifié alors c'est le <code>title</code> de <code>metadata.json</code> qui prendra le relai et sera affiché.</em><br>
<em>Si c'est un SVG et que vous voulez l'intégrer à la page pour que sa couleur s'adapte au thème, ajoutez un suffixe <code>-inline</code> au nom du fichier (ex: logo-inline.svg).</em></p>
<p><strong>Clé</strong> <code>banner</code><br>
<strong>Valeur</strong> <code>String</code><br>
<em>Chemin vers votre bannière (de n'importe quel format d'image qui soit supporté par une balise HTML <code>img</code>). Il peut être n'importe où, même distant. Cette image ne sera utilisé que pour les balises <a href="https://ogp.me/">OpenGraph</a> à moins que vous ne décidiez de l'utiliser pour autre chose.</em></p>
<p><strong>Clé</strong> <code>exif</code><br>
<strong>Valeur</strong> <code>boolean</code><br>
<em>Affiche ou non les métadonnées EXIF de vos photos sur les billets. Si à <code>true</code> seules les métadonnées existantes dans la photo seront affichées.</em></p>
<p><strong>Clé</strong> <code>tags</code><br>
<strong>Valeur</strong> <code>boolean</code><br>
<em>Affiche ou non les tags appliquées aux photos sur les billets.</em></p>
<p><strong>Clé</strong> <code>social</code><br>
<strong>Valeur</strong> <code>Clé (String): Valeur (String)</code><br>
<em>Seuls les réseaux sociaux avec un lien de profil renseigné seront affichés.</em><br>
<em>À noter que si besoin vous pouvez ajouter vos propres réseaux sociaux qui n'existe pas dans la liste par défaut mais pour faire ça vous aurez besoin d'ajouter son propre icône SVG dans le dossier <code>public/img/sprite</code> et le nommer exactement comme la <strong>clé</strong> définie ici.</em></p>
<p><strong>Clé</strong> <code>links</code><br>
<strong>Valeur</strong> <code>Clé (String): Valeur (String)</code><br>
<em>Si vous voulez afficher des liens externes dans le menu de navigation, saisissez le label (texte qui apparaitra) et l'URL de ce lien.</em></p>
<p>Une fois le tout configuré comme vous le souhaitez, il sera temps de créer vos pages.</p>
<h2 id="creation-de-vos-pages" tabindex="-1">Création de vos pages <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h2>
<p>Toutes les pages que vous allez créer se trouveront dans le dossier <code>content</code> à la racine du projet.</p>
<p>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 :</p>
<ul>
<li>le dossier <code>feed</code> qui sert à générer les flux RSS (Atom en fait mais je vais pas entrer dans les détails)</li>
<li>le dossier <code>sitemap</code> qui sert à générer le fichier <code>sitemap.xml</code>, à destination des moteurs de recherches notamment.</li>
<li>le fichier <code>index.njk</code> qui génère la page d'accueil de votre site</li>
<li>le fichier <code>tags.njk</code> qui génère les pages de catégorie.</li>
<li>le fichier <code>content.11tydata.js</code> qui donne au moteur Eleventy les informations nécessaires quant aux pages de contenu.</li>
</ul>
<p>Tout le reste est là pour vous donner des exemples.</p>
<h3 id="creer-une-page-independante" tabindex="-1">Créer une page indépendante <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Un exemple existe déjà, c'est celui du <code>about.md</code> que vous pouvez garder et modifier ou bien le supprimer et faire autre chose à votre sauce.</p>
<p>Vous pourrez voir dans ce fichier comment créer des pages indépendantes.</p>
<pre class="language-md" tabindex="0"><code class="language-md"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">layout</span><span class="token punctuation">:</span> layouts/page.njk<br><span class="token key atrule">eleventyNavigation</span><span class="token punctuation">:</span><br> <span class="token key atrule">key</span><span class="token punctuation">:</span> About<br> <span class="token key atrule">order</span><span class="token punctuation">:</span> <span class="token number">1</span><br><span class="token key atrule">override:tags</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"pages"</span><span class="token punctuation">]</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> Hello<span class="token punctuation">,</span> I'm the photographer</span><br><span class="token punctuation">---</span></span><br>[…]</code></pre>
<p>Il vous faudra :</p>
<ul>
<li>spécifier le layout, en l'occurence celui que vous voulez c'est celui qui s'appelle <code>page.njk</code></li>
<li>spécifier le label du lien dans la navigation et sa position dans la liste en éditant les valeurs de <code>key</code> et <code>order</code></li>
<li>garder <code>override:tags: ["pages"]</code> pour être certain que cette nouvelle page n'apparaissent pas comme un nouveau billet et reste bien une page distincte.</li>
<li>donner un titre à cette page en spécifiant <code>title</code></li>
</ul>
<p>Ces métadonnées entre <code>---</code> représentent ce qu'on appelle le <em>frontmatter</em> et c'est bien tout ce que c'est, des métadonnées.</p>
<p>Tout le reste après ça est du <strong>Markdown</strong> tout ce qu'il y a de plus normal.</p>
<h3 id="creer-un-billet" tabindex="-1">Créer un billet <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h3>
<p>Il est peut être temps de faire enfin des billets avec vos photos.<br>
Mais d'abord parlons structure.</p>
<p>Comme vous le constaterez avec les exemples, chaque billet ressemble à quelque chose comme ça :</p>
<pre><code>├── content
│ ├── mon-titre-de-billet
│ │ ├── index.md
│ │ ├── photo.jpg
</code></pre>
<p>Cette structure est plus conseillée qu'obligatoire, dans les faits rien ne vous oblige à faire ça et vous pourriez tout faire à plat à la racine de <code>content</code> 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'est pourquoi je vous conseille de garder cette structure à moins que vous sachiez ce que vous faites encore une fois.</p>
<p>Mais mettons que vous suiviez cette recommandation, le nom du dossier sera <em>in fine</em> l'URL de votre billet. Personnellement je préfère mettre le titre en minuscule avec des <code>-</code> à la place des espaces, je trouve ça plus joli à voir mais rien ne vous y oblige.<br>
Ensuite le nom du fichier markdown <code>.md</code> importe peu, je le nomme toujours <code>index.md</code> par soucis de simplicité.<br>
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'on va voir tout de suite.</p>
<p>Comme pour les pages indépendantes, nous allons avoir du <em>frontmatter</em> dans ces fichiers <code>index.md</code> avec différentes métadonnées à renseigner.</p>
<pre class="language-md" tabindex="0"><code class="language-md"><span class="token front-matter-block"><span class="token punctuation">---</span><br><span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> Portrait<br><span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2023-09-01</span><br><span class="token key atrule">photo</span><span class="token punctuation">:</span> photo.jpg<br><span class="token key atrule">photo_alt</span><span class="token punctuation">:</span> Portrait de ma mère<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> portrait</span><br><span class="token punctuation">---</span></span></code></pre>
<ul>
<li><code>title</code> 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.</li>
<li><code>date</code> est la date à laquelle vous voulez que ce billet apparaisse, ça ne jouera pas sur grand chose à part l'ordre dans lequel vos billets apparaitront puisqu'ils sont affichés du plus récent au plus ancien.</li>
<li><code>photo</code> 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</li>
<li><code>photo_alt</code> sera le texte alternatif de l'image qui sera affiché si pour une raison x ou y l'image ne s'affiche pas et qui sera aussi utile aux lecteurs d'écran pour décrire l'image aux personnes malvoyantes.</li>
<li><code>tags</code> sera donc la catégorie à laquelle appartient ce billet et donc cette photo. Personnellement je n'en mets qu'une seule à chaque fois mais libre à vous de faire des inter-catégories ou que sais-je.</li>
</ul>
<p>Encore une fois, tout ce qui sera écrit en markdown après ce <em>frontmatter</em> apparaitra sur le billet aussi.</p>
<div class="notabene">
Si vous avez activé les options <code>exif</code> et/ou <code>tags</code> le contenu de vos billets apparaitra après ces éléments dans la page.
</div>
<p>Si vous avez tout rempli correctement vous devriez être en mesure de voir vos billets et pages indépendantes sur <a href="http://localhost:8080/">http://localhost:8080/</a></p>
<p>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'oubliez pas de supprimer les pages et billets exemples, ça ferait tâche.</p>
<h2 id="deploiement" tabindex="-1">Déploiement <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h2>
<p>Pour ce qui est du déploiement, vous aurez forcément besoin d'un hébergeur sans avoir besoin de grand chose d'installé dessus non plus.<br>
Comme pour le développement local, vous n'aurez finalement besoin que de <strong>Node >16</strong> et c'est tout.</p>
<p>Il existe bien des façons de faire de l'auto-déploiement avec git mais je ne vais pas en parler parce que ça devient un poil plus pointu en plus d'être probablement différent selon votre hébergeur.</p>
<p>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 :</p>
<pre class="language-sh" tabindex="0"><code class="language-sh"><span class="token builtin class-name">cd</span> mon-portfolio<br><span class="token function">npm</span> run build</code></pre>
<p>Cette commande de <em>build</em> est aussi lancée via un <code>npm run start</code> mais pour être sûr que tout est propre il est plus sage de lancer le <em>build</em> une fois que tout est fini.</p>
<p>Une fois le <em>build</em> fait vous pouvez retrouver votre site dans le dossier <code>_site</code> à la racine du projet. C'est ce que vous devez absolument avoir sur votre serveur d'hébergeur et c'est sur ce dossier que doit pointer votre nom de domaine. Donc configurez en conséquence dans l'administration de votre hébergeur.</p>
<p>Quant à la manière d'obtenir et transférer ces fichiers générés…</p>
<ul>
<li>Soit vous générez localement et transférez via FTP sur le serveur.</li>
<li>Soit vous versionnez votre projet, le clonez sur le serveur, mettez à jour le dépôt et faites le <em>build</em> directement sur le serveur, tout ça en SSH.</li>
<li>Soit vous vous débrouillez pour faire un auto-déploiement (via git push et web-socket par exemple).</li>
</ul>
<h2 id="et-la-suite-dans-tout-ca" tabindex="-1">Et la suite dans tout ça ? <a class="header-anchor" href="https://blog.foojin.com/2023/12/14/niepce-le-kit-pour-portfolio-statique/">#</a></h2>
<p>Ce projet étant un <em>starter kit</em>, 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 <a href="https://github.com/GoOz/Niepce">dépôt Github</a> ce sera à vous de vous débrouiller pour mettre à jour les corrections ou évolutions sur votre propre projet. <br>
Toutes les modifications seront bien visibles sur Github dans tous les cas.</p>
<p><a href="https://github.com/GoOz/Niepce/issues/new/choose">N'hésitez pas à me le faire savoir</a> si vous vous retrouvez confronté à un bug ou si vous aimeriez rajouter des fonctionnalités. Je n'ai fait que ce qui m'intéressait personnellement mais je suis ouvert à toute proposition d'ajout d'autres fonctionnalités.</p>
Sur Internet, vous ne savez jamais qui vous suit2023-12-07T00:00:00Zhttps://blog.foojin.com/2023/12/07/sur-internet-vous-ne-savez-jamais-qui-vous-suit/<p>Si on met de côté les différents réseaux sociaux, j'ai deux présences en ligne : ce blog et mon <a href="https://www.bloogart.com/">portfolio de photographie</a>. Et récemment j'ai fait une refonte des deux avec <a href="https://www.11ty.dev/">Eleventy</a> mais surtout je les ai migré chez mon nouvel hébergeur <a href="https://www.alwaysdata.com">alwaysdata</a>.</p>
<p>Ça fait bien longtemps que je n'utilise plus d'outil de mesure d'audience sur mes sites, déjà parce que je n'aime pas vraiment ça personnellement donc je ne vais pas l'imposer aux autres et puis ça fait toujours ça de moins en JavaScript à télécharger.</p>
<p>Toujours est-il que depuis que j'ai migré j'ai le droit à certains outils de mesure d'audience côté serveur. Alors c'est très rudimentaire, je n'ai finalement pas grand chose d'autre que le nombre de visites uniques mais ça m'a malgré tout assez surpris.<br>
J'ai plus de visites que ce que je pensais. Sur ce blog j'ai des pics à <strong>100</strong> visites et sur mon portfolio j'ai une moyenne de <strong>250</strong> et un pic exceptionnel à <strong>650</strong>.<br>
Alors ça peut être paraître peu pour certains mais à mon échelle ça me paraît beaucoup.</p>
<p>Faut dire que déjà je n'avais pas de système de commentaire ou de like, sur aucun des deux. J'ai bien les <em>webmentions</em> 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'ils aiment ou pas ce que vous faites, ne commente, like, ou partage pas forcément sur les réseaux.
Donc je n'ai que très peu de retours des autres sur ce que je publie.</p>
<p>Ajoutez à ça le flux RSS (qu'évidemment vous avez tous sur vos sites) qui est en libre accès et voilà vous publiez sans savoir qui vous lit.</p>
<p>Tout ça pour dire que même si vous pensez que ce que vous avez à partager n'intéresse personne, vous avez très probablement tort, alors écrivez sur vos blogs, partagez vos créations, etc. C'est un peu ça aussi le web, le partage à tous, pour tous et <s>aramous</s> par tous.</p>
9 jours en Écosse2023-10-09T00:00:00Zhttps://blog.foojin.com/2023/10/09/9-jours-en-ecosse/<p>Quand il s'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'ai rêvé de visiter l'Écosse et ça m'aura peut être pris une dizaine d'années mais c'est enfin chose faite. Alors voici mon retour de voyage, pour partager et si jamais ça peut servir comme base à quelqu'un d'autre qui serait intéressé pour vivre la même expérience alors tant mieux.</p>
<p>On est donc parti sur un road trip de 9 jours.<br>
Évidemment on a pas pu tout faire.<br>
Évidemment il a fallu faire des concessions.<br>
Mais on est pas déçu de nos choix.</p>
<p>Voilà très rapidement notre itinéraire, en commençant et finissant par Edinburgh durant ces 9 jours :</p>
<ol>
<li>Edinburgh</li>
<li>Edinburgh</li>
<li>Glencoe</li>
<li>Glencoe</li>
<li>Skye Islands</li>
<li>Inverness</li>
<li>Cairn Gorm (Nord)</li>
<li>Cairn Gorm (Ouest)</li>
<li>Edinburgh</li>
</ol>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/YPFTywuQd5-400.avif 400w, https://blog.foojin.com/img/YPFTywuQd5-812.avif 812w, https://blog.foojin.com/img/YPFTywuQd5-1400.avif 1400w, https://blog.foojin.com/img/YPFTywuQd5-1685.avif 1685w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/YPFTywuQd5-400.webp 400w, https://blog.foojin.com/img/YPFTywuQd5-812.webp 812w, https://blog.foojin.com/img/YPFTywuQd5-1400.webp 1400w, https://blog.foojin.com/img/YPFTywuQd5-1685.webp 1685w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/YPFTywuQd5-400.png 400w, https://blog.foojin.com/img/YPFTywuQd5-812.png 812w, https://blog.foojin.com/img/YPFTywuQd5-1400.png 1400w, https://blog.foojin.com/img/YPFTywuQd5-1685.png 1685w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Carte de l'itinéraire" loading="lazy" decoding="async" src="https://blog.foojin.com/img/YPFTywuQd5-400.png" width="1685" height="1284"></picture></p>
<h2 id="jour-1-edinburgh" tabindex="-1">Jour 1 : Edinburgh <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>On s'est organisé 2 jours à Edinburgh en se disant que 3 jours seraient de trop et on a eu raison. Non pas qu'il n'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à.</p>
<h3 id="new-town" tabindex="-1">New Town <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Le premier jour, on est arrivé vers 10h30 à l'aéroport et on a pris la navette <em>airline 100</em> jusque <strong>New Town</strong>.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/ztVrut5JXu-400.avif 400w, https://blog.foojin.com/img/ztVrut5JXu-812.avif 812w, https://blog.foojin.com/img/ztVrut5JXu-1400.avif 1400w, https://blog.foojin.com/img/ztVrut5JXu-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/ztVrut5JXu-400.webp 400w, https://blog.foojin.com/img/ztVrut5JXu-812.webp 812w, https://blog.foojin.com/img/ztVrut5JXu-1400.webp 1400w, https://blog.foojin.com/img/ztVrut5JXu-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/ztVrut5JXu-400.jpeg 400w, https://blog.foojin.com/img/ztVrut5JXu-812.jpeg 812w, https://blog.foojin.com/img/ztVrut5JXu-1400.jpeg 1400w, https://blog.foojin.com/img/ztVrut5JXu-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Vue sur un parc de New Town avec des monuments au fond" loading="lazy" decoding="async" src="https://blog.foojin.com/img/ztVrut5JXu-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="cex" tabindex="-1">CeX <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On a dû d'emblée faire un crochet par <strong>CeX</strong>, un magasin d'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'un quand on cherche un endroit à visiter ou bien à manger. On a pas eu besoin qu'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 <strong>CeX</strong> le staff était adorable et ont vite compris notre besoin. C'é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'est pas toujours facile mais globalement ça se gère.</p>
<h3 id="old-town" tabindex="-1">Old Town <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>C'est dans ce quartier qu'on avait notre B&B pour 2 jours et il était donc très bien placé car c'est principalement dans <strong>Old Town</strong> et aux alentours que la majorité des choses qu'on avait à voir étaient situés.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/pE_5VliHw6-400.avif 400w, https://blog.foojin.com/img/pE_5VliHw6-812.avif 812w, https://blog.foojin.com/img/pE_5VliHw6-1400.avif 1400w, https://blog.foojin.com/img/pE_5VliHw6-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/pE_5VliHw6-400.webp 400w, https://blog.foojin.com/img/pE_5VliHw6-812.webp 812w, https://blog.foojin.com/img/pE_5VliHw6-1400.webp 1400w, https://blog.foojin.com/img/pE_5VliHw6-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/pE_5VliHw6-400.jpeg 400w, https://blog.foojin.com/img/pE_5VliHw6-812.jpeg 812w, https://blog.foojin.com/img/pE_5VliHw6-1400.jpeg 1400w, https://blog.foojin.com/img/pE_5VliHw6-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Vue sur une rue perpendiculaire passant au-dessus" loading="lazy" decoding="async" src="https://blog.foojin.com/img/pE_5VliHw6-400.jpeg" width="2000" height="3000"></picture></p>
<h4 id="grassmarket" tabindex="-1">Grassmarket <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h4>
<p>Le coin de <strong>Grassmarket</strong> (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'ailleurs, le nom du <strong>Last Drop</strong> qui apparemment offrait un dernier verre aux condamnés à mort vient de cette histoire.<br>
C'est très touristique donc très chargé, surtout en haute saison j'imagine mais c'est mignon comme tout comme place.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/zVSe6r-fA4-400.avif 400w, https://blog.foojin.com/img/zVSe6r-fA4-812.avif 812w, https://blog.foojin.com/img/zVSe6r-fA4-1400.avif 1400w, https://blog.foojin.com/img/zVSe6r-fA4-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/zVSe6r-fA4-400.webp 400w, https://blog.foojin.com/img/zVSe6r-fA4-812.webp 812w, https://blog.foojin.com/img/zVSe6r-fA4-1400.webp 1400w, https://blog.foojin.com/img/zVSe6r-fA4-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/zVSe6r-fA4-400.jpeg 400w, https://blog.foojin.com/img/zVSe6r-fA4-812.jpeg 812w, https://blog.foojin.com/img/zVSe6r-fA4-1400.jpeg 1400w, https://blog.foojin.com/img/zVSe6r-fA4-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Enseigne du White Hart Inn" loading="lazy" decoding="async" src="https://blog.foojin.com/img/zVSe6r-fA4-400.jpeg" width="2000" height="3000"></picture></p>
<h4 id="victoria-street" tabindex="-1">Victoria Street <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h4>
<p>De <strong>Grassmarket</strong> on a remonté <strong>Victoria Street</strong>, rue qui aurait inspiré <strong><a href="https://fr.wikipedia.org/wiki/J._K._Rowling">J. K. Rowling</a></strong> pour <a href="https://fr.wikipedia.org/wiki/Chemin_de_Traverse_(Harry_Potter)">Diagon Alley</a> (et c'est vrai qu'il y a un petit truc, il y a même des magasins de pop culture qui vendent, évidemment, du <em>merchandising</em> Harry Potter). C'est une rue en pente, qui rejoint directement The Royal Mile, la rue la plus importante d'Edinburgh.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/mNUJuHkEFp-400.avif 400w, https://blog.foojin.com/img/mNUJuHkEFp-812.avif 812w, https://blog.foojin.com/img/mNUJuHkEFp-1400.avif 1400w, https://blog.foojin.com/img/mNUJuHkEFp-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/mNUJuHkEFp-400.webp 400w, https://blog.foojin.com/img/mNUJuHkEFp-812.webp 812w, https://blog.foojin.com/img/mNUJuHkEFp-1400.webp 1400w, https://blog.foojin.com/img/mNUJuHkEFp-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/mNUJuHkEFp-400.jpeg 400w, https://blog.foojin.com/img/mNUJuHkEFp-812.jpeg 812w, https://blog.foojin.com/img/mNUJuHkEFp-1400.jpeg 1400w, https://blog.foojin.com/img/mNUJuHkEFp-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Victoria Street" loading="lazy" decoding="async" src="https://blog.foojin.com/img/mNUJuHkEFp-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="greyfriars-kirk" tabindex="-1">Greyfriars kirk <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On a redescendu <strong>Grassmarket</strong> pour rejoindre le très beau et singulier cimetière <strong>Greyfriars kirk</strong> où se trouve une copie de la statue de <strong>Bobby</strong>, ce gentil chionchion qui serait resté 14 ans à surveiller la tombe de son maître, jusque sa propre mort, et où <strong>J. K. Rowling</strong> aurait pompé directement sur les tombes pas mal de nom des personnages de sa fameuse saga.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/g6Wg94Aifg-400.avif 400w, https://blog.foojin.com/img/g6Wg94Aifg-812.avif 812w, https://blog.foojin.com/img/g6Wg94Aifg-1400.avif 1400w, https://blog.foojin.com/img/g6Wg94Aifg-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/g6Wg94Aifg-400.webp 400w, https://blog.foojin.com/img/g6Wg94Aifg-812.webp 812w, https://blog.foojin.com/img/g6Wg94Aifg-1400.webp 1400w, https://blog.foojin.com/img/g6Wg94Aifg-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/g6Wg94Aifg-400.jpeg 400w, https://blog.foojin.com/img/g6Wg94Aifg-812.jpeg 812w, https://blog.foojin.com/img/g6Wg94Aifg-1400.jpeg 1400w, https://blog.foojin.com/img/g6Wg94Aifg-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Cimetière de GreyFriars Kirk" loading="lazy" decoding="async" src="https://blog.foojin.com/img/g6Wg94Aifg-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="edinburgh-s-central-library-jeunesse" tabindex="-1">Edinburgh's Central Library Jeunesse <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/q_AoeR_N16-400.avif 400w, https://blog.foojin.com/img/q_AoeR_N16-812.avif 812w, https://blog.foojin.com/img/q_AoeR_N16-1400.avif 1400w, https://blog.foojin.com/img/q_AoeR_N16-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/q_AoeR_N16-400.webp 400w, https://blog.foojin.com/img/q_AoeR_N16-812.webp 812w, https://blog.foojin.com/img/q_AoeR_N16-1400.webp 1400w, https://blog.foojin.com/img/q_AoeR_N16-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/q_AoeR_N16-400.jpeg 400w, https://blog.foojin.com/img/q_AoeR_N16-812.jpeg 812w, https://blog.foojin.com/img/q_AoeR_N16-1400.jpeg 1400w, https://blog.foojin.com/img/q_AoeR_N16-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Salle de lecture de la bibliothèque jeunesse" loading="lazy" decoding="async" src="https://blog.foojin.com/img/q_AoeR_N16-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="the-royal-mile" tabindex="-1">The Royal Mile <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On est finalement allé à <strong>The Royal Mile</strong> qui, <em>spoiler alert</em>, fait plus que 1 mile. C'est la rue qui joint le <strong>château d'Edinburgh</strong> au <strong>Palais de Holyrood</strong>. C'est une si ce n'est la rue la plus touristique d'Edinburgh et c'est une très belle rue avec plein de beaux bâtiments et de belles boutiques.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/hIxK187rRc-400.avif 400w, https://blog.foojin.com/img/hIxK187rRc-812.avif 812w, https://blog.foojin.com/img/hIxK187rRc-1400.avif 1400w, https://blog.foojin.com/img/hIxK187rRc-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/hIxK187rRc-400.webp 400w, https://blog.foojin.com/img/hIxK187rRc-812.webp 812w, https://blog.foojin.com/img/hIxK187rRc-1400.webp 1400w, https://blog.foojin.com/img/hIxK187rRc-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/hIxK187rRc-400.jpeg 400w, https://blog.foojin.com/img/hIxK187rRc-812.jpeg 812w, https://blog.foojin.com/img/hIxK187rRc-1400.jpeg 1400w, https://blog.foojin.com/img/hIxK187rRc-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Église de la Royal Mile" loading="lazy" decoding="async" src="https://blog.foojin.com/img/hIxK187rRc-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="tea-time" tabindex="-1">Tea time <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On s'est posé dans un salon de thé pour se remplir le gosier et j'ai pris un chocolat chaud… sauf que j'ai compris plus tard que les Ecossais le buvaient avec du lait entier. Mon bidou, peu habitué, a crié à l'infamie pendant quelques heures ensuite. Grosse erreur de ma part.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Apkml8FqNx-400.avif 400w, https://blog.foojin.com/img/Apkml8FqNx-812.avif 812w, https://blog.foojin.com/img/Apkml8FqNx-1400.avif 1400w, https://blog.foojin.com/img/Apkml8FqNx-3024.avif 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Apkml8FqNx-400.webp 400w, https://blog.foojin.com/img/Apkml8FqNx-812.webp 812w, https://blog.foojin.com/img/Apkml8FqNx-1400.webp 1400w, https://blog.foojin.com/img/Apkml8FqNx-3024.webp 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/Apkml8FqNx-400.jpeg 400w, https://blog.foojin.com/img/Apkml8FqNx-812.jpeg 812w, https://blog.foojin.com/img/Apkml8FqNx-1400.jpeg 1400w, https://blog.foojin.com/img/Apkml8FqNx-3024.jpeg 3024w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Tea time à l'écossaise" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Apkml8FqNx-400.jpeg" width="3024" height="4032"></picture></p>
<h3 id="mystery-tour" tabindex="-1">Mystery tour <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On avait réservé de 18h30 à 20h30 une visite guidée dans la ville centrée sur les histoires de fantômes, <em>true crime</em> et compagnie. Notre guide <strong>Niamh</strong> é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.<br>
Notez que marcher pendant presque 2 heures m'aura permis de mieux digérer mon chocolat chaud. 🙃</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/3IRZc7e68g-400.avif 400w, https://blog.foojin.com/img/3IRZc7e68g-812.avif 812w, https://blog.foojin.com/img/3IRZc7e68g-1400.avif 1400w, https://blog.foojin.com/img/3IRZc7e68g-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/3IRZc7e68g-400.webp 400w, https://blog.foojin.com/img/3IRZc7e68g-812.webp 812w, https://blog.foojin.com/img/3IRZc7e68g-1400.webp 1400w, https://blog.foojin.com/img/3IRZc7e68g-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/3IRZc7e68g-400.jpeg 400w, https://blog.foojin.com/img/3IRZc7e68g-812.jpeg 812w, https://blog.foojin.com/img/3IRZc7e68g-1400.jpeg 1400w, https://blog.foojin.com/img/3IRZc7e68g-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Edinburgh et Arthur's seat de nuit" loading="lazy" decoding="async" src="https://blog.foojin.com/img/3IRZc7e68g-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="the-banshee-labyrinth" tabindex="-1">The banshee labyrinth <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Pour finir la journée on est allé boire un verre dans <strong><a href="https://www.thebansheelabyrinth.com/">The Banshee Labyrinth</a></strong>, un pub à l'ambiance unique. Pas de mensonge sur la marchandise puisqu'il est compliqué de s'y retrouver, en tout cas la première fois qu'on y entre.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/CBQGDCOG0D-400.avif 400w, https://blog.foojin.com/img/CBQGDCOG0D-812.avif 812w, https://blog.foojin.com/img/CBQGDCOG0D-1400.avif 1400w, https://blog.foojin.com/img/CBQGDCOG0D-3024.avif 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/CBQGDCOG0D-400.webp 400w, https://blog.foojin.com/img/CBQGDCOG0D-812.webp 812w, https://blog.foojin.com/img/CBQGDCOG0D-1400.webp 1400w, https://blog.foojin.com/img/CBQGDCOG0D-3024.webp 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/CBQGDCOG0D-400.jpeg 400w, https://blog.foojin.com/img/CBQGDCOG0D-812.jpeg 812w, https://blog.foojin.com/img/CBQGDCOG0D-1400.jpeg 1400w, https://blog.foojin.com/img/CBQGDCOG0D-3024.jpeg 3024w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Dernier verre dans le Banshee labyrinth" loading="lazy" decoding="async" src="https://blog.foojin.com/img/CBQGDCOG0D-400.jpeg" width="3024" height="4032"></picture></p>
<h2 id="jour-2-edinburgh" tabindex="-1">Jour 2 : Edinburgh <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>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.</p>
<h3 id="scottish-breakfast" tabindex="-1">Scottish breakfast <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Je ne suis pas du matin et mon estomac non plus mais j'ai quand même essayé un <em>scottish breakfast</em> (ce qui est comme un <em>british breakfast</em> - beans, sausage, bacon - mais avec des trucs scots avec en prime comme du haggis, du boudin noir et des potato scones).
C'était gras et lourd, en tout cas pour moi, mais c'était bon. Faut juste être prêt à digérer tout ça.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/_8yEZInVtM-400.avif 400w, https://blog.foojin.com/img/_8yEZInVtM-812.avif 812w, https://blog.foojin.com/img/_8yEZInVtM-1400.avif 1400w, https://blog.foojin.com/img/_8yEZInVtM-3024.avif 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/_8yEZInVtM-400.webp 400w, https://blog.foojin.com/img/_8yEZInVtM-812.webp 812w, https://blog.foojin.com/img/_8yEZInVtM-1400.webp 1400w, https://blog.foojin.com/img/_8yEZInVtM-3024.webp 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/_8yEZInVtM-400.jpeg 400w, https://blog.foojin.com/img/_8yEZInVtM-812.jpeg 812w, https://blog.foojin.com/img/_8yEZInVtM-1400.jpeg 1400w, https://blog.foojin.com/img/_8yEZInVtM-3024.jpeg 3024w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Petit déjeuner à l'écossaise" loading="lazy" decoding="async" src="https://blog.foojin.com/img/_8yEZInVtM-400.jpeg" width="3024" height="4032"></picture></p>
<h3 id="dean-village" tabindex="-1">Dean Village <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Dean Village n'a pas grand chose de particulier si ce n'est que c'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'Edinburgh, c'est assez rare pour être notable.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/kbyL3OFcSJ-400.avif 400w, https://blog.foojin.com/img/kbyL3OFcSJ-812.avif 812w, https://blog.foojin.com/img/kbyL3OFcSJ-1400.avif 1400w, https://blog.foojin.com/img/kbyL3OFcSJ-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/kbyL3OFcSJ-400.webp 400w, https://blog.foojin.com/img/kbyL3OFcSJ-812.webp 812w, https://blog.foojin.com/img/kbyL3OFcSJ-1400.webp 1400w, https://blog.foojin.com/img/kbyL3OFcSJ-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/kbyL3OFcSJ-400.jpeg 400w, https://blog.foojin.com/img/kbyL3OFcSJ-812.jpeg 812w, https://blog.foojin.com/img/kbyL3OFcSJ-1400.jpeg 1400w, https://blog.foojin.com/img/kbyL3OFcSJ-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Dean Village" loading="lazy" decoding="async" src="https://blog.foojin.com/img/kbyL3OFcSJ-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="calton-cemetery" tabindex="-1">Calton cemetery <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On s'est baladé dans un autre cimetière ancien plus au nord qui vaut le détour, dans la même veine que <strong>Greyfriars kirk</strong>.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/0HXV5aP4R8-400.avif 400w, https://blog.foojin.com/img/0HXV5aP4R8-812.avif 812w, https://blog.foojin.com/img/0HXV5aP4R8-1400.avif 1400w, https://blog.foojin.com/img/0HXV5aP4R8-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/0HXV5aP4R8-400.webp 400w, https://blog.foojin.com/img/0HXV5aP4R8-812.webp 812w, https://blog.foojin.com/img/0HXV5aP4R8-1400.webp 1400w, https://blog.foojin.com/img/0HXV5aP4R8-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/0HXV5aP4R8-400.jpeg 400w, https://blog.foojin.com/img/0HXV5aP4R8-812.jpeg 812w, https://blog.foojin.com/img/0HXV5aP4R8-1400.jpeg 1400w, https://blog.foojin.com/img/0HXV5aP4R8-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Cimetière de Calton" loading="lazy" decoding="async" src="https://blog.foojin.com/img/0HXV5aP4R8-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="surgeons-hall-museums" tabindex="-1">Surgeons' Hall Museums <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Ensuite on est redescendu plus au sud pour visiter le <a href="https://museum.rcsed.ac.uk/">musée de la chirurgie</a>. Très sympathique à faire, sauf si vous n'aimez pas l'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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/RuHewPzcPV-400.avif 400w, https://blog.foojin.com/img/RuHewPzcPV-812.avif 812w, https://blog.foojin.com/img/RuHewPzcPV-1400.avif 1400w, https://blog.foojin.com/img/RuHewPzcPV-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/RuHewPzcPV-400.webp 400w, https://blog.foojin.com/img/RuHewPzcPV-812.webp 812w, https://blog.foojin.com/img/RuHewPzcPV-1400.webp 1400w, https://blog.foojin.com/img/RuHewPzcPV-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/RuHewPzcPV-400.jpeg 400w, https://blog.foojin.com/img/RuHewPzcPV-812.jpeg 812w, https://blog.foojin.com/img/RuHewPzcPV-1400.jpeg 1400w, https://blog.foojin.com/img/RuHewPzcPV-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Entrée du Surgeons' Hall Museums" loading="lazy" decoding="async" src="https://blog.foojin.com/img/RuHewPzcPV-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="edinburgh-s-central-library" tabindex="-1">Edinburgh's Central library <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Toujours dans l'optique de satisfaire la curiosité de ma compagne bibliothécaire on est parti faire le reste de la <em>Edinburgh's central library</em>, c'est un autre bâtiment que celui pour la jeunesse qu'on avait vu la veille. C'est un très beau bâtiment ancien.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/RCmyXPawAK-400.avif 400w, https://blog.foojin.com/img/RCmyXPawAK-812.avif 812w, https://blog.foojin.com/img/RCmyXPawAK-1400.avif 1400w, https://blog.foojin.com/img/RCmyXPawAK-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/RCmyXPawAK-400.webp 400w, https://blog.foojin.com/img/RCmyXPawAK-812.webp 812w, https://blog.foojin.com/img/RCmyXPawAK-1400.webp 1400w, https://blog.foojin.com/img/RCmyXPawAK-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/RCmyXPawAK-400.jpeg 400w, https://blog.foojin.com/img/RCmyXPawAK-812.jpeg 812w, https://blog.foojin.com/img/RCmyXPawAK-1400.jpeg 1400w, https://blog.foojin.com/img/RCmyXPawAK-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="National Library of Scotland" loading="lazy" decoding="async" src="https://blog.foojin.com/img/RCmyXPawAK-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="necrobus" tabindex="-1">Necrobus <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On s'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'était très fun, un peu de redite avec la visite guidée qu'on avait faite la veille mais on a pu aller plus loin, bus oblige, qu'à pied. Le but de cette visite est clairement de faire un peu peur et beaucoup rire et ça marche bien.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/mUsalN6qWM-400.avif 400w, https://blog.foojin.com/img/mUsalN6qWM-812.avif 812w, https://blog.foojin.com/img/mUsalN6qWM-1400.avif 1400w, https://blog.foojin.com/img/mUsalN6qWM-3024.avif 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/mUsalN6qWM-400.webp 400w, https://blog.foojin.com/img/mUsalN6qWM-812.webp 812w, https://blog.foojin.com/img/mUsalN6qWM-1400.webp 1400w, https://blog.foojin.com/img/mUsalN6qWM-3024.webp 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/mUsalN6qWM-400.jpeg 400w, https://blog.foojin.com/img/mUsalN6qWM-812.jpeg 812w, https://blog.foojin.com/img/mUsalN6qWM-1400.jpeg 1400w, https://blog.foojin.com/img/mUsalN6qWM-3024.jpeg 3024w" sizes="(min-width: 50em) 812px, 100vw"><img alt="National Library of Scotland" loading="lazy" decoding="async" src="https://blog.foojin.com/img/mUsalN6qWM-400.jpeg" width="3024" height="4032"></picture></p>
<h3 id="whistle-binkies" tabindex="-1">Whistle Binkies <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>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 <a href="https://whistlebinkies.com/">Whistle Binkies</a>, dans la même rue que le <strong>Banshee Labyrinth</strong>. La déco était jolie, pub à la british, et ils avaient un bon choix de whisky et de bière.</p>
<h2 id="jour-3-glencoe" tabindex="-1">Jour 3 : Glencoe <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>C'est l'heure du départ pour les contrées "sauvages" de l'Écosse: belles pour les yeux et exigeantes pour les jambes.</p>
<h3 id="location-chez-avis" tabindex="-1">Location chez Avis <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On avait réservé une Fiat 500 chez Avis pour 6 jours.<br>
Pourquoi Avis ? Parce que c'est un gros du domaine et surtout car c'était un des rares à accepter les cartes de débit. Normalement, chez la majorité des loueurs là-bas c'est la carte de crédit qui fait loi. J'é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'ai préféré aller chez eux. Et pour le coup je confirme que la carte de débit fonctionne chez eux.</p>
<p>Pourquoi une petite Fiat 500 ? Parce que on était que 2 donc c'était suffisant mais surtout parce que beaucoup de petites routes en Écosse ne sont que des une voie avec des "<em>passing places</em>" tout le long des deux côtés. Du coup, plus ta voiture est petite plus c'est simple de rencontrer d'autres véhicules en face qui ne sont généralement pas aussi petits, bien au contraire. Et j'ai vite compris pourquoi il y avait autant de pick up… C'est un paysage magnifique l'Écosse mais très vallonné, du coup faut un peu de patate sous le capot (ce que la Fiat 500 n'avait pas). Je n'ai jamais été bloqué dans une côte mais j'en ai parfois chié à la faire grimper.<br>
Avec le recul, je me dit que c'était une parfaite voiture pour la ville mais pas vraiment pour la campagne.</p>
<p>Au départ, j'étais un peu anxieux pour la conduite à gauche, mais en y allant doucement et prenant son temps on s'y fait.</p>
<h3 id="stirling" tabindex="-1">Stirling <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Sur le chemin pour Glencoe on a fait un arrêt à <strong>Stirling</strong> où on peut y visiter le château, chose que l'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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/E_3XwlmkC6-400.avif 400w, https://blog.foojin.com/img/E_3XwlmkC6-812.avif 812w, https://blog.foojin.com/img/E_3XwlmkC6-1400.avif 1400w, https://blog.foojin.com/img/E_3XwlmkC6-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/E_3XwlmkC6-400.webp 400w, https://blog.foojin.com/img/E_3XwlmkC6-812.webp 812w, https://blog.foojin.com/img/E_3XwlmkC6-1400.webp 1400w, https://blog.foojin.com/img/E_3XwlmkC6-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/E_3XwlmkC6-400.jpeg 400w, https://blog.foojin.com/img/E_3XwlmkC6-812.jpeg 812w, https://blog.foojin.com/img/E_3XwlmkC6-1400.jpeg 1400w, https://blog.foojin.com/img/E_3XwlmkC6-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Cimetière de Stirling" loading="lazy" decoding="async" src="https://blog.foojin.com/img/E_3XwlmkC6-400.jpeg" width="3000" height="2000"></picture></p>
<p>À noter que c'était la première fois que j'avais un parcmètre à payer et comme j'avais entendu que l'Écosse était très <em>Carte Bleue first</em> je n'avais pas tiré d'argent en liquide. Or à Stirling les parcmètres était à payer en liquide ou via une app mobile appelée Ring-Go que j'ai essayé d'utiliser (j'attends toujours le sms de validation d'inscription à ce jour, je crois que l'app n'aime pas trop les numéros étrangers). Il faut donc faire attention à ça, partout ailleurs où l'on est allé les parcmètres étaient compatible CB donc plus le problème mais je doute que Stirling soit l'unique exception.</p>
<p>Bref, on a fraudé.</p>
<h3 id="lost-valley" tabindex="-1">Lost Valley <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Arrivé dans la contrée de <strong>Glencoe</strong>, on a directement commencé par une randonnée célèbre, la Lost Valley. C'é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'a malheureusement pas pu la finir parce que c'était un jour humide et au 3/4 du chemin on était censé traverser un cours d'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'autres chemins mais on n'a rien trouvé de satisfaisant. Alors on rebroussé chemin sans voir le fameux point de vue de Lost Valley. C'est pas grave on s'est rattrapé plus tard. 😛</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/AN8uGmg7ZS-400.avif 400w, https://blog.foojin.com/img/AN8uGmg7ZS-812.avif 812w, https://blog.foojin.com/img/AN8uGmg7ZS-1400.avif 1400w, https://blog.foojin.com/img/AN8uGmg7ZS-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/AN8uGmg7ZS-400.webp 400w, https://blog.foojin.com/img/AN8uGmg7ZS-812.webp 812w, https://blog.foojin.com/img/AN8uGmg7ZS-1400.webp 1400w, https://blog.foojin.com/img/AN8uGmg7ZS-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/AN8uGmg7ZS-400.jpeg 400w, https://blog.foojin.com/img/AN8uGmg7ZS-812.jpeg 812w, https://blog.foojin.com/img/AN8uGmg7ZS-1400.jpeg 1400w, https://blog.foojin.com/img/AN8uGmg7ZS-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="La Lost Valley" loading="lazy" decoding="async" src="https://blog.foojin.com/img/AN8uGmg7ZS-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="old-station" tabindex="-1">Old station <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Sur conseil de note logeuse de <strong>Spean Bridge</strong>, au nord de <strong>Fort William</strong> qui est au Nord de la ville de <strong>Glencoe</strong>, on a réservé une table au <strong>Old Station</strong>, un bar/restaurant situé dans une ancienne station de gare. C'est sympathique comme ambiance. Mais c'est à ce moment là qu'on a compris un truc fondamental sur l'Écosse : aux UK on mange pour se nourrir, pas pour le plaisir. C'était correct mais tout juste alors que c'est un endroit réputé.<br>
En fait, la majorité de la cuisine locale, quand ce n'est pas de la cuisine du monde, est grasse et rarement assaisonnée. On avait déjà eu cette impression à Edinburgh mais on s'était dit que c'était juste la faute à pas de chance. Mais en fait non, c'est gloabelement partout pareil.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/4Ii6y0vOTq-400.avif 400w, https://blog.foojin.com/img/4Ii6y0vOTq-812.avif 812w, https://blog.foojin.com/img/4Ii6y0vOTq-1400.avif 1400w, https://blog.foojin.com/img/4Ii6y0vOTq-4032.avif 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/4Ii6y0vOTq-400.webp 400w, https://blog.foojin.com/img/4Ii6y0vOTq-812.webp 812w, https://blog.foojin.com/img/4Ii6y0vOTq-1400.webp 1400w, https://blog.foojin.com/img/4Ii6y0vOTq-4032.webp 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/4Ii6y0vOTq-400.jpeg 400w, https://blog.foojin.com/img/4Ii6y0vOTq-812.jpeg 812w, https://blog.foojin.com/img/4Ii6y0vOTq-1400.jpeg 1400w, https://blog.foojin.com/img/4Ii6y0vOTq-4032.jpeg 4032w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Mon Repas au Old station" loading="lazy" decoding="async" src="https://blog.foojin.com/img/4Ii6y0vOTq-400.jpeg" width="4032" height="3024"></picture></p>
<h2 id="jour-4-glencoe" tabindex="-1">Jour 4 : Glencoe <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>Deuxième jour à Glencoe, puisque trop de belles choses à voir et trop peu de temps sur une journée.</p>
<h3 id="glen-nevis-et-the-steall-falls" tabindex="-1">Glen Nevis et the Steall falls <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On a commencé par une autre randonnée connue au <strong>Glen Nevis</strong> où l'on peut y voir la cascade de <strong>Steall Falls</strong>. Un peu comme la <strong>Lost Valley</strong>, on grimpe pas mal au départ pour arriver dans une vallée magnifique et vide d'humains (pour peu d'y aller tôt le matin). C'était ressourçant. Une de mes randonnées préférées sans aucun doute.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/x5Pw3WBVw4-400.avif 400w, https://blog.foojin.com/img/x5Pw3WBVw4-812.avif 812w, https://blog.foojin.com/img/x5Pw3WBVw4-1400.avif 1400w, https://blog.foojin.com/img/x5Pw3WBVw4-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/x5Pw3WBVw4-400.webp 400w, https://blog.foojin.com/img/x5Pw3WBVw4-812.webp 812w, https://blog.foojin.com/img/x5Pw3WBVw4-1400.webp 1400w, https://blog.foojin.com/img/x5Pw3WBVw4-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/x5Pw3WBVw4-400.jpeg 400w, https://blog.foojin.com/img/x5Pw3WBVw4-812.jpeg 812w, https://blog.foojin.com/img/x5Pw3WBVw4-1400.jpeg 1400w, https://blog.foojin.com/img/x5Pw3WBVw4-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Vallée de Glen Nevis" loading="lazy" decoding="async" src="https://blog.foojin.com/img/x5Pw3WBVw4-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="remontee-mecanique-de-glencoe-mountain-resort" tabindex="-1">Remontée mécanique de Glencoe Mountain Resort <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Pour se reposer un peu les guiboles, on est allé au <strong><a href="https://www.glencoemountain.co.uk/">Glencoe Mountain Resort</a></strong> qui, comme son nom ne l'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'y avoir une magnifique vue sur la vallée et ses Lochs. À noter aussi, pour les amateurs, qu'on peut descendre ensuite en VTT sur une piste dédiée.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/khBwsP0PXu-400.avif 400w, https://blog.foojin.com/img/khBwsP0PXu-812.avif 812w, https://blog.foojin.com/img/khBwsP0PXu-1400.avif 1400w, https://blog.foojin.com/img/khBwsP0PXu-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/khBwsP0PXu-400.webp 400w, https://blog.foojin.com/img/khBwsP0PXu-812.webp 812w, https://blog.foojin.com/img/khBwsP0PXu-1400.webp 1400w, https://blog.foojin.com/img/khBwsP0PXu-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/khBwsP0PXu-400.jpeg 400w, https://blog.foojin.com/img/khBwsP0PXu-812.jpeg 812w, https://blog.foojin.com/img/khBwsP0PXu-1400.jpeg 1400w, https://blog.foojin.com/img/khBwsP0PXu-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Vue depuis les hauteurs du Glencoe Mountain Resort" loading="lazy" decoding="async" src="https://blog.foojin.com/img/khBwsP0PXu-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="glencoe" tabindex="-1">Glencoe <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>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'était une randonnée plutôt tranquille mais c'était magnifique.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/OETga1Moua-400.avif 400w, https://blog.foojin.com/img/OETga1Moua-812.avif 812w, https://blog.foojin.com/img/OETga1Moua-1400.avif 1400w, https://blog.foojin.com/img/OETga1Moua-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/OETga1Moua-400.webp 400w, https://blog.foojin.com/img/OETga1Moua-812.webp 812w, https://blog.foojin.com/img/OETga1Moua-1400.webp 1400w, https://blog.foojin.com/img/OETga1Moua-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/OETga1Moua-400.jpeg 400w, https://blog.foojin.com/img/OETga1Moua-812.jpeg 812w, https://blog.foojin.com/img/OETga1Moua-1400.jpeg 1400w, https://blog.foojin.com/img/OETga1Moua-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Carte de l'itinéraire" loading="lazy" decoding="async" src="https://blog.foojin.com/img/OETga1Moua-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="the-whispering-pine-lodge" tabindex="-1">The Whispering Pine Lodge <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Pour finir la journée, on est allé dîner au <strong><a href="https://www.blacksheephotels.com/the-whispering-pine-lodge/">Whispering Pine Lodge</a></strong>, un hôtel restaurant, un brin cher mais pour une fois c'était bon. Enfin bon… normal quoi. Bon comme un restaurant pas franchement gastro en France. Et avec une facture d'environ 100£, c'était cher payé.<br>
C'était malgré tout le premier bon repas en 4 jours qu'on prenait, alors je m'en plains pas trop.</p>
<h2 id="jour-5-skye-islands" tabindex="-1">Jour 5 : Skye islands <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>En route pour les <strong>Skye Islands</strong>, 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 <strong>château d'Eilean Donan</strong> sur l'aller et le <strong>Caisteal Maol</strong> sur le retour mais on a dû changer nos plans. Je vous explique.</p>
<h3 id="pression-des-pneus" tabindex="-1">Pression des pneus <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>La voiture nous a mis un warning sur la pression des pneus et ce à peine 3 jours après la location, je l'avais un peu mauvaise (surtout que j'avais pas pris l'assurance crevaison et je commençais à paniquer). On s'est alors mis à la recherche d'une station service qu'on a vite trouvé. Seul problème, il faut du cash pour la machine… cash que je n'ai pas. On s'est donc mis à la recherche d'un distributeur de billet (qui était assez proche) puis à regonfler nos pneus sur une machine récalcitrante. Grâce à l'aide de la gentille dame de la station, on est reparti les pneus vigoureux et beaucoup moins anxieux.</p>
<h3 id="fairy-pools" tabindex="-1">Fairy pools <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On est arrivé un peu tard aux <strong>Fairy pools</strong> et il y avait, à mon grand regret, déjà beaucoup de monde. Les gens c'est bien pour le tourisme mais pas fou pour les photos. C'était sympa comme balade malgré tout, on y remonte un cours d'eau avec de multiples petites piscines naturelles (où se baignent les fées donc). Ce n'était pas la meilleure rando, même sans le monde.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/wxpy2JVUim-400.avif 400w, https://blog.foojin.com/img/wxpy2JVUim-812.avif 812w, https://blog.foojin.com/img/wxpy2JVUim-1400.avif 1400w, https://blog.foojin.com/img/wxpy2JVUim-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/wxpy2JVUim-400.webp 400w, https://blog.foojin.com/img/wxpy2JVUim-812.webp 812w, https://blog.foojin.com/img/wxpy2JVUim-1400.webp 1400w, https://blog.foojin.com/img/wxpy2JVUim-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/wxpy2JVUim-400.jpeg 400w, https://blog.foojin.com/img/wxpy2JVUim-812.jpeg 812w, https://blog.foojin.com/img/wxpy2JVUim-1400.jpeg 1400w, https://blog.foojin.com/img/wxpy2JVUim-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Les Fairy pools" loading="lazy" decoding="async" src="https://blog.foojin.com/img/wxpy2JVUim-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="dunvegan-castle" tabindex="-1">Dunvegan castle <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On a fait le <strong>Dunvegan Castle</strong> 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'était celui du clan McLeod mais j'y ai pas vu d'immortel. 🤷</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/4Lx1PFMf3S-400.avif 400w, https://blog.foojin.com/img/4Lx1PFMf3S-812.avif 812w, https://blog.foojin.com/img/4Lx1PFMf3S-1400.avif 1400w, https://blog.foojin.com/img/4Lx1PFMf3S-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/4Lx1PFMf3S-400.webp 400w, https://blog.foojin.com/img/4Lx1PFMf3S-812.webp 812w, https://blog.foojin.com/img/4Lx1PFMf3S-1400.webp 1400w, https://blog.foojin.com/img/4Lx1PFMf3S-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/4Lx1PFMf3S-400.jpeg 400w, https://blog.foojin.com/img/4Lx1PFMf3S-812.jpeg 812w, https://blog.foojin.com/img/4Lx1PFMf3S-1400.jpeg 1400w, https://blog.foojin.com/img/4Lx1PFMf3S-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Château de Dunvegan" loading="lazy" decoding="async" src="https://blog.foojin.com/img/4Lx1PFMf3S-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="portree" tabindex="-1">Portree <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>C'est à Portree qu'on avait pris un véritable B&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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/_39B4_r2qJ-400.avif 400w, https://blog.foojin.com/img/_39B4_r2qJ-812.avif 812w, https://blog.foojin.com/img/_39B4_r2qJ-1400.avif 1400w, https://blog.foojin.com/img/_39B4_r2qJ-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/_39B4_r2qJ-400.webp 400w, https://blog.foojin.com/img/_39B4_r2qJ-812.webp 812w, https://blog.foojin.com/img/_39B4_r2qJ-1400.webp 1400w, https://blog.foojin.com/img/_39B4_r2qJ-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/_39B4_r2qJ-400.jpeg 400w, https://blog.foojin.com/img/_39B4_r2qJ-812.jpeg 812w, https://blog.foojin.com/img/_39B4_r2qJ-1400.jpeg 1400w, https://blog.foojin.com/img/_39B4_r2qJ-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Le port de Portree" loading="lazy" decoding="async" src="https://blog.foojin.com/img/_39B4_r2qJ-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="fairy-glen" tabindex="-1">Fairy glen <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Pour le dîner, on a décidé d'aller pique-niquer dans le <strong>Fairy Glen</strong>. C'est un coin mignon de petites collines à l'herbe tondue naturellement par sa population de moutons. Et comme on y est allé le soir c'était calme et peu peuplé. Combo parfait pour apprécier un joli coucher de soleil avec son sandwich et sa canette de <em>cider</em>. 😃</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/O2soBHqFfT-400.avif 400w, https://blog.foojin.com/img/O2soBHqFfT-812.avif 812w, https://blog.foojin.com/img/O2soBHqFfT-1400.avif 1400w, https://blog.foojin.com/img/O2soBHqFfT-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/O2soBHqFfT-400.webp 400w, https://blog.foojin.com/img/O2soBHqFfT-812.webp 812w, https://blog.foojin.com/img/O2soBHqFfT-1400.webp 1400w, https://blog.foojin.com/img/O2soBHqFfT-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/O2soBHqFfT-400.jpeg 400w, https://blog.foojin.com/img/O2soBHqFfT-812.jpeg 812w, https://blog.foojin.com/img/O2soBHqFfT-1400.jpeg 1400w, https://blog.foojin.com/img/O2soBHqFfT-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Les Fairy Glen" loading="lazy" decoding="async" src="https://blog.foojin.com/img/O2soBHqFfT-400.jpeg" width="3000" height="2000"></picture></p>
<h2 id="jour-6-inverness" tabindex="-1">Jour 6 : Inverness <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>Départ pour Inverness, mais avant d'y arriver on a fait un dernier truc aux Skye Islands…</p>
<h3 id="the-old-man-of-storr" tabindex="-1">The Old man of Storr <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>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'à la toute fin. Je suis assez fier d'avoir réussi à le faire et honnêtement la vue en valait vraiment la chandelle.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/ipZ-88bt1U-400.avif 400w, https://blog.foojin.com/img/ipZ-88bt1U-812.avif 812w, https://blog.foojin.com/img/ipZ-88bt1U-1400.avif 1400w, https://blog.foojin.com/img/ipZ-88bt1U-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/ipZ-88bt1U-400.webp 400w, https://blog.foojin.com/img/ipZ-88bt1U-812.webp 812w, https://blog.foojin.com/img/ipZ-88bt1U-1400.webp 1400w, https://blog.foojin.com/img/ipZ-88bt1U-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/ipZ-88bt1U-400.jpeg 400w, https://blog.foojin.com/img/ipZ-88bt1U-812.jpeg 812w, https://blog.foojin.com/img/ipZ-88bt1U-1400.jpeg 1400w, https://blog.foojin.com/img/ipZ-88bt1U-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Old man of Storr" loading="lazy" decoding="async" src="https://blog.foojin.com/img/ipZ-88bt1U-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="eilean-donan" tabindex="-1">Eilean Donan <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Sur le chemin du retour des Skye Islands on a donc fait ce qu'on aurait dû faire à l'aller : <strong>Eilean Donan Castle</strong>, un joli petit chateau sur un Loch, seulement accessible par un pont. On est arrivé quand la marée était basse, on n'a pas eu la meilleure vue mais ça reste un très joli château agréable à visiter.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/kd6aCYjn19-400.avif 400w, https://blog.foojin.com/img/kd6aCYjn19-812.avif 812w, https://blog.foojin.com/img/kd6aCYjn19-1400.avif 1400w, https://blog.foojin.com/img/kd6aCYjn19-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/kd6aCYjn19-400.webp 400w, https://blog.foojin.com/img/kd6aCYjn19-812.webp 812w, https://blog.foojin.com/img/kd6aCYjn19-1400.webp 1400w, https://blog.foojin.com/img/kd6aCYjn19-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/kd6aCYjn19-400.jpeg 400w, https://blog.foojin.com/img/kd6aCYjn19-812.jpeg 812w, https://blog.foojin.com/img/kd6aCYjn19-1400.jpeg 1400w, https://blog.foojin.com/img/kd6aCYjn19-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Château Eilean Donan" loading="lazy" decoding="async" src="https://blog.foojin.com/img/kd6aCYjn19-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="inverness" tabindex="-1">Inverness <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>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'é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'il n'y avait pas d'intérêt à le visiter mais c'est pas tellement ce qu'on recherchait.</p>
<h3 id="clava-cairn" tabindex="-1">Clava Cairn <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/tnNcmFD2un-400.avif 400w, https://blog.foojin.com/img/tnNcmFD2un-812.avif 812w, https://blog.foojin.com/img/tnNcmFD2un-1400.avif 1400w, https://blog.foojin.com/img/tnNcmFD2un-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/tnNcmFD2un-400.webp 400w, https://blog.foojin.com/img/tnNcmFD2un-812.webp 812w, https://blog.foojin.com/img/tnNcmFD2un-1400.webp 1400w, https://blog.foojin.com/img/tnNcmFD2un-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/tnNcmFD2un-400.jpeg 400w, https://blog.foojin.com/img/tnNcmFD2un-812.jpeg 812w, https://blog.foojin.com/img/tnNcmFD2un-1400.jpeg 1400w, https://blog.foojin.com/img/tnNcmFD2un-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Clava cairn" loading="lazy" decoding="async" src="https://blog.foojin.com/img/tnNcmFD2un-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="culloden-battlefield" tabindex="-1">Culloden Battlefield <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Le terrain de la fameuse bataille de <strong>Culloden</strong> où les clans rebelles se sont bien fait défoncé par l'armée britannique en 1746. En vrai y a pas grand chose à y voir. Contrairement à ce que montre le film Braveheart, c'est tout tout plat, ce qui n'a pas stratégiquement aidé les écossais. On est arrivé un peu trop tard pour voir le musée donc c'est probablement intéressant mais le champ de bataille en lui-même n'est rien autre qu'un grand champ de vide avec quelques pierres en hommage aux différents clans.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/pScj2xj4Tz-400.avif 400w, https://blog.foojin.com/img/pScj2xj4Tz-812.avif 812w, https://blog.foojin.com/img/pScj2xj4Tz-1400.avif 1400w, https://blog.foojin.com/img/pScj2xj4Tz-4032.avif 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/pScj2xj4Tz-400.webp 400w, https://blog.foojin.com/img/pScj2xj4Tz-812.webp 812w, https://blog.foojin.com/img/pScj2xj4Tz-1400.webp 1400w, https://blog.foojin.com/img/pScj2xj4Tz-4032.webp 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/pScj2xj4Tz-400.jpeg 400w, https://blog.foojin.com/img/pScj2xj4Tz-812.jpeg 812w, https://blog.foojin.com/img/pScj2xj4Tz-1400.jpeg 1400w, https://blog.foojin.com/img/pScj2xj4Tz-4032.jpeg 4032w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Champ de bataille de Culloden" loading="lazy" decoding="async" src="https://blog.foojin.com/img/pScj2xj4Tz-400.jpeg" width="4032" height="3024"></picture></p>
<h3 id="urquhart-s" tabindex="-1">Urquhart's <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Premier et unique coup de cœur culinaire : le restaurant <strong><a href="https://www.urquharts-inverness.co.uk">Urquhart's</a></strong>, à ne pas confondre avec le château qui se trouve sur le <strong>Loch Ness</strong>, tout près d'Inverness aussi. La nourriture y était bonne, très bonne, et cuisinée, ce qu'on a franchement apprécié après 6 jours à manger des trucs passables.
Si vous voulez y aller, réservez impérativement.</p>
<h2 id="jour-7-cairn-gorm-nord" tabindex="-1">Jour 7 : Cairn Gorm (Nord) <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>Fort d'une météo merdique (le genre de pluie qui rend toute balade désagréable), nous sommes parti d'Inverness vers les <strong>Cairn Gorm</strong>, sorte de Massif central à l'écossaise.</p>
<h3 id="elgin" tabindex="-1">Elgin <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On voulait faire un crochet par Elgin où l'on peut trouver les ruines d'une vieille cathédrale bien entretenue. Mais une fois arrivé on s'est rendu compte que c'était en travaux avec des échafaudages partout et que l'entrée était à 10£ par personne. Alors ajoutez à ça la pluie… on a préféré rebrousser chemin.</p>
<h3 id="pluscarden-abbey" tabindex="-1">Pluscarden Abbey <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Pour se venger du fiasco d'Elgin, on est allé visiter la dernièra abbaye encore en activité d'Écosse, la <strong><a href="https://www.pluscardenabbey.org/">Pluscarden Abbey</a></strong>. C'était mignon, ça a tué le temps mais c'était pas l'arrêt du siècle non plus.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/CDKv5nsa0B-400.avif 400w, https://blog.foojin.com/img/CDKv5nsa0B-812.avif 812w, https://blog.foojin.com/img/CDKv5nsa0B-1400.avif 1400w, https://blog.foojin.com/img/CDKv5nsa0B-4032.avif 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/CDKv5nsa0B-400.webp 400w, https://blog.foojin.com/img/CDKv5nsa0B-812.webp 812w, https://blog.foojin.com/img/CDKv5nsa0B-1400.webp 1400w, https://blog.foojin.com/img/CDKv5nsa0B-4032.webp 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/CDKv5nsa0B-400.jpeg 400w, https://blog.foojin.com/img/CDKv5nsa0B-812.jpeg 812w, https://blog.foojin.com/img/CDKv5nsa0B-1400.jpeg 1400w, https://blog.foojin.com/img/CDKv5nsa0B-4032.jpeg 4032w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Abbaye de Pluscarden" loading="lazy" decoding="async" src="https://blog.foojin.com/img/CDKv5nsa0B-400.jpeg" width="4032" height="3024"></picture></p>
<h3 id="cullen-portknockie" tabindex="-1">Cullen-Portknockie <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Toujours sous la pluie, on s'est arrêté sur le port de <strong>Cullen</strong> pour faire une randonnée longeant la plage vers <strong>Portknockie</strong> avec une superbe vue, notamment sur le <strong>Bow Fiddle Rock</strong>. On a commencé au bon moment parce qu'à 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'était un jour de pluie et de vent et autant au port c'était gérable autant sur les falaises la vitesse du vent était décuplée, ça aurait pu être dangereux.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Gm3WGG5FfT-400.avif 400w, https://blog.foojin.com/img/Gm3WGG5FfT-812.avif 812w, https://blog.foojin.com/img/Gm3WGG5FfT-1400.avif 1400w, https://blog.foojin.com/img/Gm3WGG5FfT-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Gm3WGG5FfT-400.webp 400w, https://blog.foojin.com/img/Gm3WGG5FfT-812.webp 812w, https://blog.foojin.com/img/Gm3WGG5FfT-1400.webp 1400w, https://blog.foojin.com/img/Gm3WGG5FfT-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/Gm3WGG5FfT-400.jpeg 400w, https://blog.foojin.com/img/Gm3WGG5FfT-812.jpeg 812w, https://blog.foojin.com/img/Gm3WGG5FfT-1400.jpeg 1400w, https://blog.foojin.com/img/Gm3WGG5FfT-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Rocher de Whale's mouth" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Gm3WGG5FfT-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="the-royal-oak-hotel" tabindex="-1">The Royal Oak Hotel <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Arrêt pour déjeuner dans ce qui semble être la pire erreur culinaire de ma vie : j'ai commandé un burger et ils m'ont dit qu'il ne pouvait pas cuire la viande bleue ou saignante comme je l'aime mais je l'ai pris quand même. Je ne sais si c'est leur cuisine qui ne permet pas ou si c'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'un burger de fast-food… à chaque bouchée j'avais l'impression de mordre dans une tablette de chocolat, mais sans goût.<br>
Tout le reste du burger était fade. Même moi, qui suis très loin d'être ne serait-ce qu'un amateur en cuisine, j'aurais pu mieux faire. Je pensais ne pas prendre de risque en choisissant un burger mais je me suis trompé : c'était juste pas bon.<br>
Je ne sais pas si j'ai fait une mauvaise pioche ou si c'est comme ça sur tous les plats mais toujours est-il que j'étais terriblement déçu. Je ne recommande pas du coup.</p>
<h3 id="balmoral-cairns" tabindex="-1">Balmoral cairns <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On est alors parti vers la boucle des <strong>Balmoral Cairns</strong>, 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'être faite en entier.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/zwayPYw0TW-400.avif 400w, https://blog.foojin.com/img/zwayPYw0TW-812.avif 812w, https://blog.foojin.com/img/zwayPYw0TW-1400.avif 1400w, https://blog.foojin.com/img/zwayPYw0TW-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/zwayPYw0TW-400.webp 400w, https://blog.foojin.com/img/zwayPYw0TW-812.webp 812w, https://blog.foojin.com/img/zwayPYw0TW-1400.webp 1400w, https://blog.foojin.com/img/zwayPYw0TW-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/zwayPYw0TW-400.jpeg 400w, https://blog.foojin.com/img/zwayPYw0TW-812.jpeg 812w, https://blog.foojin.com/img/zwayPYw0TW-1400.jpeg 1400w, https://blog.foojin.com/img/zwayPYw0TW-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Cairn du prince Albert." loading="lazy" decoding="async" src="https://blog.foojin.com/img/zwayPYw0TW-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="tomintoul" tabindex="-1">Tomintoul <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Notre hôtel, le <strong><a href="https://www.richmondarmstomintoul.co.uk/">Richmond Arms</a></strong> était à <strong>Tomintoul</strong>, un simple village étape parfait pour les randonneurs et leurs périples dans les <strong>Cairn Gorm</strong>. Cet hôtel était une vieille bicoque, c'é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.</p>
<h2 id="jour-8-cairn-gorm-ouest" tabindex="-1">Jour 8 : Cairn Gorm (Ouest) <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<h3 id="loch-an-eilein" tabindex="-1">Loch An Eilein <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Le lendemain on est reparti en direction d'<strong>Aviemore</strong> à l'Ouest des <strong>Cairn Gorm</strong> pour aller voir "le Loch le plus instagramable d'Écosse", le <strong>loch An Eilein</strong>. C'était une très jolie balade dans la forêt autour du Loch, pas du tout exigeante. Alors certes c'est joli mais j'ai pas trop pigé pourquoi c'était le plus instagramable des Lochs. 🤷<br>
C'était pas exceptionnel non plus.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/SIMDS2-XWG-400.avif 400w, https://blog.foojin.com/img/SIMDS2-XWG-812.avif 812w, https://blog.foojin.com/img/SIMDS2-XWG-1400.avif 1400w, https://blog.foojin.com/img/SIMDS2-XWG-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/SIMDS2-XWG-400.webp 400w, https://blog.foojin.com/img/SIMDS2-XWG-812.webp 812w, https://blog.foojin.com/img/SIMDS2-XWG-1400.webp 1400w, https://blog.foojin.com/img/SIMDS2-XWG-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/SIMDS2-XWG-400.jpeg 400w, https://blog.foojin.com/img/SIMDS2-XWG-812.jpeg 812w, https://blog.foojin.com/img/SIMDS2-XWG-1400.jpeg 1400w, https://blog.foojin.com/img/SIMDS2-XWG-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Loch An Eilein" loading="lazy" decoding="async" src="https://blog.foojin.com/img/SIMDS2-XWG-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="pitlochry" tabindex="-1">Pitlochry <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Mignonne tout petite ville, assez touristique, où l'on s'est fait plaisir avec encore une fois dans un salon de thé.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/pPORK82u6G-400.avif 400w, https://blog.foojin.com/img/pPORK82u6G-812.avif 812w, https://blog.foojin.com/img/pPORK82u6G-1400.avif 1400w, https://blog.foojin.com/img/pPORK82u6G-3024.avif 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/pPORK82u6G-400.webp 400w, https://blog.foojin.com/img/pPORK82u6G-812.webp 812w, https://blog.foojin.com/img/pPORK82u6G-1400.webp 1400w, https://blog.foojin.com/img/pPORK82u6G-3024.webp 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/pPORK82u6G-400.jpeg 400w, https://blog.foojin.com/img/pPORK82u6G-812.jpeg 812w, https://blog.foojin.com/img/pPORK82u6G-1400.jpeg 1400w, https://blog.foojin.com/img/pPORK82u6G-3024.jpeg 3024w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Ru passant dans la ville de Pitlochry" loading="lazy" decoding="async" src="https://blog.foojin.com/img/pPORK82u6G-400.jpeg" width="3024" height="4032"></picture></p>
<h3 id="black-watch-museum-perth" tabindex="-1">Black Watch Museum, Perth <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On est allé au <strong><a href="https://theblackwatch.co.uk/">Black Watch Museum</a></strong> de <strong>Perth</strong> en pensant que c'était un musée sur les fantômes, mais on a dû se foirer ou confondre un truc parce que c'était pas ça du tout : c'était donc un musée sur la <strong>Black Watch</strong>, la section écossaise de l'armée britannique et donc toute son histoire. C'était très intéressant malgré tout.</p>
<h3 id="kirkmichael" tabindex="-1">Kirkmichael <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Notre tout dernier gîte était dans un tout petit bled, non loin de Pitlochry, <strong>Kirkmichael</strong>.<br>
Pour une fois, c'était un appartement entier et non pas une chambre donc on a mangé sur place avec des courses qu'on avait faites plus tôt. Et donc on s'était pris des plats préparés et… c'était à l'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'apéro dans les restaurants.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/CyZU7P6UJh-400.avif 400w, https://blog.foojin.com/img/CyZU7P6UJh-812.avif 812w, https://blog.foojin.com/img/CyZU7P6UJh-1400.avif 1400w, https://blog.foojin.com/img/CyZU7P6UJh-3024.avif 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/CyZU7P6UJh-400.webp 400w, https://blog.foojin.com/img/CyZU7P6UJh-812.webp 812w, https://blog.foojin.com/img/CyZU7P6UJh-1400.webp 1400w, https://blog.foojin.com/img/CyZU7P6UJh-3024.webp 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/CyZU7P6UJh-400.jpeg 400w, https://blog.foojin.com/img/CyZU7P6UJh-812.jpeg 812w, https://blog.foojin.com/img/CyZU7P6UJh-1400.jpeg 1400w, https://blog.foojin.com/img/CyZU7P6UJh-3024.jpeg 3024w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Notre soirée apéro avec du vin, de la bière et des chips." loading="lazy" decoding="async" src="https://blog.foojin.com/img/CyZU7P6UJh-400.jpeg" width="3024" height="4032"></picture></p>
<h2 id="jour-9-edinburgh" tabindex="-1">Jour 9 : Edinburgh <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>Toute la nuit il avait plu à <strong>Kirkmichael</strong>, 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'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 !</p>
<h3 id="st-bridget-s-kirk" tabindex="-1">St Bridget's kirk <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Au Nord d'Edinburgh, juste avant de passer le pont, se trouvent cachées dans un coin les ruines d'une ancienne église, juste au bord de la mer. Le matin, quand le soleil se lève encore et qu'il n'y a personne, c'est un joli spectacle.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/ELdHWjEcm6-400.avif 400w, https://blog.foojin.com/img/ELdHWjEcm6-812.avif 812w, https://blog.foojin.com/img/ELdHWjEcm6-1400.avif 1400w, https://blog.foojin.com/img/ELdHWjEcm6-3000.avif 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/ELdHWjEcm6-400.webp 400w, https://blog.foojin.com/img/ELdHWjEcm6-812.webp 812w, https://blog.foojin.com/img/ELdHWjEcm6-1400.webp 1400w, https://blog.foojin.com/img/ELdHWjEcm6-3000.webp 3000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/ELdHWjEcm6-400.jpeg 400w, https://blog.foojin.com/img/ELdHWjEcm6-812.jpeg 812w, https://blog.foojin.com/img/ELdHWjEcm6-1400.jpeg 1400w, https://blog.foojin.com/img/ELdHWjEcm6-3000.jpeg 3000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="St Bridget's kirk" loading="lazy" decoding="async" src="https://blog.foojin.com/img/ELdHWjEcm6-400.jpeg" width="3000" height="2000"></picture></p>
<h3 id="ibis-hotel" tabindex="-1">Ibis hotel <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>On est passé à notre hôtel déposer les bagages avant de rendre la voiture. Rien de bien folichon, juste qu'il est bien placé pour repartir à l'aéroport le lendemain matin (surtout qu'on avait un vol à 6h du matin) puisque en périphérie Ouest d'Edinburgh, juste avant l'aéroport à 15 min de route.</p>
<h3 id="the-witchery" tabindex="-1">The Witchery <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Après avoir rendu la voiture on est allé manger dans un restaurant qu'on avait repéré quelques jours auparavant, <strong><a href="https://www.thewitchery.com/">The Witchery</a></strong>. C'est un peu plus <em>fancy</em> que la moyenne mais on avait encore un peu de budget, alors on s'est fait plaisir. Vraiment, c'était très très bon, on sent qu'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'est très vite complet.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/fPU_4jFrSO-400.avif 400w, https://blog.foojin.com/img/fPU_4jFrSO-812.avif 812w, https://blog.foojin.com/img/fPU_4jFrSO-1400.avif 1400w, https://blog.foojin.com/img/fPU_4jFrSO-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/fPU_4jFrSO-400.webp 400w, https://blog.foojin.com/img/fPU_4jFrSO-812.webp 812w, https://blog.foojin.com/img/fPU_4jFrSO-1400.webp 1400w, https://blog.foojin.com/img/fPU_4jFrSO-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/fPU_4jFrSO-400.jpeg 400w, https://blog.foojin.com/img/fPU_4jFrSO-812.jpeg 812w, https://blog.foojin.com/img/fPU_4jFrSO-1400.jpeg 1400w, https://blog.foojin.com/img/fPU_4jFrSO-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Entrée de The Witchery" loading="lazy" decoding="async" src="https://blog.foojin.com/img/fPU_4jFrSO-400.jpeg" width="2000" height="3000"></picture></p>
<h3 id="arthur-s-seat" tabindex="-1">Arthur's seat <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Pour digérer on s'est dit qu'on allait faire notre ultime randonnée, <strong>Arthur's seat</strong>, qui est la formation rocheuse typique au beau milieu d'Edinburgh. Alors je sais pas si c'était vraiment difficile ou si mon corps n'en pouvait plus après toutes ces randonnées plus ou moins compliquées mais j'en ai chié un peu sur la fin.</p>
<video controls="" width="100%">
<source src="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/img/23-09-20%2016-04-20%203303.webm" type="video/webm">
</video>
<h3 id="sheep-heid-inn" tabindex="-1">Sheep Heid Inn <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Une des recommandations typiques après avoir fait <strong>Arthur's Seat</strong> est d'aller boire un verre en redescendant à <strong><a href="https://www.thesheepheidedinburgh.co.uk">The Sheep Heid Inn</a></strong>, apparemment le plus vieux pub de toute l'Écosse et dans le quel il y a aussi de très vieilles mais charmantes <em>skittle alleys</em> (ancêtre du bowling quoi).</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/MhHGwOdNaL-400.avif 400w, https://blog.foojin.com/img/MhHGwOdNaL-812.avif 812w, https://blog.foojin.com/img/MhHGwOdNaL-1400.avif 1400w, https://blog.foojin.com/img/MhHGwOdNaL-4032.avif 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/MhHGwOdNaL-400.webp 400w, https://blog.foojin.com/img/MhHGwOdNaL-812.webp 812w, https://blog.foojin.com/img/MhHGwOdNaL-1400.webp 1400w, https://blog.foojin.com/img/MhHGwOdNaL-4032.webp 4032w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/MhHGwOdNaL-400.jpeg 400w, https://blog.foojin.com/img/MhHGwOdNaL-812.jpeg 812w, https://blog.foojin.com/img/MhHGwOdNaL-1400.jpeg 1400w, https://blog.foojin.com/img/MhHGwOdNaL-4032.jpeg 4032w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Entrée du Sheep Heid Inn" loading="lazy" decoding="async" src="https://blog.foojin.com/img/MhHGwOdNaL-400.jpeg" width="4032" height="3024"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/5R4ofahFZv-400.avif 400w, https://blog.foojin.com/img/5R4ofahFZv-812.avif 812w, https://blog.foojin.com/img/5R4ofahFZv-1400.avif 1400w, https://blog.foojin.com/img/5R4ofahFZv-3024.avif 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/5R4ofahFZv-400.webp 400w, https://blog.foojin.com/img/5R4ofahFZv-812.webp 812w, https://blog.foojin.com/img/5R4ofahFZv-1400.webp 1400w, https://blog.foojin.com/img/5R4ofahFZv-3024.webp 3024w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/5R4ofahFZv-400.jpeg 400w, https://blog.foojin.com/img/5R4ofahFZv-812.jpeg 812w, https://blog.foojin.com/img/5R4ofahFZv-1400.jpeg 1400w, https://blog.foojin.com/img/5R4ofahFZv-3024.jpeg 3024w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Allées de Skittle" loading="lazy" decoding="async" src="https://blog.foojin.com/img/5R4ofahFZv-400.jpeg" width="3024" height="4032"></picture></p>
<h3 id="go-home" tabindex="-1">Go home <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h3>
<p>Pour finir on a repris le chemin vers le centre d'Edinburgh pour choper un tram vers l'hôtel et se préparer à rentrer à la maison. J'é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.</p>
<h2 id="quelques-chiffres" tabindex="-1">Quelques chiffres <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<p>Ayant toujours ma montre connectée sur moi pendant le voyage j'ai eu le plaisir d'avoir quelques stats au retour :</p>
<ul>
<li>On a fait <strong>191608</strong> pas</li>
<li>On a parcouru <strong>126,3</strong> km à pied</li>
<li>On a gravi pour l'équivalent de <strong>508</strong> étages</li>
</ul>
<p>Ça donne un peu le tournis… 😅</p>
<h2 id="en-resume-quelques-points-d-attention-avant-d-aller-en-ecosse" tabindex="-1">En résumé, quelques points d'attention avant d'aller en Écosse <a class="header-anchor" href="https://blog.foojin.com/2023/10/09/9-jours-en-ecosse/">#</a></h2>
<ul>
<li>Vous n'avez pas vraiment besoin d'argent liquide. J'ai tiré 30£ et au final je n'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'est dire.</li>
<li>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'intention d'aller au Nord dans les Highlands, prévoyez de prendre une voiture avec un peu de patate pour grimper les côtes.</li>
<li>La bouffe n'est pas très bonne mais y a beaucoup de restaurants indiens ou asiatiques où l'on peut se venger.</li>
<li>Certains restaurants incluent le service dans la note, d'autres non, pensez à bien vérifier. C'est si vous voulez faire des tips en plus qu'il vous faudra de la monnaie.</li>
<li>Levez-vous tôt. Vous profiterez des paysages sans le gros des touristes et c'est vraiment mieux.</li>
<li>On a pas trop eu ce problème parce qu'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 <em>midges</em>, un genre de moustique qui chasse en troupeau.</li>
</ul>
Migrer de Ghost à 11ty2023-08-31T00:00:00Zhttps://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/<p>Après plusieurs années d'utilisation de Ghost comme CMS de ce blog ainsi que mon portfolio, j'ai décidé de migrer sur Eleventy. Ça n'a pas été super facile mais franchement pas très compliqué non plus.</p>
<h2 id="pourquoi-changer" tabindex="-1">Pourquoi changer ? <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h2>
<p>Pour plusieurs raisons en fait.<br>
Techniques d'abord puisque quand <strong>Ghost</strong> est sorti l'éditeur était très centré sur <em>Markdown</em>, la base de donnée était du simple <strong>NoSQL</strong> et c'était globalement très orienté sur le blog personnel. Maintenant l'éditeur, bien qu'il accepte toujours le <em>Markdown</em> en entrée mais plus comme un insert, n'est rien d'autre qu'un <abbr title="What You See Is What You Get">wysiwyg</abbr> un peu mieux foutu que la moyenne, la base de donnée par défaut est <strong>MySQL</strong> et c'est beaucoup plus orienté sur CMS générateur de communauté payante. Un peu comme ce que ferait <a href="https://www.patreon.com">Patreon</a> en fait mais en plus personnel et moins plateforme.<br>
Alors je ne critique pas <strong>Ghost</strong> ou son équipe, c'est très bien ce qu'ils font, c'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 <strong>Ghost</strong> de nouveau.
Mais pour ce qui est d'un bête blog personnel, j'ai préféré rester simple.</p>
<p>En plus de ça je passais d'un serveur dédié OVH d'un pote à un serveur personnel mutualisé et il s'avère qu'installer <strong>Ghost</strong> sur un serveur où l'ont pas les accès <em>root</em>, c'est un brin plus chiant et compliqué.</p>
<p>Alors je me suis mis bille en tête de migrer tout ça sur <a href="https://www.11ty.dev/">Eleventy</a>, un générateur de sites statiques, parce qu'à la fin de la journée, ce blog n'a pas besoin de grand chose d'autre que de simples fichiers statiques.</p>
<h2 id="recuperer-les-donnees" tabindex="-1">Récupérer les données <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h2>
<p>Le nerf de la guerre d'une migration c'est d'abord de pouvoir récupérer les données et ce de manière exploitable. Heureusement, <strong>Ghost</strong> fait ça très bien puisqu'il suffit d'aller dans les <em>Settings</em> puis <em>Labs</em> et cliquer sur le joli bouton <em>Export</em> pour obtenir un magnifique JSON.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/81Z8yIsF3o-400.avif 400w, https://blog.foojin.com/img/81Z8yIsF3o-812.avif 812w, https://blog.foojin.com/img/81Z8yIsF3o-1400.avif 1400w, https://blog.foojin.com/img/81Z8yIsF3o-2880.avif 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/81Z8yIsF3o-400.webp 400w, https://blog.foojin.com/img/81Z8yIsF3o-812.webp 812w, https://blog.foojin.com/img/81Z8yIsF3o-1400.webp 1400w, https://blog.foojin.com/img/81Z8yIsF3o-2880.webp 2880w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/81Z8yIsF3o-400.png 400w, https://blog.foojin.com/img/81Z8yIsF3o-812.png 812w, https://blog.foojin.com/img/81Z8yIsF3o-1400.png 1400w, https://blog.foojin.com/img/81Z8yIsF3o-2880.png 2880w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Screenshot de la page Settings de l'admin de Ghost" loading="lazy" decoding="async" src="https://blog.foojin.com/img/81Z8yIsF3o-400.png" width="2880" height="1578"></picture></p>
<p>Seul inconvénient, mais pas irrémédiable, il ne s'agit que du contenu textuel des billets et pas les autres potentiels <em>assets</em> 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 <code>content</code> de votre instance <strong>Ghost</strong>.</p>
<p>Et voilà, vous avez tout. Enfin… vous avez vos backup de billet mais, même si <em>JSON</em> c'est bien c'est quand même pas du markdown, ce qui est la façon pour <strong>Eleventy</strong> d'écrire des billets. Il va donc falloir transformer tout ça.</p>
<p>Pas d'inquiétude, installez <a href="https://www.npmjs.com/package/ghost-to-md">ghost-to-md</a> et suivez son <em>readme</em>, c'est un petit script open source qui transformera votre json en autant de fichier Markdown que vous avez écris de billets.</p>
<h2 id="le-temps-des-retouches" tabindex="-1">Le temps des retouches <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h2>
<p>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 <em>iframes</em>, etc… en fait tout ce qui n'est pas du texte ou de l'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.</p>
<p>C'est honnêtement ce qui m'a pris le plus de temps pendant cette migration, passer au crible chaque billet que j'ai écris depuis le temps (une trentaine à peu près) et régler ce qu'il y a avait à régler.</p>
<p>Occupez vous du contenu textuel d'abord, laissez les images à part un moment, on y reviendra plus tard.</p>
<p>Ah aussi, vous remarquerez au tout début de chaque fichier <em>Markdown</em> des metadata contenant un <em>title</em>, <em>slug</em>, etc, ça s'appelle le <em>frontmatter</em> chez <strong>11ty</strong>.
N'y touchez pas pour le moment on y reviendra plus tard.</p>
<h2 id="setup-de-eleventy" tabindex="-1">Setup de Eleventy <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h2>
<p>De base, <strong>11ty</strong> est simple, <strong>11ty</strong> est sobre.
J'aurais pu partir de zéro et c'est sûrement ce que je ferai la prochaine fois que je l'utiliserai pour un autre projet mais je ne maîtrisais pas encore assez quand j'ai commencé cette migration alors j'ai pris comme base de travail le dépôt git tutoriel officiel pour blog <a href="https://github.com/11ty/eleventy-base-blog">Eleventy-base-blog</a> qui est comme son nom l'indique une base pour un blog. Parfait, n'est-ce pas ?</p>
<p>Je ne vais pas m'attarder plus ce que ça sur comment installer à la base <strong>11ty</strong>, lisez donc le… <em>readme</em> du dépôt.</p>
<h3 id="cool-uris-don-t-change-comme-on-dit-dans-le-bouchonnois" tabindex="-1">Cool URIs don't change comme on dit dans le bouchonnois. <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h3>
<p>Un principe de base du développement web, et particulièrement à propos pour notre migration, c'est qu'un URI ne doit pas changer. Comprendre qu'on va faire en sorte que les URIs de vos billets sur <strong>11ty</strong> soient les mêmes que celles que vous aviez sur <strong>Ghost</strong>, parce qu'on est pas des bêtes quand même.</p>
<p>Si vous avez regardé un peu les URIs sur <strong>Ghost</strong> ressemblent à ça :
<code>domain.tld/YYYY/MM/DD/slug</code></p>
<p><strong>11ty</strong>, lui, par défaut va garder l'architecture de votre dossier de contenu si vous ne forcez pas une URI spécifique.</p>
<p>Donc pour arriver au même résultat sur <strong>11ty</strong> vous aurez deux choix qui s'offrent à vous :</p>
<ol>
<li>soit vous faites en sorte que l'architecture de votre dossier de billet de blog sur <strong>11ty</strong> soit du même format que vos URI de <strong>Ghost</strong></li>
<li>Soit vous faites en sorte de forcer le <code>permalink</code> de chacun de vos billets un par un.</li>
</ol>
<p>Personnellement j'ai choisi la première option, j'aime bien architecturer proprement mes dossiers alors ça m'allait de faire ça comme ça.<br>
Et pour ce qui est du <code>slug</code>, ça va être simple, vous l'avez déjà en fait, il est dans le <em>frontmatter</em> de chaque fichier <em>.md</em>, c'est fourni grâce à <strong>ghost-to-md</strong>. Vous n'avez qu'à faire en sorte que le nom de votre dossier soit raccords avec ce <em>slug</em>. Une fois fait vous pouvez virer ce <code>slug</code> du <em>frontmatter</em> il ne nous servira plus.</p>
<p>Du coup grosso modo on se retrouvera avec une architecture de la sorte :</p>
<pre><code>content/
├─ 2023/
├─ 2022/
│ ├─ 12/
│ │ ├─ 31/
│ │ │ ├─ mon-titre-de-billet/
│ │ │ │ ├─ index.md
│ ├─ 06/
│ │ ├─ 13/
│ │ │ ├─ mon-titre-de-mon-autre-billet/
│ │ │ │ ├─ index.md
</code></pre>
<h3 id="les-tags" tabindex="-1">Les tags <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h3>
<p>Normalement, vous les avez récupérés avec <strong>ghost-to-md</strong> mais ils sont très probablement mal intégrés, donc retouchez un peu ça dans vos <em>.md</em>.</p>
<p>Si vous n'avez qu'un seul tag, vous pouvez écrire ça sur une ligne ou sur plusieurs comme cela :</p>
<pre class="language-yaml" tabindex="0"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span> humeur<br><span class="token punctuation">---</span></code></pre>
<pre class="language-yaml" tabindex="0"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> notes<br><span class="token punctuation">---</span></code></pre>
<p>Et si vous avez plusieurs tags, il vous faudra utiliser une de ces deux syntaxes :</p>
<pre class="language-yaml" tabindex="0"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>code<span class="token punctuation">,</span> humeur<span class="token punctuation">]</span><br><span class="token punctuation">---</span></code></pre>
<pre class="language-yaml" tabindex="0"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> code<br> <span class="token punctuation">-</span> notes<br><span class="token punctuation">---</span></code></pre>
<h3 id="gerer-les-images" tabindex="-1">Gérer les images <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h3>
<p>Revenons-en aux images maintenant.
Le dépôt <strong>Elventy-base-blog</strong> vient avec quelques plugins 11ty déjà installés dont <strong>eleventy-img</strong>. Ce dernier gère plusieurs choses en même temps, il va :</p>
<ul>
<li>Déplacer les images dans un dossier <code>img</code> global</li>
<li>Générer des images dans d'autres formats (avif, webp, etc) qui pourraient être mieux adaptés</li>
<li>Générer des images à différentes taille pour le responsive</li>
<li>Mettre tout ça au carré en insérant une balise <code>picture</code> avec des éléments <code>source</code> et leurs attributs <code>srcset</code> et <code>sizes</code></li>
</ul>
<p>C'est vraiment cool et pratique honnêtement, le seul petit inconvénient que je lui trouve c'est qu'il va falloir écrire du code spécifique au langage de templating que vous utilisez dans <strong>11ty</strong> directement dans votre fichier <em>Markdown</em>, ce qui n'est pas très gênant j'imagine si vous écrivez dans un éditeur de code mais un peu plus si vous écrivez dans un outil dédié au <em>Markdown</em> comme moi avec <a href="https://obsidian.md/">Obsidian</a>.</p>
<p>Par soucis de simplicité, je mets toutes mes images d'un billet dans le répertoire de ce billet dans un dossier <code>img</code>.</p>
<p>Et donc, utilisant <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> pour le templating, je vais devoir écrire pour chaque image insérée quelque chose comme ça :</p>
<pre class="language-liquid" tabindex="0"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token object">image</span> <span class="token string">"./img/mon_image.jpg"</span><span class="token punctuation">,</span> <span class="token string">"Mon texte alternatif, parce qu'on est pas des bêtes non plus"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>Ça c'est la base mais vous pouvez aussi choisir une <code>width</code> et surtout générer les <code>sizes</code> pour le responsive par exemple :</p>
<pre class="language-liquid" tabindex="0"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token object">image</span> <span class="token string">"./img/mon_image.jpg"</span><span class="token punctuation">,</span> <span class="token string">"Mon texte alternatif, parce qu'on est pas des bêtes non plus"</span><span class="token punctuation">,</span> <span class="token string">"(min-width: 50em) 812px, 100vw"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>Alors ça peut paraître lourd à l'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.<br>
Pour ma part, toutes mes images de contenu ont les tailles <code>[400, 812, 1400, "auto"]</code> (auto étant la taille de l'image telle quelle) et leur <code>sizes</code> est <code>(min-width: 50em) 812px, 100vw</code>.</p>
<p>Avec juste ça le plugin <strong>eleventy-img</strong> génèrera une balise picture belle comme il faut :</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/avif<span class="token punctuation">"</span></span><br> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><br> /img/v4TA5RtKYq-400.avif 400w,<br> /img/v4TA5RtKYq-812.avif 812w,<br> /img/v4TA5RtKYq-1170.avif 1170w<br> <span class="token punctuation">"</span></span><br> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 50em) 812px, 100vw<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/webp<span class="token punctuation">"</span></span><br> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><br> /img/v4TA5RtKYq-400.webp 400w,<br> /img/v4TA5RtKYq-812.webp 812w,<br> /img/v4TA5RtKYq-1170.webp 1170w<br> <span class="token punctuation">"</span></span><br> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 50em) 812px, 100vw<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/jpeg<span class="token punctuation">"</span></span><br> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><br> /img/v4TA5RtKYq-400.jpeg 400w,<br> /img/v4TA5RtKYq-812.jpeg 812w,<br> /img/v4TA5RtKYq-1170.jpeg 1170w<br> <span class="token punctuation">"</span></span><br> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 50em) 812px, 100vw<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span><br> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mon texte alternatif, parce qu'on est pas des bêtes non plus<span class="token punctuation">"</span></span><br> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span><br> <span class="token attr-name">decoding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async<span class="token punctuation">"</span></span><br> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/v4TA5RtKYq-400.jpeg<span class="token punctuation">"</span></span><br> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1170<span class="token punctuation">"</span></span><br> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1170<span class="token punctuation">"</span></span><br> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span></code></pre>
<h3 id="les-feature-image" tabindex="-1">Les <em>feature image</em> <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h3>
<p><strong>Ghost</strong> permet sur chaque billet de lui mettre une image de présentation, que ce une personnelle ou venant directement de <a href="https://unsplash.com">Unsplash</a> et j'utilisais beaucoup cette option.<br>
Donc pour tenter de reprendre ça, j'ai tout d'abord récupéré toutes les images utilisées, je les ai stockées dans le dossier <code>img</code> de mon billet et dans le <em>frontmatter</em> de chaque billet j'ai rajouté des données custom.</p>
<pre class="language-yaml" tabindex="0"><code class="language-yaml"><span class="token punctuation">---</span><br><span class="token key atrule">title</span><span class="token punctuation">:</span> Titre de mon billet<br><span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2023-03-27</span><br><span class="token key atrule">featured</span><span class="token punctuation">:</span> img/featured.jpg<br><span class="token key atrule">featured_author</span><span class="token punctuation">:</span> Carolina Heza<br><span class="token key atrule">featured_url</span><span class="token punctuation">:</span> carolinahdzz<br><span class="token key atrule">tags</span><span class="token punctuation">:</span><br> <span class="token punctuation">-</span> notes<br><span class="token punctuation">---</span></code></pre>
<ul>
<li><code>featured</code> étant le chemin vers l'image en question</li>
<li><code>featured_author</code> étant le nom de l'auteur</li>
<li><code>featured_url</code> étant le <em>handle</em> de l'auteur pour générer le lien qui va bien vers sa page <strong>Unsplash</strong></li>
</ul>
<p>Ensuite dans mon template de billet j'ai mis :</p>
<pre class="language-liquid" tabindex="0"><code class="language-liquid"><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">if</span> featured <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feature<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token object">image</span> featured <span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token string">"(min-width: 50em) 90vw, 100vw"</span> <span class="token delimiter punctuation">%}</span></span><br> <span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">if</span> featured_author <span class="token delimiter punctuation">%}</span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Photo de <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unsplash.com/@<span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span> featured_url<span class="token delimiter punctuation">}}</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token liquid language-liquid"><span class="token delimiter punctuation">{{</span>featured_author<span class="token delimiter punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> sur Unsplash<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span><br> <span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endif</span> <span class="token delimiter punctuation">%}</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span><br><span class="token liquid language-liquid"><span class="token delimiter punctuation">{%</span> <span class="token keyword">endif</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>Tout ça parce que, une fois encore, on est pas des bêtes, il <strong>faut</strong> mettre les sources des photos que l'on vous laisse utiliser gracieusement.</p>
<p>Alors oui tout ça demande <em>un peu plus</em> de travail pour chaque billet puisque tout ça était géré quasi automatiquement par <strong>Ghost</strong> mais c'est le jeu quand on veut se passer de CMS au final.</p>
<h3 id="le-flux-rss" tabindex="-1">Le flux RSS <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h3>
<p><strong>11ty</strong> vient par défaut sans générateur de flux RSS mais il existe un plugin officiel bien nommé <a href="https://www.11ty.dev/docs/plugins/rss/">eleventy-plugin-rss</a> qui, si vous utilisez le dépôt <strong>eleventy-base-blog</strong> comme moi, vous aurez automatiquement.<br>
Honnêtement y a pas grand chose à faire de ce côté, c'est plutôt direct. Le seul <em>hic</em> c'est qu'il génère un fichier xml sur lequel on doit pointer mais que <strong>Ghost</strong>, lui, faisait une URL du genre <code>domain.tld/rss/</code> alors histoire de ne perdre personne pendant la migration j'ai dû rajouter une redirection 301 (Moved Permanently) sur le serveur.</p>
<p>Un simple <em>Redirect</em> ne suffira pas malheureusement, il faudra faire un <em>RedirectMatch</em> à la place, du coup dans votre <em>.htaccess</em>, allez écrire un truc comme ça :</p>
<pre class="language-txt" tabindex="0"><code class="language-txt">RedirectMatch 301 ^/rss/?$ /feeds/posts.xml</code></pre>
<p>Et voilà, ça devrait faire le travail.</p>
<h3 id="les-petits-plus" tabindex="-1">Les petits plus. <a class="header-anchor" href="https://blog.foojin.com/2023/08/31/migrer-de-ghost-a-11ty/">#</a></h3>
<p>11ty a quelques <a href="https://www.11ty.dev/docs/plugins/#list-of-official-plugins">plugins officiels</a>, et souvent indispensables, à vous proposer. Une flopée viennent avec le dépôt <strong>eleventy-base-blog</strong> comme :</p>
<ul>
<li><a href="https://www.11ty.dev/docs/plugins/navigation/">Navigation</a> pour générer une navigation ou un fil d'ariane</li>
<li><a href="https://www.11ty.dev/docs/plugins/rss/">RSS</a> pour générer vos flux RSS, Atom, JSON…</li>
<li><a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/">Syntax highlighting</a> pour mettre en lumière vos bouts de code avec <a href="https://prismjs.com/">PrismJS</a></li>
<li><a href="https://github.com/11ty/eleventy-plugin-bundle">Bundle</a> pour "concaténer" vos fichiers CSS ou JS</li>
</ul>
<p>Mais de nombreux autres sont disponibles via la <a href="https://www.11ty.dev/docs/plugins/#community-contributed-plugins">communauté 11ty</a> et dans le tas j'en ai déjà choisi quelques uns (et c'est sûrement pas les derniers puisque je lorgne sur quelques autres) :</p>
<ul>
<li><a href="https://github.com/gfscott/eleventy-plugin-embed-everything">Embed everything</a> pour générer de belles <em>iframes</em> pour vos média externes (Youtube, Vimeo, Spotify, etc) en ne mettant que le lien du média dans vos billets</li>
<li><a href="https://github.com/JKC-Codes/eleventy-plugin-time-to-read">Time to read</a> qui va calculer le temps de lecture de vos billets et vous permettre de l'afficher comme il vous plait</li>
<li><a href="https://github.com/thigoap/eleventy-plugin-reader-bar">Reader bar</a> qui va permettre de rajouter une barre d'avancement de lecture (purement cosmétique)</li>
<li><a href="https://github.com/patrickxchong/eleventy-plugin-svg-sprite/">SVG Sprite</a> pour générer un sprite SVG et faciliter son utlisation</li>
</ul>
L’autre, ce sac à merde2023-03-27T00:00:00Zhttps://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/<p>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 ?</p>
<h2 id="les-autres-sont-des-cons" tabindex="-1">Les autres sont des cons. <a class="header-anchor" href="https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/">#</a></h2>
<p>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 ?<br>
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 !</p>
<p>Loin de nous l’idée même de remettre la parole de notre proche en question. C’est vrai, pourquoi le ferions-nous ?</p>
<p>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.</p>
<p>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 ?</p>
<h2 id="les-autres-c-est-nous" tabindex="-1">Les autres c’est nous. <a class="header-anchor" href="https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/">#</a></h2>
<p>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.</p>
<p>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.</p>
<p>Forcément, du point de vue de l’autre, tout est aussi vrai pour nous.</p>
<p>Et là vous allez me dire…
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/v4TA5RtKYq-400.avif 400w, https://blog.foojin.com/img/v4TA5RtKYq-812.avif 812w, https://blog.foojin.com/img/v4TA5RtKYq-1170.avif 1170w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/v4TA5RtKYq-400.webp 400w, https://blog.foojin.com/img/v4TA5RtKYq-812.webp 812w, https://blog.foojin.com/img/v4TA5RtKYq-1170.webp 1170w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/v4TA5RtKYq-400.jpeg 400w, https://blog.foojin.com/img/v4TA5RtKYq-812.jpeg 812w, https://blog.foojin.com/img/v4TA5RtKYq-1170.jpeg 1170w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Waouh, tellement de manichéisme, très binaire" loading="lazy" decoding="async" src="https://blog.foojin.com/img/v4TA5RtKYq-400.jpeg" width="1170" height="1170"></picture>
Et vous auriez raison ma foi.</p>
<h2 id="les-autres-c-est-pas-forcement-des-cons" tabindex="-1">Les autres c’est pas forcément des cons <a class="header-anchor" href="https://blog.foojin.com/2023/03/27/lautre-ce-sac-a-merde/">#</a></h2>
<p>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.</p>
<p>Ç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'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.</p>
<p>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 ?</p>
<p>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 ?</p>
<p>Tant de questions, tant de conséquences.</p>
<p>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'autre que l’on soit d’accord ou non.</p>
<p>C’est tellement compliqué d’être un animal social.</p>
<p>Finalement, c’est vrai, l’enfer c’est les autres… ces gros enfoirés.</p>
<p><em>Ce billet vous a été présenté par les pensées de douche.</em></p>
J'ai bricolé un truc open-source2023-02-22T00:00:00Zhttps://blog.foojin.com/2023/02/22/jai-bricole-un-truc/<p>Je bosse vraiment dans le développement web depuis 2007 et j'ai jamais vraiment fait un projet open-source de A à Z qui serve à quelqu'un d'autre que moi depuis tout ce temps. Mais je crois que ce temps est révolu.</p>
<p>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.</p>
<p>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.</p>
<p>Vous l'aurez compris c'est exactement ce qu'il m'est arrivé. Avec mon groupe de JdR on a récemment changé de jeu et on est passé à <strong>Warhammer Fantasy Role Play</strong> (à ne pas confondre avec Warhammer 40K ou Warhammer Fantasy qui sont des jeux de batailles avec des figurines, là on parle d'un jeu de rôle papier ou sur table). Mais l'offre de solution numérique s'arrêtait à un vulgaire PDF éditable.</p>
<p>C'était pas assez pour bibi.</p>
<h2 id="la-genese-du-projet" tabindex="-1">La genèse du projet <a class="header-anchor" href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/">#</a></h2>
<p>J'ai alors d'abord commencé à réfléchir le truc, comment ça se présenterait, quelles technologies, quelle fonctionnalités, etc.</p>
<p>Puis je suis vite arrivé à la conclusion qu'une fiche de personnage de jeu de rôle ce n'était finalement rien d'autre qu'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.</p>
<p>Alors je me suis dit… Et pourquoi pas ?</p>
<p>Et pourquoi je me lancerais pas dans ce petit projet qui j'en suis sûr servirait à d'autres personnes de part le monde ?</p>
<p>Du coup je l'ai fait !</p>
<h2 id="choix-techniques" tabindex="-1">Choix techniques <a class="header-anchor" href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/">#</a></h2>
<p>Je suis développeur front donc j'ai d'entrée évincé toute notion de backend. Ce serait un projet uniquement front.</p>
<h3 id="base-de-donnee" tabindex="-1">Base de donnée <a class="header-anchor" href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/">#</a></h3>
<p>Mais il me fallait malgré tout une base de donnée pour stocker toutes les valeurs des champs du formulaire. J'ai du coup opter pour du <strong>localStorage</strong> pour plusieurs raisons :</p>
<ul>
<li>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.</li>
<li>Je ne voulais pas avoir à gérer des mis à jour de sécurité d'une base de données backend et tous les potentiels hacks qui pourraient subvenir.</li>
<li>Je n'avais pas l'intention de prendre un hébergment dédié pour l'app. J'avais déjà décidé que ça se passerait sur Github.io directement depuis le repository git</li>
</ul>
<p>Alors pourquoi localStorage plutôt que IndexedDB ou autres ? J'ai honnêtement longuement hésité entre ces deux-là. J'ai choisi le premier pour sa simplicité d'utilisation mais je ne me ferme pas l'idée de migrer vers IndexedDB si le besoin technique se fait ressentir.</p>
<h3 id="hebergement" tabindex="-1">Hébergement <a class="header-anchor" href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/">#</a></h3>
<p>Comme dit plus haut, j'avais l'intention de base de faire un repo open-source de l'app et directement l'héberger sur Github Pages, histoire de faire direct et simple (au final c'é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'ai même pas envie de savoir faire.</p>
<h3 id="technologies" tabindex="-1">Technologies <a class="header-anchor" href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/">#</a></h3>
<p>Forcément si on parle de front uniquement ce serait du HTML/CSS/JS. Mais est-ce que j'utilise un système de templating pour HTML du genre Handlebars ? Est-ce que j'utilise un pré ou post-procésseur CSS comme Sass ? Est-ce que j'utilise un Framework JS pour monter tout ça comme ReactJS ?</p>
<p>Les réponses à ces questions étaient : Non. À chacune d'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.</p>
<h3 id="fonctionnalites" tabindex="-1">Fonctionnalités <a class="header-anchor" href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/">#</a></h3>
<p>Ce que je voulais à minima c'était que les champs qui sont des duplicatas d'autres champs soient gérés automatiquement et que les champs qui sont le résultat d'addition de plusieurs autres champs soient remplis aussi automatiquement.</p>
<p>Puis les potes du club de JdR m'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'on doit améliorer si l'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'app.
Puis ils m'ont dit aussi que ce serait cool si l'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'objet limité.</p>
<p>Ça faisait déjà deux nouvelles fonctionnalités.</p>
<p>Ensuite personnellement je voulais faire deux thèmes différents : Un clair et un foncé (ou ce qu'on appelle plus allègrement le Dark mode).</p>
<p>Évidemment je voulais que ce soit un minimum responsive, la base quoi.</p>
<p>Et pour le challenge, mais aussi pour la sécurité, je voulais qu'on puisse exporter puis importer les données, que ce soit pour faire une sauvegarde (le localStorage c'est pas fiable à 100%) ou pour un transfert sur un autre device.</p>
<p>Ensuite j'ai pensé à faire un partage par URL de la fiche, en mettant les données dans des queryStrings.</p>
<p>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'i18n.</p>
<p>Voilà j'avais ma liste de fonctionnalités de départ.</p>
<h2 id="developpement" tabindex="-1">Développement <a class="header-anchor" href="https://blog.foojin.com/2023/02/22/jai-bricole-un-truc/">#</a></h2>
<p>En 2-3 semaines j'ai beaucoup tatonné mais j'arrivais globalement à mes fins. Toutes mes fins? Non…</p>
<p>Il s'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'URL et ils sont loin d'être égaux. Certains sont à 60 000 caractères, d'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.</p>
<p>J'ai donc dû abandonné cette fonctionnalité. En tout cas telle quelle. Peut être que j'y reviendrai mais différemment plus tard.</p>
<p>Puis je suis passé à l'i18n qui quand on veut faire du statique s'avère un brin plus compliqué que prévu.</p>
<p>J'ai dû abandonner l'idée de faire sans dépendance et après moult recherches je me suis arrêté sur <a href="https://www.11ty.dev/">11ty</a> qui semblait plus qu'à propos pour faire du statique. Dépendance qui aura le mérite de n'exister que pour builder l'app, alors ça va je le vis bien.</p>
<p>Par contre, déployer tout ça sur Github Pages quand on a un builder, c'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'avais au début. J'ai dû me familiariser avec les Github Actions pour régler ça, non sans mal. Mais c'est passé !</p>
<p>J'ai globalement construit ça au mieux, aussi bien que je savais le faire.</p>
<p>Et je suis vraiment satisfait du résultat. Rien que de voir les données de performance ça me laisse en joie.
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/33hu7rHdEv-400.avif 400w, https://blog.foojin.com/img/33hu7rHdEv-812.avif 812w, https://blog.foojin.com/img/33hu7rHdEv-1400.avif 1400w, https://blog.foojin.com/img/33hu7rHdEv-1606.avif 1606w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/33hu7rHdEv-400.webp 400w, https://blog.foojin.com/img/33hu7rHdEv-812.webp 812w, https://blog.foojin.com/img/33hu7rHdEv-1400.webp 1400w, https://blog.foojin.com/img/33hu7rHdEv-1606.webp 1606w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/33hu7rHdEv-400.png 400w, https://blog.foojin.com/img/33hu7rHdEv-812.png 812w, https://blog.foojin.com/img/33hu7rHdEv-1400.png 1400w, https://blog.foojin.com/img/33hu7rHdEv-1606.png 1606w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/33hu7rHdEv-400.png" width="1606" height="572"></picture></p>
<ul>
<li>moins de 10 requêtes HTTP</li>
<li>~140 Ko tout compris</li>
<li>~37Ko une fois Gzippé</li>
</ul>
<p>Alors je dis pas que l'app est parfaite, faut encore la tester à plus grande échelle que juste moi, il y a sûrement des axes d'améliorations et j'ai déjà des nouvelles fonctionnalités dans les tuyaux.
Mais c'est là, ça marche et c'est disponible pour qui souhaite l'utiliser.</p>
<p>Le repo est sur <a href="https://github.com/GoOz/wfrp-sheet">Github</a> et l'app disponible sur <a href="https://gooz.github.io/wfrp-sheet/#en">Github Pages</a> !</p>
<p>Je tiens à remercier certaines personnes pour leurs coups de mains et conseils.
Notamment les gens cools de ##openweb@Libera.Chat sur IRC comme <a href="https://indieweb.social/@anthony">Anthony</a> ou <a href="https://pouet.chapril.org/@julienw">Julien</a>, mais aussi les copains du web comme <a href="https://mamot.fr/@ryuran">Yvain</a> et <a href="https://mamot.fr/@nhoizey">Nicolas</a> et puis enfin Raf pour la QA bénévole.</p>
<p>Voilà c'est tout pour moi.</p>
Faire du CSS dynamique avec JavaScript mais en mieux avec CSS custom properties2022-12-20T00:00:00Zhttps://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/<p>CSS c'est cool, JavaScript c'est cool. Mais mettre à jour du CSS avec du JS ça sous-entend de faire du CSS inline et ça c'est pas cool. Le truc c'est que JS ne sait pas vraiment faire autre chose que ça, à moins que…</p>
<p>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'est possible c'est encore ce qu'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 "<em>à la volée</em>".</p>
<p>Mettons que sur mon site ou ma webapp j'utilise un composant d'avatar qui affiche par défaut les initiales de l'utilisateur et que, parce que je veux que ce soit sympa, je veux que le <code>background-color</code> de ce composant soit calculé en fonction des lettres de ces initiales afin d'être un brin plus personnalisé. Ça a l'air un peu con comme exemple mais j'ai déjà fait ça et c'est vrai que ça rend bien.</p>
<p>D'abord fabriquons la base du composant.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>JC<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.avatar</span> <span class="token punctuation">{</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span><br> <span class="token property">margin</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span><br> <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span><br> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> lightgrey<span class="token punctuation">;</span><br> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br> <span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<iframe title="Composant de base" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>.avatar{width:2em;height:2em;margin:.25em;display:inline-flex;align-items:center;justify-content:center;background:lightgrey;border-radius:50%;font-size:2em;color:black}</style><body><div class=avatar>JC</div><script></script>" frameborder="0" width="100%"></iframe>
<p>Et voilà !</p>
<p>Maintenant ajoutons donc notre JS pour changer ce <code>background-color</code> en fonction des initiales…<br>
En l'occurrence j'ai choisi de jouer avec du <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Values_and_units#valeurs_hsl_et_hsla">HSL</a> 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'accessibilité.</p>
<pre class="language-js" tabindex="0"><code class="language-js"><span class="token comment">// Fonction honteusement pompée sur</span><br><span class="token comment">// https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37</span><br><span class="token keyword">function</span> <span class="token function">hue</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span>str <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> hash <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span><br> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> str<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> hash <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>hash <span class="token operator"><<</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">-</span> hash<span class="token punctuation">)</span><span class="token punctuation">;</span><br> hash <span class="token operator">=</span> hash <span class="token operator">&</span> hash<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token keyword">return</span> hash <span class="token operator">%</span> <span class="token number">360</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token comment">// On va récupérer tous les avatars de la page qui sont personnalisés</span><br><span class="token keyword">const</span> avatars <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".avatar"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Et on va calculer la valeur du hue pour chacun d'entre eux</span><br><span class="token comment">// et le mettre sur un background-color dans du CSS inline</span><br>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>avatars<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> element<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">hsl(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">hue</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,85%,90%)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<iframe title="Composants avec background-color personnalisé" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>.avatar{width:2em;height:2em;margin:.25em;display:inline-flex;align-items:center;justify-content:center;background:lightgrey;border-radius:50%;font-size:2em;color:black}</style><body><div class=avatar>JC</div><div class=avatar>YL</div><div class=avatar>CR</div><div class=avatar>SD</div><script>function hue(a){if(a===null)return;let c=0;for(var b=0;b<a.length;b++){c=a.charCodeAt(b)+ ((c<<5)- c);c=c&c};return c%360}const avatars=document.querySelectorAll(".avatar");Array.from(avatars).forEach(a=>{a.style.backgroundColor=`hsl(${hue(a.innerText)},85%,90%)`})</script>" frameborder="0" width="100%"></iframe>
<p>Ça marche bien, par contre on se retrouve avec du style inline ce qui en plus d'être indiscutablement moche (je suis évidemment objectif 🙃) devient aussi compliqué à surcharger. À part écrire directement par dessus, il ne reste que l'option <code>!important</code> ce qui est encore plus moche, indiscutablement toujours.
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/5g3XZwgB-s-400.avif 400w, https://blog.foojin.com/img/5g3XZwgB-s-812.avif 812w, https://blog.foojin.com/img/5g3XZwgB-s-1172.avif 1172w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/5g3XZwgB-s-400.webp 400w, https://blog.foojin.com/img/5g3XZwgB-s-812.webp 812w, https://blog.foojin.com/img/5g3XZwgB-s-1172.webp 1172w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/5g3XZwgB-s-400.png 400w, https://blog.foojin.com/img/5g3XZwgB-s-812.png 812w, https://blog.foojin.com/img/5g3XZwgB-s-1172.png 1172w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Image du DOM après modification du JS" loading="lazy" decoding="async" src="https://blog.foojin.com/img/5g3XZwgB-s-400.png" width="1172" height="127"></picture></p>
<div class="notabene">
Oui les navigateurs traduisent le HSL (entre autres) en RGB. C'est un truc qu'ils font apparemment, je sais pas trop pourquoi mais ça change pas grand chose pour nous ici.
</div>
<p><strong>MAIS !</strong></p>
<p>Il existe un petit nouveau plus si nouveau que ça dans le gang CSS : Les <strong>CSS custom properties</strong> !</p>
<p>Reprenons un peu alors notre code.</p>
<p>Pas de changement sur le HTML.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>JC<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Pour le CSS, on va se reposer désormais sur une CSS custom property pour le <code>background-color</code>.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.avatar</span> <span class="token punctuation">{</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span><br> <span class="token property">margin</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span><br> <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span><br> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--avatar-background-hue<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">,</span> 85%<span class="token punctuation">,</span> 90%<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br> <span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>La notation <code>background-color: hsl(var(--avatar-background-hue, 0), 85%, 90%)</code> se traduit comme ceci : Je veux que le <code>background-color</code> de mon élément soit une couleur HSL avec comme valeur de hue la valeur de ma propriété CSS <code>--avatar-background-hue</code> si elle existe, sinon ben tu lui mets une valeur de 0 en guise de filet de sécurité.</p>
<p>Puis pour le JS, on va juste adapter un peu ce qui sera envoyé au DOM.</p>
<pre class="language-js" tabindex="0"><code class="language-js"><span class="token comment">// Fonction honteusement pompée sur</span><br><span class="token comment">// https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37</span><br><span class="token keyword">function</span> <span class="token function">hue</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span>str <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span><br> <span class="token keyword">let</span> hash <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span><br> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> str<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> hash <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>hash <span class="token operator"><<</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">-</span> hash<span class="token punctuation">)</span><span class="token punctuation">;</span><br> hash <span class="token operator">=</span> hash <span class="token operator">&</span> hash<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token keyword">return</span> hash <span class="token operator">%</span> <span class="token number">360</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token comment">// On va récupérer tous les avatars de la page qui sont personnalisés</span><br><span class="token keyword">const</span> avatars <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".avatar"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Et on va calculer la valeur du hue pour chacun d'entre eux</span><br><span class="token comment">// et le mettre dans une CSS custom property</span><br>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>avatars<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> element<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><br> <span class="token string">"--avatar-background-hue"</span><span class="token punctuation">,</span><br> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">hue</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<iframe title="Composants avec background-color personnalisé via CSS custom properties" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>.avatar{width:2em;height:2em;margin:.25em;display:inline-flex;align-items:center;justify-content:center;background:hsl(var(--avatar-background-hue,0),85%,90%);border-radius:50%;font-size:2em;color:black}</style><body><div class=avatar>JC</div><div class=avatar>YL</div><div class=avatar>CR</div><div class=avatar>SD</div><script>function hue(a){if(a===null)return;let c=0;for(var b=0;b<a.length;b++){c=a.charCodeAt(b)+ ((c<<5)- c);c=c&c};return c%360}const avatars=document.querySelectorAll(".avatar");Array.from(avatars).forEach(a=>{a.style.setProperty("--avatar-background-hue",`${hue(a.innerText)}`)})</script>" frameborder="0" width="100%"></iframe>
<p>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.</p>
<p>Et puis franchement c'est plus beau à voir, indiscutablement toujours.
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/5Tug-UaO9v-400.avif 400w, https://blog.foojin.com/img/5Tug-UaO9v-812.avif 812w, https://blog.foojin.com/img/5Tug-UaO9v-1074.avif 1074w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/5Tug-UaO9v-400.webp 400w, https://blog.foojin.com/img/5Tug-UaO9v-812.webp 812w, https://blog.foojin.com/img/5Tug-UaO9v-1074.webp 1074w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/5Tug-UaO9v-400.png 400w, https://blog.foojin.com/img/5Tug-UaO9v-812.png 812w, https://blog.foojin.com/img/5Tug-UaO9v-1074.png 1074w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Image du DOM après modification du JS" loading="lazy" decoding="async" src="https://blog.foojin.com/img/5Tug-UaO9v-400.png" width="1074" height="134"></picture></p>
<script src="https://blog.foojin.com/2022/12/20/faire-du-css-dynamique-avec-javascript-mais-en-mieux/"></script>
SVG + CSS = ❤️2022-12-13T00:00:00Zhttps://blog.foojin.com/2022/12/13/svg-css/<p>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'il peut interagir avec CSS et ça c'est vraiment cool ! ❤️</p>
<p>Mais le sujet est un poil long et complexe alors accrochez-vous</p>
<h2 id="les-differentes-methodes-de-chargement" tabindex="-1">Les différentes méthodes de chargement <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h2>
<p>Avant d'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.</p>
<p>À vrai dire il n'existe pas de méthode parfaite, en fait chacune d'entre elles a ses avantages et inconvénients et vous devrez choisir à chaque fois ce qui correspond le mieux à vos besoins.</p>
<h3 id="la-balise-img" tabindex="-1">La balise <code>img</code> <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>Vous la connaissez déjà, plus besoin de la présenter, il s'agit de la très célèbre balise <code>img</code> qui sert, comme son nom l'indique à intégrer une image à votre page web.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svg/mon-super-svg.svg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mon texte alternatif<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>
<p>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 <code>iframe</code> dont le contenu n'hériterait de quoique ce soit de la page qui l'appelle.</p>
<p>Vous ne pourrez lui appliquer comme CSS que ce que vous pouvez déjà appliquer à une image dite "classique", c'est à dire des filtres et autres transformations mais ça s'arrêtera à peu près là.</p>
<h3 id="la-propriete-css-background-image" tabindex="-1">La propriété CSS <code>background-image</code> <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>C'est la petite cousine de <code>img</code> mais pour CSS.</p>
<p>De la même manière elle va être encapsulé et coupé du reste du document.</p>
<p>Les petites nuances étant qu'elle n'est pas dans le DOM donc elle ne devra servir qu'à des fins décoratives, mais aussi que vous aurez probablement besoin d'y rajouter quelques petites choses supplémentaires comme les propriétés <a href="https://developer.mozilla.org/fr/docs/Web/CSS/background-repeat">background-repeat</a> et <a href="https://developer.mozilla.org/fr/docs/Web/CSS/background-size">background-size</a>.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.mon-super-element</span> <span class="token punctuation">{</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 10rem<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span><br> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../svg/mon-super-svg.svg"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span><br> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span><br> <span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="le-inlined-svg" tabindex="-1">Le Inlined SVG <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>C'est là qu'on va commencer à pouvoir s'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.</p>
<p>Vous allez donc pouvoir directement intégrer ce SVG dans votre DOM sans avoir besoin d'artifice et interagir avec très simplement.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 200 200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span><br> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><br> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><br> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><br> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><br> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span><br> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grey<span class="token punctuation">"</span></span><br> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></code></pre>
<p>Alors là, pour mon exemple, j'ai utilisé un SVG simple qui est donc très léger mais imaginez un instant un SVG d'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 <strong>ÉNORME</strong> SVG).</p>
<h3 id="les-symbol-svg" tabindex="-1">Les <code>symbol</code> SVG <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>Si vous avez déjà mis le nez dans du code SVG vous êtes très probablement déjà tombé sur la balise <code><use /></code> (propre à SVG) et vous avez peut être alors compris que c'était une manière de rappeler des formes déjà existantes. C'est franchement pratique en plus d'être puissant.</p>
<p>C'est en fait tout le principe du sprite SVG. Vous n'avez qu'à charger une fois un seul SVG, que ce soit un appel vers un fichier externe ou directement inline, comprenant différents <code>symbol</code> et ensuite vous pourrez les appeler à volonté à différents endroits de votre page sans ajouter de poids à celle-ci.</p>
<p>En très bref, la balise <code><use /></code> va aller dire au navigateur qu'elle a besoin de tel <code>symbol</code> avec telle <code>id</code> à tel endroit et ce dernier ira comme faire un lien virtuel ramenant alors cette forme à l'endroit souhaité en tant que duplicata fantôme (c'est à dire qui n'existe pas vraiment en définitive).</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token comment"><!-- SVG directement via un appel externe --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svg/mon-super-svg.svg#marker<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- SVG inline --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>symbol</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 200 200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span><br> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><br> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><br> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><br> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><br> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span><br> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grey<span class="token punctuation">"</span></span><br> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>symbol</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br><br><span class="token comment"><!-- Plus loin dans le DOM --></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>use</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#marker<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p>On pourrait très naturellement se dire que cette méthode est bonne pour les performances de votre site et en soi ce n'est pas complètement faux. Sauf que si c'est fait de manière un peu globale et sans faire attention ça peut avoir l'effet inverse.</p>
<p>Mettons que vous ayez un sprite de 100 <code>symbol</code> ce qui est loin d'être impossible pour un sprite de jeu d'icônes par exemple, mais que sur une page vous n'utilisez que 2 ou 3 icônes, vous allez donc charger toutes les autres pour rien. Et ça c'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.</p>
<p>Donc faites attention. ;)</p>
<h3 id="la-balise-object" tabindex="-1">La balise <code>object</code> <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>Pour les plus vieux d'entre vous, vous vous souvenez peut être d'elle parce que c'était un bon moyen, sinon le meilleur, de charger des applets de feue <strong>Flash</strong> sur une page web.</p>
<p>Mais force est d'avouer qu'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.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>object</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/svg+xml<span class="token punctuation">"</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svg/mon-super-svg.svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Mon texte alternatif<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>object</span><span class="token punctuation">></span></span></code></pre>
<p>Et là je vous vois venir avec vos "Mais c'est comme la balise <code>img</code> en fait ?".</p>
<p>Et bien non ! C'est encore mieux… pour peu que vous en ayez vraiment l'utilité.</p>
<p>Ce que je ne vous ai pas dit au tout début c'est qu'un SVG peut aussi contenir son propre CSS ou son propre JavaScript sauf que si vous chargez votre SVG depuis une balise <code>img</code> et bien vous ne verrez que la première frame de ce SVG.<br>
En d'autres termes si vous aviez une animation CSS dans ce SVG seul l'<strong>état 0</strong> ou la première frame de l'animation sera affichée et aucune animation ne se fera.</p>
<p>Ce qui ne sera pas le cas si vous chargez votre SVG via une balise <code>object</code>. Tout le CSS ainsi que le JavaScript à l'intérieur de ce dernier sera interprété et effectif.</p>
<h3 id="les-data-uri" tabindex="-1">Les Data URI <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>Ceci est un cas un peu particulier puisqu'il ne s'agit pas à proprement parler de méthode de chargement mais plutôt de nature de SVG.</p>
<p>Normalement, quand vous chargez un SVG via une balise <code>img</code> vous devez fournir à l'attribut <code>src</code> un chemin relatif ou absolu vers un fichier binaire avec une extension… sauf que c'est pas du tout obligatoire.</p>
<p>Vous pouvez très bien fournir à la balise un SVG <strong>directement</strong> mais pour ce faire vous devez transformez un peu ce dernier en l'encodant avec un <a href="https://yoksel.github.io/url-encoder/">URL-encoder</a> ou un base64-encoder mais le base64 serait déconseillé pour les SVG puisqu'il a tendance à rendre le fichier un poil plus lourd.</p>
<p>De toute évidence pas si évidente si vous pouvez faire ça avec une balise <code>img</code>, vous pourrez faire ça aussi avec un <code>background-image</code> CSS ou encore la balise <code>object</code>.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data:image/svg+xml,%3Csvg […]<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mon text alternatif<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.mon-super-element</span> <span class="token punctuation">{</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 10rem<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span><br> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"data:image/svg+xml,%3Csvg […]"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span><br> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span><br> <span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>object</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/svg+xml<span class="token punctuation">"</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data:image/svg+xml,%3Csvg […]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> Mon texte alternatif<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>object</span><span class="token punctuation">></span></span></code></pre>
<p>Ce que vous pourrez faire avec ce SVG dépendra surtout de la méthode de chargement choisie évidemment.</p>
<h3 id="les-avantages-et-inconvenients" tabindex="-1">Les avantages et inconvénients <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>J'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 :</p>
<ul>
<li>Est-ce <strong>les requêtes HTTP supplémentaires</strong> pour aller chercher vos SVG sont ok pour vous ?</li>
<li>Est-ce que un <strong>DOM trop chargé et donc le poids de la page HTML ou des fichiers CSS</strong> est un sujet important pour vous</li>
<li>Est-ce que vous voulez tirer profit de <strong>styles et/ou JavaScript embarqués dans le SVG</strong> ?</li>
<li>Est-ce que vous souhaitez pouvoir <strong>interagir directement avec les formes de votre SVG depuis les styles et/ou le JavaScript de votre page</strong> ?</li>
<li>Est-ce que au contraire, je veux juste <strong>charger un SVG simple sans rien y changer comme une image bitmap</strong> ?</li>
</ul>
<div class="notabene">
Si vous décidez de charger un SVG contenant du JS via un appel externe (`img`, `object`, etc) il vaut mieux qu'il vienne du même domaine que la page. Pour des raisons de sécurité, il me semble que certains navigateurs pourraient bloquer l'interprétation du JS (à prendre avec des pincettes car je ne suis sûr de rien à ce sujet).
</div>
<p>Pour vous aider à peut être y voir un poil plus clair voici ci-dessous un tableau récapitulatif.</p>
<table class="table-compare" style="text-align: center;">
<thead>
<tr>
<td></td>
<th><code>img</code></th>
<th>bg-image</th>
<th>Inlined</th>
<th>Symbols</th>
<th><code>object</code></th>
<th>Data URI</th>
</tr>
</thead>
<tbody>
<tr>
<th>Requête HTTP</th>
<td>✅ oui</td>
<td>✅ oui</td>
<td>❌ non</td>
<td>✅ non avec SVG externe<br>❌ oui avec SVG inline</td>
<td>✅ oui</td>
<td>❌ non</td>
</tr>
<tr>
<th>Alourdi DOM et/ou CSS</th>
<td>❌ non</td>
<td>❌ non</td>
<td>✅ oui</td>
<td>❌ non avec SVG externe<br>✅ oui avec SVG inline</td>
<td>❌ non</td>
<td>✅ oui</td>
</tr>
<tr>
<th>Coupé du DOM</th>
<td>✅ oui</td>
<td>✅ oui</td>
<td>❌ non</td>
<td>❌ non avec SVG externe<br>❌ non avec SVG inline</td>
<td>✅ oui</td>
<td>✅ oui</td>
</tr>
<tr>
<th>Avoir ses propres CSS et <abbr title="JavaScript">JS</abbr></th>
<td>❌ non</td>
<td>❌ non</td>
<td>✅ oui</td>
<td>✅ oui avec SVG externe<br>✅ oui avec SVG inline</td>
<td>✅ oui</td>
<td>❌ non</td>
</tr>
<tr>
<th>Document interagit avec</th>
<td>❌ non</td>
<td>❌ non</td>
<td>✅ oui</td>
<td>✅ oui avec SVG externe<br>✅ oui avec SVG inline</td>
<td>❌ non</td>
<td>❌ non</td>
</tr>
</tbody>
</table>
<p>Comme vous pouvez mieux le voir, aucune méthode n'est vraiment parfaite, alors choisissez bien.</p>
<p>Maintenant que vous connaissez toutes les bases nécessaires on va pouvoir passer aux choses sérieuses.</p>
<h2 id="interagir-avec-un-svg-depuis-le-document" tabindex="-1">Interagir avec un SVG depuis le document <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h2>
<div class="notabene">
Tout ce qui va suivre ne sera possible que si votre SVG est inlined avec ou sans symbol.
</div>
<h3 id="les-proprietes-css-pour-svg" tabindex="-1">Les propriétés CSS pour SVG <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>Comme SVG est basé sur XML, CSS a tout le loisir du monde pour sélectionner des éléments du SVG qui s'avèrent être aussi des formes. De fait on peut s'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…)<br>
Commençons par faire quelques tracés vectoriels simple avec SVG.</p>
<pre class="language-xml" tabindex="0"><code class="language-xml"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#ffc09f<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transparent<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#ffee93<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transparent<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ellipse</span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">rx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">ry</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#fcf5c7<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transparent<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span> <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">y1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">y2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#a0ced9<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>polyline</span> <span class="token attr-name">points</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10,30 60,50 90,75 60,100 90<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#adf7b6<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>polygon</span> <span class="token attr-name">points</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70,80 10,90 70, 5 90, 10<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#eac4d5<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transparent<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>defs</span><span class="token punctuation">></span></span><br> <span class="token comment"><!-- Pattern courtesy of https://iros.github.io/patternfills/ --></span><br> <span class="token comment"><!-- Pattern qui ne sera pas visible sauf si on l'appelle directement --></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pattern</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pattern-1<span class="token punctuation">"</span></span> <span class="token attr-name">patternUnits</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userSpaceOnUse<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span><br> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+<span class="token punctuation">"</span></span><br> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pattern</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span><br> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M 10,30<br> A 20,20 0,0,1 50,30<br> A 20,20 0,0,1 90,30<br> Q 90,60 50,90<br> Q 10,60 10,30 z<span class="token punctuation">"</span></span><br> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#e8d1c5<span class="token punctuation">"</span></span><br> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><br> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transparent<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p>Ce qui nous donnerait ça.</p>
<iframe title="Formes SVG de départ" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>svg{width:8rem;height:8rem}</style><body><svg><rect fill=transparent height=100 stroke=#ffc09f stroke-width=5 width=100 x=10 y=10 /></svg><svg><circle cx=60 cy=60 fill=transparent r=50 stroke=#ffee93 stroke-width=5 /></svg><svg><ellipse cx=60 cy=60 fill=transparent rx=40 ry=25 stroke=#fcf5c7 stroke-width=5 /></svg><svg><line stroke=#a0ced9 stroke-width=5 x1=10 x2=100 y1=10 y2=100 /></svg><svg><polyline points="10,30 60,50 90,75 60,100 90"fill=none stroke=#adf7b6 stroke-width=5 /></svg><svg><polygon points="70,80 10,90 70, 5 90, 10"fill=transparent stroke=#eac4d5 stroke-width=5 /></svg><svg><defs><pattern height=10 id=pattern-1 patternunits=userSpaceOnUse width=10><image height=10 width=10 x=0 xlink:href=data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+ y=0></image></pattern></defs><path d="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"fill=transparent stroke=#e8d1c5 stroke-width=5 /></svg><script></script>" frameborder="0" width="100%"></iframe>
<p>Alors que peut-on changer sur un SVG avec du CSS ? Beaucoup de choses comme vous pouvez le voir sur <a href="https://www.w3.org/TR/SVG/propidx.html">cette spec W3C</a> mais vous pourrez remarquer que c'est tout de même peu comparé à tout ce que CSS peut offrir.</p>
<p>Mais essayons de passer en revue quelques uns des plus intéressants pour les SVG.</p>
<p>Par exemple, voyons l'impact de ces quelques propriétés sur nos SVG.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">rect</span> <span class="token punctuation">{</span><br> <span class="token comment">/* Change la couleur du tracé */</span><br> <span class="token property">stroke</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">circle</span> <span class="token punctuation">{</span><br> <span class="token comment">/* Rempli d'une couleur l'intérieur du tracé */</span><br> <span class="token property">fill</span><span class="token punctuation">:</span> teal<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">ellipse</span> <span class="token punctuation">{</span><br> <span class="token comment">/* Change l'épaisseur du tracé */</span><br> <span class="token property">stroke-width</span><span class="token punctuation">:</span> 8<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">line</span> <span class="token punctuation">{</span><br> <span class="token comment">/* Change la rendu du tracé */</span><br> <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 2 4% 5<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">polyline</span> <span class="token punctuation">{</span><br> <span class="token property">fill</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span><br> <span class="token property">stroke-width</span><span class="token punctuation">:</span> 8<span class="token punctuation">;</span><br> <span class="token comment">/* Change le bout du tracé */</span><br> <span class="token property">stroke-linecap</span><span class="token punctuation">:</span> round<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">polygon</span> <span class="token punctuation">{</span><br> <span class="token property">fill</span><span class="token punctuation">:</span> rebeccapurple<span class="token punctuation">;</span><br> <span class="token comment">/* Au lieu de changer la couleur d'un tracé<br> vous pouvez aussi lui attribuer un pattern */</span><br> <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>#pattern<span class="token punctuation">)</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">path</span> <span class="token punctuation">{</span><br> <span class="token comment">/* Vous pouvez vous amusez en changeant plusieurs<br> propriétés en même temps */</span><br> <span class="token property">stroke</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span><br> <span class="token property">fill</span><span class="token punctuation">:</span> teal<span class="token punctuation">;</span><br> <span class="token property">stroke-width</span><span class="token punctuation">:</span> 8<span class="token punctuation">;</span><br> <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 2 4% 5<span class="token punctuation">;</span><br> <span class="token property">stroke-linecap</span><span class="token punctuation">:</span> round<span class="token punctuation">;</span><br> <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>#pattern<span class="token punctuation">)</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<iframe title="Formes SVG stylées" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>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:url(#pattern);fill:teal;stroke-width:8;stroke-dasharray:2 4% 5;stroke-linecap:round}</style><body><svg><rect fill=transparent height=100 stroke=#ffc09f stroke-width=5 width=100 x=10 y=10 /></svg><svg><circle cx=60 cy=60 fill=transparent r=50 stroke=#ffee93 stroke-width=5 /></svg><svg><ellipse cx=60 cy=60 fill=transparent rx=40 ry=25 stroke=#fcf5c7 stroke-width=5 /></svg><svg><line stroke=#a0ced9 stroke-width=5 x1=10 x2=100 y1=10 y2=100 /></svg><svg><polyline points="10,30 60,50 90,75 60,100 90"fill=none stroke=#adf7b6 stroke-width=5 /></svg><svg><polygon points="70,80 10,90 70, 5 90, 10"fill=transparent stroke=#eac4d5 stroke-width=5 /></svg><svg><defs><pattern height=10 id=pattern patternunits=userSpaceOnUse width=10><image height=10 width=10 x=0 xlink:href=data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdibGFjaycgLz4KPC9zdmc+ y=0></image></pattern></defs><path d="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"fill=transparent stroke=#e8d1c5 stroke-width=5 /></svg><script></script>" frameborder="0" width="100%"></iframe>
<p>Un petit détail aura peut être attiré votre attention ici. Pourquoi donc l'exemple <code>polyline</code> a une couleur à l'intérieur du tracé ? Comme si ce dernier avait un tracé fermé comme un <code>polygon</code> ?</p>
<p>Et bien la raison est simple : c'est parce que c'est effectivemet un tracé fermé.<br>
En fait la différence principale entre un <code>polyline</code> et <code>polygon</code>, au delà du nom, est que <code>polygon</code> fermera le tracé <strong>mais</strong> fera un segment <code>stroke</code> entre le premier et dernier point en plus. Donc dans les deux cas, le tracé est fermé et peut avoir un <code>fill</code> remplir son office.</p>
<p>J'en conviens ce n'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.</p>
<h3 id="l-heritage-css" tabindex="-1">L'héritage CSS <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>Si notre SVG fait parti du DOM et qu'il peut interagir avec CSS alors tout naturellement on peut penser qu'il hérite de propriétés CSS comme tout bon élément HTML qui se respecte. Et c'est le cas, enfin en partie.</p>
<p>Un SVG sera exclu du box-model CSS et donc n'héritera rien qui soit lié à ce dernier. En gros notre SVG héritera surtout de tout ce qui concerne les fonts.</p>
<p>Prenons par exemple ces quelques tracés <code><text></code> propres à SVG et voyons ce qu'il se passe.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.mon-svg-text</span> <span class="token punctuation">{</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 16rem<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 8rem<span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> DarkSeaGreen<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.mon-svg-text .small</span> <span class="token punctuation">{</span><br> <span class="token property">font</span><span class="token punctuation">:</span> italic 13px sans-serif<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.mon-svg-text .heavy</span> <span class="token punctuation">{</span><br> <span class="token property">font</span><span class="token punctuation">:</span> bold 30px sans-serif<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.mon-svg-text .Rrrrr</span> <span class="token punctuation">{</span><br> <span class="token property">font</span><span class="token punctuation">:</span> italic 40px serif<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mon-svg-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>35<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>35<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heavy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>chat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>55<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>55<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>est un<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>95<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>55<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rrrrr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>enfoiré !<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<iframe title="Texte SVG" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>body{background:#fff}.mon-svg-text{width:16rem;height:8rem;color:DarkSeaGreen}.mon-svg-text .small{font:italic 13px sans-serif}.mon-svg-text .heavy{font:700 30px sans-serif}.mon-svg-text .Rrrrr{font:italic 40px serif}</style><body><svg class=mon-svg-text><text class=small x=20 y=35>Mon</text><text class=heavy x=50 y=35>chat</text><text class=small x=55 y=55>est un</text><text class=Rrrrr x=95 y=55>enfoiré !</text></svg><script></script>" frameborder="0" width="100%"></iframe>
<div class="notabene">
J'ai mis ici un fond blanc ici parce que par défaut un svg sans couleur définie est noir donc c'était mieux pour la visibilité.
</div>
<p>Comme vous pouvez le voir la forme <code>text</code> prend bien en charge toutes les propriétés CSS propres aux fonts. Toutes ? Non ! Car la couleur devrait être <code>DarkSeaGreen</code> et ce noir est tout sauf du vert d'une mer sombre.</p>
<p>Que s'est-il passé ? Est-ce que la couleur n'est pas héritée ?</p>
<p>Et bien en fait elle l'est <strong>mais</strong> <code>text</code> n'est pas du texte ou en tout cas n'est pas un text node au sens où le DOM l'entend. C'est avant tout un tracé vectoriel SVG.<br>
Le SVG reçoit bien la couleur en héritage mais n'en fait rien puisque, pour lui, ce qui donne la couleur à un SVG ce n'est pas la propriété <code>color</code> mais <code>fill</code>.</p>
<p>Et le seul moyen de récupérer la valeur de la <code>color</code> pour la doner à <code>fill</code> c'est d'utiliser le mot clé <code>currentColor</code> qui en gros ira dire au CSS d'aller chercher la valeur du <code>color</code> dont il a hérité.</p>
<p>Enfin quand je dis la seule… ça c'é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'héritage de bien d'autres propriétés.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.mon-svg-text</span> <span class="token punctuation">{</span><br> <span class="token property">--stroke-color</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 16rem<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 8rem<span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> DarkSeaGreen<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.mon-svg-text .small</span> <span class="token punctuation">{</span><br> <span class="token property">font</span><span class="token punctuation">:</span> italic 13px sans-serif<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.mon-svg-text .heavy</span> <span class="token punctuation">{</span><br> <span class="token property">font</span><span class="token punctuation">:</span> bold 30px sans-serif<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.mon-svg-text .Rrrrr</span> <span class="token punctuation">{</span><br> <span class="token property">font</span><span class="token punctuation">:</span> italic 40px serif<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">.mon-svg-text text</span> <span class="token punctuation">{</span><br> <span class="token property">fill</span><span class="token punctuation">:</span> currentColor<span class="token punctuation">;</span><br> <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--stroke-color<span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<iframe title="Texte SVG stylé" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>body{background:#fff}.mon-svg-text{--stroke-color:crimson;width:16rem;height:8rem;color:DarkSeaGreen}.mon-svg-text .small{font:italic 13px sans-serif}.mon-svg-text .heavy{font:700 30px sans-serif}.mon-svg-text .Rrrrr{font:italic 40px serif}.mon-svg-text text{fill:currentColor;stroke:var(--stroke-color)}</style><body><svg class=mon-svg-text><text class=small x=20 y=35>Mon</text><text class=heavy x=50 y=35>chat</text><text class=small x=55 y=55>est un</text><text class=Rrrrr x=95 y=55>enfoiré !</text></svg><script></script>" frameborder="0" width="100%"></iframe>
<p>Pour en savoir plus sur les propriétés CSS héritées naturellement, retournez jeter un œil à la même <a href="https://www.w3.org/TR/SVG/propidx.html">spec W3C</a> citée plus haut.</p>
<h3 id="le-clipping" tabindex="-1">Le Clipping <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>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.</p>
<p>Pour exemple, j'ai choisi un SVG d'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 <code>background-image</code>.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.area,<br>.svg</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><br> <span class="token property">max-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span><br> <span class="token property">margin</span><span class="token punctuation">:</span> 2rem auto<span class="token punctuation">;</span><br> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.lgbt</span> <span class="token punctuation">{</span><br> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><br> to bottom<span class="token punctuation">,</span><br> #e40303<span class="token punctuation">,</span><br> #e40303 16.67%<span class="token punctuation">,</span><br> #ff8c00 16.67%<span class="token punctuation">,</span><br> #ff8c00 33.33%<span class="token punctuation">,</span><br> #ffed00 33.33%<span class="token punctuation">,</span><br> #ffed00 50%<span class="token punctuation">,</span><br> #008026 50%<span class="token punctuation">,</span><br> #008026 66.67%<span class="token punctuation">,</span><br> #004dff 66.67%<span class="token punctuation">,</span><br> #004dff 83.33%<span class="token punctuation">,</span><br> #750787 83.33%<span class="token punctuation">,</span><br> #750787<br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span><br> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svg<span class="token punctuation">"</span></span><br> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span><br> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 475.528 475.528<span class="token punctuation">"</span></span><br><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span><br> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span><br> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706<br> c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953<br> C-54.844,154.658,26.437,351.092,237.376,436.245z<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>area clip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><br> Je t'adore à l'égal de la voûte nocturne,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Ô vase de tristesse, ô grande taciturne,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Et t'aime d'autant plus, belle, que tu me fuis,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Et que tu me parais, ornement de mes nuits,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Plus ironiquement accumuler les lieues<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Qui séparent mes bras des immensités bleues.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Je m'avance à l'attaque, et je grimpe aux assauts,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Comme après un cadavre un chœur de vermisseaux,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Et je chéris, ô bête implacable et cruelle !<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><br> Jusqu'à cette froideur par où tu m'es plus belle !<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>area clip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span><br> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://blog.foojin.com/content/images/size/w1000/2017/08/banner-large-bis.jpg<span class="token punctuation">"</span></span><br> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Moi-même dans mon bain.<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>area clip lgbt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<iframe title="Préparation clipping SVG" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>.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
)}</style><body><svg viewbox="0 0 475.528 475.528"class=svg xmlns=http://www.w3.org/2000/svg><path d="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"fill=red /></svg><div class="area text"><p>Je t'adore à l'égal de la voûte nocturne,<br> Ô vase de tristesse, ô grande taciturne,<br> Et t'aime d'autant plus, belle, que tu me fuis,<br> Et que tu me parais, ornement de mes nuits,<br> Plus ironiquement accumuler les lieues<br> Qui séparent mes bras des immensités bleues.<br> <br> Je m'avance à l'attaque, et je grimpe aux assauts,<br> Comme après un cadavre un chœur de vermisseaux,<br> Et je chéris, ô bête implacable et cruelle !<br> Jusqu'à cette froideur par où tu m'es plus belle !</div><div class="area img"><picture><source sizes="(min-width: 50em) 812px, 100vw"srcset="/img/wJzx8K_8T9-400.avif 400w, /img/wJzx8K_8T9-812.avif 812w, /img/wJzx8K_8T9-1000.avif 1000w"type=image/avif><source sizes="(min-width: 50em) 812px, 100vw"srcset="/img/wJzx8K_8T9-400.webp 400w, /img/wJzx8K_8T9-812.webp 812w, /img/wJzx8K_8T9-1000.webp 1000w"type=image/webp><source sizes="(min-width: 50em) 812px, 100vw"srcset="/img/wJzx8K_8T9-400.jpeg 400w, /img/wJzx8K_8T9-812.jpeg 812w, /img/wJzx8K_8T9-1000.jpeg 1000w"type=image/jpeg><img alt="Moi-même dans mon bain"decoding=async height=483 loading=lazy src=/img/wJzx8K_8T9-400.jpeg width=1000></picture></div><div class="area lgbt"></div><script></script>" frameborder="0" width="100%"></iframe>
<p>Maintenant en retouchant un peu le SVG pour le préparer et un soupçon de CSS…</p>
<pre class="language-svg" tabindex="0"><code class="language-svg"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50%<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 475.528 475.528<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><br> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>defs</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>clipPath</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scale(.5)<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706<br> c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953<br> C-54.844,154.658,26.437,351.092,237.376,436.245z<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>clipPath</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p>Vous pouvez remarquer trois choses ici.<br>
La première c'est que l'on va cacher ce SVG avec du CSS et <code>aria-hidden</code> puisque l'on va s'en servir comme clip mais on ne veut pas qu'il soit visible ou qu'il prenne de la place en dehors de cette usage.<br>
La deuxième c'est que l'on va spécifiquement définir ce tracé en tant que tracé de clip en le mettant dans un élément <code><clipPath></code>.<br>
La troisième c'est qu'on va un peu réduire sa taille de moitié avec un <code>transform="scale(.5)</code> mais c'est purement cosmétique ici.</p>
<p>Puis on ajoute le clipping…</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.area</span> <span class="token punctuation">{</span><br> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>#clip<span class="token punctuation">)</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>Rien de foufou pour le CSS, ici on va seulement donner l'<code>id</code> ou plutôt l'ancre du <code>clipPath</code> défini. Si le SVG avait été externe on aurait donc écrit à la place :</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.area</span> <span class="token punctuation">{</span><br> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>svg/mon-clip.svg#clip<span class="token punctuation">)</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>Et on obtient ce qui suit.</p>
<iframe title="Clipping SVG" srcdoc="<!doctypehtml><style>body{font:1.25em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Oxygen,Cantarell,sans-serif;background:hsl(0 0% 20%);color:hsl(0 0% 80%)}</style><style>.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)}</style><body><svg viewbox="0 0 475.528 475.528"aria-hidden=true style=position:absolute;width:0;height:0;overflow:hidden width=50% xmlns=http://www.w3.org/2000/svg><defs><clippath id=clip><path d="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"fill=red transform=scale(.5) /></clippath></defs></svg><div class="area clip"><p>Je t'adore à l'égal de la voûte nocturne,<br> Ô vase de tristesse, ô grande taciturne,<br> Et t'aime d'autant plus, belle, que tu me fuis,<br> Et que tu me parais, ornement de mes nuits,<br> Plus ironiquement accumuler les lieues<br> Qui séparent mes bras des immensités bleues.<br> <br> Je m'avance à l'attaque, et je grimpe aux assauts,<br> Comme après un cadavre un chœur de vermisseaux,<br> Et je chéris, ô bête implacable et cruelle !<br> Jusqu'à cette froideur par où tu m'es plus belle !</div><div class="area clip"><picture><source srcset="/img/wJzx8K_8T9-400.avif 400w, /img/wJzx8K_8T9-812.avif 812w, /img/wJzx8K_8T9-1000.avif 1000w"sizes=500 type=image/avif><source srcset="/img/wJzx8K_8T9-400.webp 400w, /img/wJzx8K_8T9-812.webp 812w, /img/wJzx8K_8T9-1000.webp 1000w"sizes=500 type=image/webp><source srcset="/img/wJzx8K_8T9-400.jpeg 400w, /img/wJzx8K_8T9-812.jpeg 812w, /img/wJzx8K_8T9-1000.jpeg 1000w"sizes=500 type=image/jpeg><img alt="Moi-même dans mon bain"decoding=async height=483 loading=lazy src=/img/wJzx8K_8T9-400.jpeg width=1000></picture></div><div class="area clip lgbt"></div><script></script>" frameborder="0" width="100%"></iframe>
<h3 id="le-responsive" tabindex="-1">Le Responsive <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h3>
<p>L'un des intérêts majeurs du SVG par rapport aux images bitmap est que, comme il s'agit de vectoriel, il répond très bien aux changements de taille. Qu'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.</p>
<p>Mais ce n'est pas ce dont nous allons parler. À la place nous allons voir ce qu'on peut faire avec un SVG et une <em>Media Query</em>.</p>
<p>De toute évidence on pourrait juste changer la taille du SVG selon la taille du viewport mais ce serait franchement pas drôle.<br>
À la place on va carrément changer le dessin en fonction de la taille de l'écran.</p>
<p>Pour ça il nous un peu de CSS et un SVG avec plusieurs tracés.</p>
<p>On va donc dès le départ cacher un tracé pendant que l'autre reste en place et selon la taille de l'écran on inversera ça.</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.rwd-svg</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 20rem<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 20rem<span class="token punctuation">;</span><br> <span class="token property">margin</span><span class="token punctuation">:</span> 2rem auto<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.full</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.broken</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 64em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br> <span class="token selector">.full</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token selector">.broken</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<p>Puis un SVG avec nos deux <code>path</code> que je peux distinguer grâce aux classes <code>full</code> et <code>broken</code>.</p>
<pre class="language-xml" tabindex="0"><code class="language-xml"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rwd-svg<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 475.528 475.528<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>full<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706<br> c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953<br> C-54.844,154.658,26.437,351.092,237.376,436.245z<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scale(2.5)<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>broken<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> 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<br> C159.852,42.34,166.721,54.038,166.721,66.752z<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p><strong>Et voilà !</strong> Redimensionnez donc la fenêtre de votre navigateur jusqu'à ê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'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.</p>
<style>
.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;}
}
</style>
<svg class="rwd-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.528 475.528">
<path class="full" fill="red" d="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"></path>
<path transform="scale(2.5)" class="broken" fill="red" d="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"></path>
</svg>
<h2 id="interagir-avec-un-svg-depuis-le-svg-lui-meme" tabindex="-1">Interagir avec un SVG depuis le SVG lui-même <a class="header-anchor" href="https://blog.foojin.com/2022/12/13/svg-css/">#</a></h2>
<p>Tout ce que l'on a vu jusque là peut aussi être mis directement dans le SVG ce qui peut avoir plusieurs intérêts. Notamment de s'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.</p>
<p>C'est en soi très pratique cependant on pourrait objecter en disant que c'est bien mignon tout ça mais l'auteur du SVG n'aura pas forcément la main sur la façon dont sera intégré son œuvre, ce qui n'est pas faux. Ceci étant, à titre de rappel, si le SVG est chargé via une balise <code>img</code> par exemple, les CSS embarqués n'écouteront certes pas la page <strong>mais</strong> afficheront néanmoins la première frame de ce SVG ce qui permet donc d'envisager un rendu fallback. Au moins ça n'aura pas l'air cassé.</p>
<p>Par exemple, j'ai repris mon petit cœur sur lequel j'ai ajouté quelques petits détails.</p>
<pre class="language-xml" tabindex="0"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 475.528 475.528<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">/* </span><span class="token included-cdata"><span class="token cdata"><![CDATA[</span><span class="token language-css"> <span class="token selector">*/<br> :root</span> <span class="token punctuation">{</span><br> <span class="token property">--hue</span><span class="token punctuation">:</span> 348<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token selector">path</span> <span class="token punctuation">{</span><br> <span class="token property">fill</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--hue<span class="token punctuation">)</span><span class="token punctuation">,</span> 83%<span class="token punctuation">,</span> 35%<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">transform-origin</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">transition</span><span class="token punctuation">:</span> all ease-in 300ms<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token selector">path:hover</span> <span class="token punctuation">{</span><br> <span class="token property">fill</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--hue<span class="token punctuation">)</span><span class="token punctuation">,</span> 83%<span class="token punctuation">,</span> 47%<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>.9<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> /* </span><span class="token cdata">]]></span></span><span class="token language-css"> */</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heart<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M237.376,436.245l0.774,0.976c210.94-85.154,292.221-282.553,199.331-367.706<br> c-92.899-85.154-199.331,30.953-199.331,30.953h-0.774c0,0-106.44-116.107-199.331-30.953<br> C-54.844,154.658,26.437,351.092,237.376,436.245z<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token comment">/* </span></span><span class="token included-cdata"><span class="token cdata"><![CDATA[</span><span class="token language-javascript"> <span class="token operator">*</span><span class="token operator">/</span><br> <span class="token keyword">const</span> heart <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'heart'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token keyword">function</span> <span class="token function">clickHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> heart<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token string">'--hue'</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">360</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> heart<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> clickHandler<span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">/* </span></span><span class="token cdata">]]></span></span><span class="token language-javascript"> <span class="token operator">*</span><span class="token operator">/</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre>
<p>Vous pouvez remarquer que les styles CSS ou même le JavaScript sont encapsulés dans des "balises" <code>CDATA</code> pour la simple et bonne raison qu'en temps normal, dans un SVG, seuls sont attendus des balises formatées à la XML et, jusqu'à preuve du contraire, ni CSS ni JS ne le sont. Du coup, si on veut qu'ils soient interprétés comme ce qu'ils sont on doit les encapsuler dans du <code>CDATA</code>.</p>
<p>Bref, j'ai ajouté des petits styles au hover qui change couleur et taille et un <code>addEventListener</code> sur le tracé pour carrément changer la base de couleur au hasard.</p>
<p>Et voici le SVG en question… dans une balise <code>img</code>. Pas de hover ni d'é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.</p>
<p><img src="https://blog.foojin.com/2022/12/13/svg-css/img/svg-animation.svg" alt=""></p>
<p>Par contre, si on met le même fichier dans une balise <code>object</code>… tout fonctionne comme prévu. Passez donc votre souris dessus et cliquez sans parcimonie !</p>
<object type="image/svg+xml" data="https://blog.foojin.com/2022/12/13/svg-css/img/svg-animation.svg">
Un cœur gros comme ça.
</object>
<p>Bon j'ai surtout fait des exemples simples parce que je suis plus un codeur qu'un designer mais ça devrait vous montrer que la vraie limite concernant SVG et CSS est surtout notre imagination. 😉</p>
<script>
const iframes = document.querySelectorAll("iframe");
iframes.forEach(item => {
item.onload = function(){
item.style.height = item.contentWindow.document.documentElement.scrollHeight
+ 'px';
};
});
</script>
Eurotour vol. 122022-11-27T00:00:00Zhttps://blog.foojin.com/2022/11/27/eurotour-vol-12/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-7-juin-2045" tabindex="-1">Entrée du 7 juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/11/27/eurotour-vol-12/">#</a></h2>
<p>On vient de clôturer la tournée française en finissant avec brio cette étape bordelaise. Tout s'est bien passé. Pas de tueur à gage, pas de virée nocturne. Nickel ! J'aime quand une tournée se déroule sans accroc.</p>
<p>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'on a vécu depuis le début ce serait bien mal venu de ma part.</p>
<p>Pour combler ce creux dans le calendrier, le manager de la tournée a décidé qu'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.</p>
<p>Moi tant que c'est tout frais payé, je prends. 😜</p>
<hr>
<h2 id="entree-du-9-juin-2045" tabindex="-1">Entrée du 9 juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/11/27/eurotour-vol-12/">#</a></h2>
<p>J'ai passé 3 jours à bidouiller tranquille des trucs à moi et aux autres. Ça faisait longtemps que j'avais pas eu le temps de faire ça et ça m'avait manqué. Y a que comme ça que je me ressource.</p>
<p>J'en ai quand même profité pour mettre à jour mes implants optiques. J'avais repéré quelques trucs sympa dans un catalogue que je voulais tester alors j'ai profité de cette pause en Suisse pour faire ça.<br>
J'espère avoir fait le bon choix.</p>
<p>Bon faut que je prépare mon sac, demain matin on part en bus pour Venise !<br>
O sole mio ! 🤣</p>
<hr>
<h2 id="entree-du-10-juin-2045" tabindex="-1">Entrée du 10 juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/11/27/eurotour-vol-12/">#</a></h2>
<p>On est arrivé à Venise en fin de matinée. C'est très pittoresque, putain ! Si je pensais que la France avait rien à voir avec Night City, j'ai encore pris une claque avec Venise. Ces européens sont des fous.</p>
<p>Bon à peine arrivé, on nous briefe, les armes c'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…</p>
<p>On a été logé à l'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'installation par un prestataire externe, aujourd'hui c'est relâche pour nous, place donc à la visite.</p>
<p>Et ben tu me crois, tu me crois pas, mais à peine 20-30 minutes après avoir commencé à se balader on s'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'avait pas <strong>du tout</strong> l'air d'un poste de police.<br>
Ça puait l'embrouille cette connerie. C'é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. 🤷</p>
<p>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…<br>
Ce mafieux était en fait M. Mantegna, le boss de <strong>WORTRAC</strong> Italy, notre représentant local pour le concert. C'est eux qui géraient l'installation de la scène notamment.</p>
<p>Il nous a donc appris au cours d'une conversation qu'on avait pas demandé qu'un de leur concurrent allemand, la <strong>SEAL</strong>, comptait saboter notre concert avec l'aide du <strong>SALVEN</strong>, un groupe d'eco-terrorriste local plutôt chauvin pour pas dire xénophobe. Et donc, comme on était les meilleurs, Ace nous a demandé d'enquêter là dessus.</p>
<p>Pas de repos pour les braves à ce qu'il parait.</p>
<p>Seul hic dans cette histoire c'est que le bougre n'avait aucune info à nous filer, pas un nom d'un connard de chez SEAL ou même un connard local qui connaitrait le monde underground. Que dalle. Fils de chacal !</p>
<p>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 ! 👍</p>
<p>Tant de conneries ont eu raison de la patience de Ranni, en admettant qu'elle en ait une, qui a pété une durite en insultant le mafieux. Franchement c'é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…</p>
<p>Bref on a tenté le coup, on a rien sans rien il paraît, mais bizarrement… bah on a trouvé que dalle. Étonnant, non ?</p>
<p>J'ai bien tenté d'aller voir les flics pour savoir ce qu'il pouvait nous filer comme info sur SALVEN mais ces rats ont rien lâché. Crevures.</p>
<p>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'est barrée.
Je vais vraiment commencer à croire qu'on a des gueules de pigeon.</p>
<p>Ça a pas plus à Ranni qui l'a coursé et qui a fini par lui faire cracher le morceau que c'était pour nous donner des infos sur le SALVEN mais… qu'il fallait être discret. C'est mal parti 😆</p>
<p>Bref j'imagine qu'on verra demain ce qu'il en sera. C'est la seule piste qu'on ait pu avoir alors bon… autant la tenter.</p>
Eurotour vol. 112022-11-23T00:00:00Zhttps://blog.foojin.com/2022/11/23/eurotour-vol-11/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-5-juin-2045-suite" tabindex="-1">Entrée du 5 juin 2045 - suite <a class="header-anchor" href="https://blog.foojin.com/2022/11/23/eurotour-vol-11/">#</a></h2>
<p>Cédric nous a alors bien "gentiment" accompagné et nous a guidé à travers Neuilly, un quartier de bourges de Paris, jusqu'à la supposée adresse de Béatrice.<br>
C'était vraiment très, voire trop, chic et riche là-bas. J'étais vraiment pas à l'aise.<br>
Puis on s'est stoppé devant un portail en fer forgé vert et Cédric nous a dit qu'on y était.</p>
<p>On a tenté une approche douce en forçant Cédric à sonner à l'interphone … sauf que manifestement Béatrice n'avait plus envie de voir sa gueule… ce que franchement je peux envisager. Alors on a opté pour l'autre méthode douce : l'infiltration discrète. Enfin quand je dis on… on l'a décidé tous ensemble mais c'est Ranni qui a fait tout le boulot ou presque en définitive.<br>
Pendant qu'elle s'est immiscée dans la propriété, Vinz et Ousma en ont fait un peu le tour pour repérer d'éventuelles options de fuite et moi j'ai fait le babysitter de Cédric en restant devant.</p>
<p>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'avoir une connexion directe aux forces de l'ordre en cas d'alerte. Ça puait !<br>
Mais il dormait le clébard alors elle a continué plus loin jusque trouver un point d'accès pour finalement réussir à couper les caméras de sécurité.</p>
<p>Pendant ce temps j'ai réessayé de sonner à l'interphone, sans grande conviction, et cette connasse m'a raccroché au nez. 😠
J'ai dû faire un petit effet malgré tout parce que Ranni, après s'être infiltrée par une fenêtre ouverte, a entendu du mouvement à l'intérieur. Le genre qui sonne comme quelqu'un de paniqué et de pressé.</p>
<p>Son cracheur au poing elle est descendue de l'é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'ai réussi à ouvrir la porte tout seul grâce à mes doigts de fée, je sais pas trop comment d'ailleurs mais j'ai réussi à débloquer le portail. Mais c'est sûr c'était avant que Béatrice ne l'ouvre à distance… Si si c'est certain !</p>
<p>Une fois à l'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'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.</p>
<p>Il s'est avéré que… Cédric pensait que ce Nicolas Giraud faisait partie de l'équipe de Béatrice et Béatrice pensait que ce même mec faisait partie de l'équipe de Cédric… Ces deux paumards se sont faits entubés par un solo qui manifestement n'avait pas du tout l'intention de kidnapper Jack mais bien de lui fumer sa gueule.
Allez savoir pour le compte de qui par contre.<br>
Putain d'amateurs ! Et on dit que c'est une des meilleurs fixers à l'international… mon cul ouais !</p>
<p>Puis Béatrice nous a dit qu'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'il devait renforcer la sécurité autour de Jack.</p>
<p>Une fois arrivé on a fouillé partout, on a même demandé à Tinker qu'elle provoque une réunion globale du staff pour qu'on puisse repérer éventuellement ce fils de chacal. Mais rien. Rien ni personne.<br>
On a alors commencé à se dire qu'il devait pas être là et qu'il se pointerait plutôt aux alentours du début du concert, quand Jack fera une apparition publique.</p>
<p>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'un se cachait en dessous.</p>
<p>Ouais c'était un sniper… c'était Giraud. Sauf qu'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.</p>
<p>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'est pas un amateur alors la bataille au corps à corps s'est avérée difficile et sanglante. Sentant qu'il était trop mal en point pour le finir Ousma s'est retiré non sans nous prévenir nous deux en bas. C'est là qu'on est rentré dans le game et qu'on a défouraillé sur sa petite gueule de rat depuis en bas.</p>
<p>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'atterrissage est tout à coup devenu mortel. M'enfin je le plaindrai pas.
On a eu beau le fouiller, il avait rien sur lui. Faut croire qu'on ne saura jamais qui était le commanditaire qui voulait la peau de Jack.</p>
<p>Enfin toujours est-il qu'on a <strong>encore</strong> sauvé la vie de Jack. C'est ça aussi d'être un professionnel. J'espère qu'on aura un bonus.</p>
Eurotour vol. 102022-11-14T00:00:00Zhttps://blog.foojin.com/2022/11/14/eurotour-vol-10/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-4-juin-2045-suite" tabindex="-1">Entrée du 4 juin 2045 - suite <a class="header-anchor" href="https://blog.foojin.com/2022/11/14/eurotour-vol-10/">#</a></h2>
<p>J'ai buté un paumard presque pour rien…</p>
<p>Ouais ce foutu Karim a enfin bavé, non sans mal, qu'il connaissait en effet Béatrice mais qu'il y avait tout un protocole pour la contacter et qu'il pouvait pas le faire comme ça sur le fil. Nova !</p>
<p>On a alors débattu entre nous pour savoir ce qu'on allait faire de lui. Mais faut dire il a pas aidé ce con, je comprends qu'il ait été tendu et qu'il nous aimait pas vraiment, et franchement entre l'effraction, les coups de feu et la tête éclatée j'aurais probablement réagi encore moins bien que lui, mais quand il nous a dit que s'il nous retrouvait il nous flinguerait ça a pas vraiment jouer en sa faveur.</p>
<p>Je voulais éviter encore une mort inutile mais il m'aidait pas à le défendre. Puis il s'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'à attendre qu'elle se pointe pour connaître l'identité du gars. En gros, la vie de Karim ne tenait qu'à la décision d'une jeune fêtarde presque innocente à venir se mettre une race dans sa boîte ce soir même.</p>
<p>Sacré coup de poker j'ai envie de dire ! Mais il était confiant. Il nous soutenait qu'elle était là presque tous les soirs. Alors on a décidé de monter l'opération. J'allais prendre la place du gorille que j'avais fumé à l'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'agent de la donzelle pendant que Vinz et Ousma, bien blessés, gardaient un œil fébrile sur Karim dans le bureau parce qu'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.</p>
<p>Quel malaise c'était de bosser comme videur à côté du collègue du mec dont je venais d'exploser la face. 😖 Je sais pas lequel de nous deux était le plus mal à l'aise pour tout dire. Enfin bref, au bout d'un moment je vois débarquer un troupeau de jeunes femmes dont une qui ressemblait à la description que m'avait faite Karim.</p>
<p>Je lui demande sa carte d'identité en lui faisant croire que je faisais ça parce que j'étais nouveau et que je la connaissais pas. Elle s'appelait Sofia. Je suis pas branché minette mais elle avait clairement ce qu'il fallait pour bosser dans l'industrie du porno faut admettre. Je l'ai alors laissé rentrer et j'ai prévenu Ranni via mon agent de se préparer à son arrivée.</p>
<p>Ranni est chiante, immature, instable et imprévisible mais putain qu'elle est douée que ce soit pour le hack ou pour le pickpocket. Elle lui a tiré son agent avant même qu'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'info qu'on cherchait. Son mec, celui-là même qui était le choom de Béatrice, s'appelait Cédric Vernier.</p>
<p>On a alors commencé à remballer, Ranni a remis l'agent de Sofia dans son sac ni vu ni connu et les gars dans le bureau ont commencé à foutre le camp par l'arrière en laissant Karim attaché à sa chaise et moi je partais par l'avant. Une fois tout le monde sorti et à l'abri je devais prévenir l'autre videur qu'il pouvait aller libérer son patron. Enfin ça c'était le plan.</p>
<p>À la place Ranni a prétexté vouloir revenir dans la réserve chercher une dernière boisson énergétique sauf qu'à la place elle est revenu chercher du sang. Elle étranglé ce pauvre Karim, alors incapable de se défendre, à l'aide d'un câble ou je sais pas quoi. Elle a essayé de nier mais en mentant tellement mal que… c'est comme si elle voulait avouer avec fierté de manière détournée. Bref, j'ai rien dit à l'autre videur du coup et j'ai préféré foutre le camp dans la rue en prétextant devoir passer un coup de bigot. Puis on a couru, vite.</p>
<p>On a fait un passage par l'hôtel parce qu'il fallait que les kamikazes aient des soins. Il s'avère que Ousma avait une côte cassée et Vinz avait pris tellement cher à sa main qu'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'ai fait poser est tellement d'un pratique pour bricoler que je pourrais plus m'en passer aujourd'hui.</p>
<p>Pendant que Ousma se faisait ausculter et que Vinz allait à l'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'on était excusé. J'allais pas m'en plaindre. Ça m'a crevé cette journée.</p>
<hr>
<h2 id="entree-du-5-juin-2045" tabindex="-1">Entrée du 5 juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/11/14/eurotour-vol-10/">#</a></h2>
<p>Ranni et moi on a passé la matinée à jouer à un nouveau jeu : le cat fishing 💖<br>
On s'est fait passer pour une collègue de travail de Sofia qui venait d'Ukraine auprès de Cédric et on a flirté comme pas possible, on lui a fait tellement de rentre dedans qu'il a pas pu dire non quand on lui a proposé un rendez-vous dans l'après midi dans un motel.</p>
<p>Pour une fois on était préparé comme des pros… que l'on est censé être. J'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'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'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.</p>
<p>Et il est arrivé. Un jeune branleur de corpo tout peureux, j'en étais presque déçu. Il a bavé tout ce qu'il avait à dire sans qu'on ait eu besoin de le menacer de quoique ce soit. À ce moment là j'é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.</p>
<p>Le seul hic c'est que personne devait mourir. Et il sait pas ce qu'il s'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'il nous a filé direct le numéro de tel et l'adresse où créchait Béatrice.</p>
<p>Je crois qu'on est reparti pour une nouvelle excursion…</p>
Eurotour vol. 92022-11-01T00:00:00Zhttps://blog.foojin.com/2022/11/01/eurotour-vol-9/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-4-juin-2045-suite" tabindex="-1">Entrée du 4 juin 2045 - suite <a class="header-anchor" href="https://blog.foojin.com/2022/11/01/eurotour-vol-9/">#</a></h2>
<p>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'entrer de gré ou de force.</p>
<p>Bon on allait pas forcer l'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'entrer par derrière sauf que y avait pas moyen d'arriver derrière le bâtiment. On s'est dit que y avait peut être moyen d'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'interphone d'à côté puis on nous a ouvert et BINGO les deux bâtiments partageaient une cour intérieure.</p>
<p>Bon y avait bien un grillage qui séparait les deux propriétés mais y avait rien qui n'aurait résisté à mes outils. J'ai donc forcé ça et on s'est infiltré dans la cour de la boîte de nuit. Y avait bien une caméra et on aurait pas pu l'éviter ou la pirater de toute façon alors on a foncé en espérant qu'on aurait accès aux enregistrements une fois à l'intérieur pour effacer nos traces si besoin.</p>
<p>De la cour on a forcé une porte qui s'avérait être la porte de la réserve d'alcool. J'aurais bien pris un peu de vodka dans une des caisses mais à température ambiante c'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'on allait bien évidemment s'amuser à fouiller. On n'y a trouvé qu'un NAS avec très certainement les enregistrements des caméras, alors je l'ai mis dans mon sac.</p>
<p>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 :</p>
<ul>
<li>Ranni et moi on attendrait dans la réserve, prêts à débarquer, pour ajouter un peu de pression;</li>
<li>Vinz attendrait dans le noir, dans le bureau assis sur le fauteuil, c'est lui qui a la tchatche et comme on voulait juste discuter pour trouver un moyen de contacter Béatrice, c'était le meilleur endroit où le mettre;</li>
<li>Ousma quant à lui allait attendre caché derrère le guichet, à l'extérieur du bureau, pour prendre le gars à revert et l'empêcher de fuir si jamais la tronche de Vinz lui revenait pas, ce qui en toute honnêteté était plus que probable.</li>
</ul>
<p>On a attendu une bonne heure comme ça. Ranni explosait la réserve de boisson énergétique et moi… et moi j'ai bu de la vodka à température ambiante. Ne me jugez pas. L'inaction et l'attente ont cet effet dévastateur sur mon orgueil.</p>
<p>Et puis quelqu'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 "Entrez et fermez la porte derrière vous", un des mecs s'est jeté au sol et ça a dû faire peur à ce branque de Vinz parce qu'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.</p>
<p>Bref c'est parti en sucette, très vite et très fort. J'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'il avait appris à son stage de ninja parce qu'il s'était bien fait gauler par une des armoires à glace et il l'avait maintenant sur le dos.</p>
<p>Quand Karim a décidé de se barrer, Ranni, pas certaine que Ousma ait été en capacité de l'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'ai dégainé ma belle Lucille et j'ai tiré dans le lard d'un des mastodontes, Vinz lui a fini par se planquer derrière le bureau parce qu'il avait déjà pris quelques pruneaux et Ousma est parti en mode combat corps à corps contre son Godzilla, le taré.</p>
<p>Tout du long j'ai essayé de convaincre mon King Kong de se rendre parce que je voyais bien qu'il avait commencé à sérieusement pisser du sang mais il a fini par se planquer de l'autre côté du pas de la porte. Tant pis je me suis dis, allons-y pour le finish. Alors j'ai déboulé en sautant proche du sol pour éviter de me faire avoir à hauteur d'homme, je visais déjà dans la bonne direction prêt à appuyer sur la détente… ce que j'ai fait dès que je l'ai eu en ligne de mire.</p>
<p>C'est seulement une fraction de seconde après avoir appuyé sur cette foutue détente que je me suis rendu compte qu'il avait les mains en l'air au dessus de sa tête… enfin jusqu'à ce qu'il n'y ait plus de tête…</p>
<p>Ousma pendant sa valse avec son malabar a eu la présence d'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.</p>
<p>C'est même pas dit qu'on obtienne ce qu'on est venu récupérer.</p>
<p>Putain de journée sans fin.</p>
Eurotour vol. 82022-10-25T00:00:00Zhttps://blog.foojin.com/2022/10/25/eurotour-vol-8/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-4-juin-2045" tabindex="-1">Entrée du 4 juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/10/25/eurotour-vol-8/">#</a></h2>
<p>Je me suis levé tard ce matin… enfin ce midi plutôt. C'est le vide dans mon bide qui m'a réveillé. Il faisait faim. J'ai du coup rejoint Vinz et Ousma au resto de l'hôtel et là Vinz nous raconte qu'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.</p>
<p>C'était marrant comme info… jusqu'à ce qu'on voit à la télé de l'hôtel, dans un flash spécial, qu'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'il fallait de café et de croissant et on est parti là-bas pour en découvrir plus. Fallait qu'on sache, même si c'était pour confirmer que c'était Angus le cadavre.</p>
<p>Au Louvre c'é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'infiltration. Ousma a quand même tenté le coup du bluff, alors même qu'il est clairement pas bâti pour ça. À base de "Hello, I'm agent Ousma du Federal Bureau of Americans from America…" 😆<br>
Ça avait beau être de l'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'était de la grosse connerie.</p>
<p>Quand vous avez besoin de muscles pour une opération militaire, appelez Ousma, mais c'est à peu près tout ce qu'il fera avec brio. Remarque je m'en plains pas, il fait ça super bien et c'est justement pour ça qu'il a été embauché et qu'il est dans notre team.</p>
<p>Bref on a dû trouver une alternative, alors Ranni est allé faire ce qu'elle fait de mieux après boire des boissons énergétiques et se planquer : Pirater.<br>
Elle nous a pris le contrôle des caméras tellement vite que j'ai pas eu le temps d'allumer mon cigare.<br>
Malheureusement le flux video nous a permis de confirmer que le cadavre était celui d'Angus. 😭</p>
<p>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'en a résolu. Angus est arrivé au café vers 9h30 et il a rejoint Bax-3 à sa table. Les vidéos n'avaient pas le son mais on voyait bien qu'ils s'engueulaient et là, tout d'un coup, la tête d'Angus explose… PAF Pastèque ! C'était clairement une arme à feu mais elle était hors champ et le coup venait de… derrière lui.<br>
Vue la réaction de Bax-3, avec son visage recouvert de sang et de morceaux de cervelle d'Angus, elle était carrément surprise et s'attendait pas à ça. Puis elle a fuit la scène.</p>
<p>On a eu beau vérifier tous les angles des caméras sur plusieurs minutes, avant et après l'assassinat, on a jamais vu le tireur. Le seul truc louche qu'on a trouvé c'est une Peugeot 909 sans plaque qui quittait le parking juste après le coup de feu.</p>
<p>Autant dire que c'était mince pour avancer dans notre enquête. On s'est dit que la seule constante dans tout ce beau bordel c'était Bax-3 alors on s'est mis bille en tête de la retrouver… ce qui allait pas être une mince affaire.</p>
<p>On a appelé Ace pour qu'il contacte Frederic Germain, le mec qui avait organisé la teuf de la veille, lui devait savoir comment la joindre vu qu'il l'avait invitée.</p>
<p>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'ils savaient quelque chose. Après tout, cette meuf trainait avec le gratin, quelqu'un devait bien savoir quelque chose. Mais aucun n'a été capable de l'identifier, y en a un par contre qui nous a confirmé qu'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'est le patron d'une boîte de nuit apparemment.</p>
<p>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.</p>
<p>On est arrivé chez le bourge à l'heure et on nous a accueilli comme il fallait, peut être bien mieux qu'on ne s'y attendait. Malheureuseument il avait pas beaucoup d'info à nous partager, non pas qu'il voulait pas parler, seulement cette meuf c'est un peu un mystère. Tout ce qu'il a pu nous dire c'est que son vrai blaze était <strong>Béatrice Fahida,</strong> en gros on l'invite parce qu'il faut l'inviter, question business ou un truc du genre mais c'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.</p>
<p>On l'a alors remercié puis en le quittant on se dit qu'on tenterait bien un plan bluff, genre on essaye d'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'ailleurs. Soit on est vraiment nuls, soit ils veulent être foutrement discrets ces enfoirés.</p>
<p>J'imagine qu'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'on est toujours pas sûr qu'Angus était la véritable cible. Ça pourrait très bien être Jack dans les faits.</p>
<p>Bon je vais aller me préparer pour la soirée moi.</p>
Eurotour vol. 72022-10-16T00:00:00Zhttps://blog.foojin.com/2022/10/16/eurotour-vol-7/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-2-juin-2045" tabindex="-1">Entrée du 2 juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/10/16/eurotour-vol-7/">#</a></h2>
<p>Le concert à l'<em>Europa Field</em> de Bruxelles s'est bien passé. L'œuvre de Jacques a bien fait son effet, on en parle même partout à l'étranger il parait.<br>
Aujourd'hui c'est relâche alors j'en profite pour me remettre de cette virée artistique et de retaper mon armure ainsi que celle d'Ousma.<br>
Faut que je sois en forme parce qu'ensuite on enchaîne 3 dates à Paris.
D'ailleurs je vais aussi préparer mes affaires parce qu'on part ce soir dans la nuit. Arrivée prévue au petit matin à Paris.</p>
<hr>
<h2 id="entree-du-3-juin-2045" tabindex="-1">Entrée du 3 juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/10/16/eurotour-vol-7/">#</a></h2>
<p>Y a pas à chier Paris c'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.<br>
Genre on fait un peu tâche ici en vrai. Enfin bon on est des touristes donc ça passe.</p>
<p>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'honneur de notre cher et adoré Jack… et bref on était convié mais pas vraiment en tant qu'invité, non non, on est personne nous, mais en tant que gardes du corps discrets supplémentaires.</p>
<p>L'idée d'être invité dans une teuf comme ça pour les mauvaises raisons m'ont pas vraiment plus au départ mais il a réussi à me convaincre avec hors d'œuvre français et champagne. Je suis un homme de goût, que voulez-vous ?</p>
<p>C'était bien beau tout ça mais fallait qu'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.<br>
Ça m'a rappelé un vieux film qui s'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'était lui qui l'emmenait faire du shopping dans toutes les boutiques de bourges. Bah là c'était pareil, sauf que Catherine c'était la bourge et nous les putes.</p>
<p>Catherine était partie s'occuper de Ranni pendant que Vinz, Ousma et moi on était laissé seuls à la proie des vendeurs… c'était pas beau à voir. Vinz, ayant un grand sens du style (à la mode NC hein) a voulu s'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'allait comme un gant. Ils ont l'œil ces enfoirés.</p>
<p>Ousma lui a été pris en pitié par Vinz qui l'a aidé à trouver un truc classe. Grossière erreur de la part d'Ousma mais pour sa défense il connait pas Vinz aussi bien que moi, il s'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'ai eu confirmation quand j'ai vu les vendeurs pouffer dans leur coin. HAHAHA pauvre Ousma.
Enfin au bout d'un moment Vinz lui a trouvé un truc un peu plus passe partout heureusement.</p>
<p>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'est passé crème. Puis comme prévu on est allé se changer avec nos nouvelles fringues pour partir à la soirée.<br>
Y avait 2 limousines pour nous prendre tous. La classe à Dallas !<br>
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'entrée c'était pas un secret cette teuf.</p>
<p>On était clairement pas à notre place ici, y avait que du gratin. Plein de gens que j'avais déjà vu à la TV mais dont j'avais oublié le nom, plein d'autres que j'avais jamais vu nulle part mais vu le nombre de gens qui trainaient autour ça devait être des gens importants.<br>
Puis Angus nous briefe. Il devrait pas y avoir de soucis de sécurité ici, par contre, fallait qu'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'était pas autorisé par Angus ce soir-là.
You're the boss, boss!</p>
<p>Perso j'ai vite décidé que je surveillerais les buffets. On se méfie jamais assez de ça. Du coup j'ai pas mal bouffé et bu… mais hey, fallait bien se fondre dans la masse et pas avoir l'air de garde du corps, alors j'ai fait ce qu'on attendait de moi, je me suis investi personnellement dans la mission. Tout en gardant un œil sur Jack évidemment. Je suis un professionnel.</p>
<p>À 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'appelait <strong>Bax-3</strong>, une fixeuse de renom qui est pas connue pour avoir beaucoup d'éthique. Il l'avait connu en bossant chez Orbital Air et fallait s'en méfier comme de la peste.</p>
<p>Le truc c'est que elle et Jack était vite monté au stade du flirt, qu'on allait tous rentrer et, ce qui devait arriver arriva, il a voulu rentrer avec elle. C'était un double non là. On s'est donc interposé, on lui a dit de prendre son numéro et qu'il l'a reverrait plus tard, en espérant que ce soit jamais en fait.<br>
Il a un peu gueulé c'est sûr mais une fois dans la voiture, il s'est endormi comme une merde.</p>
<p>On est alors arrivé à l'hôtel et on est tous aller se coucher. C'est d'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'ai bouffé cette nuit je suis tranquille.</p>
Eurotour vol. 62022-10-09T00:00:00Zhttps://blog.foojin.com/2022/10/09/eurotour-vol-6/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-31-mai-2045-suite" tabindex="-1">Entrée du 31 mai 2045 - suite <a class="header-anchor" href="https://blog.foojin.com/2022/10/09/eurotour-vol-6/">#</a></h2>
<p>On était enfin prêt à partir, tel un commando de militaires en mission pour sauver le monde, sauf qu'on allait vandaliser un bâtiment, qu'on était pas tous frais et que Vinz s'était déguisé en parfait petit clodo. On fait avec ce qu'on a, hein.</p>
<p>Toujours est-il qu'une fois arrivé sur le chantier on a commencé à faire du repérage, moi j'ai sorti mon drone et j'ai fait joujou. On a pu remarqué plusieurs choses :</p>
<ul>
<li>que le bâtiment de 30 étages était qu'à moitié fini. Et par là je veux dire que seuls les 15 premiers étages avaient des murs;</li>
<li>qu'il y avait une grue, un ascenceur de chantier et des caméras de sécurité;</li>
<li>que c'était loin d'être désert, le chantier était blindé d'ouvriers en grève surveillés par genre 5 vigiles qui patrouillaient par paire pendant 30 minutes;</li>
<li>qu'à l'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.</li>
</ul>
<p>Notre mission était de nous infiltrer discretos, grimper en hauteur, tagger un mur et se casser illico presto. Sur le papier ça avait l'air simple mais en vrai c'était plus compliqué que ça en avait l'air.</p>
<p>Déjà rien que pour l'infiltration on en a chié. On s'était dit que ça pourrait le faire d'utiliser les médias et négocier un scoop avec eux mais Jacques voulait pas qu'on puisse à coup sûr le lier à cette histoire.</p>
<p>Alors on a pensé à négocier avec les grévistes, en leur disant qu'on était chaud pour les aider en mettant une grosse bannière sur un mur du bâtiment. C'est pour ça qu'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'une langue qui n'est pas de son propre pays mais celle du voisin…? Aucune dignité les mecs. Et puis ensuite ils ont dit qu'ils avaient pas besoin d'abrutis d'américains pour les aider, qu'on pouvait pas comprendre. Genre on est stupide quoi…</p>
<p>Enfin bref, du coup, plan B pour l'infiltration et on a opté pour l'effraction. Y a que ça de vrai de toute façon. On a choisi de forcer l'entrée par derrière, au niveau de la grue. Pendant que j'ouvrais le passage pour que Osman et Vinz accompagnent Jacques et ses potos à l'intérieur, Ranni, elle, essayait de trouver un point d'accès pour pirater tout le système et prendre à terme le contrôle de l'ascenceur.<br>
Elle a assuré la petite. Elle nous a piraté ça comme si c'était un jeu d'enfant et au final elle a pris de contrôle de l'ascenceur mais aussi des caméras et on a fait passé un boucle dessus pour que notre infiltration passe crème.</p>
<p>De mon côté, j'avais ouvert ma brêche et j'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'ascenceur sans soucis, sans attirer l'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'artiste. Ils nous avaient prévenu qu'ils taggeraient avec une peinture spéciale qui n'apparaissait que 30 minutes plus tard mais tout de même c'était chelou à regarder.</p>
<p>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'aime bien les garanties).</p>
<p>Mais c'est là que ça a merdé. Enfin je dis ça mais ça a pas merdé à cause de nous, pour une fois. Non, c'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é !</p>
<p>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'exflitration allait s'avérer plus tendu qu'un string. Le groupe a pris tout de même l'ascenceur mais ils se sont fait gauler par des robocops alors ils ont décidé de s'arrêter au premier étage et de finir à patte par les escaliers en sortant ensuite par l'arrière. Pendant tout ce temps Ranni et moi on les guidait comme on pouvait avec les informations qu'on obtenait des caméras et de mon drone.</p>
<p>Ils sont finalement sortis par l'arrière, au niveau de la grue, mais fallait encore qu'ils rejoignent ma brêche et ça s'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'est ramassé la gueule et comme c'é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'intérieur c'était des fragiles. Y en a un qui était resté planté là, comme tétanisé, pendant que l'autre s'était mis à couvert. Tout ça a laissé le temps au pote de Jacques de bouger son cul et sortir de là malgré la douleur.</p>
<p>On s'est vite engouffré dans nos caisses et on a filé doucement mais sûrement avant que la peinture ne s'affiche parce qu'on entendait déjà les hélicos de la police arriver.</p>
<p>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'hôtel pour souffler et se reposer. Je vais bien ronquer cette nuit moi, je le sens.</p>
<hr>
<h2 id="entree-du-1er-juin-2045" tabindex="-1">Entrée du 1er juin 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/10/09/eurotour-vol-6/">#</a></h2>
<p>Je viens de me lever et j'ai regardé tout de suite les infos. Ils en parlaient sur tout les chaînes. J'ai enfin vu ce que Jacques et ses potes avaient fait. C'est magnifique !</p>
<p>On y voyait le logo de Jack Entropy et la queue du Y pointait sur une chiotte avec écrit en tout petit "Flush Johnny Silverhandle" ! Hahaha du génie !</p>
Eurotour vol. 52022-09-24T00:00:00Zhttps://blog.foojin.com/2022/09/24/eurotour-vol-5/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-31-mai-2045-suite" tabindex="-1">Entrée du 31 mai 2045 - suite <a class="header-anchor" href="https://blog.foojin.com/2022/09/24/eurotour-vol-5/">#</a></h2>
<p>On était là avec Ousma à se la couler douce, moi avec mon cigare et Ousma avec… rien en fait… ça se voit que c'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'il était possible que Jacques ait été en fait au musée le Nouvel International.</p>
<p>On s'apprêtait à se mettre en route tous les deux quand les deux fêtards sont sortis accompagnés d'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'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'il lui a dit qu'on était ses potes et du coup le videur nous a laissé passer. J'ai pas trop compris pourquoi ils nous ont fait rentrer alors qu'on devait tracer au musée mais je me suis dit qu'ils avaient peut être chopé d'autres infos entre temps.</p>
<p>Une fois à l'intérieur ce mec chelou, que je vais appeler Connard, nous a dit qu'il savait où était Jacques et qu'il nous le dirait pour quelques eddies. J'avoue que je l'avais mauvaise là. Mais on s'était dit qu'on essayerait de pas faire de vague alors on a négocié et je l'ai payé 200 eddies en insistant bien que s'il nous avait menti je le retrouverais et je ferais de ses rotules de la poudre.</p>
<p>Connard a compris le message je crois. Mais, PUTAIN, j'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'on savait déjà donc.<br>
Comment claquer 200 eddies pour rien pour les nuls…<br>
Mais Connard nous avait pas menti alors je l'ai laissé partir avec sa prise.</p>
<p>J'étais rageux mais j'avais l'info alors on a décollé mais c'était sans compter qu'une meuf, manifestement pétée de tune, nous interpelle. Elle était accompagnée de ses deux frères, Tweedledum et Tweedledee (c'était sûrement pas ça leur vrais noms, mais je m'en fous) et elle a dit s'appeller Leona Walder. Elle nous a parlé comme si on était ses grouillots et que si on allait voir Jacques, fallait qu'on lui transmette un message de sa part.</p>
<p>Alors je lui ai dit "OK, pour 200 eddies". 😆</p>
<p>Elle a pas ri. Elle a pas aimé en fait. Et elle nous a encore plus mal parlé. J'ai pas aimé non plus en retour alors je lui ai dit de bien aller se faire foutre. Je crois qu'elle a pas trop apprécié, c'est pour ça qu'elle a dit à Tweedledum et Tweedledee de nous casser la gueule pendant qu'elle-même allait casser la gueule de Ranni.</p>
<p>Les deux guignols étaient pas bien costauds mais putain ce qu'ils étaient rapide, j'ai pris plusieurs pains dans le gueule et j'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'œil ou presque… et il a dû m'aider en tenant le mien pour être sûr que je le rate pas. Ce que j'ai fait dans un premier temps mais je suis rattrapé et je l'ai couché aussi.</p>
<p>Pendant ce temps Ranni a fusionné avec les fougères de la salle pour semer Leona. C'est marrant de se dire qu'elle a réussi à être discrète alors que c'est un peu une grande gueule pour une gamine de 16 ans.<br>
Enfin du coup après notre victoire on s'est barré au musée.</p>
<p>Une fois arrivés on est rentré directement, non sans laisser nos armes à l'accueil. J'imagine qu'on doit comprendre mieux l'art moderne quand on se sent en insécurité mais moi, avec tout le temps que j'ai passé là-bas, je peux dire que j'ai toujours rien compris. Ousma non plus, on est un peu pareil lui et moi. D'ailleurs on s'est bien marré quand j'ai cru reconnaître une bite sur un œuvre d'art mais qu'en fait c'était pas une œuvre d'art, c'était… une clim… 🤣</p>
<p>Si on était tous les deux perdus à ne rien comprendre et à ne reconnaître personne, c'était pas le cas de Ranni et Vinz qui ont vite retrouvé la trace de Jacques. Il était déguisé comme quelqu'un qui voulait pas être reconnu. C'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'en ai eu marre de voir Vinz galérer et aussi j'avais un peu peur qu'il nous mette encore dans un plan foireux, alors j'y suis allé. On a négocié et il a accepté. 🙌</p>
<p>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 !</p>
<p>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'était pas de la peinture mais de l'acide. À ce moment-là, Ranni s'est barré vers l'accueil et quand j'en ai eu marre de son cinéma à l'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.</p>
<p>Inutile de dire que son service de sécurité n'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'est fou ça ! Vinz s'est eclipsé pendant que Ousma et moi on gérait les 4 connards.
On était à poil alors j'ai pris cher. Ousma, lui, esquive bien mieux que moi, alors au bout d'un moment je l'ai laissé seul et je me suis barré vers l'entrée pour récupérer mes joujous.</p>
<p>Pendant tout ce temps Ranni en avait profité pour détacher les gardes et Vinz pour ouvrir le coffre qui renfermait nos armes. J'arrivais pile poil pour la distribution. Heureusement j'ai pas eu à m'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'était un gamin.</p>
<p>Vu l'heure, on a décidé de pas trainer et de tracer chez Jacques récupérer du matos pour l'œuvre à accomplir dans la nuit. Ça a pris un peu de temps. Et en plus il devait appeler des potes à lui pour qu'ils lui donnent un coup de main. Pendant ce temps j'ai zoné dans son atelier à la recherche d'un nouveau Kevlar parce que le mien ne tenait qu'à un fil mais j'ai rien trouvé.</p>
<p>Du coup, là, j'écris dans mon journal mais je continuerai plus tard parce qu'on est prêt à décoller.</p>
Eurotour vol. 42022-09-20T00:00:00Zhttps://blog.foojin.com/2022/09/20/eurotour-vol-4/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-27-mai-2045" tabindex="-1">Entrée du 27 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/09/20/eurotour-vol-4/">#</a></h2>
<p>La grâce mat' m'a fait du bien. J'é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.</p>
<p>Son plan consistait à traquer Jack en implantant à son insu une puce GPS sur lui ou sur un objet qu'il a tout le temps sur lui. C'est pour ça qu'elle est venu me voir. La bidouille c'est ma came. On s'est dit qu'on ferait mieux d'en parler avec Angus et ça tombait bien parce qu'il nous avait tous appelés pour faire un debrief de la veille.</p>
<p>Une fois tout mis à plat on l'a chopé à part pour lui parler de notre plan. Bien qu'il trouvait pas le plan déconnant il pouvait pas se permettre d'être impliqué personnellement et nous a dit qu'il voulait rien savoir… mais qu'il nous empêcherait pas de le mettre en action.</p>
<p>Alors on s'est rabattu sur Tammi. Elle est proche de Jack et était bien sur les nerfs après ce qu'il s'était passé alors on a misé sur sa coopération. Et bingo !</p>
<p>Elle était opé pour nous suivre mais… c'est elle qui garderait le tracker. On a pas moufté, après tout c'est aussi sa vie privée à elle. On a alors mis en place le plan avec l'aide de Tammi pour installer la puce GPS dans le flingue de Jack, il se déplace jamais sans, c'était le meilleur endroit. Et en deux coups de cuillère à pot c'était fait, ni vu, ni connu je t'embrouille. C'est la garantie Zed ! 😉</p>
<p>On était prêt pour n'importe quelle connerie Jack ferait par la suite.</p>
<hr>
<h2 id="entree-du-29-mai-2045" tabindex="-1">Entrée du 29 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/09/20/eurotour-vol-4/">#</a></h2>
<p>On a fini la tournée en Angleterre avec cette 3ème et dernière date. C'était à Londres au <em>Wembley Stadium</em>. Y a pas eu un pet de travers, de l'extérieur ou de l'intérieur (Jack…), tout le monde s'est tenu à carreau.</p>
<p>Le prochain concert sera le 1er juin à Bruxelles, au <em>Europa Field</em>. Faut que je prépare mes affaires, on décolle demain.</p>
<hr>
<h2 id="entree-du-31-mai-2045" tabindex="-1">Entrée du 31 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/09/20/eurotour-vol-4/">#</a></h2>
<p>On est bien arrivé à Bruxelles. C'est très différent de NC ou de l'Angleterre. Ici c'est Interpol qui gère la sécurité, comme dans la majorité de l'Europe. Et on a appris qu'ils avaient des gangs un peu chelous. Y aurait les <em>Data Jackers</em>, un gang de pro-technologie un peu has-been qui utilisent des masques à LED pour afficher leur émotions… et les <em>Saxe-Cobourg</em> qui sont genre retro-punk, sappés comme y a deux siècles… c'est vraiment des paumards ces européens.</p>
<p>Sinon on a tous été convoqués au penthouse pour préparer le concert de demain. Jack voulait qu'on fasse sa promo à Bruxelles comme jamais personne ne l'avait fait auparavant. Il voulait marquer les esprits. C'est là qu'est rentré en scène un petit gars du nom d'<em>Anton Pentre</em>, un français, qui connait les bonnes personnes pour ce job de promotion. Il nous a parlé d'un certain <em>Jacques Rêve</em>, une sorte de Banksy contemporain qui serait parfait pour ça. Faut juste le trouver, qu'il accepte et qu'on l'aide à faire son œuvre, une énorme tête de Jack taggée sur un gratte-ciel.</p>
<p>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 :</p>
<ul>
<li>Faut le trouver ce Jacques et il se cache parce qu'il est recherché pour vandalisme;</li>
<li>Faut qu'il accepte le job;</li>
<li>Le concert est demain soir et il est 20h déjà.</li>
<li>Le bâtiment, le New Age Building, est un futur bâtiment de Biotechnica, la grosse corpo</li>
</ul>
<p>Le seul début de piste qu'on avait c'était qu'il trainait souvent au <em>Jaded Flower</em> un bar hype de Bruxelles. Alors on a pas trainé vu le temps qu'il nous restait. Mais sur le chemin on s'est fait controler par Interpol. Je sais pas qui a bavé mais ils avaient l'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'ils nous avaient à l'œil, qu'on avait pas intérêt à faire de connerie… Putain ça promet cette mission artistique clandestine.</p>
<p>On est finalement arrivé au bar mais Ousma et moi on est resté planté à l'extérieur parce qu'il fallait être sappé <em>classe</em> 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. 😂</p>
<p>Et là on attend de leur nouvelles… du coup je gratte dans mon journal en fumant un cigare…</p>
Eurotour vol. 32022-09-13T00:00:00Zhttps://blog.foojin.com/2022/09/13/eurotour-vol-3/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-26-mai-2045-suite" tabindex="-1">Entrée du 26 mai 2045 - suite <a class="header-anchor" href="https://blog.foojin.com/2022/09/13/eurotour-vol-3/">#</a></h2>
<p>Reprenons.<br>
Le SUV s'est finalement arrêté devant l'<em>Olympus</em> dans <em>Little Hong Kong</em>, 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'est que le quartier était tellement mal famé que la MLA n'y foutait jamais les pieds. Un peu comme les no man's land de Night City en définitive.</p>
<p>Bref les cinq mecs sont sortis du SUV et ont commencé à observer les alentours, alors le groupe s'était tout naturellement arrêté lui aussi quelques mètres plus tôt.<br>
Avant qu'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'est pointé vers le groupe, l'air pas très frais, en criant à l'aide parce qu'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'attendait sa femme… elle l'attendait lui, pas Jack. Quelque part je comprends sa panique.</p>
<p>Mais la bonne nouvelle c'est qu'ils avaient retrouvé la trace de Jack, enfin en tout cas ils savaient vers où il allait. La mauvaise c'est qu'ils n'étaient pas les seuls à avoir entendu la complainte du corpo. Les 5 ont été attirés par le bruit et c'est devenu un gros problème quand ils ont reconnu Tinker… l'un d'eux a sorti son flingue pour le pointer sur la tête du chauffeur de taxi pour l'empêcher de partir en trombe. Ils voulaient des réponses. Ils auraient des réponses, d'une manière ou d'une autre. Enfin ça c'est ce qu'ils s'imaginaient.</p>
<p>Parce que Ranni, qui n'é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'ont pas abandonné pour autant et une course poursuite dans les rues dégueulasses et mal famées s'est engagée.</p>
<p>Ranni n'étant qu'une gamine elle a rapidement redonné le contrôle du taxi au chauffeur qui a dû s'improviser pilote de course pendant que les autres tiraient sur le SUV derrière eux. Ils ont réussi à s'en sortir in extremis en semant ces mafieux puis se sont cachés et ont appelé Angus.</p>
<p>C'est là que j'arrive en piste.</p>
<p>C'est à cette même planque qu'on les a rejoint et qu'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'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'un bar qui lui-même attirait les gars douteux comme une merde attire des mouches. On s'est tout de même arrêtés pour aller l'inspecter malgré le fait qu'on était tous assez certains que cet enfoiré de Jack aurait foutu le camp depuis bien longtemps.</p>
<p>Les mecs qui trainaient là trainaient aussi autour de l'épave et aussi frêles et drogués qu'ils étaient, nous, on était clairement en sous nombre. Alors on l'a joué fine, pour changer. On a fait les candides attirés uniquement par l'accident et non le chauffeur. Et je crois qu'on a bien fait parce que un des mecs, sûrement une sorte de leader, avait pas l'air content du pilote. On a fait genre ne pas le connaître pour tirer le maximum d'info en douceur et au bout d'un moment ce mec nous a raconté que Jack est arrivé en trombe, s'est pris le mur, est descendu de la caisse, s'est invité au deal de drogue qu'é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'est barré comme il était venu. L'autre gang a cru à une embrouille et a sorti les flingues… S'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'apparemment il ait été légèrement blessé. Compte tenu de ce qu'il nous a raconté, je comprends qu'il soit pas très content le mec.</p>
<p>En apparence on était sur le cul, comme des gamins à qui on racontait une histoire de dingue, mais à l'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'il ferait avec une dose de cheval de drogue dans le pif.<br>
On lui alors demandé quelle direction il avait pris “afin de l'éviter”. Je sais pas s'il était trop con ou si c'était un coup de génie de notre part, toujours est-il qu'on a eu l'info sans qu'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.</p>
<p>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'autre gros con qui avaient l'air d'observer un truc au sol. Du coup, je me suis arrêté et j'ai feint de demander mon chemin pour très vite m'apercevoir qu'ils observaient une flaque de sang fraîche. On les a aussi embobiné pour découvrir qu'ils cherchaient eux aussi la trace de Jack et que c'était son sang. Putain ces boloss c'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.</p>
<p>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'on s'apprêtait à entrer, l'un d'entre nous a gaulé un mec qui nous filmait de l'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'a ratrappé sans problème. Enfin moi j'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'on voyait justement clairement Jack entrer dans le chantier. Ce journaliste s'appelait Irving Spyers. Je note ça là au cas où on doive le retrouver un jour parce qu'il aurait trop parlé.</p>
<p>Ce petit contre-temps réglé on est retourné au chantier mais tout ce qu'on avait trouvé c'était un regroupement d'une trentaine de gangsters en pleine cérémonie de quelque chose… en fait c'é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'appelait les Démons, mais elle avait rejoint le gang 2 qui s'appelait les Roses, exclusivement composé de meuf. Je suis resté à l'écart planqué comme les autres sans trop prêter plus que ça attention à leur baston… enfin jusqu'à ce qu'un mec chancelant ait déboulé et qui, après s'être mis en hauteur, a commencé un monologue mystique… j'ai rien compris à ce qu'il déblatérait mais je crois qu'il considérait la meuf ligotée comme sa reine d'un nouvel âge réminiscent. Forcément ce mec qui s'invite dans une baston de gang à l'improviste… c'était Jack.</p>
<p>On s'est alors tous mobilisé pour s'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.<br>
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'ils butent pas Jack et moi… moi j'ai fait ce que je fais de mieux. J'ai foutu mon cul à l'intérieur d'une de ses grosses machine qui fore les tunnels et je l'ai bidouillé pour la démarrer.<br>
Ousma avait été discret, Vinz beaucoup moins… faut dire il était déjà blessé le pauvre et Ranni… disons juste qu'elle est bien meilleure pour obtenir ce qu'elle veut des systèmes informatiques que des gens.<br>
Sentant la situation merder puissance mille, j'ai fait comme à la maison : quand la diplomatie échoue, je rentre dans le lard… en l'occurence cette fois-ci avec une foreuse de plusieurs milliers de tonnes.</p>
<p>Avec les phares surpuissants dans la gueule et le bruit assourdissant d'une foreuse en marche, j'ai attiré à tous leur attention. Et je leur ai foncé dessus. Bon, c'est une foreuse, pas un dragster alors ils m'ont tous évité, à ma grande déception, mais j'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'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'était pas bon.</p>
<p>Une fois tout le monde dans la caisse on s'est barré. On avait mis la meuf dans le coffre mais à un feu rouge on a dit à Ousma de la sortir. Ça l'aurait foutu mal pendant un contrôle de la MLA. Jack a protesté mais comme Ousma l'avait désarmé, ses arguments n'avait plus de poids à nos yeux.<br>
Finalement on a appelé Angus pour rassurer le staff qu'on était sur le chemin du retour avec la cible. Une fois arrivés on a eu le droit au comité d'accueil le plus froid que j'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'… les rats.</p>
<p>Enfin bref… sacrée nuit. Et sacrée bête cette foreuse. Je m'en souviendrai.</p>
Eurotour vol. 22022-09-09T00:00:00Zhttps://blog.foojin.com/2022/09/09/eurotour-vol-2/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-25-mai-2045" tabindex="-1">Entrée du 25 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/09/09/eurotour-vol-2/">#</a></h2>
<p>Aujourd'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'étais comme un poisson dans l'eau, apprécié pour mes skills de techie et entouré par mes pairs.</p>
<p>Enfin bref, tout s'est bien passé avant, pendant et après le concert. Contre toute attente. Faut dire j'étais pas confiant. Jack Entropy est connu pour un être rocker pur et dur, à l'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'où il tire son énergie… de la drogue sûrement. La foule était à la hauteur et vu ce dont j'ai été témoin la veille au pub je m'attendais sincèrement à des débordements. Mais non.</p>
<p>Le concert s'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.</p>
<p>Tous crevés par cette journée on est rentré se coucher. Ce que je vais faire de suite d'ailleurs.</p>
<hr>
<h2 id="entree-du-26-mai-2045" tabindex="-1">Entrée du 26 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/09/09/eurotour-vol-2/">#</a></h2>
<p>J'ai été réveillé à 4h du mat par le tambourinement d'un poing sur la porte de ma piaule. C'était Angus, le garde du corps de Jack. J'ai pas tout pigé de suite. Il était là debout devant moi en tenant un carton rempli de flingues et m'a demandé si je savais conduire. J'ai bredouillé que oui puis il m'a tendu le carton en me disant que j'avais 3 minutes pour me couvrir le cul et qu'il m'attendait au garage de l'hôtel. C'est à ce moment-là que je me suis rendu compte que j'étais à poil, le zob à l'air…</p>
<p>Arrivé en bas, Angus m'a filé les clés d'une bagnole pendant qu'il se dirigeait vers une autre et m'a dit de le suivre. Je lui ai demandé alors ce qu'on allait foutre et il m'a répondu qu'on allait rejoindre des membres du staff dans la merde qui étaient à la recherche de Jack. J'ai pas osé poser plus de questions sur le moment. Et je sais pas pourquoi j'ai tout de suite su que Vinz était dans le coup et comme d'hab j'ai vu juste.</p>
<p>On a fini par les rejoindre dans un quartier manifestement pas penché sur l'hospitalité. J'ai vite remarqué que le groupe en question était composé de <strong>Vinz</strong>, forcément, de <strong>Ousma</strong> le gars de la sécu, <strong>Ranni</strong> la gamine netrunneuse et Tinker ma chef. Cette dernière est montée dans la caisse d'Angus pendant que les autres montaient dans la mienne. Moi j'étais là comme un con à toujours pas comprendre ce qu'il se passait et Vinz m'a filé une adresse où on devait se rendre juste avant de me dire qu'il allait m'expliquer.</p>
<p>Putain, apparemment j'ai raté l'after du siècle.</p>
<p>Mais je vais gratter ça là parce que ça mérite de rester dans les annales quelque part.</p>
<p>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'est là que l'enquête aurait commencé.</p>
<p>En bref, ils ont cherché Jack partout dans l'hôtel, ils ont vérifié les caméras et enregistrements, ils ont questionné plusieurs personnes du staff et clients de l'hôtel mais rien. Aucune foutue trace de Jack. La seule issue non surveillée par les caméras serait par l'arrière, via la cour de livraison de l'hôtel. Mais le technicien en charge de cette zone était formel, il aurait reçu une alerte si quelqu'un était passé par là. Je sais pas s'ils l'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'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'air complètement perchés tous les deux mais la description du gars correspondait à celle de Jack.</p>
<p>Ils ont décidé de refaire le tour du staff de la tournée pour tirer un max d'info et se sont rendu compte que Tinker manquait à l'appel. Ils ont fait ouvrir sa chambre et, surprise, y a une troisième mi-temps qui a lieu là-bas, à base d'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 <em>yellow card</em>, une carte qu'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'humour par super développé apparemment. Parait que Jack aussi était parti sans sa <em>yellow card</em> ni sa carte d'abonnement de <em>TraumTeam</em>. Ça craignait. S'ils leur arrivait une merde ça puait sévèrement du fiac.</p>
<p>Ils se sont dit alors qu'ils avaient dû prendre un taco. Aussi drogués qu'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 <em>Green Line</em>, avait en effet envoyé un taco à une heure correspondante à l'hôtel. Par contre, impossible d'avoir le chauffeur au bout du fil, ils ont dû le faire venir pour qu'il les emmène directement à la même destination.</p>
<p>Ils sont donc arrivé au <em>Blind Lady</em>. Un casino, qui sans être super huppé, ne laisse pas entrer n'importe qui habillé n'importe comment. Ils ont fouillé le casino, interrogé les clients et staff mais aucune trace des deux drogués. C'est alors que Ranni a décidé d'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'elle a trafiqué une machine à sous et que Jack a gagné pour quelque chose comme 120k d'eddies. Sauf qu'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.</p>
<p>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'est dit que poursuivre un mec qui a volé 120k d'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'te chatte de l'enfer, et ils ont décidé de suivre le SUV.</p>
<p>C'est là que c'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'aille chier.</p>
Eurotour vol. 12022-08-30T00:00:00Zhttps://blog.foojin.com/2022/08/30/eurotour-vol-1/<p><em>DISCLAIMER : Ceci est un compte-rendu d'une partie de jeu de rôle sur Cyberpunk RED du point de vue de mon personnage, Borys "Zed" Zedinski, un techie, sur la campagne Eurotour. Tout ceci n'est donc que fiction. Toute ressemblance bla bla bla…</em></p>
<h2 id="entree-du-16-mai-2045" tabindex="-1">Entrée du 16 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/08/30/eurotour-vol-1/">#</a></h2>
<p>Mon charcudoc m'a conseillé de tenir à jour un carnet de bord. Enfin ses mots précis étaient plutôt que je devrais tenir "un journal intime et d'y relater tout ce que je fais". C'est censé m'aider à gérer ma colère. Mais j'ai une colère d'adulte, pas de gamin de 10 ans alors ce sera un carnet de bord.</p>
<p>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.</p>
<p>Groot, lui, il connait pas les vacances, il est reparti en mission, en solo, comme le solo qu'il est. Pendant ce temps, je m'occupe doucement comme je peux et je bulle aussi, beaucoup même.</p>
<p>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'intéresse vraiment.</p>
<hr>
<h2 id="entree-du-17-mai-2045" tabindex="-1">Entrée du 17 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/08/30/eurotour-vol-1/">#</a></h2>
<p>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. (ᵟຶ︵ ᵟຶ)</p>
<p>On part dans quelques jours, je vais préparer mon sac, moi.</p>
<hr>
<h2 id="entree-du-20-mai-2045" tabindex="-1">Entrée du 20 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/08/30/eurotour-vol-1/">#</a></h2>
<p>Mon choom Vinz a pour une fois des relations qui auront servi à quelque chose. Grâce à elles, j'ai pu amener Lucille avec moi. Il parait que les lois sur les armes en Angleterre sont beaucoup plus sévères qu'à Night City donc même si on a pu amener nos armes, et surtout mon fusil à pompe préféré, faudra la jouer fine.</p>
<p>Fais gaffe Liverpool, j'arrive !</p>
<hr>
<h2 id="entree-du-22-mai-2045" tabindex="-1">Entréé du 22 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/08/30/eurotour-vol-1/">#</a></h2>
<p>On est bien arrivé. On loge chez la famille de Philip.
Pendant qu'il gère ses histoires de famille, Vinz et moi on va visiter les meilleures attractions de la ville : ses pubs !
J'espère que ces brits ont de l'alcool de qualité.</p>
<hr>
<h2 id="entree-du-23-mai-2045" tabindex="-1">Entrée du 23 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/08/30/eurotour-vol-1/">#</a></h2>
<p>Putain mais quelle soirée ! Ah ça a fait du bien, ça faisait longtemps que j'avais pas passé une si bonne soirée pour souffler.</p>
<p>On est allé dans un de ces pubs, je sais plus le nom, et on s'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.</p>
<p>Enfin même s'ils ont pas de style ces brits savent vivre il faut l'avouer.</p>
<p>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'invite à notre table avec fracas. J'ai à peine eu le temps de sauver ma bouteille.</p>
<p>Vinz, lui, a préféré sauver sa bouteille pour la fracasser sur la tête du mec qui s'était étalé sur la table. Je comprends pas toujours pourquoi il fait ce qu'il fait… mais toujours est-il qu'un des potes costauds du gars en question a vu ça et s'est ramené pour remettre les idées de Vinz en place. Hahaha il m'aurait demandé je lui aurait dit que c'était vain mais bon. Je l'ai laissé faire. En sirotant mon scotch. Le sourire aux lèvres.</p>
<p>J'ai dû m'interposer à un moment parce que Vinz avait toujours la technique mais la visée et la force plutôt approximative. C'est pas comme ça qu'il l'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'est à ce moment là que les vigiles sont arrivés pour séparer tout le monde.</p>
<p>C'est après ça qu'un des mecs de l'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'approche donc et nous dit direct qu'il aime notre style (je sais pas s'il parlait de nos fringues ou de la baston mais dans un cas comme dans l'autre ça aurait été vrai héhé) et nous demande d'où on vient. Il a l'air enchanté de savoir qu'on vient de NC et là il nous propose un job.
Bon je suis pas enchanté par l'idée de prime abord, je suis en vacances bordel.</p>
<p>Mais le gars, qui s'est présenté sous le nom de Ace, nous propose de bosser sur la tournée européenne de Jack <em>fucking</em> 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'Angleterre, la Belgique, la France, l'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'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'Ousma, un gars qui a l'air d'avoir de la bouteille dans le métier.</p>
<p>Bon on a pas dit oui tout de suite, on voulait en parler à Philip d'abord mais on a pris ses coordonnées et on lui a dit qu'on le tiendrait au courant.</p>
<p>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'une foutue cloche sonne là-bas. Va comprendre…</p>
<p>Bon maintenant que la tête tourne moins, je vais aller me coucher.</p>
<p><strong>Note pour plus tard</strong> : On peut pas fumer à l'intérieur des foutus bâtiments en Angleterre. Heureusement qu'ils ont du bon alcool pour se rattrapper.</p>
<hr>
<h2 id="entree-du-24-mai-2045" tabindex="-1">Entrée du 24 mai 2045 <a class="header-anchor" href="https://blog.foojin.com/2022/08/30/eurotour-vol-1/">#</a></h2>
<p>Bordel, j'ai mal à la tête.</p>
<p>Bon on a causé avec Philip, il voit pas de soucis pour qu'on fasse cette tournée. Tant mieux parce que je pense que l'aurais faite quand même.</p>
<p>Du coup avec Vinz on est allé à l'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.</p>
<p>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.</p>
<ul>
<li>Ranni, une gamine netrunneuse</li>
<li>Jimenez donc qui est le manager de la tournée</li>
<li>Catherine Clemens qui est la directrice de marketing</li>
<li>Ace qui, on l'apprend, est le directeur de la sécurité</li>
<li>Tinker qui sera sûrement ma boss puisqu'elle est Techie en chef</li>
</ul>
<p>C'est parti ! Les vacances pépouze en Europe tout frais payé, nous voilà !</p>
L'alchimie pour les béotiens2022-08-29T00:00:00Zhttps://blog.foojin.com/2022/08/29/lalchimie-pour-les-beotiens/<p>Je suis maître de jeu dans une partie de Donjon et Dragons 5ème édition et mes joueurs ont pris des cours d'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'aurais dû le voir venir…</p>
<p>En attendant, je me suis retrouvé comme un con parce qu'il n'y a pas de règles officielles pour l'alchimie et je ne peux pas leur dire qu'ils ne pourront pas en préparer. J'ai merdé, donc j'assume.</p>
<p>Du coup j'ai créé une nouvelle règle pour ça et je l'ai mise en page avec le super outil en ligne <a href="https://homebrewery.naturalcrit.com/">The Homebrewery</a>.</p>
<p>Amis rôlistes, consœurs MJ, n'hésitez pas à le télécharger ci-dessous, l'utiliser, le modifier et surtout me faire savoir si vous voyez des erreurs ou avez des idées d'amélioration.<br>
Cette règle n'est clairement pas éprouvée.</p>
<p><a href="https://blog.foojin.com/2022/08/29/lalchimie-pour-les-beotiens/L-alchimie-pour-les-beotiens---v1.0.0.pdf" download="">Télécharger le PDF <span class="metadata">L-alchimie-pour-les-beotiens---v1.0.0.pdf (~2Mo)</span></a></p>
Appareil photo reflex cherche nouveau propriétaire2022-08-22T00:00:00Zhttps://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/<p>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.</p>
<h2 id="canon-eos-7d" tabindex="-1">Canon EOS 7D <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Quelques éraflures sur l'écran d'information mais l'écran LCD et tout le reste de l'appareil est nickel.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/nHoRFUMg7u-400.avif 400w, https://blog.foojin.com/img/nHoRFUMg7u-812.avif 812w, https://blog.foojin.com/img/nHoRFUMg7u-1400.avif 1400w, https://blog.foojin.com/img/nHoRFUMg7u-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/nHoRFUMg7u-400.webp 400w, https://blog.foojin.com/img/nHoRFUMg7u-812.webp 812w, https://blog.foojin.com/img/nHoRFUMg7u-1400.webp 1400w, https://blog.foojin.com/img/nHoRFUMg7u-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/nHoRFUMg7u-400.jpeg 400w, https://blog.foojin.com/img/nHoRFUMg7u-812.jpeg 812w, https://blog.foojin.com/img/nHoRFUMg7u-1400.jpeg 1400w, https://blog.foojin.com/img/nHoRFUMg7u-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/nHoRFUMg7u-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/zoIlTj415L-400.avif 400w, https://blog.foojin.com/img/zoIlTj415L-812.avif 812w, https://blog.foojin.com/img/zoIlTj415L-1400.avif 1400w, https://blog.foojin.com/img/zoIlTj415L-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/zoIlTj415L-400.webp 400w, https://blog.foojin.com/img/zoIlTj415L-812.webp 812w, https://blog.foojin.com/img/zoIlTj415L-1400.webp 1400w, https://blog.foojin.com/img/zoIlTj415L-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/zoIlTj415L-400.jpeg 400w, https://blog.foojin.com/img/zoIlTj415L-812.jpeg 812w, https://blog.foojin.com/img/zoIlTj415L-1400.jpeg 1400w, https://blog.foojin.com/img/zoIlTj415L-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/zoIlTj415L-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/xxTlXs-heh-400.avif 400w, https://blog.foojin.com/img/xxTlXs-heh-812.avif 812w, https://blog.foojin.com/img/xxTlXs-heh-1400.avif 1400w, https://blog.foojin.com/img/xxTlXs-heh-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/xxTlXs-heh-400.webp 400w, https://blog.foojin.com/img/xxTlXs-heh-812.webp 812w, https://blog.foojin.com/img/xxTlXs-heh-1400.webp 1400w, https://blog.foojin.com/img/xxTlXs-heh-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/xxTlXs-heh-400.jpeg 400w, https://blog.foojin.com/img/xxTlXs-heh-812.jpeg 812w, https://blog.foojin.com/img/xxTlXs-heh-1400.jpeg 1400w, https://blog.foojin.com/img/xxTlXs-heh-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/xxTlXs-heh-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/OMjOjTYP2k-400.avif 400w, https://blog.foojin.com/img/OMjOjTYP2k-812.avif 812w, https://blog.foojin.com/img/OMjOjTYP2k-1400.avif 1400w, https://blog.foojin.com/img/OMjOjTYP2k-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/OMjOjTYP2k-400.webp 400w, https://blog.foojin.com/img/OMjOjTYP2k-812.webp 812w, https://blog.foojin.com/img/OMjOjTYP2k-1400.webp 1400w, https://blog.foojin.com/img/OMjOjTYP2k-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/OMjOjTYP2k-400.jpeg 400w, https://blog.foojin.com/img/OMjOjTYP2k-812.jpeg 812w, https://blog.foojin.com/img/OMjOjTYP2k-1400.jpeg 1400w, https://blog.foojin.com/img/OMjOjTYP2k-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/OMjOjTYP2k-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/NodS4yxe9g-400.avif 400w, https://blog.foojin.com/img/NodS4yxe9g-812.avif 812w, https://blog.foojin.com/img/NodS4yxe9g-1400.avif 1400w, https://blog.foojin.com/img/NodS4yxe9g-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/NodS4yxe9g-400.webp 400w, https://blog.foojin.com/img/NodS4yxe9g-812.webp 812w, https://blog.foojin.com/img/NodS4yxe9g-1400.webp 1400w, https://blog.foojin.com/img/NodS4yxe9g-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/NodS4yxe9g-400.jpeg 400w, https://blog.foojin.com/img/NodS4yxe9g-812.jpeg 812w, https://blog.foojin.com/img/NodS4yxe9g-1400.jpeg 1400w, https://blog.foojin.com/img/NodS4yxe9g-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/NodS4yxe9g-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="canon-grip-bg-e7" tabindex="-1">Canon Grip BG-E7 <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/-Q-wMUlsho-400.avif 400w, https://blog.foojin.com/img/-Q-wMUlsho-812.avif 812w, https://blog.foojin.com/img/-Q-wMUlsho-1400.avif 1400w, https://blog.foojin.com/img/-Q-wMUlsho-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/-Q-wMUlsho-400.webp 400w, https://blog.foojin.com/img/-Q-wMUlsho-812.webp 812w, https://blog.foojin.com/img/-Q-wMUlsho-1400.webp 1400w, https://blog.foojin.com/img/-Q-wMUlsho-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/-Q-wMUlsho-400.jpeg 400w, https://blog.foojin.com/img/-Q-wMUlsho-812.jpeg 812w, https://blog.foojin.com/img/-Q-wMUlsho-1400.jpeg 1400w, https://blog.foojin.com/img/-Q-wMUlsho-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/-Q-wMUlsho-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Hz-Opr7hUA-400.avif 400w, https://blog.foojin.com/img/Hz-Opr7hUA-812.avif 812w, https://blog.foojin.com/img/Hz-Opr7hUA-1400.avif 1400w, https://blog.foojin.com/img/Hz-Opr7hUA-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Hz-Opr7hUA-400.webp 400w, https://blog.foojin.com/img/Hz-Opr7hUA-812.webp 812w, https://blog.foojin.com/img/Hz-Opr7hUA-1400.webp 1400w, https://blog.foojin.com/img/Hz-Opr7hUA-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/Hz-Opr7hUA-400.jpeg 400w, https://blog.foojin.com/img/Hz-Opr7hUA-812.jpeg 812w, https://blog.foojin.com/img/Hz-Opr7hUA-1400.jpeg 1400w, https://blog.foojin.com/img/Hz-Opr7hUA-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Hz-Opr7hUA-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/0fO_7dEblL-400.avif 400w, https://blog.foojin.com/img/0fO_7dEblL-812.avif 812w, https://blog.foojin.com/img/0fO_7dEblL-1400.avif 1400w, https://blog.foojin.com/img/0fO_7dEblL-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/0fO_7dEblL-400.webp 400w, https://blog.foojin.com/img/0fO_7dEblL-812.webp 812w, https://blog.foojin.com/img/0fO_7dEblL-1400.webp 1400w, https://blog.foojin.com/img/0fO_7dEblL-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/0fO_7dEblL-400.jpeg 400w, https://blog.foojin.com/img/0fO_7dEblL-812.jpeg 812w, https://blog.foojin.com/img/0fO_7dEblL-1400.jpeg 1400w, https://blog.foojin.com/img/0fO_7dEblL-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/0fO_7dEblL-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/WPxKH8KLIb-400.avif 400w, https://blog.foojin.com/img/WPxKH8KLIb-812.avif 812w, https://blog.foojin.com/img/WPxKH8KLIb-1400.avif 1400w, https://blog.foojin.com/img/WPxKH8KLIb-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/WPxKH8KLIb-400.webp 400w, https://blog.foojin.com/img/WPxKH8KLIb-812.webp 812w, https://blog.foojin.com/img/WPxKH8KLIb-1400.webp 1400w, https://blog.foojin.com/img/WPxKH8KLIb-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/WPxKH8KLIb-400.jpeg 400w, https://blog.foojin.com/img/WPxKH8KLIb-812.jpeg 812w, https://blog.foojin.com/img/WPxKH8KLIb-1400.jpeg 1400w, https://blog.foojin.com/img/WPxKH8KLIb-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/WPxKH8KLIb-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/H-NWh1oF9d-400.avif 400w, https://blog.foojin.com/img/H-NWh1oF9d-812.avif 812w, https://blog.foojin.com/img/H-NWh1oF9d-1400.avif 1400w, https://blog.foojin.com/img/H-NWh1oF9d-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/H-NWh1oF9d-400.webp 400w, https://blog.foojin.com/img/H-NWh1oF9d-812.webp 812w, https://blog.foojin.com/img/H-NWh1oF9d-1400.webp 1400w, https://blog.foojin.com/img/H-NWh1oF9d-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/H-NWh1oF9d-400.jpeg 400w, https://blog.foojin.com/img/H-NWh1oF9d-812.jpeg 812w, https://blog.foojin.com/img/H-NWh1oF9d-1400.jpeg 1400w, https://blog.foojin.com/img/H-NWh1oF9d-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/H-NWh1oF9d-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/uEjeXlTWxN-400.avif 400w, https://blog.foojin.com/img/uEjeXlTWxN-812.avif 812w, https://blog.foojin.com/img/uEjeXlTWxN-1400.avif 1400w, https://blog.foojin.com/img/uEjeXlTWxN-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/uEjeXlTWxN-400.webp 400w, https://blog.foojin.com/img/uEjeXlTWxN-812.webp 812w, https://blog.foojin.com/img/uEjeXlTWxN-1400.webp 1400w, https://blog.foojin.com/img/uEjeXlTWxN-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/uEjeXlTWxN-400.jpeg 400w, https://blog.foojin.com/img/uEjeXlTWxN-812.jpeg 812w, https://blog.foojin.com/img/uEjeXlTWxN-1400.jpeg 1400w, https://blog.foojin.com/img/uEjeXlTWxN-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/uEjeXlTWxN-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="flash-canon-430ex-ii-speedlite" tabindex="-1">Flash Canon 430EX II Speedlite <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Comme neuf, je ne l'ai quasiment jamais utilisé pour être honnête. Je préfère travailler avec la lumière naturel en général.</p>
<p>Il vient avec son pied amovible et sa sacoche de transport.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/IJwGt1nzoh-400.avif 400w, https://blog.foojin.com/img/IJwGt1nzoh-812.avif 812w, https://blog.foojin.com/img/IJwGt1nzoh-1400.avif 1400w, https://blog.foojin.com/img/IJwGt1nzoh-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/IJwGt1nzoh-400.webp 400w, https://blog.foojin.com/img/IJwGt1nzoh-812.webp 812w, https://blog.foojin.com/img/IJwGt1nzoh-1400.webp 1400w, https://blog.foojin.com/img/IJwGt1nzoh-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/IJwGt1nzoh-400.jpeg 400w, https://blog.foojin.com/img/IJwGt1nzoh-812.jpeg 812w, https://blog.foojin.com/img/IJwGt1nzoh-1400.jpeg 1400w, https://blog.foojin.com/img/IJwGt1nzoh-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/IJwGt1nzoh-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/cciH-3B0Vu-400.avif 400w, https://blog.foojin.com/img/cciH-3B0Vu-812.avif 812w, https://blog.foojin.com/img/cciH-3B0Vu-1400.avif 1400w, https://blog.foojin.com/img/cciH-3B0Vu-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/cciH-3B0Vu-400.webp 400w, https://blog.foojin.com/img/cciH-3B0Vu-812.webp 812w, https://blog.foojin.com/img/cciH-3B0Vu-1400.webp 1400w, https://blog.foojin.com/img/cciH-3B0Vu-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/cciH-3B0Vu-400.jpeg 400w, https://blog.foojin.com/img/cciH-3B0Vu-812.jpeg 812w, https://blog.foojin.com/img/cciH-3B0Vu-1400.jpeg 1400w, https://blog.foojin.com/img/cciH-3B0Vu-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/cciH-3B0Vu-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/OWoNCdroSe-400.avif 400w, https://blog.foojin.com/img/OWoNCdroSe-812.avif 812w, https://blog.foojin.com/img/OWoNCdroSe-1400.avif 1400w, https://blog.foojin.com/img/OWoNCdroSe-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/OWoNCdroSe-400.webp 400w, https://blog.foojin.com/img/OWoNCdroSe-812.webp 812w, https://blog.foojin.com/img/OWoNCdroSe-1400.webp 1400w, https://blog.foojin.com/img/OWoNCdroSe-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/OWoNCdroSe-400.jpeg 400w, https://blog.foojin.com/img/OWoNCdroSe-812.jpeg 812w, https://blog.foojin.com/img/OWoNCdroSe-1400.jpeg 1400w, https://blog.foojin.com/img/OWoNCdroSe-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/OWoNCdroSe-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/ADAbJiH3wb-400.avif 400w, https://blog.foojin.com/img/ADAbJiH3wb-812.avif 812w, https://blog.foojin.com/img/ADAbJiH3wb-1400.avif 1400w, https://blog.foojin.com/img/ADAbJiH3wb-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/ADAbJiH3wb-400.webp 400w, https://blog.foojin.com/img/ADAbJiH3wb-812.webp 812w, https://blog.foojin.com/img/ADAbJiH3wb-1400.webp 1400w, https://blog.foojin.com/img/ADAbJiH3wb-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/ADAbJiH3wb-400.jpeg 400w, https://blog.foojin.com/img/ADAbJiH3wb-812.jpeg 812w, https://blog.foojin.com/img/ADAbJiH3wb-1400.jpeg 1400w, https://blog.foojin.com/img/ADAbJiH3wb-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/ADAbJiH3wb-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/tOJbjPK94L-400.avif 400w, https://blog.foojin.com/img/tOJbjPK94L-812.avif 812w, https://blog.foojin.com/img/tOJbjPK94L-1400.avif 1400w, https://blog.foojin.com/img/tOJbjPK94L-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/tOJbjPK94L-400.webp 400w, https://blog.foojin.com/img/tOJbjPK94L-812.webp 812w, https://blog.foojin.com/img/tOJbjPK94L-1400.webp 1400w, https://blog.foojin.com/img/tOJbjPK94L-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/tOJbjPK94L-400.jpeg 400w, https://blog.foojin.com/img/tOJbjPK94L-812.jpeg 812w, https://blog.foojin.com/img/tOJbjPK94L-1400.jpeg 1400w, https://blog.foojin.com/img/tOJbjPK94L-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/tOJbjPK94L-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="objectif-canon-ef-50mm-f-1-8" tabindex="-1">Objectif Canon EF 50mm f/1.8 <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Mon petit préféré. Parfait pour les portraits avec sa grande ouverture.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/AfLWdrRc1C-400.avif 400w, https://blog.foojin.com/img/AfLWdrRc1C-812.avif 812w, https://blog.foojin.com/img/AfLWdrRc1C-1400.avif 1400w, https://blog.foojin.com/img/AfLWdrRc1C-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/AfLWdrRc1C-400.webp 400w, https://blog.foojin.com/img/AfLWdrRc1C-812.webp 812w, https://blog.foojin.com/img/AfLWdrRc1C-1400.webp 1400w, https://blog.foojin.com/img/AfLWdrRc1C-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/AfLWdrRc1C-400.jpeg 400w, https://blog.foojin.com/img/AfLWdrRc1C-812.jpeg 812w, https://blog.foojin.com/img/AfLWdrRc1C-1400.jpeg 1400w, https://blog.foojin.com/img/AfLWdrRc1C-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/AfLWdrRc1C-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/v2XOSAiHf7-400.avif 400w, https://blog.foojin.com/img/v2XOSAiHf7-812.avif 812w, https://blog.foojin.com/img/v2XOSAiHf7-1400.avif 1400w, https://blog.foojin.com/img/v2XOSAiHf7-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/v2XOSAiHf7-400.webp 400w, https://blog.foojin.com/img/v2XOSAiHf7-812.webp 812w, https://blog.foojin.com/img/v2XOSAiHf7-1400.webp 1400w, https://blog.foojin.com/img/v2XOSAiHf7-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/v2XOSAiHf7-400.jpeg 400w, https://blog.foojin.com/img/v2XOSAiHf7-812.jpeg 812w, https://blog.foojin.com/img/v2XOSAiHf7-1400.jpeg 1400w, https://blog.foojin.com/img/v2XOSAiHf7-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/v2XOSAiHf7-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/pTWUKD8GVP-400.avif 400w, https://blog.foojin.com/img/pTWUKD8GVP-812.avif 812w, https://blog.foojin.com/img/pTWUKD8GVP-1400.avif 1400w, https://blog.foojin.com/img/pTWUKD8GVP-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/pTWUKD8GVP-400.webp 400w, https://blog.foojin.com/img/pTWUKD8GVP-812.webp 812w, https://blog.foojin.com/img/pTWUKD8GVP-1400.webp 1400w, https://blog.foojin.com/img/pTWUKD8GVP-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/pTWUKD8GVP-400.jpeg 400w, https://blog.foojin.com/img/pTWUKD8GVP-812.jpeg 812w, https://blog.foojin.com/img/pTWUKD8GVP-1400.jpeg 1400w, https://blog.foojin.com/img/pTWUKD8GVP-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/pTWUKD8GVP-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="objectif-canon-ef-s-10-22mm-f-3-5-4-5-usm" tabindex="-1">Objectif Canon EF-S 10-22mm f/3.5-4.5 USM <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Un peu plus usé que les autres car c'est déjà une deuxième main. Mais c'est un bon grand angle avec une ouverture décente. Il vient avec un filtre UV Hoya mais sans capuchon (je l'ai acheté sans déjà à l'époque).</p>
<p>Bien que le plus usé, il ne s'agit là que d'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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/njMa9XFWRi-400.avif 400w, https://blog.foojin.com/img/njMa9XFWRi-812.avif 812w, https://blog.foojin.com/img/njMa9XFWRi-1400.avif 1400w, https://blog.foojin.com/img/njMa9XFWRi-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/njMa9XFWRi-400.webp 400w, https://blog.foojin.com/img/njMa9XFWRi-812.webp 812w, https://blog.foojin.com/img/njMa9XFWRi-1400.webp 1400w, https://blog.foojin.com/img/njMa9XFWRi-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/njMa9XFWRi-400.jpeg 400w, https://blog.foojin.com/img/njMa9XFWRi-812.jpeg 812w, https://blog.foojin.com/img/njMa9XFWRi-1400.jpeg 1400w, https://blog.foojin.com/img/njMa9XFWRi-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/njMa9XFWRi-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/ZAdGnI0M7m-400.avif 400w, https://blog.foojin.com/img/ZAdGnI0M7m-812.avif 812w, https://blog.foojin.com/img/ZAdGnI0M7m-1400.avif 1400w, https://blog.foojin.com/img/ZAdGnI0M7m-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/ZAdGnI0M7m-400.webp 400w, https://blog.foojin.com/img/ZAdGnI0M7m-812.webp 812w, https://blog.foojin.com/img/ZAdGnI0M7m-1400.webp 1400w, https://blog.foojin.com/img/ZAdGnI0M7m-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/ZAdGnI0M7m-400.jpeg 400w, https://blog.foojin.com/img/ZAdGnI0M7m-812.jpeg 812w, https://blog.foojin.com/img/ZAdGnI0M7m-1400.jpeg 1400w, https://blog.foojin.com/img/ZAdGnI0M7m-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/ZAdGnI0M7m-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/SLD8EOin9R-400.avif 400w, https://blog.foojin.com/img/SLD8EOin9R-812.avif 812w, https://blog.foojin.com/img/SLD8EOin9R-1400.avif 1400w, https://blog.foojin.com/img/SLD8EOin9R-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/SLD8EOin9R-400.webp 400w, https://blog.foojin.com/img/SLD8EOin9R-812.webp 812w, https://blog.foojin.com/img/SLD8EOin9R-1400.webp 1400w, https://blog.foojin.com/img/SLD8EOin9R-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/SLD8EOin9R-400.jpeg 400w, https://blog.foojin.com/img/SLD8EOin9R-812.jpeg 812w, https://blog.foojin.com/img/SLD8EOin9R-1400.jpeg 1400w, https://blog.foojin.com/img/SLD8EOin9R-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/SLD8EOin9R-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/ZDu5ofy9TF-400.avif 400w, https://blog.foojin.com/img/ZDu5ofy9TF-812.avif 812w, https://blog.foojin.com/img/ZDu5ofy9TF-1400.avif 1400w, https://blog.foojin.com/img/ZDu5ofy9TF-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/ZDu5ofy9TF-400.webp 400w, https://blog.foojin.com/img/ZDu5ofy9TF-812.webp 812w, https://blog.foojin.com/img/ZDu5ofy9TF-1400.webp 1400w, https://blog.foojin.com/img/ZDu5ofy9TF-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/ZDu5ofy9TF-400.jpeg 400w, https://blog.foojin.com/img/ZDu5ofy9TF-812.jpeg 812w, https://blog.foojin.com/img/ZDu5ofy9TF-1400.jpeg 1400w, https://blog.foojin.com/img/ZDu5ofy9TF-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/ZDu5ofy9TF-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Us6cNXTbub-400.avif 400w, https://blog.foojin.com/img/Us6cNXTbub-812.avif 812w, https://blog.foojin.com/img/Us6cNXTbub-1400.avif 1400w, https://blog.foojin.com/img/Us6cNXTbub-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Us6cNXTbub-400.webp 400w, https://blog.foojin.com/img/Us6cNXTbub-812.webp 812w, https://blog.foojin.com/img/Us6cNXTbub-1400.webp 1400w, https://blog.foojin.com/img/Us6cNXTbub-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/Us6cNXTbub-400.jpeg 400w, https://blog.foojin.com/img/Us6cNXTbub-812.jpeg 812w, https://blog.foojin.com/img/Us6cNXTbub-1400.jpeg 1400w, https://blog.foojin.com/img/Us6cNXTbub-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Us6cNXTbub-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="objectif-canon-ef-28-80mm-f-3-5-5-6" tabindex="-1">Objectif Canon EF 28-80mm f/3.5-5.6 <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Objectif somme toute standard mais très correct pour un zoom/dézoom léger.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/6QF2nd7Gwu-400.avif 400w, https://blog.foojin.com/img/6QF2nd7Gwu-812.avif 812w, https://blog.foojin.com/img/6QF2nd7Gwu-1400.avif 1400w, https://blog.foojin.com/img/6QF2nd7Gwu-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/6QF2nd7Gwu-400.webp 400w, https://blog.foojin.com/img/6QF2nd7Gwu-812.webp 812w, https://blog.foojin.com/img/6QF2nd7Gwu-1400.webp 1400w, https://blog.foojin.com/img/6QF2nd7Gwu-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/6QF2nd7Gwu-400.jpeg 400w, https://blog.foojin.com/img/6QF2nd7Gwu-812.jpeg 812w, https://blog.foojin.com/img/6QF2nd7Gwu-1400.jpeg 1400w, https://blog.foojin.com/img/6QF2nd7Gwu-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/6QF2nd7Gwu-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Wgc9fVH3ut-400.avif 400w, https://blog.foojin.com/img/Wgc9fVH3ut-812.avif 812w, https://blog.foojin.com/img/Wgc9fVH3ut-1400.avif 1400w, https://blog.foojin.com/img/Wgc9fVH3ut-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Wgc9fVH3ut-400.webp 400w, https://blog.foojin.com/img/Wgc9fVH3ut-812.webp 812w, https://blog.foojin.com/img/Wgc9fVH3ut-1400.webp 1400w, https://blog.foojin.com/img/Wgc9fVH3ut-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/Wgc9fVH3ut-400.jpeg 400w, https://blog.foojin.com/img/Wgc9fVH3ut-812.jpeg 812w, https://blog.foojin.com/img/Wgc9fVH3ut-1400.jpeg 1400w, https://blog.foojin.com/img/Wgc9fVH3ut-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Wgc9fVH3ut-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/PnyAWBK-Nz-400.avif 400w, https://blog.foojin.com/img/PnyAWBK-Nz-812.avif 812w, https://blog.foojin.com/img/PnyAWBK-Nz-1400.avif 1400w, https://blog.foojin.com/img/PnyAWBK-Nz-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/PnyAWBK-Nz-400.webp 400w, https://blog.foojin.com/img/PnyAWBK-Nz-812.webp 812w, https://blog.foojin.com/img/PnyAWBK-Nz-1400.webp 1400w, https://blog.foojin.com/img/PnyAWBK-Nz-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/PnyAWBK-Nz-400.jpeg 400w, https://blog.foojin.com/img/PnyAWBK-Nz-812.jpeg 812w, https://blog.foojin.com/img/PnyAWBK-Nz-1400.jpeg 1400w, https://blog.foojin.com/img/PnyAWBK-Nz-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/PnyAWBK-Nz-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="objectif-canon-ef-s-55-250mm-f-4-5-6-is" tabindex="-1">Objectif Canon EF-S 55-250mm f/4-5.6 IS <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Bon objectif avec un très bon zoom de départ et stabilisation d'image s'il vous plait. Parfait pour jouer les paparazzis d'animaux en restant à distance et garantir une image assez nette.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/F73KgHnbRO-400.avif 400w, https://blog.foojin.com/img/F73KgHnbRO-812.avif 812w, https://blog.foojin.com/img/F73KgHnbRO-1400.avif 1400w, https://blog.foojin.com/img/F73KgHnbRO-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/F73KgHnbRO-400.webp 400w, https://blog.foojin.com/img/F73KgHnbRO-812.webp 812w, https://blog.foojin.com/img/F73KgHnbRO-1400.webp 1400w, https://blog.foojin.com/img/F73KgHnbRO-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/F73KgHnbRO-400.jpeg 400w, https://blog.foojin.com/img/F73KgHnbRO-812.jpeg 812w, https://blog.foojin.com/img/F73KgHnbRO-1400.jpeg 1400w, https://blog.foojin.com/img/F73KgHnbRO-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/F73KgHnbRO-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/5DtXKFym_W-400.avif 400w, https://blog.foojin.com/img/5DtXKFym_W-812.avif 812w, https://blog.foojin.com/img/5DtXKFym_W-1400.avif 1400w, https://blog.foojin.com/img/5DtXKFym_W-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/5DtXKFym_W-400.webp 400w, https://blog.foojin.com/img/5DtXKFym_W-812.webp 812w, https://blog.foojin.com/img/5DtXKFym_W-1400.webp 1400w, https://blog.foojin.com/img/5DtXKFym_W-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/5DtXKFym_W-400.jpeg 400w, https://blog.foojin.com/img/5DtXKFym_W-812.jpeg 812w, https://blog.foojin.com/img/5DtXKFym_W-1400.jpeg 1400w, https://blog.foojin.com/img/5DtXKFym_W-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/5DtXKFym_W-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/tTlx7IEziJ-400.avif 400w, https://blog.foojin.com/img/tTlx7IEziJ-812.avif 812w, https://blog.foojin.com/img/tTlx7IEziJ-1400.avif 1400w, https://blog.foojin.com/img/tTlx7IEziJ-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/tTlx7IEziJ-400.webp 400w, https://blog.foojin.com/img/tTlx7IEziJ-812.webp 812w, https://blog.foojin.com/img/tTlx7IEziJ-1400.webp 1400w, https://blog.foojin.com/img/tTlx7IEziJ-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/tTlx7IEziJ-400.jpeg 400w, https://blog.foojin.com/img/tTlx7IEziJ-812.jpeg 812w, https://blog.foojin.com/img/tTlx7IEziJ-1400.jpeg 1400w, https://blog.foojin.com/img/tTlx7IEziJ-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/tTlx7IEziJ-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/2vuqVq1Qn3-400.avif 400w, https://blog.foojin.com/img/2vuqVq1Qn3-812.avif 812w, https://blog.foojin.com/img/2vuqVq1Qn3-1400.avif 1400w, https://blog.foojin.com/img/2vuqVq1Qn3-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/2vuqVq1Qn3-400.webp 400w, https://blog.foojin.com/img/2vuqVq1Qn3-812.webp 812w, https://blog.foojin.com/img/2vuqVq1Qn3-1400.webp 1400w, https://blog.foojin.com/img/2vuqVq1Qn3-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/2vuqVq1Qn3-400.jpeg 400w, https://blog.foojin.com/img/2vuqVq1Qn3-812.jpeg 812w, https://blog.foojin.com/img/2vuqVq1Qn3-1400.jpeg 1400w, https://blog.foojin.com/img/2vuqVq1Qn3-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/2vuqVq1Qn3-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="objectif-canon-ef-s-18-55mm-f-3-5-5-6-ii" tabindex="-1">Objectif Canon EF-S 18-55mm f/3.5-5.6 II <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Objectif "de base" qui est vendu avec l'appareil d'origine.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/UrTbWHpZ3Z-400.avif 400w, https://blog.foojin.com/img/UrTbWHpZ3Z-812.avif 812w, https://blog.foojin.com/img/UrTbWHpZ3Z-1400.avif 1400w, https://blog.foojin.com/img/UrTbWHpZ3Z-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/UrTbWHpZ3Z-400.webp 400w, https://blog.foojin.com/img/UrTbWHpZ3Z-812.webp 812w, https://blog.foojin.com/img/UrTbWHpZ3Z-1400.webp 1400w, https://blog.foojin.com/img/UrTbWHpZ3Z-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/UrTbWHpZ3Z-400.jpeg 400w, https://blog.foojin.com/img/UrTbWHpZ3Z-812.jpeg 812w, https://blog.foojin.com/img/UrTbWHpZ3Z-1400.jpeg 1400w, https://blog.foojin.com/img/UrTbWHpZ3Z-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/UrTbWHpZ3Z-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/ZDmRuSTA44-400.avif 400w, https://blog.foojin.com/img/ZDmRuSTA44-812.avif 812w, https://blog.foojin.com/img/ZDmRuSTA44-1400.avif 1400w, https://blog.foojin.com/img/ZDmRuSTA44-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/ZDmRuSTA44-400.webp 400w, https://blog.foojin.com/img/ZDmRuSTA44-812.webp 812w, https://blog.foojin.com/img/ZDmRuSTA44-1400.webp 1400w, https://blog.foojin.com/img/ZDmRuSTA44-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/ZDmRuSTA44-400.jpeg 400w, https://blog.foojin.com/img/ZDmRuSTA44-812.jpeg 812w, https://blog.foojin.com/img/ZDmRuSTA44-1400.jpeg 1400w, https://blog.foojin.com/img/ZDmRuSTA44-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/ZDmRuSTA44-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Q4UJ1qXYaP-400.avif 400w, https://blog.foojin.com/img/Q4UJ1qXYaP-812.avif 812w, https://blog.foojin.com/img/Q4UJ1qXYaP-1400.avif 1400w, https://blog.foojin.com/img/Q4UJ1qXYaP-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Q4UJ1qXYaP-400.webp 400w, https://blog.foojin.com/img/Q4UJ1qXYaP-812.webp 812w, https://blog.foojin.com/img/Q4UJ1qXYaP-1400.webp 1400w, https://blog.foojin.com/img/Q4UJ1qXYaP-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/Q4UJ1qXYaP-400.jpeg 400w, https://blog.foojin.com/img/Q4UJ1qXYaP-812.jpeg 812w, https://blog.foojin.com/img/Q4UJ1qXYaP-1400.jpeg 1400w, https://blog.foojin.com/img/Q4UJ1qXYaP-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Q4UJ1qXYaP-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="objectif-canon-ef-75-300mm-f-4-5-6-iii" tabindex="-1">Objectif Canon EF 75-300mm f/4-5.6 III <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Zoom plus puisssant que le précédent mais sans stabilisateur par contre.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/iogZXhESJ--400.avif 400w, https://blog.foojin.com/img/iogZXhESJ--812.avif 812w, https://blog.foojin.com/img/iogZXhESJ--1400.avif 1400w, https://blog.foojin.com/img/iogZXhESJ--2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/iogZXhESJ--400.webp 400w, https://blog.foojin.com/img/iogZXhESJ--812.webp 812w, https://blog.foojin.com/img/iogZXhESJ--1400.webp 1400w, https://blog.foojin.com/img/iogZXhESJ--2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/iogZXhESJ--400.jpeg 400w, https://blog.foojin.com/img/iogZXhESJ--812.jpeg 812w, https://blog.foojin.com/img/iogZXhESJ--1400.jpeg 1400w, https://blog.foojin.com/img/iogZXhESJ--2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/iogZXhESJ--400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/db9O3hUDRd-400.avif 400w, https://blog.foojin.com/img/db9O3hUDRd-812.avif 812w, https://blog.foojin.com/img/db9O3hUDRd-1400.avif 1400w, https://blog.foojin.com/img/db9O3hUDRd-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/db9O3hUDRd-400.webp 400w, https://blog.foojin.com/img/db9O3hUDRd-812.webp 812w, https://blog.foojin.com/img/db9O3hUDRd-1400.webp 1400w, https://blog.foojin.com/img/db9O3hUDRd-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/db9O3hUDRd-400.jpeg 400w, https://blog.foojin.com/img/db9O3hUDRd-812.jpeg 812w, https://blog.foojin.com/img/db9O3hUDRd-1400.jpeg 1400w, https://blog.foojin.com/img/db9O3hUDRd-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/db9O3hUDRd-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/H4RMPDEyuT-400.avif 400w, https://blog.foojin.com/img/H4RMPDEyuT-812.avif 812w, https://blog.foojin.com/img/H4RMPDEyuT-1400.avif 1400w, https://blog.foojin.com/img/H4RMPDEyuT-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/H4RMPDEyuT-400.webp 400w, https://blog.foojin.com/img/H4RMPDEyuT-812.webp 812w, https://blog.foojin.com/img/H4RMPDEyuT-1400.webp 1400w, https://blog.foojin.com/img/H4RMPDEyuT-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/H4RMPDEyuT-400.jpeg 400w, https://blog.foojin.com/img/H4RMPDEyuT-812.jpeg 812w, https://blog.foojin.com/img/H4RMPDEyuT-1400.jpeg 1400w, https://blog.foojin.com/img/H4RMPDEyuT-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/H4RMPDEyuT-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/1EJeNt_kwj-400.avif 400w, https://blog.foojin.com/img/1EJeNt_kwj-812.avif 812w, https://blog.foojin.com/img/1EJeNt_kwj-1400.avif 1400w, https://blog.foojin.com/img/1EJeNt_kwj-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/1EJeNt_kwj-400.webp 400w, https://blog.foojin.com/img/1EJeNt_kwj-812.webp 812w, https://blog.foojin.com/img/1EJeNt_kwj-1400.webp 1400w, https://blog.foojin.com/img/1EJeNt_kwj-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/1EJeNt_kwj-400.jpeg 400w, https://blog.foojin.com/img/1EJeNt_kwj-812.jpeg 812w, https://blog.foojin.com/img/1EJeNt_kwj-1400.jpeg 1400w, https://blog.foojin.com/img/1EJeNt_kwj-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/1EJeNt_kwj-400.jpeg" width="2000" height="1500"></picture></p>
<h2 id="et-les-petits-accessoires-qui-vont-avec" tabindex="-1">Et les petits accessoires qui vont avec… <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<ul>
<li>Lanière</li>
<li>Cartes mémoires (1Go, 4Go, 8Go)</li>
<li>Télécommande pour déclenchement à distance (je garantie pas que le pile soit de toute jeunesse par contre mais elle se change facilement)</li>
<li>Sacoche DeviantArt pour ranger tout ce beau monde</li>
</ul>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/FsKckr7531-400.avif 400w, https://blog.foojin.com/img/FsKckr7531-812.avif 812w, https://blog.foojin.com/img/FsKckr7531-1400.avif 1400w, https://blog.foojin.com/img/FsKckr7531-2000.avif 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/FsKckr7531-400.webp 400w, https://blog.foojin.com/img/FsKckr7531-812.webp 812w, https://blog.foojin.com/img/FsKckr7531-1400.webp 1400w, https://blog.foojin.com/img/FsKckr7531-2000.webp 2000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/FsKckr7531-400.jpeg 400w, https://blog.foojin.com/img/FsKckr7531-812.jpeg 812w, https://blog.foojin.com/img/FsKckr7531-1400.jpeg 1400w, https://blog.foojin.com/img/FsKckr7531-2000.jpeg 2000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/FsKckr7531-400.jpeg" width="2000" height="1500"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Ib7okRu_7J-400.avif 400w, https://blog.foojin.com/img/Ib7okRu_7J-812.avif 812w, https://blog.foojin.com/img/Ib7okRu_7J-1400.avif 1400w, https://blog.foojin.com/img/Ib7okRu_7J-1500.avif 1500w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Ib7okRu_7J-400.webp 400w, https://blog.foojin.com/img/Ib7okRu_7J-812.webp 812w, https://blog.foojin.com/img/Ib7okRu_7J-1400.webp 1400w, https://blog.foojin.com/img/Ib7okRu_7J-1500.webp 1500w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/Ib7okRu_7J-400.jpeg 400w, https://blog.foojin.com/img/Ib7okRu_7J-812.jpeg 812w, https://blog.foojin.com/img/Ib7okRu_7J-1400.jpeg 1400w, https://blog.foojin.com/img/Ib7okRu_7J-1500.jpeg 1500w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Ib7okRu_7J-400.jpeg" width="1500" height="2000"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/A6T0auuFbo-400.avif 400w, https://blog.foojin.com/img/A6T0auuFbo-812.avif 812w, https://blog.foojin.com/img/A6T0auuFbo-1400.avif 1400w, https://blog.foojin.com/img/A6T0auuFbo-1500.avif 1500w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/A6T0auuFbo-400.webp 400w, https://blog.foojin.com/img/A6T0auuFbo-812.webp 812w, https://blog.foojin.com/img/A6T0auuFbo-1400.webp 1400w, https://blog.foojin.com/img/A6T0auuFbo-1500.webp 1500w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/A6T0auuFbo-400.jpeg 400w, https://blog.foojin.com/img/A6T0auuFbo-812.jpeg 812w, https://blog.foojin.com/img/A6T0auuFbo-1400.jpeg 1400w, https://blog.foojin.com/img/A6T0auuFbo-1500.jpeg 1500w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/A6T0auuFbo-400.jpeg" width="1500" height="2000"></picture></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/6kMML8CE6x-400.avif 400w, https://blog.foojin.com/img/6kMML8CE6x-812.avif 812w, https://blog.foojin.com/img/6kMML8CE6x-1400.avif 1400w, https://blog.foojin.com/img/6kMML8CE6x-1500.avif 1500w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/6kMML8CE6x-400.webp 400w, https://blog.foojin.com/img/6kMML8CE6x-812.webp 812w, https://blog.foojin.com/img/6kMML8CE6x-1400.webp 1400w, https://blog.foojin.com/img/6kMML8CE6x-1500.webp 1500w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/6kMML8CE6x-400.jpeg 400w, https://blog.foojin.com/img/6kMML8CE6x-812.jpeg 812w, https://blog.foojin.com/img/6kMML8CE6x-1400.jpeg 1400w, https://blog.foojin.com/img/6kMML8CE6x-1500.jpeg 1500w" sizes="(min-width: 50em) 812px, 100vw"><img alt="" loading="lazy" decoding="async" src="https://blog.foojin.com/img/6kMML8CE6x-400.jpeg" width="1500" height="2000"></picture></p>
<h2 id="ok-et-combien" tabindex="-1">Ok et combien ? <a class="header-anchor" href="https://blog.foojin.com/2022/08/22/appareil-photo-reflex-cherche-nouveau-proprietaire/">#</a></h2>
<p>Tout ceci côté à l'argus, en ajustant un peu ici et là et en offrant les accessoires ci-dessus on arrive à 956€ que je vais arrondir à 900€.</p>
<p>Si vous êtes intéressé, n'hésitez pas à me contacter sur <a href="https://twitter.com/GoOz">Twitter</a> ou par mail <a href="mailto:shiny.beach9281@fastmail.com">shiny.beach9281@fastmail.com</a> (c'est un mail temporaire alors pas la peine de l'enregistrer.)</p>
<p>C'est tout pour moi. Merci.</p>
Sobre.2021-12-08T00:00:00Zhttps://blog.foojin.com/2021/12/08/sobre/<p>C'est fou ce qu'on peut amasser en une vie… et je ne suis même pas encore "vieux". Pourtant je vois chez moi dès que je tourne la tête, ici et là, des objets plus ou moins utiles. M'en vient alors les questions de pourquoi j'amasse et pourquoi je ne me débarrasse pas de certains de ces objets.</p>
<p>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'hui je les vois dans une case de mon bureau et je me rends compte que je n'ai ni écouté, ni regardé aucun d'entre eux depuis le grand ménage. Et ça doit faire 5 ans maintenant.<br>
D'aucun pourrait conclure qu'il est temps de dire au revoir et s'en débarrasser mais je ne sais pas si je suis prêt encore. Le constat est là toutefois : je garde par nostalgie.<br>
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.</p>
<p>Ça me laisse pensif.</p>
<p>Puis je vois ma collection de BD et autres comics. J'ai claqué une somme inavouable dans cette collection de plus de 600 albums. Je ne relirai très probablement aucun d'entre eux ou alors très peu. Et pourtant je garde mais je pense sérieusement à me débarrasser d'un gros morceau ne gardant que ceux qui m'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.</p>
<p>Ça me laisse pensif.</p>
<p>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'en suis même pas certain.</p>
<p>Ça me laisse pensif.</p>
<p>Mmmh 🤔</p>
La grande migration (ou presque)2021-02-01T00:00:00Zhttps://blog.foojin.com/2021/02/01/la-grande-migration/<p>Cela fait déjà quelques années que j'ai commencé à "dégoogliser" mon internet afin de garder mes données perso pour ma tronche. J'ai bien réduit ma relation avec Google mais il me restait à restreindre ma relation avec Marko Zuckerberg et son mastodonte de Facebook.<br>
Je pense qu'il est temps de passer la seconde.</p>
<h2 id="resume-des-episodes-precedents" tabindex="-1">Résumé des épisodes précédents <a class="header-anchor" href="https://blog.foojin.com/2021/02/01/la-grande-migration/">#</a></h2>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/tQcCMlkyvRL0TsPOdt" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
<p>Je me suis séparé de <strong>GMail</strong> il y a donc quelques années. Je suis passé chez <strong>FastMail</strong> et j'en suis très content. Il est certain que ce n'est pas le fournisseur de mail le plus <em>secure</em> (<strong>ProtonMail</strong> si tu nous entends) mais je trouve qu'il fait tout de même très bien son job et ne fait rien avec mes données, lui.</p>
<p>Pour mes flux RSS, j'avais déjà dû me séparer de <strong>Google Reader</strong> parce qu'ils l'avaient fermé d'eux-même. Du coup j'étais passé par <strong>Feedly</strong> et ensuite juste <strong>Reeder</strong> comme lecteur avec une synchro des flux via iCloud (c'est pas optimal mais j'ai tout de même un peu plus confiance en Apple pour pas trifouiller mes données).</p>
<p>Pour la navigation sur internet, j'ai toujours été un fervent défenseur de Firefox et je n'ai jamais utilisé Chrome, si ce n'est pour le travail à des fins de tests, donc là on change rien.</p>
<p>Pour la recherche internet c'était plus difficile. Il faut dire ce qui est, <strong>Google</strong> est bon à ce petit jeu. J'ai longtemps essayé <strong>DuckDuckGo</strong> et <strong>Qwant</strong> mais j'ai été un peu déçu. Alors bon j'ai fait le choix de rester sur <strong>Google</strong> MAIS sans me logger sur un compte et en utilisant un petit plugin pour Firefox appelé <a href="https://addons.mozilla.org/fr/firefox/addon/searchonymous/">Searchonymous</a> qui s'assure que toute recherche faite reste anonyme.</p>
<p>Le seul qui résiste est <strong>Youtube</strong>… Bon les alternatives n'arrivent pas à la cheville de <strong>Youtube</strong> en terme de contenu donc j'y reste. Pour le moment en tout cas.</p>
<p>Le résultat n'est pas parfait mais c'est déjà pas mal.</p>
<h2 id="closing-the-facebook" tabindex="-1">Closing the Facebook <a class="header-anchor" href="https://blog.foojin.com/2021/02/01/la-grande-migration/">#</a></h2>
<div style="width:100%;height:0;padding-bottom:81%;position:relative;"><iframe src="https://giphy.com/embed/3oz8xsNvoV8gmrBPPi" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
<p>Je n'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'est facile de s'en débarrasser… et bien pas tellement.</p>
<p>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 "contact". 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'y fais rien… je suis une sorte de voyeur du web quoi.</p>
<p>De plus, j'ai pris conscience que la vie est ce qu'elle est et qu'il est normal qu'elle nous sépare doucement les uns des autres, qu'elle nous divise graduellement en opinion et choix de vie. J'ai certains potes d'antan qui s'éloignent trop idéologiquement de ce que je suis aujourd'hui et c'est pas tous les jours facile à vivre. Ça dégrade l'image très certainement fantasmée que j'avais d'eux. Parfois l'ignorance c'est bien en fait. Je pense que je préfère ne plus avoir de nouvelle que ce genre de nouvelle.</p>
<p>En bref, Facebook ne m'apporte rien de bon dans ma vie, alors autant lui dire au revoir.</p>
<p>Mais par quoi le remplacer ? Et plus important encore, faut-il le remplacer ?</p>
<h2 id="whatsapp-bro" tabindex="-1">Whatsapp, bro? <a class="header-anchor" href="https://blog.foojin.com/2021/02/01/la-grande-migration/">#</a></h2>
<div style="width:100%;height:0;padding-bottom:53%;position:relative;"><iframe src="https://giphy.com/embed/kigKjAJryWTZK" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
<p>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.<br>
Il était temps de partir donc. J'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'est passé tout seul.</p>
<h2 id="instagram-je-t-aime-moi-non-plus" tabindex="-1">Instagram, je t'aime moi non plus <a class="header-anchor" href="https://blog.foojin.com/2021/02/01/la-grande-migration/">#</a></h2>
<div style="width:100%;height:0;padding-bottom:49%;position:relative;"><iframe src="https://giphy.com/embed/mWO9gCz9v4Ak3cJJMO" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
<p>Tout comme pour <strong>Youtube</strong>, je suis emmerdé avec <strong>Instagram</strong>. Je trouve pas d'alternative satisfaisante. C'est pas tant pour poster mes photos et la visibilité que ça me procure(rait), honnêtement je m'en fous un peu, mais plus pour suivre le travail de mes photographes préférés. J'ai été aussi un utilisateur assidu de 500px pendant une période aussi mais mon avis sur eux est mitigé depuis le rachat.</p>
<p>Bref pour suivre les travaux de photographes, j'ai pas trouvé le remplaçant idéal…Si vous avez des choses à partager, ne vous retenez pas.</p>
<p>Je ne sais pas combien de temps je vais y rester mais j'étudie la question très sérieusement.</p>
<h2 id="twitter-le-peche-mignon" tabindex="-1">Twitter, le péché mignon <a class="header-anchor" href="https://blog.foojin.com/2021/02/01/la-grande-migration/">#</a></h2>
<div style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/THrYOidLs0z9WCOvGi" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
<p>Je crois que le plus difficile à quitter serait <strong>Twitter</strong>. C'est de loin le réseau social que j'utilise le plus et, j'ai beau avoir aussi un compte <strong>Mastodon</strong>, j'ai toujours du mal à décrocher l'oiseau bleu. Vil salopard qui joue avec mes sentiments.</p>
<h2 id="au-final" tabindex="-1">Au final <a class="header-anchor" href="https://blog.foojin.com/2021/02/01/la-grande-migration/">#</a></h2>
<p>Au final on y est pas. Je dépends encore de certains. Mais je me soigne.</p>
<p>C'est pas toujours facile de trouver l'outil de remplacement parfait et quand on en trouve un c'est pas toujours facile d'y rameuter les potos.</p>
<p>Un jour peut être j'arriverai à faire une migration 100% privacy, mais c'est pas pour aujourd'hui.</p>
Orange, ô désespoir2020-11-14T00:00:00Zhttps://blog.foojin.com/2020/11/14/orange-o-desespoir/<p>Cela faisait presque 3 ans que j'avais déménagé dans une contrée charmante et calme mais sans fibre internet, seulement dotée d'une faiblarde ADSL fatiguée et surexploitée, ce qui rendait difficiles les conditions pour télétravailler.<br>
Mais ces jours sombres sont révolus car j'ai la fibre désormais… enfin ça n'a pas été une sinécure non plus pour y arriver…</p>
<p>**NB: **Je vais parler d'Orange ici car c'est l'opérateur que j'ai choisi mais je ne pourrais dire avec certitude que l'herbe aurait été plus verte chez un concurrent. Ce billet n'est pas un pamphlet contre la société au fruit amère, plutôt sur les processus rigide et le manque de souplesse qu'on peut trouver parfois chez certaines entreprises.</p>
<h2 id="les-premices-d-un-mood-chancelant" tabindex="-1">Les prémices d'un mood chancelant <a class="header-anchor" href="https://blog.foojin.com/2020/11/14/orange-o-desespoir/">#</a></h2>
<p>Tout d'abord je ne m'attarderai pas plus que ça sur l'arrivée leeeeeennnnntttttteee de l'installation de l'infrastructure mais je vous le signale pour que vous puissiez imaginer l'état d'esprit ambiant:</p>
<ul>
<li>Il y a 2 ans j'entendais "La fibre arrive chez nous ! 🎉"</li>
<li>Il y a 1 an j'entendais "La région est en train d'installer la fibre dans notre ville et sera disponible pour tout le monde très bientôt ! 🎉"</li>
<li>Il y a 6 mois j'entendais "Ça y est la fibre est dispo vous pouvez y aller… sauf quelques rues où certains raccordements restent à faire. 😐" Vous vous doutez bien que c'était mon cas.</li>
<li>Il y a 1 mois j'entendais "C'est bon vous êtes raccordable ! 🎉"</li>
</ul>
<p>Il y a donc 1 mois, après un rapide <em>benchmark</em> sur les internets aidé par les copains du web, je faisais le choix d'Orange comme fournisseur et c'est là que tout a dérapé…</p>
<h2 id="la-promesse-de-jours-meilleurs" tabindex="-1">La promesse de jours meilleurs <a class="header-anchor" href="https://blog.foojin.com/2020/11/14/orange-o-desespoir/">#</a></h2>
<p>L'inscription à la fibre d'Orange se passe sans heurt. La date d'intervention du technicien est posée. J'ai récupéré ma Livebox dans un relais colis. Plus que deux petites semaines d'attente. Je trépigne. Comme jamais.</p>
<p>Le jour-j, monsieur le technicien arrive, prépare son matériel, fait son repérage, vérifie s'il pourra passer par les gaines prévues à cet effet ou s'il faudra percer, etc
Tout est bon… <strong>sauf</strong>… que son ordre de mission lui dit qu'il doit opérer sur le bâtiment B et j'habite au bâtiment J.<br>
Ainsi, protocole oblige, c'est avec ton désolé qu'il m'annonce qu'il ne pourra pas installer la fibre chez moi à cause de ce <em>petit</em> problème administratif.</p>
<p>Je l'ai vraiment mauvaise. Genre <em>over 9000</em>. Mais soit, j'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'appelle le support pour corriger cette erreur administrative.</p>
<h2 id="l-enfer-c-est-le-support-telephonique-des-autres" tabindex="-1">L'enfer c'est le support téléphonique des autres <a class="header-anchor" href="https://blog.foojin.com/2020/11/14/orange-o-desespoir/">#</a></h2>
<p>J'appelle donc le support Orange qui n'a pas vraiment l'air de comprendre ce qu'il s'est passé mais me rassure en me disant qu'ils font la correction et qu'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'annonce qu'il vaudrait mieux annuler la première commande et en créer une toute nouvelle en ligne.</p>
<p>Je suis dubitatif, plein de scepticisme comme jamais, mais j'accepte quand elle me garantie qu'elle suivra mon dossier personnellement (<em>spoiler alert</em>: elle le suivra, en effet, mais a posteriori, pas a priori).<br>
Je lui expose toutefois un doute, qui aura son importance, sur le fait que j'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.
<em>Pas de problème</em> me dit-elle, vous n'aurez qu'à la récupérer et la rendre dans une boutique Orange. Ça me casse un peu les valseuses mais si c'est le prix à payer pour avoir rapidement la fibre, alors faisons ça.<br>
À partir de ce moment-là, elle m'annule ma première inscription et de mon côté j'en fais une nouvelle en ligne.</p>
<p>Pas fou que je suis, une fois l'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 <em>problème</em> administratif, et comme j'ai bien fait.</p>
<p>C'est toujours la mauvaise adresse… je fais donc le changement, à nouveau.</p>
<p>Je reçois quelques jours plus tard des courriers d'Orange toujours à la mauvaise adresse. Je rappelle alors le support qui me confirme que dans leur système c'est toujours la mauvaise adresse qui est renseignée mais il me rassure me disant qu'ils vont directement notifier le prestataire pour que l'ordre de mission soit le bon.
Ouf, je suis sauvé.</p>
<p>Quant à la nouvelle box, à cause de tonton Covid-19, le colis n'est pas allé au relais colis prévu mais un autre bien plus loin et je n'avais que quelques jours pour aller le récupérer ce que je n'ai donc jamais fait. Le colis est reparti à l'expéditeur comme il est venu. Mais je m'en fous j'en ai déjà une et on m'a dit que je pouvais garder l'une ou l'autre, que c'était pareil.</p>
<h2 id="l-expectative-d-une-inquietude" tabindex="-1">L'expectative d'une inquiétude <a class="header-anchor" href="https://blog.foojin.com/2020/11/14/orange-o-desespoir/">#</a></h2>
<p>Tout à l'air ok mais j'arrive pas à être rassuré quand vient le nouveau technicien pour le second rendez-vous. J'ai peur d'une nouvelle mauvaise surprise.<br>
Et effectivement… il n'a pas la bonne référence de boitier fibre dans son ordre de mission.</p>
<p>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'il faut où il faut, me branche tout et, ô miracle, j'ai enfin la fibre. Je suis comme un gamin devant l'emballage d'un gros jouet. Je suis SUPAYR CONTENT !!!</p>
<p>Jusqu'ici tout va bien, je passe mon premier jour de boulot connecté sur un internet des plus rapides et je suis SUPAYR CONTENT !!!</p>
<h2 id="quand-la-procedure-te-rattrape" tabindex="-1">Quand la procédure te rattrape <a class="header-anchor" href="https://blog.foojin.com/2020/11/14/orange-o-desespoir/">#</a></h2>
<p>J'étais tellement SUPAYR CONTENT que je l'ai pas vu venir s'immiscer dans mon dos, le retour de la procédure, la procédure contre-attaque, <em>the dark side of the procédure…</em></p>
<p>30h après avoir eu la fibre activée je la perdais à 20h. Pouf, comme ça, sans crier gare, sans raison apparente.<br>
J'étais SUPAYR BOUGON !!<br>
Trop tard pour le support, on appellera le lendemain.</p>
<p>Le lendemain matin je reçois un mail d'Orange me demandant de… rendre la box…</p>
<p>J'appelle donc, plein d'aigreur, le support à nouveau avec qui j'apprends plusieurs choses :</p>
<ul>
<li>L'ancienne inscription a bien été clôturée en date… de la veille. 🤔</li>
<li>Ma nouvelle inscription est bien toujours valide et infrastructurellement parlant tout va bien. 🤷♂️</li>
<li>La box qu'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 😲</li>
</ul>
<p>Avec l'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é. 🎉</p>
<p>Normalement, c'est fini. <em>Normalement</em>.</p>
<p>On m'a dit d'ignorer le mail de demande de renvoi du matériel du coup, mais on m'a dit beaucoup de choses ces dernière semaines… alors je me méfie. 🤨</p>
<p>Morale de l'histoire: Les ascenseurs émotionnels c'est nul. À éviter.</p>
Les choses changent et se ressemblent2019-09-12T00:00:00Zhttps://blog.foojin.com/2019/09/12/les-choses-changent-et-se-ressemblent/<h2 id="il-etait-une-fois" tabindex="-1">Il était une fois… <a class="header-anchor" href="https://blog.foojin.com/2019/09/12/les-choses-changent-et-se-ressemblent/">#</a></h2>
<p>Quand je suis entré dans le métier, il y a plus de 10 ans, il y avait les dev backend qui s'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'est à dire HTML et CSS principalement. Le JS servait alors peu mais quand les jQuery et autres Mootools ont explosé on s'y est mis aussi.</p>
<p>Et puis le JS a évolué, beaucoup évolué pour prendre la place qu'il prend aujourd'hui.</p>
<h2 id="frontend-backend" tabindex="-1">Frontend ? Backend ? <a class="header-anchor" href="https://blog.foojin.com/2019/09/12/les-choses-changent-et-se-ressemblent/">#</a></h2>
<p>Mais qu'en est-il vraiment aujourd'hui ? Avec l'effervescence des Single Page Applications on fait maintenant tout ou presque en JS mais on est allé nettement plus loin que ce que l'on faisait dans le temps avec jQuery.</p>
<p>On est allé tellement loin qu'on a remplacé la majorité de ce que faisait les langages serveurs mais avec un langage interprété par le navigateur.</p>
<p>Définir ce qui fait quoi et qui est quoi devient alors bien compliqué quand on se rend compte qu'on utilise désormais une technologie frontend pour faire un job originellement backend. Qu'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.</p>
<p>Mais quelle est donc la place de l'intégrateur dans ce nouveau paradigme ? À l'époque je faisais bien un peu de PHP mais c'é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.</p>
<p>Pour moi c'est ça le frontend, créer et maintenir le DOM, sa mise en page et avec un peu d'interactivité, c'est tout.</p>
<p>C'est déveloper l'interface utilisateur, pas ce qui y est inséré.</p>
<h2 id="aujourd-hui" tabindex="-1">Aujourd'hui… <a class="header-anchor" href="https://blog.foojin.com/2019/09/12/les-choses-changent-et-se-ressemblent/">#</a></h2>
<p>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'application, monter une API complexe, créer une bibliothèque de fonction de traitement de données, etc.</p>
<p>Et c'est clairement ce que faisait les dev backend à l'époque.</p>
<p>J'en viens donc à me dire que les dev frontend d'aujourd'hui sont les nouveaux dev backend d'hier. Et moi, mon métier c'est faire ce qui se voit dans le navigateur et pas ce qu'il y a sous le capot. C'est pourquoi j'ai décidé de me définir comme UI Developer puisque c'est bien le boulot que je fais en définitif.</p>
<p>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 "pensent" 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'ils en connaissent les rudiments, tout comme les anciens dev backend d'ailleurs, la plupart du temps ils sont loin d'en être experts. Et je ne les blâme pas. Ces métiers n'ont absolument rien à voir.</p>
<p>Du coup, on fait quoi maintenant ? Qu'on ne me fasse pas croire que dès qu'on développe une SPA on a plus besoin de spécialistes du HTML et CSS !</p>
<p>Laissez les experts faire leur travail… et donnez-moi du travail dans ce sens ! :)</p>
Je suis un parasite2019-07-12T00:00:00Zhttps://blog.foojin.com/2019/07/12/il-parait-que-je-suis-un-parasite/<p>Ça fait un peu plus de 10 ans que je suis entré dans la "vie active", non-stop depuis 2007 en enchaînant chaque nouveau poste , et là, d'un coup sans vraiment prévenir, je me retrouve donc au <strong>chômage</strong> 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.</p>
<div style="width:100%;height:0;padding-bottom:68%;position:relative;"><iframe src="https://giphy.com/embed/a6zGGyjGKq7GE" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
<p>Je ne sais pas avec exactitude d'où ça me vient mais cette situation me laisse comme un mauvais arrière goût dans la bouche…<br>
Ça ne me plait que très modérément. Pourtant j'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'imagine pas rester chômeur très longtemps.</p>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/l4hmWKVDDUpiq355K" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
<p>Mais d'où me vient donc ce sentiment de dégoût pour ma situation ?</p>
<p>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'avoir rien trouvé pour le moment me laisse un sentiment d'échec, comme si je le devais à tous ceux qui galèrent vraiment à trouver un job stable.<br>
Alors oui, la période estivale est plutôt calme en matière de recrutement et oui je recherche quelque chose d'assez précis mais cela n'empêche pas que je me sens un peu mal.</p>
<p>Et puis je me dis aussi qu'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'ils ont réussi à me faire sentir coupable ces cons…<br>
Je ne suis même pas au chômage depuis plus de 24h et je me sens déjà comme la merde qu'on nous décrit partout.</p>
<p>Bon je relativise quand même après coup, je <strong>sais</strong> qu'il n'y a absolument rien de honteux à perdre son emploi, que vu l'état du marché du travail actuel il serait bien malvenu de reprocher quoique ce soit aux chômeurs de longue comme courte date.<br>
Mais que voulez-vous ? Le matraquage médiatique a eu, au moins pendant un temps, raison de moi.</p>
<p>Bref, je suis un sale parasite fainéant qui vit aux crochets de la société mais je me soigne.</p>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/xEGqih6o0meyY" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen=""></iframe></div>
Engagez-moi, rengagez-moi qu'ils disaient2019-05-24T00:00:00Zhttps://blog.foojin.com/2019/05/24/engagez-moi/<p>Le dernier billet en date de ce blog fêtait mes deux ans chez Cozy. Je n'en ferai pas trois. Ça a été une aventure mémorable et malgré les aléas de la vie d'une startup j'en garderai un très bon souvenir.</p>
<p>Toujours est-il que je suis donc disponible pour un nouveau job.</p>
<h2 id="qu-est-ce-que-je-sais-faire" tabindex="-1">Qu'est ce que je sais faire ? <a class="header-anchor" href="https://blog.foojin.com/2019/05/24/engagez-moi/">#</a></h2>
<p>De l'expertise dans le HTML et le CSS qualitatif principalement, de l'Accessibilité et du JS aussi dans une, un peu, moindre mesure.<br>
J'ai aussi de l'expérience, pour du contexte backend, dans le PHP, Rails, .Net ou même Node.<br>
Question Framework JavaScript, j'ai surtout fait du (p)React et du Backbone mais j'ai effleuré du Vue.js et du Ember.js aussi.<br>
Git est mon ami, SVN un ami de longue date mais je n'ai jamais rencontré Mercurial.</p>
<p>Pour plus de détails, je vous invite à regarder <a href="https://blog.foojin.com/cv/">mon CV</a></p>
<h2 id="qu-est-ce-que-je-veux-faire" tabindex="-1">Qu'est-ce que je veux faire ? <a class="header-anchor" href="https://blog.foojin.com/2019/05/24/engagez-moi/">#</a></h2>
<p>Je ne sais pas trop en fait. J'ai bien aimé travailler sur un produit chez Cozy. C'était différent de ce que j'avais connu avant.<br>
Travailler sur un projet long terme apporte des défis différents comme la maintenance pointue, la surveillance des performances, les refactoring intelligents, etc.<br>
Mais j'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.</p>
<p>En fait, je ne sais pas ce que je veux faire mais je sais ce que je ne veux pas faire.</p>
<p>Je ne veux pas être "chez l'éditeur de site" dans une très grosse structure. Les process y sont souvent longs et je m'y ennuie très vite.<br>
Je ne veux pas retourner en ESN (ex-SSII), je n'ai pas que de bons souvenirs de ces perpétuels changements de bureau. J'aime la nouveauté de connaissance mais je préfère la stabilité géographique.</p>
<h2 id="ou-est-ce-que-je-veux-le-faire" tabindex="-1">Où est-ce que je veux le faire ? <a class="header-anchor" href="https://blog.foojin.com/2019/05/24/engagez-moi/">#</a></h2>
<p>De préférence ? de chez moi 😁<br>
J'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.<br>
Donc globalement télétravail ou dans l'ouest parisien, ce serait parfait.</p>
<p>Si mon profil vous intéresse, n'hésitez pas et envoyez moi un mail sur 📧 gooz <strong>at</strong> foojin.com. 👋</p>
2 ans chez Cozy 🎂2018-11-07T00:00:00Zhttps://blog.foojin.com/2018/11/07/faire-de-lopen-source-sans-en-faire/<p>Ç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'y sens trop bien pour changer.</p>
<p><strong>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'y suis bien.</strong></p>
<h2 id="2-ans-de-teletravail" tabindex="-1">2 ans de télétravail <a class="header-anchor" href="https://blog.foojin.com/2018/11/07/faire-de-lopen-source-sans-en-faire/">#</a></h2>
<p>C'é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'y est sans doute pas pour rien.<br>
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'interaction sociales tranquillement.<br>
on me demande souvent si je me sens pas trop seul quand je dis que je suis à 100% en télétravail. Mais non.<br>
Et puis on est jamais vraiment seul finalement, on a beaucoup de video-conférences, quotidiennement.</p>
<h2 id="2-ans-a-bosser-sur-un-projet-auquel-je-crois" tabindex="-1">2 ans à bosser sur un projet auquel je crois <a class="header-anchor" href="https://blog.foojin.com/2018/11/07/faire-de-lopen-source-sans-en-faire/">#</a></h2>
<p>C'est bien de faire un boulot qu'on aime, c'est mieux de le faire dans un contexte qui nous plait.<br>
Ça donne vraiment envie de bien faire, de faire plus, pour moi, pour les utilisateurs, pour les collègues.<br>
Ceci dit, je sais que c'est un privilège que peu ont la chance de partager malheureusement.</p>
<h2 id="2-ans-a-bosser-avec-des-gens-brillants-et-bienveillants" tabindex="-1">2 ans à bosser avec des gens brillants et bienveillants <a class="header-anchor" href="https://blog.foojin.com/2018/11/07/faire-de-lopen-source-sans-en-faire/">#</a></h2>
<p>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'on dit et leur ton, toujours est-il que mes collègues sont bienveillants et ça fait du bien au quotidien.<br>
Naturellement il arrive certains accrochages de temps en temps, on ne peut pas toujours être d'accord sur tout, mais rien qui ne dure et n'envenime les situations sur le long terme. En tout cas je ne l'ai jamais remarqué de ma fenêtre.</p>
<h2 id="l-open-source" tabindex="-1">L'Open Source <a class="header-anchor" href="https://blog.foojin.com/2018/11/07/faire-de-lopen-source-sans-en-faire/">#</a></h2>
<p>Je me suis fait la réflexion récemment. J'ai la vilaine sensation de n'avoir jamais fait aussi peu d'Open Source que depuis que je bosse dans une boîte qui fait de l'Open Source. Paradoxalement.</p>
<p>Évidemment ce n'est pas du tout le cas. En deux ans, j'ai écrit plus d'Open-Source que durant le reste de ma carrière mais toujours est-il que, comme c'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'ai toujours quelque part dans ma tête cette idée que l'on fait de l'Open Source sur son temps libre… Allez comprendre.</p>
<p>Bref, je suis content. ⊙▽⊙</p>
<p>PS: Au fait, <a href="https://www.welcometothejungle.co/companies/cozy-cloud">on recrute !</a></p>
J'ai eu tort…2018-03-06T00:00:00Zhttps://blog.foojin.com/2018/03/06/jai-eu-tort/<p>Une vie sans apprendre sur soi ou sur ce qui nous entoure n'est pas vraiment une vie.</p>
<p>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'1 an j'ai rejoint une Start-Up, <strong>Cozy Cloud</strong>, qui était comme un tout nouveau paradigme pour moi. Non pas parce que c'était une Start-Up mais pour ce que j'y faisais, que ce soit les technologies, les manières de travailler, l'environnement, etc.</p>
<p>En bref, je suis passé d'open-space à un bureau chez moi en télétravail, je suis passé d'une organisation en silo stricte à une organisation agile transversale, je suis passé du sempiternel PHP/HTML/CSS à JS/CSS.</p>
<p>Beaucoup de changements, beaucoup de pertes de repère et donc beaucoup de doutes.</p>
<p>Le changement d'organisation a peut-être été le seul qui ne m'a apporté que de la sérénité. Adieu la frustration de la dernière roue du carosse, on travaille tous vraiment <em>ensemble</em> et ça fonctionne bien.</p>
<p>Le changement d'environnement apporte son lot de challenge au quotidien mais rien d'insurmontable. Étant de nature assez introverti et à l'aise avec la solitude à faible dose, le fait d'être seul chez moi pour travailler ne m'a pas vraiment posé de problème. La communication par contre s'en voit chamboulée. Si auparavant on pouvait discuter de ceci et de cela autour de la machine à café ou sur le coin d'un bureau, désormais il faut être nettement plus strict mais, encore une fois, rien qu'un peu de discipline ne puisse vraiment régler.</p>
<p>Le vrai changement anxiogène, c'est celui de la tâche de travail en elle-même. J'ai un passé technique très orienté HTML/CSS et là j'étais propulsé dans un monde de (p)React/HTML/CSS sur une webapp. C'était tout nouveau, c'était excitant mais ça voulait dire qu'il me fallait m'accrocher au wagon pour ne pas être perdu.</p>
<p>Et pour m'être accroché, je me suis accroché…</p>
<p>De peur d'ê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.</p>
<p>Et j'ai eu tort.</p>
<p>J'ai eu tort parce que malgré toute la bonne volonté du monde à force de trop ingurgiter sans pause pour digérer, on ingurgite mal.</p>
<p>J'ai eu tort parce que à cause du télétravail et donc la diminution de contact humain, j'ai un peu perdu le moral à ne plus échanger avec tous ces gens du métier que j'apprécie.</p>
<p>J'ai eu tort parce que à trop vouloir comprendre le métier de mes collègues, j'ai laissé mes connaissances sur mon corps de métier, ce pourquoi j'ai été embauché, stagner et ne plus se mettre à jour.</p>
<p>Ce qui m'a fait arriver à un point où je n'é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.</p>
<p>Bref à trop vouloir bien faire, j'ai fini par mal faire. J'ai eu tort, et maintenant il est temps de revenir à l'état exaltation que je voulais en premier lieu.</p>
<p>En solution à ce problème, j'ai décidé de faire machine arrière ou plutôt lever le pied. Retour à la veille, retour aux copains, continuer d'apprendre ce que j'ai à apprendre à une vitesse plus juste et plus saine.</p>
<p>Parce que quand ton travail, celui que tu as la chance d'aimer, devient un fardeau c'est que t'es allé trop loin, bien trop loin.</p>
<p><strong>EDIT:</strong> 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'est que moi qui ai personnellement mal géré mon appréhension des choses et que donc à ce titre je n'ai aucunement l'envie de changer de boulot ou d'entreprise. Je vais juste me recentrer. 🙂</p>
Snippets de merde !2016-12-17T00:00:00Zhttps://blog.foojin.com/2016/12/17/snippets-de-merde/<p>Aaaah Noël…</p>
<p>C'est la période de l'année où l'on voit passer beaucoup de calendriers de l'avent. Parmi tout ceux qui trainent il y a celui de <a href="https://www.myadvent.net/calendars/?id=60a3f8cf02141a43ec6efbd8a76a02a6">Cozy Cloud</a> que j'apprécie beaucoup mais aussi et surtout celui d'<a href="https://www.alfredapp.com/xmascalendar/">Alfred</a>, vous savez l'app OS X dont je vous ai parlé <a href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">il n'y a pas si longtemps</a> ?</p>
<p>Et bien en passant en revue tous leurs trucs et astuces, je me suis rendu compte que je n'utilisais que trop peu la gestion des snippets alors je me suis amusé à faire ma propre collection…</p>
<p>Je m'en servais déjà avec des collections d'emoji et d'ascii art mais c'était tout.</p>
<p>Et là je me suis dit qu'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… <strong>La Classe américaine</strong></p>
<p>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.</p>
<p>Vous pouvez télécharger la collection en question modestement appelée "<strong>Snippets de merde</strong>" sur <a href="https://github.com/GoOz/snippetsdemerde">github</a> et puis même faire des issues, bande de petits coquins.</p>
<p><strong>Enjoy!</strong></p>
<p>Et considérez ça comme mon cadeau de noël, les enfants.</p>
De l'adaptation de Preacher sur les écrans2016-06-10T00:00:00Zhttps://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/<p>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'est <strong>Preacher</strong> et de quelques autres adaptation de comics.</p>
<p><strong>GARANTI 100% SANS SPOIL</strong></p>
<h2 id="on-dit-que-je-ressemble-a-alain-deloin" tabindex="-1">On dit que je ressemble à Alain Deloin <a class="header-anchor" href="https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/">#</a></h2>
<p>Comme je disais, je lis les comics de <em>Preacher</em> et je les adore. Du bon _<a href="https://fr.wikipedia.org/wiki/Vertigo_%28DC*Comics%29">Vertigo</a>* comme on fait plus, vraiment.</p>
<p>Alors quand j'ai appris son adaptation télévisuelle j'ai tout de suite été intrigué. Je suivais son actu et j'avais lu que les créateurs annonçaient d'emblée que la série ne suivrait pas les comics.</p>
<p>Et en effet...</p>
<p>Les intrigues donc ne se suivent finalement pas des masses. Que ce soit l'arrivée de "l’entité", 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'intrigue étant donné que deux épisodes c'est bien trop peu pour ça mais ça commence très vite loin de l'original alors passons à autre chose.</p>
<p>Les personnages par contre sont globalement fidèles, à quelques nuances près.</p>
<p><strong>Jesse Custer</strong>, le pasteur, joué par <strong><a href="https://fr.wikipedia.org/wiki/Dominic_Cooper">Dominic Cooper</a></strong> est bien un pasteur torturé au passé trouble et à la foi branlante. Physiquement on est à peu près dedans. Évidemment l'acteur ne ressemblent pas comme à deux gouttes d'eau au personnage des comics mais finalement on s'en fout de ça.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/diRmVOhPs3-400.avif 400w, https://blog.foojin.com/img/diRmVOhPs3-652.avif 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/diRmVOhPs3-400.webp 400w, https://blog.foojin.com/img/diRmVOhPs3-652.webp 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/diRmVOhPs3-400.jpeg 400w, https://blog.foojin.com/img/diRmVOhPs3-652.jpeg 652w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Comparaison Jesse Custer" loading="lazy" decoding="async" src="https://blog.foojin.com/img/diRmVOhPs3-400.jpeg" width="652" height="477"></picture></p>
<p><strong>Tulip O'Hare</strong>, l'ex petite amie de Jesse et jouée par <strong><a href="https://fr.wikipedia.org/wiki/Ruth_Negga">Ruth Negga</a></strong> par contre est un brin différente.</p>
<p>Déjà parce qu'au lieu d'ê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'oncle Sam mais, personnellement, je dis "et pourquoi pas". Absolument rien dans son histoire ne justifie qu'elle soit caucasienne donc…</p>
<p>Puis, alors que dans les comics elle ne cesse de se battre pour prouver à Jesse qu'elle n'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.</p>
<p>Et pour ceux qui la voit comme une vile tentatrice, c'est loin d'être le cas dans les comics, au contraire, et j'espère que les auteurs de la série garderont cet aspect. C'est pas parce qu'elle est badass que c'est une vilaine succube qui détournera le "héros" du droit chemin.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/LHTQQ5OO6z-400.avif 400w, https://blog.foojin.com/img/LHTQQ5OO6z-652.avif 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/LHTQQ5OO6z-400.webp 400w, https://blog.foojin.com/img/LHTQQ5OO6z-652.webp 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/LHTQQ5OO6z-400.jpeg 400w, https://blog.foojin.com/img/LHTQQ5OO6z-652.jpeg 652w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Comparaison Tulip" loading="lazy" decoding="async" src="https://blog.foojin.com/img/LHTQQ5OO6z-400.jpeg" width="652" height="292"></picture></p>
<p><strong>Cassidy</strong>, le vampire irlandais, joué par <strong><a href="https://fr.wikipedia.org/wiki/Joseph_Gilgun">Joseph Gilgun</a></strong> (que j'ai adoré dans Misfits) n'est physiquement pas très proche. Là où dans les comics, il garde perpétuellement ses lunettes de soleil en plus d'ê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'en fout.</p>
<p>Il garde son accent irlandais, son franc parler et ses faiblesses et forces de vampire.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/lDWfthKaLU-400.avif 400w, https://blog.foojin.com/img/lDWfthKaLU-652.avif 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/lDWfthKaLU-400.webp 400w, https://blog.foojin.com/img/lDWfthKaLU-652.webp 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/lDWfthKaLU-400.jpeg 400w, https://blog.foojin.com/img/lDWfthKaLU-652.jpeg 652w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Comparaison Cass" loading="lazy" decoding="async" src="https://blog.foojin.com/img/lDWfthKaLU-400.jpeg" width="652" height="262"></picture></p>
<p><strong>Arseface</strong> ou <em>Eugène Root</em>, joué par <strong>Ian Colletti</strong> est sûrement, à mon goût, le plus fidèle aux comics, physiquement et psychologiquement.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/qaU-xW-z9s-400.avif 400w, https://blog.foojin.com/img/qaU-xW-z9s-652.avif 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/qaU-xW-z9s-400.webp 400w, https://blog.foojin.com/img/qaU-xW-z9s-652.webp 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/qaU-xW-z9s-400.jpeg 400w, https://blog.foojin.com/img/qaU-xW-z9s-652.jpeg 652w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Comparaison Arseface" loading="lazy" decoding="async" src="https://blog.foojin.com/img/qaU-xW-z9s-400.jpeg" width="652" height="376"></picture></p>
<p>Son père, le shérif <strong>Hugo Root</strong>, joué par <strong><a href="https://fr.wikipedia.org/wiki/W._Earl_Brown">W. Earl Brown</a></strong> lui... C'est le plus éloigné de tous, en tout point. Je vais même pas m'étendre à lister les différences. Je me demande juste, même si j'en doute fortement, s'il lui arrivera les même choses que dans les comics qui m'ont vraiment bien fait marrer.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/1TlgNcpNUh-400.avif 400w, https://blog.foojin.com/img/1TlgNcpNUh-652.avif 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/1TlgNcpNUh-400.webp 400w, https://blog.foojin.com/img/1TlgNcpNUh-652.webp 652w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/jpeg" srcset="https://blog.foojin.com/img/1TlgNcpNUh-400.jpeg 400w, https://blog.foojin.com/img/1TlgNcpNUh-652.jpeg 652w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Comparaison Sheriff-Root" loading="lazy" decoding="async" src="https://blog.foojin.com/img/1TlgNcpNUh-400.jpeg" width="652" height="446"></picture></p>
<h2 id="et-pourtant" tabindex="-1">Et pourtant... <a class="header-anchor" href="https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/">#</a></h2>
<p>Et pourtant malgré ces "digressions" ça m'a l'air bien prometteur. Ils ont apparemment gardé ce qu'il fallait de l'intrigue pour faire un scénario qui tienne la route tout en gardant l'essence de l'histoire des comics.</p>
<p>La force des dialogues a l'air ancré dans l'esprit elle-aussi qui est un point très fort dans l'œuvre originale.</p>
<p>Et puis j'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 "pour une série".</p>
<p>J'attends d'en voir un peu plus pour forger mon avis. Mais je suis plutôt emballé pour le moment.</p>
<h2 id="une-bonne-adaptation-ou-une-adaptation-bonne" tabindex="-1">Une bonne adaptation ou une adaptation bonne ? <a class="header-anchor" href="https://blog.foojin.com/2016/06/10/de-ladaptation-de-preacher-sur-les-ecrans/">#</a></h2>
<p>Je n'ai pas la recette pour une bonne adaptation, je ne saurais dire. Certaines sont plus fidèles que d'autres mais est-ce que la fidélité fait la bonne adaptation finalement ? Je n'en suis pas si sûr.</p>
<p>Prenons les adaptations de comics en série par exemple.
<strong>The Walking Dead</strong>, 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'ai arrêté de la regarder, c'est dire.</p>
<p>Les zombies n'étant vraiment qu'un contexte dans les comics, c'est le comportement humain qui est au centre de tout et je trouve que, même si c'est toujours bien présent dans la série, on la perd beaucoup. Et c'est dommage.</p>
<p><strong>Constantine</strong> (<strong>Hellblazer</strong> en comics en fait, puisque Constantine n'est que le nom du héros) a eu le droit a plusieurs adaptations. Notamment une <a href="https://fr.wikipedia.org/wiki/Constantine_(s%C3%A9rie_t%C3%A9l%C3%A9vis%C3%A9e)">série</a> en 2014 qui n'a eu le droit qu'à une saison de 13 épisodes et un <a href="https://fr.wikipedia.org/wiki/Constantine_(film)">film</a> avec <strong>Keanu Reeves</strong> en 2005.</p>
<p>Concernant le film, je dirai que c'est une mauvaise adaptation mais une adaptation bonne. C'est à dire que je trouve le film plutôt sympa à voir mais qui n'a pas franchement pas grand chose à voir avec Hellblazer. Différente ambiance, psychologie et physique des personnages très loin de l'original. Ça n'a de Constantine que le nom.</p>
<p>La série, elle, est beaucoup plus proche, sur plusieurs point, c'est une bien meilleure adaptation mais qui avait peut être un scénario un peu juste en rebondissement et en intensité. C'est sûrement une des raisons de son arrêt d'ailleurs. Et c'est bien dommage.</p>
<p><strong>Daredevil</strong> et <strong>Jessica Jones</strong> qu'on peut voir sur <a href="http://www.netflix.com">Netflix</a> 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'ambiance et la construction des personnages. Et c'est plutôt une très bonne idée.</p>
<p>Je pourrais continuer longtemps comme ça…</p>
<p>J'ai trouvé que <strong>V pour Vendetta</strong> passait complètement à côté des idéologies anarchistes qu'on y trouve mais reste un bon divertissement, que <strong>Sin City</strong> et <strong>300</strong> é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 <strong>Watchmen</strong> 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'était loin d'être dégueulasse en tant que tel.</p>
<p>Bref, Il y a toujours de gros fans hardcore pour bitcher mais je me pose la question sur l'idée d'une bonne adaptation.</p>
<p>Est-ce qu'une bonne adaptation de comics est une adaptation fidèle ? et si oui, fidèle à quel niveau ? Visuellement ? dans l'ambiance ? dans l'essence des personnages ou du contexte ?</p>
<p>Pourquoi une adaptation ne serait-elle pas bonne si elle ne fait que prendre un personnage d'une série et le planter dans un nouveau contexte jusque là inconnu à ce personnage ? N'est-ce pourtant pas ce qu'il se passe lorsqu'un nouvel arc ou un reboot ou que sais-je se passe dans les comics. Pourquoi est-ce plus tolérable dans ce cas ?</p>
<p>Je pense que, naïvement, on attend d'une adaptation à l'écran qu'elle soit le reflet de l'œuvre originale et c'est un tort. Pourquoi ne pourrait-elle pas juste étendre l'univers de l'originale, plutôt que de le mimer ? N'en sortirait-on pas tous plus riche ?</p>
<p>Tout ça pour dire que je pense que la série <strong>Preacher</strong> peut franchement être sympa même si elle ne suit presque rien des comics.</p>
<p>Donnez-lui une chance si vous avez lu les comics et êtes frileux à l'idée de l'adaptation.</p>
<p>Et allez lire les comics pour les autres, c'est vraiment de la bombe et en plus <a href="http://www.urban-comics.com/preacher/">Urban Comics</a> est en train de les rééditer.</p>
Alfred, le messie des feignasses2016-05-05T00:00:00Zhttps://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/<p>Plus les années passent, moins je touche à ma souris. C'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.</p>
<p>Du coup, on apprend vite les raccourcis pour ne pas avoir à lâcher ce clavier. C'est sûrement ce qui m'a le plus attiré chez les <em>launchers</em></p>
<p>Au commencement <strong><a href="https://support.apple.com/fr-fr/HT204014">Spotlight</a></strong> n'existait pas. Mais on avait <strong><a href="https://qsapp.com/">Quicksilver</a></strong>. Pas franchement très connu et pas toujours très stable, il avait le mérite d'être déjà très pratique à l'époque.</p>
<p>Mais vint le sauveur des feignasses, celui qui faisait beaucoup et promettait encore plus : <strong><a href="https://www.alfredapp.com/">Alfred</a></strong></p>
<p>Si je vous en parle aujourd'hui c'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 <em>launcher</em> et même ceux qui le connaissaient, n'étaient pas au fait de son grand pouvoir.</p>
<p>Alors oui, la version gratuite d'<strong>Alfred</strong> n'a pas grand chose de plus que <strong>Spotlight</strong> si ce n'est tout de même une plus grande souplesse et "configurabilité". Mais je ne vais pas là vous faire un comparatif, je vais juste vous montrer quelques trucs que peut faire Alfred… en version <strong><a href="https://www.alfredapp.com/powerpack/">Powerpack</a></strong>, c'est à dire payante mais honnêtement, le logiciel vaut son pesant de cacahuète.</p>
<p>En plus de permettre des recherches sur des moteurs classiques et lancer des applications, Alfred permet aussi de :</p>
<h2 id="personnaliser-vos-moteurs-de-recherches" tabindex="-1">Personnaliser vos moteurs de recherches. <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h2>
<p>En plus d'avoir les grands classiques comme Google, Bing, Duckduckgo, Wikipedia, Youtube, Twitter, etc vous pouvez donc ajouter ceux de vos sites préférés.</p>
<p>Par exemple, j'ai ajouté celui de MDN ou celui du conjugueur. Pour la configuration, pas besoin d'accès à l'API, il suffit de connaitre l'URL des recherches, pour peu que le site en question le permette.</p>
<p>Ça ressemble globalement à ça :
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/MFWr4DFHIV-400.avif 400w, https://blog.foojin.com/img/MFWr4DFHIV-812.avif 812w, https://blog.foojin.com/img/MFWr4DFHIV-1152.avif 1152w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/MFWr4DFHIV-400.webp 400w, https://blog.foojin.com/img/MFWr4DFHIV-812.webp 812w, https://blog.foojin.com/img/MFWr4DFHIV-1152.webp 1152w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/MFWr4DFHIV-400.png 400w, https://blog.foojin.com/img/MFWr4DFHIV-812.png 812w, https://blog.foojin.com/img/MFWr4DFHIV-1152.png 1152w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Custom search" loading="lazy" decoding="async" src="https://blog.foojin.com/img/MFWr4DFHIV-400.png" width="1152" height="712"></picture></p>
<p>Tout est expliqué et c'est plutôt simple tout de même.</p>
<p>Pour l'utilisation, tapez juste le <em>keyword</em> choisi puis votre recherche. Simple, non?
<picture><source type="image/avif" srcset="https://blog.foojin.com/img/W5lnTRcR9T-400.avif 400w, https://blog.foojin.com/img/W5lnTRcR9T-812.avif 812w, https://blog.foojin.com/img/W5lnTRcR9T-1328.avif 1328w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/W5lnTRcR9T-400.webp 400w, https://blog.foojin.com/img/W5lnTRcR9T-812.webp 812w, https://blog.foojin.com/img/W5lnTRcR9T-1328.webp 1328w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/W5lnTRcR9T-400.png 400w, https://blog.foojin.com/img/W5lnTRcR9T-812.png 812w, https://blog.foojin.com/img/W5lnTRcR9T-1328.png 1328w" sizes="(min-width: 50em) 812px, 100vw"><img alt="MDN search" loading="lazy" decoding="async" src="https://blog.foojin.com/img/W5lnTRcR9T-400.png" width="1328" height="288"></picture></p>
<p>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. :)</p>
<h2 id="une-gestion-du-presse-papier-clipboard-au-petits-oignons" tabindex="-1">Une gestion du presse-papier (clipboard) au petits oignons <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h2>
<p>Alfred intègre un gestionnaire de clipboard, qui va mémoriser tout ce que vous y mettez, sauf quand ça provient d'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é.</p>
<p>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'ils soient "fusionnables".</p>
<h2 id="gerer-vos-fichiers-sans-avoir-besoin-de-finder" tabindex="-1">Gérer vos fichiers sans avoir besoin de Finder <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h2>
<p>Vous venez de faire une capture d'écran et vous voulez l'ouvrir dans un logiciel, ou bien vous ne vous souvenez où vous avez foutu ce pdf du manuel du <a href="http://www.keeptalkinggame.com/">super jeu</a> que vous venez d'acheter de fiche de personnage de votre jeu de rôle préféré mais vous voulez l'ouvrir et vite ?</p>
<p>Pas de problème !</p>
<p><img src="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/img/alfred-find.gif" alt="Alfred find"></p>
<p>Les possibilités sont grandes. :)</p>
<h2 id="le-plein-de-petits-trucs-sympatoche" tabindex="-1">Le plein de petits trucs sympatoche… <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h2>
<p>Comme…</p>
<ul>
<li>L'intégration de <strong>1Password</strong></li>
<li>Gérer <strong>iTunes</strong> depuis Alfred</li>
<li>Chercher et afficher ses contacts en un éclair</li>
<li>Envoyer des commandes Shell directement depuis Alfred</li>
<li>Config qui peut être sync via <strong>Dropbox</strong> (nativement) ou bien vous pouvez le faire à la main via un <code>ln -s</code> ou autre solution comme <a href="https://github.com/lra/mackup">Mackup</a></li>
<li>Une calculatrice de compétition</li>
<li>Fouiller dans le dictionnaire</li>
<li>Ajouter et gérer des snippets directement dans Alfred.</li>
<li>etc…</li>
</ul>
<h2 id="mais-surtout-des-workflows" tabindex="-1">…mais surtout, des Workflows <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h2>
<p>C'est la pièce maitresse d'Alfred, pouvoir créer ses propres fonctions automatiques. Un peu ce que permettait <strong>Automator</strong> mais en mieux (d'ailleurs Alfred gère vos fichiers Automator, je dis ça, je dis rien)</p>
<p>Tout ce que fait de base Alfred n'est limité que par l'imagination du developpeur d'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.</p>
<p>Ces workflows, il en existe déjà beaucoup sur la toile. Je vous recommande d'ailleurs le très bon site <a href="http://www.packal.org/">Packal</a> pour faire votre marché.</p>
<p>Vous y trouverez des workflows qui intéragissent directement avec une app installée sur votre machine comme <strong>Wunderlist</strong>, <strong>Evernote</strong>, <strong>Spotify</strong>, etc.</p>
<p>Par exemple, j'utilise <a href="https://kapeli.com/dash">Dash</a> pour avoir de la doc en local, quand je n'ai pas de connexion. Et bien il y a un workflow qui permet de lancer une recherche directement dans <strong>Dash</strong></p>
<p>Et puis il y a les petits workflows plus ou moins inutiles mais définitivement indispensables.</p>
<h3 id="colors" tabindex="-1">Colors <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h3>
<p>On me file un code couleur hexadecimal d'une charte graphique mais moi, je veux du RGB…</p>
<p><img src="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/img/alfred-colors.gif" alt="Alfred colors"></p>
<p>hopla, je clique (ou je tape entrée) et le code RGB est dans mon presse-papier.</p>
<h3 id="convert" tabindex="-1">Convert <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h3>
<p>Parfois, à force de trainer sur des sites anglosaxons, je galère à faire la conversion d'unités de mesure, ou bien encore de devises. Pas de problème, j'ai <em>convert</em>.</p>
<p><img src="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/img/alfred-conv.gif" alt="Alfred conv"></p>
<h3 id="down-for-everyone" tabindex="-1">Down for everyone <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h3>
<p>Un problème de proxy ? Un problème de DNS ? Je ne sais pas mais je n'ai pas accès à ce site. Est-ce juste moi ou…</p>
<p><img src="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/img/alfred-down.gif" alt="Alfred down"></p>
<h3 id="encode-decode" tabindex="-1">Encode/Decode <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h3>
<p>Parfois, je dois faire (encore…) un bon vieux mailto et j'ai besoin d'encoder du texte, mais je ne connais pas par cœur les codes. Pas de problème !</p>
<p><img src="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/img/alfred-encode.gif" alt="Alfred encode"></p>
<h3 id="une-traduction-avec-wordreference" tabindex="-1">Une traduction avec WordReference <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h3>
<p>Bien plus fiable que Google Translate, WordReference ne me trompe jamais, mais dieu que c'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'avec Alfred…</p>
<p><img src="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/img/alfred-translate.gif" alt="Alfred translate"></p>
<p>Pour celui-ci par contre, il vous faudra une APIKey, disponible gratuitement, c'est juste pour éviter le flood.</p>
<h3 id="et-puis-aussi" tabindex="-1">Et puis aussi… <a class="header-anchor" href="https://blog.foojin.com/2016/05/05/alfred-le-messie-des-feignasses/">#</a></h3>
<ul>
<li>faire un screenshot et l'envoyer directement sur votre Dropbox</li>
<li>Faire un ping rapidement</li>
<li>Chercher dans vos favoris <strong>Github</strong></li>
<li>Faire une recherche avec suggestions sur <strong>Stack Overflow</strong></li>
<li>Connaitre l'heure dans tel pays en ce moment même</li>
<li>Savoir quel logiciel prend le plus de ressource processeur</li>
<li>Kill une application qui prend beaucoup trop de ressources processeur</li>
<li>Des raccourcis pour vos emoticons les plus compliqués à mémoriser</li>
<li>Faire des calculs de pourcentage en un clin d'œil</li>
<li>Faire une recherche dans le catalogue de <strong>Netflix</strong></li>
<li>Lancer Firefox avec un différent <em>profile</em></li>
<li>Ouvrir une connexion FTP avec Filezilla alors que l'app n'est même pas encore lancée</li>
<li>Et toujours plus… la limite n'est que celle de votre imagination.</li>
</ul>
<p>Je n'ai pas mis la liste exhaustive de tout ce que j'utilise mais vous voyez l'idée.</p>
<p>Vous pouvez retrouver sur <a href="https://github.com/willfarrell/alfred-workflows">cette page Github</a> une liste de workflows spécialement pour les dev web pour aller encore plus loin.</p>
<p>Finalement, <strong>Alfred</strong> n'est pas juste un concurrent de Spotlight, son but est vraiment de vous rendre plus productif à <strong>TOUS</strong> les niveaux.</p>
<p>En espérant que j'aurais réussi à vous apprendre des trucs, et si vous avez des questions, n'hésitez pas à me les poser sur <a href="https://twitter.com/GoOz">Twitter</a> ou IRC (##openweb sur Freenode).</p>
<p><em>Cover de <a href="https://www.flickr.com/photos/clickonkirai/7175120640/">clickonkirai</a></em></p>
De la nécessité de la documentation2016-03-07T00:00:00Zhttps://blog.foojin.com/2016/03/07/de-la-necessite-de-la-documentation/<p>J'ai récemment été confronté à un soucis qui n'a rien de rare et qui emmerde tout nouvel arrivant sur un projet : <strong>l'absence de documentation</strong>.</p>
<p>Alors je ne vous cache pas que chez mon précédent employeur, tout le monde utilisait les mêmes outils, les mêmes <em>frameworks</em>, etc. Il y avait bien quelques subtilités par projet mais globalement on codait tous avec le même système.</p>
<p>Du coup, la <em>doc</em> était "un peu" superflue. Non pas qu'elle était inutile mais disons qu'on n'avait pas forcément besoin d'aller la lire pour comprendre les subtilités.</p>
<p>Je sais bien que la documentation est une nécessité, qu'il faut se faire violence et l'écrire et qu'il ne faut pas passer à côté quand on reprend un projet. Mais je n'ai jamais vraiment été dans le cas où j'ai souffert de son absence, soit parce que je connaissais déjà tous les outils (comme je l'ai dit plus haut), soit parce qu'on me faisait une bonne passation de projet.</p>
<p>Jamais jusque récemment…</p>
<p>Voyez-vous, j'ai donc, il y a peu, changé d'entreprise. Je suis dans une toute petite boîte de moins de 15 personnes.</p>
<p>Sûrement était-ce dû à la taille justement mais cette nécessité de documentation ne s'est pas fait sentir à la seule et unique personne faisant du <em>front</em> avant que j'arrive.</p>
<p>Honnêtement, je ne la blâme pas, je pense que je serais tombé aussi dans le piège si j'avais été à sa place.</p>
<p>Le fait est que peu de projets historiques ont un tronc commun, beaucoup d'outils ou de <em>frameworks</em> changent et ce qui est une évidence pour celui qui l'a codé l'est beaucoup moins pour celui qui reprend.</p>
<p>Vous pourriez me dire que j'aurais pu demander une passation et c'est ce que j'ai fait la plupart du temps jusqu'au jour où la personne eut la très mauvaise idée de prendre des congés (enfin, mauvaise idée pour moi).</p>
<p>J'ai repris un vieux projet et je n'ai pas compris un poil de cul de comment ce bouzin fonctionnait.</p>
<p>Il y avait bien un <em>readme.md</em> à la racine du projet, quasi vide, ne donnait quasi aucune information…</p>
<p>J'ai donc dû fouiller chaque recoin de chaque dossier et fichier de ce foutu projet pour comprendre.</p>
<p>Ça m'a demandé 4h pour comprendre.</p>
<p>4h pour changer… <strong>un logo</strong>.</p>
<p>Autant vous dire que ça devait être ma demi-journée la moins productive depuis bien longtemps.</p>
<p>Donc chers amis, de grâce, même si c'est chiant, même si vous avez l'impression de perdre votre temps, et comme le dit mon cher ex-collègue <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>, dit le <em>Rédacteur Technique de White Chapel</em>, dit <em>le Grizzli du MDN</em>, dit <em>l'abominable homme des docs</em> : <strong>faites vos putain de docs, bande d'enfoirés.</strong></p>
<p>Bon, je vous retranscris ça de pèle-mêle aussi...</p>
<p>Et de la part de tous les parachutés sur des projets, <strong>MERCI</strong>. :)</p>
<p><em>Cover de <a href="https://www.flickr.com/photos/light_seeker/7571188852/">Viewminder</a></em></p>
ZNC + Bitlbee + Client IRC = MEGA WIN2016-02-16T00:00:00Zhttps://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/<h2 id="on-parle-de-quoi-la-deja" tabindex="-1">On parle de quoi là déjà ? <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h2>
<p>Cela vous est-il déjà arrivé de vous dire qu'entre Gtalk (Hangout), IRC, le chat Facebook, Twitter, voire même Slack maintenant vous ne saviez plus où donner de la tête ?</p>
<p>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 ?</p>
<p>Si oui, alors vous avez connu ce que j'ai connu.</p>
<p>J'ai une sainte horreur d'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.</p>
<p>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 <strong>quelques concessions</strong>.</p>
<p>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 <code>/giphy</code> dans Slack, les superbes emojis animés de chatons faisant la macarena dans… je sais pas mais je suis sûr que ça existe.</p>
<p>Vous aurez aussi besoin d'une manière ou d'une autre d'une machine constamment connecté à Internet, comme un serveur local ou distant, un NAS, ou juste un ordinateur de bureau.</p>
<p>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 <a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">mes articles</a><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">pour pimper</a><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">votre shell</a>, vous êtes forcément compétents pour ce qui suivra. :)</p>
<h2 id="de-quels-ingredients-aurez-vous-besoin" tabindex="-1">De quels ingrédients aurez-vous besoin ? <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h2>
<h3 id="1-un-gateway-irc" tabindex="-1">1/ Un Gateway IRC <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h3>
<p>Pour ceux qui n'y connaissent vraiment rien à IRC (Internet Relay Chat), c'est comme <a href="http://slack.com/">Slack</a>, un protocole de chat à plusieurs mais en libre et ouvert, qui a fait ses preuves, et surtout nettement moins <em>hype</em>.</p>
<p>Donc déjà, vous aurez besoin d'un <em>Gateway IRC</em> pour tous ces protocoles divers et variés de messagerie instantanée, en l'occurence, ce sera <strong><a href="https://www.bitlbee.org">Bitlbee</a></strong> qui jouera ce rôle.</p>
<p>Un <em>Gateway IRC</em> 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 <em>channel</em> (ou salon) IRC.</p>
<p>Bitlbee supporte nativement pléthore de protocoles et pour ceux qu'il ne supporte pas directement, il propose des plugins ou redirige vers d'autres solutions. Je vous laisse scruter leur <a href="https://wiki.bitlbee.org/">wiki</a> pour vos propres besoins.</p>
<p>Je ne vais pas m'attarder sur son installation, le <a href="https://wiki.bitlbee.org/GettingStarted">wiki</a> fera ça beaucoup mieux que moi. Sachez juste que si vous avez un NAS <strong>Synology</strong>, il existe une app, plutôt bien mise à jour et qui fonctionne très bien.</p>
<p>Pour ce qui est de la configuration, on verra par la suite.</p>
<h3 id="2-un-bouncer-bnc" tabindex="-1">2/ Un Bouncer (BNC) <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h3>
<p>Un <em>Bouncer IRC</em> ou <em>BNC</em> est un proxy IRC, c'est à dire que vous devez passer par lui pour vous connecter à IRC.</p>
<p>À quoi bon me direz-vous ? Et bien le plus gros intérêt, pour ne pas dire le seul, c'est qu'il sera connecté en permanence à IRC, ce qui a priori ne sera pas votre cas.</p>
<p>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.</p>
<p>C'est tout l'intérêt, non ?</p>
<p>En guise de BNC, nous utiliserons donc <a href="http://wiki.znc.in/ZNC">ZNC</a>, qui lui aussi a son app sur les NAS Synology, sauf que lui n'est plus mis à jour sur les modèles pour particuliers, ils ne sont pas assez puissant. Je déconseille donc de l'utiliser sur NAS parce qu'une des fonctionnalités manquantes est justement qu'il ne retransmet pas l'historique des messages privés reçu pendant votre absence, ce qui plombe le but qu'on se fixe aujourd'hui.</p>
<p>Même histoire pour l'installation de ZNC, je vous laisse suivre les indications sur le <a href="http://wiki.znc.in/Installation">wiki</a> et on verra ensuite pour la configuration.</p>
<h3 id="3-un-client-irc" tabindex="-1">3/ Un client IRC. <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h3>
<p>Un client IRC c'est donc un logiciel qui permet de se connecter à IRC et donc, chatter.</p>
<p>Il en existe <a href="https://en.wikipedia.org/wiki/Comparison_of_Internet_Relay_Chat_clients">moult</a>.</p>
<p>Personnellement, je suis sur mac donc je connais mieux ceux de cet OS mais voilà ceux que j'ai le plus souvent rencontré :</p>
<ul>
<li>Windows : L'indécrottable <strong>mIRC</strong>, <strong>HexChat</strong>,…</li>
<li>Linux : <strong>irssi</strong> (cli), <strong>weechat</strong> (cli), <strong>xChat</strong>,…</li>
<li>OSX : <strong>irssi</strong> (cli), <strong>weechat</strong>(cli), <strong>Limechat</strong>, <strong>Colloquy</strong>, <strong>Linkinus</strong>, <strong>Textual</strong>,…</li>
</ul>
<p><em>ceux notés "cli" sont en ligne de commande</em></p>
<p>Je ne sais trop quoi vous conseiller, c'est du feeling, n'hésitez pas à tester, beaucoup sont soit gratuits, soit avec période d'essai.</p>
<p>Pour ma part, sur OSX, je suis resté longtemps sur <strong>Limechat</strong> et puis je suis passé sur <strong>weechat</strong> parce que j'avais besoin de plus de liberté dans mon arrangement de fenêtre, mais c'est vraiment au besoin de chacun.</p>
<p>Maintenant que nous avons vu tous les ingrédients dont nous aurons besoin, passons à l'assemblage.</p>
<h2 id="assembler-les-briques" tabindex="-1">Assembler les briques <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h2>
<p>Comme tout transitera par IRC, et donc par votre BNC, voyons donc d'abord comment configurer le cœur de notre système.</p>
<h3 id="configurer-znc" tabindex="-1">Configurer ZNC <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h3>
<p>Je pars donc du principe que vous avez déjà installé <strong>ZNC</strong>.</p>
<p>Si vous n'avez pas encore créé votre fichier de conf après le <code>make install</code>, je vous invite à le faire maintenant en tapant <code>znc --makeconf</code>. ZNC vous demandera plusieurs choses, laissez tout par défaut au départ si vous ne savez pas trop quoi mettre, rien n'est immuable de toute façon, mais retenez au moins le <em>nom de user</em>, le mot de passe et le port d'écoute que vous aurez choisis.</p>
<p>Configurer ZNC en ligne de commande, c'est possible mais comme on est pas trop con et qu'il y a une interface d'administration, on va plutôt aller faire ça là-bas.</p>
<p>Pour ce faire, ouvrez votre navigateur et tapez l'adresse de votre serveur où est installé ZNC, c'est à dire l'ip locale de la machine si c'est un serveur local, 127.0.0.1 (j'imagine) si c'est votre ordinateur de bureau, l'ip ou le DNS si c'est un serveur distant.</p>
<p>Dans tous les cas, avant de taper sur <em>entrée</em>, n'oubliez pas de rajouter le port que vous aviez choisi auparavant.</p>
<p>Ça devrait donner un truc comme ça <code>http://IpOuDnsDuServer.tld:1337</code></p>
<p>Vous devriez arriver sur une page de login comme ça.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/fYDSIRL8xJ-400.avif 400w, https://blog.foojin.com/img/fYDSIRL8xJ-812.avif 812w, https://blog.foojin.com/img/fYDSIRL8xJ-1400.avif 1400w, https://blog.foojin.com/img/fYDSIRL8xJ-1902.avif 1902w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/fYDSIRL8xJ-400.webp 400w, https://blog.foojin.com/img/fYDSIRL8xJ-812.webp 812w, https://blog.foojin.com/img/fYDSIRL8xJ-1400.webp 1400w, https://blog.foojin.com/img/fYDSIRL8xJ-1902.webp 1902w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/fYDSIRL8xJ-400.png 400w, https://blog.foojin.com/img/fYDSIRL8xJ-812.png 812w, https://blog.foojin.com/img/fYDSIRL8xJ-1400.png 1400w, https://blog.foojin.com/img/fYDSIRL8xJ-1902.png 1902w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC login" loading="lazy" decoding="async" src="https://blog.foojin.com/img/fYDSIRL8xJ-400.png" width="1902" height="1370"></picture></p>
<p>Loggez-vous donc comme il se doit avec les identifiants que vous avez renseignés à l'installation et une fois ceci fait allez directement aux "<em>Global settings</em>".</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/qKWmCGw5r0-400.avif 400w, https://blog.foojin.com/img/qKWmCGw5r0-812.avif 812w, https://blog.foojin.com/img/qKWmCGw5r0-1360.avif 1360w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/qKWmCGw5r0-400.webp 400w, https://blog.foojin.com/img/qKWmCGw5r0-812.webp 812w, https://blog.foojin.com/img/qKWmCGw5r0-1360.webp 1360w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/qKWmCGw5r0-400.png 400w, https://blog.foojin.com/img/qKWmCGw5r0-812.png 812w, https://blog.foojin.com/img/qKWmCGw5r0-1360.png 1360w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC listen ports" loading="lazy" decoding="async" src="https://blog.foojin.com/img/qKWmCGw5r0-400.png" width="1360" height="360"></picture></p>
<p>Dans la section "<em>Listen ports</em>" apparait le port que vous avez choisi à l'installation. Mais vous pouvez en ajouter autant que vous le souhaitez même si je vous conseille d'avoir une putain de bonne raison de le faire. Notez que vous ne pouvez éditer ou supprimer le port en cours d'utilisation.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/d6joMrW5s2-400.avif 400w, https://blog.foojin.com/img/d6joMrW5s2-812.avif 812w, https://blog.foojin.com/img/d6joMrW5s2-1268.avif 1268w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/d6joMrW5s2-400.webp 400w, https://blog.foojin.com/img/d6joMrW5s2-812.webp 812w, https://blog.foojin.com/img/d6joMrW5s2-1268.webp 1268w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/d6joMrW5s2-400.png 400w, https://blog.foojin.com/img/d6joMrW5s2-812.png 812w, https://blog.foojin.com/img/d6joMrW5s2-1268.png 1268w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC settings" loading="lazy" decoding="async" src="https://blog.foojin.com/img/d6joMrW5s2-400.png" width="1268" height="1274"></picture></p>
<p>Dans la section "<em>settings</em>", vous pouvez vous amuser à changer le theme de l'admin de ZNC mais ils sont tous moches, soyons honnêtes. Le thème "<em>Ice</em>" est peut être le moins dégueulasse mais bon, faites comme bon vous semble, ce n'est pas important.</p>
<p>Ce qui est important par contre c'est le "<em>Maximum Buffer Size</em>", c'est le nombre de lignes gardées en mémoire tampon pour <strong>chaque</strong> <em>buffer</em> (c'est à dire salon IRC/Slack et message privé) pendant votre absence sur ZNC; pas votre absence devant l'écran, celle passée à être déconnecté de ZNC. Je l'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.</p>
<p>Vous pouvez laisser le reste de cette section par défaut.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/WNRCd8r0IU-400.avif 400w, https://blog.foojin.com/img/WNRCd8r0IU-812.avif 812w, https://blog.foojin.com/img/WNRCd8r0IU-1394.avif 1394w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/WNRCd8r0IU-400.webp 400w, https://blog.foojin.com/img/WNRCd8r0IU-812.webp 812w, https://blog.foojin.com/img/WNRCd8r0IU-1394.webp 1394w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/WNRCd8r0IU-400.png 400w, https://blog.foojin.com/img/WNRCd8r0IU-812.png 812w, https://blog.foojin.com/img/WNRCd8r0IU-1394.png 1394w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC global modules" loading="lazy" decoding="async" src="https://blog.foojin.com/img/WNRCd8r0IU-400.png" width="1394" height="1262"></picture></p>
<p>Dans la section "<em>Global modules</em>", s'activent et se désactivent les modules disponibles embarqués avec ZNC concernant l'administration et la gestion de ZNC.</p>
<p>Rien de vraiment intéressant ici pour vous à moins que vous décidiez de devenir fournisseur de bouncer pour vos copains. Et si c'est le cas, allez lire la doc, c'est pas le propos de ce billet. :)</p>
<p>Allez donc cliquer sur "<em>Your settings</em>" dans la navigation et vous arriverez sur la page de configuration de votre compte (logique, non ?).</p>
<p>Dans la section "<em>Authentication</em>" les options ne concernent que les informations pour se connecter à cette même admin. Rien à voir avec les serveurs IRC qu'on renseignera plus tard. Donc à moins de vouloir modifier vos identifiants, ne touchez à rien.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/yp_IXkkZvy-400.avif 400w, https://blog.foojin.com/img/yp_IXkkZvy-812.avif 812w, https://blog.foojin.com/img/yp_IXkkZvy-952.avif 952w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/yp_IXkkZvy-400.webp 400w, https://blog.foojin.com/img/yp_IXkkZvy-812.webp 812w, https://blog.foojin.com/img/yp_IXkkZvy-952.webp 952w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/yp_IXkkZvy-400.png 400w, https://blog.foojin.com/img/yp_IXkkZvy-812.png 812w, https://blog.foojin.com/img/yp_IXkkZvy-952.png 952w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC auth" loading="lazy" decoding="async" src="https://blog.foojin.com/img/yp_IXkkZvy-400.png" width="952" height="572"></picture></p>
<p>Dans la section "<em>IRC Information</em>" seront les informations par défaut de connexion aux serveurs IRC. Les mêmes que l'on renseigne quand on se connecte sans BNC à IRC finalement, rien de neuf. Retenons surtout les trois premiers champs <em>Nickname</em>, <em>Alt. Nickname</em> et <em>Ident</em>.</p>
<ul>
<li><em>Nickname</em> sera votre pseudo visible, il doit être unique sur le serveur</li>
<li><em>Alt. Nickname</em> sera votre pseudo alternatif, utilisé quand quelqu'un d'autre a déjà pris votre pseudo, ce qui arrive quand on enregistre pas son pseudonyme sur le serveur IRC</li>
<li><em>Ident (ou username)</em>, contrairement au <em>nickname</em>, n'est pas forcément unique. L'<em>idents</em> apparaitra surtout lors de votre connexion à un salon ou si une personne utilise un <code>whois</code> sur vous. Habituellement <em>nickname</em> et <em>idents</em> sont identiques mais rien ne vous l'oblige.</li>
<li><em>Realname</em> sera votre identité. Rien ne vous oblige à mettre vos véritables nom et prénom, moi je ne le fais pas, mais c'est là que vous pouvez le renseigner si vous le souhaitez.</li>
</ul>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/uILHSKCT5w-400.avif 400w, https://blog.foojin.com/img/uILHSKCT5w-812.avif 812w, https://blog.foojin.com/img/uILHSKCT5w-1342.avif 1342w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/uILHSKCT5w-400.webp 400w, https://blog.foojin.com/img/uILHSKCT5w-812.webp 812w, https://blog.foojin.com/img/uILHSKCT5w-1342.webp 1342w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/uILHSKCT5w-400.png 400w, https://blog.foojin.com/img/uILHSKCT5w-812.png 812w, https://blog.foojin.com/img/uILHSKCT5w-1342.png 1342w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC irc infos" loading="lazy" decoding="async" src="https://blog.foojin.com/img/uILHSKCT5w-400.png" width="1342" height="674"></picture></p>
<p>Dans la section "<em>Networks</em>" se trouvent tous les serveurs que vous avez ajoutés, et comme on ne l'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'instant, on n'y fera rien mais retenez que c'est ici qu'il faudra aller pour éditer vos serveurs.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/7CRrwSMKHE-400.avif 400w, https://blog.foojin.com/img/7CRrwSMKHE-812.avif 812w, https://blog.foojin.com/img/7CRrwSMKHE-1014.avif 1014w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/7CRrwSMKHE-400.webp 400w, https://blog.foojin.com/img/7CRrwSMKHE-812.webp 812w, https://blog.foojin.com/img/7CRrwSMKHE-1014.webp 1014w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/7CRrwSMKHE-400.png 400w, https://blog.foojin.com/img/7CRrwSMKHE-812.png 812w, https://blog.foojin.com/img/7CRrwSMKHE-1014.png 1014w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC networks" loading="lazy" decoding="async" src="https://blog.foojin.com/img/7CRrwSMKHE-400.png" width="1014" height="334"></picture></p>
<p>Dans la section "<em>Modules</em>" 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'infos.</p>
<p>Ce que je vais vous dire par contre, c'est de cocher le module "<em>clearbufferonmsg</em>" qui sert à garder le tampon intact tant que l'on n'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).</p>
<p>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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/qGbJswS5nU-400.avif 400w, https://blog.foojin.com/img/qGbJswS5nU-812.avif 812w, https://blog.foojin.com/img/qGbJswS5nU-1400.avif 1400w, https://blog.foojin.com/img/qGbJswS5nU-1410.avif 1410w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/qGbJswS5nU-400.webp 400w, https://blog.foojin.com/img/qGbJswS5nU-812.webp 812w, https://blog.foojin.com/img/qGbJswS5nU-1400.webp 1400w, https://blog.foojin.com/img/qGbJswS5nU-1410.webp 1410w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/qGbJswS5nU-400.png 400w, https://blog.foojin.com/img/qGbJswS5nU-812.png 812w, https://blog.foojin.com/img/qGbJswS5nU-1400.png 1400w, https://blog.foojin.com/img/qGbJswS5nU-1410.png 1410w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC modules" loading="lazy" decoding="async" src="https://blog.foojin.com/img/qGbJswS5nU-400.png" width="1410" height="1266"></picture></p>
<p>Dans la section "<em>Default Settings</em>", vous pourrez définir surtout la taille du tampon pour votre propre utilisateur. Mettons que vous gériez le <em>bouncer</em> pour plusieurs personnes, vous pouvez mettre le <em>buffer size</em> global à 200 et booster le vôtre à 1000 parce que vous êtes une radasse de gros chacal. Mais ce n'est qu'un exemple.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/IldEfu7CIv-400.avif 400w, https://blog.foojin.com/img/IldEfu7CIv-754.avif 754w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/IldEfu7CIv-400.webp 400w, https://blog.foojin.com/img/IldEfu7CIv-754.webp 754w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/IldEfu7CIv-400.png 400w, https://blog.foojin.com/img/IldEfu7CIv-754.png 754w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC default settings" loading="lazy" decoding="async" src="https://blog.foojin.com/img/IldEfu7CIv-400.png" width="754" height="312"></picture></p>
<p>Dans la section "<em>Flags</em>", surtout, <strong>SURTOUT</strong>, décochez les deux options <em>Auto Clear Chan Buffer</em> et <em>Auto Clear Query Buffer</em>, sinon l'option <em>clearbufferonmsg</em> que vous avez coché auparavant ne servira à rien. Comme leur nom l'indique, ces deux options vident le tampon des salons et messages privés si vous êtes quelque part connecté à ZNC.</p>
<p>Pour le reste, vous pouvez laisser par défaut.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/99J1J2655b-400.avif 400w, https://blog.foojin.com/img/99J1J2655b-812.avif 812w, https://blog.foojin.com/img/99J1J2655b-1172.avif 1172w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/99J1J2655b-400.webp 400w, https://blog.foojin.com/img/99J1J2655b-812.webp 812w, https://blog.foojin.com/img/99J1J2655b-1172.webp 1172w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/99J1J2655b-400.png 400w, https://blog.foojin.com/img/99J1J2655b-812.png 812w, https://blog.foojin.com/img/99J1J2655b-1172.png 1172w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC flags" loading="lazy" decoding="async" src="https://blog.foojin.com/img/99J1J2655b-400.png" width="1172" height="252"></picture></p>
<p>Dans la section "<em>ZNC Behavior</em>", rien à signaler, éditez si vous le souhaitez mais rien n'est vraiment très important.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/u5nvTKEgA0-400.avif 400w, https://blog.foojin.com/img/u5nvTKEgA0-812.avif 812w, https://blog.foojin.com/img/u5nvTKEgA0-1370.avif 1370w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/u5nvTKEgA0-400.webp 400w, https://blog.foojin.com/img/u5nvTKEgA0-812.webp 812w, https://blog.foojin.com/img/u5nvTKEgA0-1370.webp 1370w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/u5nvTKEgA0-400.png 400w, https://blog.foojin.com/img/u5nvTKEgA0-812.png 812w, https://blog.foojin.com/img/u5nvTKEgA0-1370.png 1370w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC behaviour" loading="lazy" decoding="async" src="https://blog.foojin.com/img/u5nvTKEgA0-400.png" width="1370" height="1432"></picture></p>
<p>Bien ! Là, globalement, ZNC est configuré, il ne reste qu'à ajouter des serveurs. Sur ce point je ne vais pas m'attarder, c'est assez simple.</p>
<p>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 "<em>Your Settings</em>", sinon ajoutez les nouveaux.</p>
<p>Puis renseignez l'url du serveur avec son port et l'affaire est dans le sac.</p>
<p>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.</p>
<p>Vous pouvez aussi activer/désactiver des modules propres à ce serveur.</p>
<p>Voilà, ZNC c'est fait !</p>
<p>Next…</p>
<h3 id="configurer-le-client-irc" tabindex="-1">Configurer le client IRC <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h3>
<p>Je finirai par Bitlbee si vous me le permettez, vous verrez, c'est plus logique.</p>
<p>Quelque soit votre choix de client IRC, qu'il ait une UI ou qu'il soit en cli, c'est toujours le même credo : renseignez le serveur et votre nickname.</p>
<p>Bon ok, il va falloir renseigner d'autres choses pour se connecter à ZNC.</p>
<p>Je vais montrer la fenêtre type sur Limechat pour l'exemple.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/wdy44uk3lS-400.avif 400w, https://blog.foojin.com/img/wdy44uk3lS-411.avif 411w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/wdy44uk3lS-400.webp 400w, https://blog.foojin.com/img/wdy44uk3lS-411.webp 411w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/wdy44uk3lS-400.png 400w, https://blog.foojin.com/img/wdy44uk3lS-411.png 411w" sizes="(min-width: 50em) 812px, 100vw"><img alt="ZNC limechat" loading="lazy" decoding="async" src="https://blog.foojin.com/img/wdy44uk3lS-400.png" width="411" height="535"></picture></p>
<p>Passons tout en revue :</p>
<ul>
<li>Dans le champ <em>Network Name</em> mettez bien ce que vous voulez. Si vous voulez vous connecter sur Freenode depuis votre ZNC, mettez "Freenode", "Freenode|ZNC" ou bien "J'aimeLesSucettesAlAnis"… vraiment on s'en fout, c'est pour vous, pour vous y retrouver.</li>
<li>Dans le champ <em>server</em>, il ne faut pas se tromper, ne mettez pas le dns officiel de Freenode hein, mettez le dns (ou l'ip si vous êtes très pauvre) du serveur où est installé ZNC.</li>
<li>N'oubliez pas le port que vous avez renseigné lors de votre installation de ZNC.</li>
<li>Dans le <em>Server Password</em> mettez jute le même password que vous utilisez pour vous connecter à l'admin de ZNC</li>
<li>Le <em>nickname</em> est techniquement inutile, puisque c'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 <em>nickname</em> alors mettez ce que vous voulez, de toute façon</li>
</ul>
<p>ça ne sera pas utilisé.</p>
<ul>
<li>Dans le champ <em>Login name</em> par contre, faites comme suit : <strong>VotrePseudoZNC/NomDuServeurZNC</strong>. Par exemple mon nom d'utilisateur sur ZNC est "GoOz" et le serveur que je veux ajouter a pour nom "Freenode" sur ZNC, donc dans le champ <em>login name</em> je mets "GoOz/Freenode"</li>
</ul>
<p>Et c'est tout, laissez le reste vide car ça ne servira absolument à rien.</p>
<h3 id="configurer-bitlbee" tabindex="-1">Configurer Bitlbee <a class="header-anchor" href="https://blog.foojin.com/2016/02/16/znc-bitlbee-client-irc-mega-win/">#</a></h3>
<p>Vous allez voir, c'est simple comme bonjour… sauf que Bitlbee, contrairement à ZNC, n'a pas d'interface d'administration et, honnêtement, les développeurs ont eu raison de ne pas se faire chier avec ça car ça n'en vaut pas la peine.</p>
<p>Tout d'abord, comme je l'ai dit plus tôt, Bitlbee se comporte comme un serveur IRC donc nous allons l'ajouter à ZNC comme tel. La seule petite nuance avec lui est de bien déterminer l'URL à renseigner :</p>
<ul>
<li>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'avez qu'à mettre <em>127.0.0.1 6667</em> (6667 si vous avez laissé le port par défaut à l'installation) dans le champ "<em>Servers of this IRC Network</em>" dans ZNC</li>
<li>Si vous l'avez installé sur une autre machine que ZNC, il va falloir soit renseigner l'IP de cette machine, soit y lier un DNS. Si vous l'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 <a href="https://account.synology.com/fr-fr">leur site</a> et de suivre les directives. Dans tous les cas, renseignez le champ "<em>Servers of this IRC Network</em>" avec l'IP ou le DNS suivi de l'IP par défaut (6667) ou celle que vous aurez choisi à l'installation.</li>
</ul>
<p>Un fois ceci fait, allez dans votre client IRC et ajoutez ce serveur comme n'importe quel autre serveur IRC et connectez-vous.</p>
<p>Un salon particulier apparait normalement et devrait s'appeler <strong>&bitlbee</strong>. C'est le salon de contrôle : vous devrez y faire toutes vos commandes.</p>
<p>Allez donc sur ce salon et tapez <code>help</code> pour voir tous les types de commandes disponibles. Pour faire ça bien je vous conseille de taper <code>help quickstart</code> puisque c'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 <code>register votrenouveaumotdepasse</code> et mémorisez-le. Avant de faire autre chose, retournez dans ZNC, et dans le champ où vous aviez renseigné l'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.</p>
<p>Passons donc à la suite. Toujours dans le salon de contrôle, tapez <code>help quickstart2</code> et tout devrait vous être expliqué. Pour information, le protocole pour gtalk est jabber. Vous n'avez plus qu'à suivre les instructions et taper des commandes du style <code>account add jabber MonAdresseGtalk@gmail.com MonMotDePasse</code> et ainsi de suite pour tous vos comptes de messagerie instantanée.</p>
<p>De bien utiles informations vous seront fournies si vous continuez le quickstart en tapant les commandes <code>help quickstartn</code> où <em>n</em> va jusqu'à 6. Si vous voulez lire le quickstart de façon plus agréable, vous pouvez aussi le voir <a href="https://wiki.bitlbee.org/quickstart">en ligne</a>. N'hésitez pas non plus à lire la page dédiée à l'utilisation de <a href="https://wiki.bitlbee.org/HowtoGtalk">Gtalk dans Bitlbee</a>, vous pourrez y voir comment activer l'OAuth mais aussi pourquoi les noms de certains de vos contacts ont l'air foireux. <em>Spoiler alert : Google+ est un con</em></p>
<p>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'est y pas beau le progrès.</p>
<p>Voilà, vous avez toutes les bases et n'oubliez pas que Google est votre ami (bien curieux mais tout de même) et la doc est votre meilleure amie.</p>
<p>En bonus, voici à quoi ressemble mon client IRC en action.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/XAalzwB3Nm-400.avif 400w, https://blog.foojin.com/img/XAalzwB3Nm-812.avif 812w, https://blog.foojin.com/img/XAalzwB3Nm-1277.avif 1277w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/XAalzwB3Nm-400.webp 400w, https://blog.foojin.com/img/XAalzwB3Nm-812.webp 812w, https://blog.foojin.com/img/XAalzwB3Nm-1277.webp 1277w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/XAalzwB3Nm-400.png 400w, https://blog.foojin.com/img/XAalzwB3Nm-812.png 812w, https://blog.foojin.com/img/XAalzwB3Nm-1277.png 1277w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Weechat" loading="lazy" decoding="async" src="https://blog.foojin.com/img/XAalzwB3Nm-400.png" width="1277" height="816"></picture></p>
<p>Comme je l'ai dit plus tôt, j'utilise <a href="https://weechat.org/">weechat</a>, un client en lige de commande.</p>
<p>Vous pouvez observer plusieurs zones distinctes :</p>
<ul>
<li><strong>en 1</strong> 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, <strong>Bitlbee</strong> (IM) avec deux comptes gmail (Pro et Perso), <strong>Freenode</strong> (IRC), <strong>Mozilla</strong> (IRC), <strong>SlackClever</strong> et <strong>SlackOonops</strong> (Slack to IRC)</li>
<li><strong>en 2</strong> vous avez la fenêtre principale de discussion. Dans cette fenêtre s'affiche donc le salon dans lequel je suis en train de parler. Notez qu'avec weechat, je peux avoir plusieurs fenêtres de discussion ouvertes en même temps.</li>
<li><strong>en 3</strong> vous avez la nicklist (liste des users présents) associée au salon dans la fenêtre principale.</li>
<li><strong>en 4</strong> j'y ai mis le plugin <em>chanmon</em> de weechat qui me permet d'avoir un œil sur ce qu'il se passe dans les autres salons, sans avoir à y aller directement depuis ma fenêtre principale.</li>
<li><strong>en 5</strong> j'y ai mis le plugin <em>highmon</em> de weechat qui me permet de voir tous les <em>highlight</em> ou <em>ping</em> de n'importe quel salon ainsi que tous les messages privés et de juger si cela vaut mon attention immédiate ou non.</li>
</ul>
<p>Si certains aventuriers sont intéressés par ma configuration de <strong>weechat</strong>, je peux aussi en faire un prochain billet.</p>
<p>Bref, voilà, j'espère que ça vous a plu et si vous avez des questions, n'hésitez pas à me les poser sur <a href="http://twitter.com/GoOz">Twitter</a>.</p>
On nous ment, on nous spolie.2016-02-16T00:00:00Zhttps://blog.foojin.com/2016/02/16/on-nous-ment-on-nous-spolie/<p>Hier, <a href="http://twitter.com/borisschapira">Boris</a> réagissait sur un article du <a href="http://correcteurs.blog.lemonde.fr/2016/01/30/le-pronom-nous-est-il-entre-en-zone-omineuse/">Monde.fr</a> à propos de la douce mais pernicieuse infection du "<strong>nous</strong>" par le "<strong>on</strong>", sur les impacts sémantiques, de la disparition de la responsabilité.</p>
<p>Qu'on le veuille ou non, "nous" sera remplacé par "on". 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'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'orthographe un punk à chien qui ne respecte que ce qu'il veut bien respecter.</p>
<p>Notez que je ne parle même pas de la propension qu'à un français à faire des métaphores et autres images analogiques à tire-lartigot.</p>
<p>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'ai bien conscience que l'amour rend aveugle.</p>
<p>Alors oui, "on" est un pronom indéfini et qu'il a encore cette fonction.</p>
<p>Exemple: "<em>On a volé mon vélo cette nuit</em>"</p>
<p>Clairement, "on" rapporte à l'indéfini, et non pas à "nous".</p>
<p>Mais "on" a naturellement pris le pas sur "nous" et ça ne pose aucun soucis.</p>
<p>Exemple: "<em>On a raté notre avion à cause des bouchons sur l'autoroute</em>"</p>
<p>Clairement, "on" est défini, c'est nous.</p>
<p>Si dans la tête des gens "on" remplace "nous" dans certains contextes, alors je ne vois aucun problème sur la question de la responsabilité.</p>
<p>"on" ≠ indéfini systématiquement.</p>
<p>Si "on" = collectif = "nous", alors pas de problème.</p>
<p>Dans l'exemple donné par <a href="http://www.nicolas-hoffmann.net/source/1560-J-ai-decide-d-arreter-de-sauver-le-monde.html">Nicolas</a>, le problème n'est pas tant l'utilisation du "on" que l'utilisation du collectif pour ne pas directement dire "tu".</p>
<p>Pourquoi la perte du "nous" n'est pas foncièrement une mauvaise chose ? Parce que c'était compliqué, voilà tout. Les gens veulent pouvoir parler sans réfléchir à la putain de conjugaison, des exceptions à foison et autres. "on" c'est la troisième personne du singulier, c'est simple, ça marche, c'est tout.</p>
<p>Et vous pourriez me dire que ça rajoute une complexité à cause du double sens de "on" mais je vous dirais que la complexité ajoutée est bien moindre comparée à la simplification qu'elle a engendré.</p>
<p>Mais si vous voulez on peut aussi parler de "vous"… Je veux dire, ça fait des décennies que "vous" 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'a pas eu l'air de poser de problème à quiconque.</p>
<p>En bref, je suis plutôt pour la lente mais certaine disparition du "nous". Si vous n'êtes pas d'accord, faites-le moi savoir sur <a href="http://twitter.com/GoOz">Twitter</a> :)</p>
<p>_Cover par <a href="https://www.flickr.com/photos/erebos_/6169168565/">~ Erebos</a>_</p>
De la problématique de la goutte de trop.2015-03-17T00:00:00Zhttps://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/<p>Je me baladais un jour dans la <a href="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">forêt de Marly</a> avec ma douce et tendre, et une conversation en amenant une autre, elle vient à me parler du <a href="http://www.pissedebout.fr/">pisse debout</a> et remarque qu'elle pourrait enfin savoir ce que c'est que pisser debout et peut-être même comprendre le pourquoi de la goutte de pisse sur la cuvette.</p>
<p>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'elle ne comprendrait qu'une partie mais pas tout, car le "pisse-debout" n'est malgré tout pas un pénis. Et c'est alors que j'ai essayé de lui expliquer toutes les possibles explications de la goutte de trop.</p>
<p>Et je vais tenter de vous retranscrire tout ça, de la manière la plus exhaustive possible.</p>
<p>Tout d'abord, il vous faut avoir en tête l'image du doux instrument qu'est le pénis. Je m'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 :</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/fFQzp2yFeG-400.avif 400w, https://blog.foojin.com/img/fFQzp2yFeG-812.avif 812w, https://blog.foojin.com/img/fFQzp2yFeG-1080.avif 1080w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/fFQzp2yFeG-400.webp 400w, https://blog.foojin.com/img/fFQzp2yFeG-812.webp 812w, https://blog.foojin.com/img/fFQzp2yFeG-1080.webp 1080w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/fFQzp2yFeG-400.png 400w, https://blog.foojin.com/img/fFQzp2yFeG-812.png 812w, https://blog.foojin.com/img/fFQzp2yFeG-1080.png 1080w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Schéma du pénis" loading="lazy" decoding="async" src="https://blog.foojin.com/img/fFQzp2yFeG-400.png" width="1080" height="864"></picture></p>
<p>C'est bon ? vous l'avez bien en tête ?</p>
<h2 id="prepuce-or-not-prepuce-that-is-the-question" tabindex="-1">Prépuce or not prépuce, that is the question. <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h2>
<p>Je pense que nous devons tout d'abord parler du prépuce. Il est très significatif dans cette notion de la goutte de trop.</p>
<p>Le prépuce est donc cette peau en rab qui couvre le gland, elle a plusieurs fonctions dont au moins une protectrice. C'est d'autant plus cocasse quand on sait que la circoncision a aussi ce rôle protecteur quand ce n'est pas pour une raison religieuse.</p>
<p>Bref, toujours est-il qu'à peu près 30% de la population masculine mondiale est circoncise. Donc près d'un tiers des hommes ne comprendra pas ce dont je vais parler en premier.</p>
<p><img src="http://media.giphy.com/media/SVmSwXAywYrde/giphy.gif" alt=""></p>
<h3 id="la-situation" tabindex="-1">La situation <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>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'est le pantalon "slim".</p>
<p>Dans cette situation, tout est compressé, bien au chaud.</p>
<p>Voici donc notre prépuce, toujours légèrement humide car un de ses rôle protecteur est d'empêcher le dessèchement du gland, qui voit enfin l'air libre quand vous allez pisser.</p>
<h3 id="le-probleme" tabindex="-1">Le problème <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>Tout est collé, il n'y a pas de sortie possible pour l'urine… en apparence car ça serait sans compter sur le pouvoir magique de la pression.</p>
<p>Et voici que notre urine trouve son chemin sur l'endroit le plus faible du collage de prépuce.</p>
<p>Est-ce que cette faille est juste en face du <em>méat</em> (c'est le nom poli pour le trou du pipi) ? NOOOOOOON bien sûr, il est un peu plus à droite ou à gauche… <strong>ou pire</strong> un double bingo à droite <strong>et</strong> à gauche.</p>
<p>Bref, vous commencez à pisser de biais et vous aviez beau vous être positionné comme il fallait, pour au moins une fraction de seconde, <strong>vous pissez à côté… sur la cuvette</strong>.</p>
<p>D'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% <em>aware</em> surtout pour un pipi dans la nuit ou au réveil. Enfin je dis ça…</p>
<h2 id="sous-pression" tabindex="-1">Sous pression <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h2>
<p>L'urine est un flux liquide et comme tout flux, il n'est pas toujours facilement mesurable et n'est pas toujours homogène… cet enfoiré.</p>
<p><img src="http://media.giphy.com/media/xitl1Qaq5N2gg/giphy.gif" alt=""></p>
<h3 id="la-situation-1" tabindex="-1">La situation <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>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é.</p>
<p>Tout le monde le sait, pour un litre de bière bu, vous avez le droit à deux litres d'urine. Et ça fait beaucoup pour votre petite vessie pleine à rabord. Beaucoup de pression tout ça.</p>
<p>Du coup vous allez aux toilettes, vous décalotez parce que vous faites ça bien mais ça ne suffira pas.</p>
<h3 id="le-probleme-1" tabindex="-1">Le problème <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>Vous avez manifestement sous-estimé la pression. Votre urine est telle <em>Usain Bolt</em> sur ses starting blocks et telle <em>Usain Bolt</em> elle part comme une fusée. Trop pour vous. Trop pour l'orientation que vous avez choisi pour votre pénis. Et là c'est le drame, <strong>un bout du premier jet part sur la cuvette…</strong></p>
<p>Mais attendez, cette connasse de pression n'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.</p>
<p>Alors que profitiez sereinement de votre vidange, vous ne faites plus attention, l'orientation de votre pénis n'est plus optimale pour viser le centre <strong>ET BIM CUVETTE !</strong></p>
<p>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, <strong>BIM CUVETTE !</strong></p>
<p>Ce sera, je pense, le seul et unique cas reproduisible par le <a href="http://www.pissedebout.fr/">pisse debout</a>.</p>
<h2 id="le-piege-de-l-elastique" tabindex="-1">Le piège de l'élastique <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h2>
<p>Dans le même genre que la problématique et sournoise pression, vous avez le piège de l'élastique du slip ou du caleçon.</p>
<p><img src="http://cdn.makeagif.com/media/3-16-2015/NCZhN4.gif" alt=""></p>
<h3 id="la-situation-2" tabindex="-1">La situation <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>Vous allez aux toilettes, sortez votre engin de son écrin de coton, et décidez de ne pas retenir l'é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'être un pro du <em>multitasking</em>.</p>
<p>Rien d'affolant jusque-là. Mais connaissez-vous la blague de l'arroseur arrosé ? Avec le gars qui tord le tuyau d'eau ? Mais siiiii, j'en suis sûr.</p>
<h3 id="le-probleme-2" tabindex="-1">Le problème <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>Vous avez vaincu votre mickey, avez fini d'uriner aux vues de votre sensation de vide dans la vessie et de la manifeste faible quantité d'urine qui coule encore.</p>
<p>Vous vous apprêtrez à remballer le matériel dans son paquetage quand, tout à coup, en relevant l'élastique, un nouveau jet fait éruption… <strong>ET BIM CUVETTE</strong> voire même, si vous êtes rapide en besogne, <strong>DOUBLE COMBO SLIP</strong>.</p>
<p>Mais pourquoi, ô grand dieu, cela vous est-til arrivé ? Bah déjà par ce que c'é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'urine est forte, elle suffit à contrer la pression de l'élastique mais quand la pression du flux faiblit, l'urine sortie de la vessie reste bloquée dans l'urêtre au niveau de l'élastique. C'est aussi con que ça.</p>
<h2 id="la-debandade" tabindex="-1">La débandade <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h2>
<p>Si vous demandez à n'importe quelle homme normalement constitué, il vous dira qu'il lui est impossible d'uriner alors qu'il est en mode Super Saiyan (comprendre : quand il a une gaule d'enfer). C'est normal.</p>
<p>Au même titre que des rails d'une voies ferrée, l'urêtre est la seule et unique voie qui sort du pénis. Or, vous n'êtes pas sans savoir que l'homme est capable de rejeter deux types de liquide par son pénis : le liquide séminal et le liquide urinaire.</p>
<p>Pour des raisons évidentes de bien-séance, il y a un embranchement pour accéder à l'urêtre que se partagent la vessie et les roubignoles (je fais bref hein) et c'est pour ça que vous ne pisserez pas du sperme ou que vous n'éjaculerez pas de l'urine (sous réserve d'une constitution normale).</p>
<p>Par contre, vous pouvez uriner alors que votre érection n'est pas complètement redescendue.</p>
<p><img src="http://i.imgur.com/Gntrk5o.gif" alt=""></p>
<h3 id="la-situation-3" tabindex="-1">La situation <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>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.</p>
<h3 id="le-probleme-3" tabindex="-1">Le problème <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p>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'à la moindre impression de faiblesse vous commencez à pousser avec votre muscle sur votre vessie.</p>
<p>Seul hic, quand vous urinez d'habitude, votre pénis ne forme pas une putain d'équerre. Il est nettement moins aisé de viser le centre de la cuvette dans ces conditions.</p>
<p>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.</p>
<p>Sauf que pour une raison que j'ignore il s'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é… <strong>BIM CUVETTE !</strong></p>
<h2 id="les-circonstances-attenuantes" tabindex="-1">Les circonstances atténuantes <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h2>
<p>Il y a quelques autres situations bien moins complexes mais belles et bien génératrices de gouttes de trop.</p>
<h3 id="la-cuvette-est-le-coupable" tabindex="-1">La cuvette est le coupable <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p><img src="http://i.imgur.com/ztPCNV3.gif" alt=""></p>
<p>Croyez-le ou non, mais il y a des gens qui étudient la forme et l'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'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…</p>
<p>Monde de merde.</p>
<h3 id="la-secousse" tabindex="-1">La secousse <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h3>
<p><img src="http://media.giphy.com/media/tyt4FgO2JWrq8/giphy.gif" alt=""></p>
<p>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'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'en dire plus vous avez compris.</p>
<h2 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="https://blog.foojin.com/2015/03/17/de-la-problematique-de-la-goutte-de-trop/">#</a></h2>
<p>C'est pas toujours facile d'être un homme, au moins pour ça, si ce n'est pas uniquement pour ça.</p>
<p>Alors oui, on pourrait tous s'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'en priver.</p>
<p>Ceci étant ça n'excuse pas du tout le fait de ne pas nettoyer ses saloperies. Sérieusement les gars, faites pas les porcs.</p>
<p>Si tu pisses sur la cuvette, n'en laisse pas une gouttelette.</p>
<p>De toute façon, je vous surveille !</p>
<p><img src="http://media.giphy.com/media/IUjPltWbiuyUo/giphy.gif" alt=""></p>
<p><em>Cover par <a href="https://www.flickr.com/photos/az1172/2267066030"> André Zehetbauer</a></em></p>
Sur la formation de la plèbe2014-11-10T00:00:00Zhttps://blog.foojin.com/2014/11/10/sur-la-formation-de-la-plebe/<p>Vous savez quand on a un métier dont le savoir est en perpétuelle évolution, et c'est le cas du mien l'intégration web / le développement front-end, on a, pour peu que notre propre n'égo ne se sente pas pousser des ailes, l'immuable sensation d'être une sous-merde.</p>
<p>Nous sommes, nous autres intégrateurs, sous le joug au mieux d'une humilité sans faille, au pire d'un sentiment d'imposture. Marie "<a href="https://twitter.com/kreestal">kReEsTaL</a>" Guilllaumet, dans son billet "<a href="http://www.lesintegristes.net/2013/03/19/integration-web-humilite/">L'intégration web, cette leçon d'humilité</a>", le résume à la perfection.</p>
<p>J'ai toujours su les sujets que je connaissais et su des sujets que j'ignorais (mais que je pouvais savoir en poussant l'étude). Cependant j'ignorais ce que j'ignorais. Rien de bien alarmant en soi, c'est on ne peut plus logique. Non, ce qui me faisait peur, c'était l'ampleur même de cette ignorance.</p>
<p>Cette ignorance, parlons-en. Je me suis laissé bouffer bien longtemps par ça. J'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 <em>kadors</em>, des <em>ninjas</em> ou encore des <em>gourous</em>. Le genre de personne qui vont font baver et qui surtout vous font ressentir ce sentiment d'infériorité.</p>
<p>Et puis le temps passe, mon savoir s'enrichit, mon niveau augmente naturellement, sans que je ne cherche à atteindre quoique ce soit. Et avant même que je n'ai le temps de faire un bilan personnel, on me propose de donner des formations web. L'expérience me semblait intéressante alors j'ai sauté dans le bateau et me voilà <strong>formateur</strong>.</p>
<h2 id="ego" tabindex="-1">EGO++ <a class="header-anchor" href="https://blog.foojin.com/2014/11/10/sur-la-formation-de-la-plebe/">#</a></h2>
<p>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 : "Hey, je suis peut-être plus la sous-merde que je pensais être !"</p>
<p>Je ne dis pas pour autant que le savoir suffit à devenir un bon fomateur. Loin s'en faut. Et je ne dis pas que je suis le meilleur formateur non plus, je reconnais la difficulté de l'exercice, car sachez-le, la plupart du temps, ces stagiaires qui viennent assister à vos formations sont souvent des personnes qui n'ont pas le temps ou ne savent pas faire leur propre veille donc ils ont souvent un niveau moindre qu'escompté.</p>
<p>Et alors me direz-vous ? Et alors, en sachant ça, laissez au placard votre peur de vous planter, qu'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.</p>
<h2 id="easy" tabindex="-1">Easy-- <a class="header-anchor" href="https://blog.foojin.com/2014/11/10/sur-la-formation-de-la-plebe/">#</a></h2>
<p>Mais ce n'est pas ça le plus difficile. Le plus complexe est d'essayer de transmettre votre savoir à des personnes qui n'ont pas justement votre niveau, ou ceux de vos collègues. Vous n'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'allégories ou de métaphores parfois.</p>
<p>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.</p>
<p>Croire que ce que vous savez n'est que le B.A.BA sera votre première erreur.</p>
<p>Vous allez naturellement sous-estimer la valeur de votre savoir et surestimer ce savoir à être acquis simplement par le premier venu.</p>
<p>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'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'avez pas forcément le même vocabulaire à la base.</p>
<h2 id="et-donc" tabindex="-1">Et donc ? <a class="header-anchor" href="https://blog.foojin.com/2014/11/10/sur-la-formation-de-la-plebe/">#</a></h2>
<p>Et donc ces quelques formations que j'ai pu faire m'ont prouvé une chose principalement.</p>
<p>Pendant des années j'ai pensé être une merde parce qu'il y avait tant de choses à apprendre en continu et que je ne les maîtrisais pas toutes. Alors j'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'il m'en restait beaucoup à savoir mais qu'il me reste du temps pour les apprendre.</p>
<p>Bref, sachez qu'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'est ça qui vous donnera l'envie d'apprendre et d'avoir votre propre niveau.</p>
<p>Oubliez ce que vous ignorez que vous ignorez et son ampleur, concentrez-vous sur ce que vous savez que vous ignorez car ce n'est ni plus ni moins que du savoir en devenir.</p>
<p>Restez humble, le profane d'aujourd'hui n'est que l'initié de demain.</p>
Pimp my shell pour les béotiens — Les meilleurs sont des flemmards (Partie 3)2014-10-13T07:45:20Zhttps://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/<p>Dans cette troisième partie, nous allons voir ensemble le pouvoir des commandes et leur options cachées ainsi que la toute puissance des <em>aliases</em>.</p>
<p><em><strong>NB</strong> : je risque d'é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'est jamais évident. Alors, accrochez-vous, vous apprendrez peut-être quelque chose dans le tas.</em></p>
<p>Je vais donc tenter de vous faire une rapide présentation des commandes que vous utiliserez le plus.</p>
<h2 id="les-commandes" tabindex="-1">Les commandes <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h2>
<p>Commençons par les commandes liées aux répertoires.</p>
<h3 id="pwd-print-working-directory" tabindex="-1">pwd (Print Working Directory) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>La commande <code>pwd</code> 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'est assez utile.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-pwd.gif" alt="sh-pwd"></p>
<h3 id="cd-change-directory" tabindex="-1">cd (Change Directory) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>La commande <code>cd</code> permet de naviguer dans les répertoires. Elle prend en argument le ou les noms des répertoires dans lesquels vous souhaitez aller.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-cd.gif" alt="sh-cd"></p>
<p>Si vous souhaitez revenir dans le dossier parent, il vous faudra taper <code>cd ..</code>, ou revenir dans le dossier parent du dossier parent, vous devrez taper <code>cd ../../</code>, <em>..</em> étant l'équivalent d'un dossier donc il faut séparer par des slash <em>/</em> si vous en avez plusieurs; et ainsi de suite.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-cd-bis.gif" alt="sh-cd-bis"></p>
<p>Si vous êtes bien en profondeur dans votre arborescence et que vous souhaitez revenir dans votre <em>home directory</em>, tapez la commande <code>cd</code> sans argument ou <code>cd ~</code> (~ se fait en tapant <code>⌥+n</code>). Le caractère <em>~</em> représente symboliquement votre <em>home directory</em>.</p>
<p>Par exemple si vous êtes dans un lointain dossier et souhaitez aller directement dans votre dossier "foobar" à la racine de la home, vous pourrez taper simplement <code>cd ~/foobar</code>, et ce d'où que vous soyiez.</p>
<p>Pour finir, si vous tapez <code>cd -</code>, vous irez directement dans le dossier où vous étiez précédemment.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-cd-ter.gif" alt="sh-cd-ter"></p>
<h3 id="mkdir-make-directories" tabindex="-1">mkdir (MaKe DIRectories) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Naviguer dans les répertoires c'est bien, encore faut-il qu'ils existent. <code>mkdir</code> sert donc à ça.</p>
<p>Tapez donc <code>mkdir nomdudossier</code> pour le créer.</p>
<p>Vous pouvez directement créer une arborescence en ajoutant l'option <em>-p</em> qui spécifie que si le dossier n'existe pas, il faudra le créer. Par exemple <code>mkdir -p nomdudossier/sousdossier</code>.</p>
<p>Si vous souhaitez créer plusieurs dossiers en même temps et au même niveau, utilisez les <em>{}</em> en tapant <code>mkdir {foo,bar}</code></p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-mkdir.gif" alt="sh-mkdir"></p>
<h3 id="rmdir-remove-directory" tabindex="-1">rmdir (ReMove DIRectory) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Faut aussi pouvoir les supprimer ces dossiers, alors hop, entre en scène <code>rmdir</code>.</p>
<p>La petit subtilité qu'il faut connaître c'est que <em>rmdir</em> ne supprime <strong>que</strong> les dossiers vides. C'est pour cette raison que je ne m'en sers que très rarement.</p>
<p>À l'instar de <code>mkdir</code>, si vous souhaitez supprimer plusieurs dossiers d'une arborescence, il faudra rajouter l'option <em>-p</em>.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-rmdir.gif" alt="sh-rmdir"></p>
<p>Passons donc aux commandes qui touchent aux fichiers…</p>
<h3 id="ls-list-directory-contents" tabindex="-1">ls (LiSt directory contents) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Vous l'avez peut-être remarqué dans les exemples précédents, j'ai déjà utilisé la commande <code>ls</code> et si vous êtes malins vous aurez deviné qu'elle servait à lister le contenu d'un dossier.</p>
<p>Cette commande a… énormément d'options. Je vais donc vous parler des plus importantes.</p>
<p>Comme la quasi totalité des commandes, celle-ci prend ses options précédées d'un <em>-</em>. Par exemple, <code>ls -la</code>.</p>
<p>Vous aurez donc dans les plus notables :</p>
<ul>
<li><code>a</code> affiche les fichiers et dossiers cachés, ceux qui dont le nom commence par un <em>.</em>, croyez-moi vous en aurez besoin.</li>
<li><code>F</code> sert à ajouter des "/" à la fin des dossiers, des "*" à la fin des executables et des "@" à la fin des symlinks (ou lien virtuel) et d'autres trucs que vous ne verrez sûrement jamais.</li>
<li><code>G</code> sert à coloriser l'output.</li>
<li><code>h</code> sert à rendre la chose plus lisible pour l'œil humain en supprimant le superflu de l'output (les poids des fichiers notamment)</li>
<li><code>l</code> sert à afficher le résultat sous forme de liste avec les éléments les uns en dessous des autres.</li>
</ul>
<p>Il y a en beaucoup d'autres, plus ou moins utiles, mais notez surtout que vous pouvez enchainer les options, sans ordre particulier, à ceci près que certaines options s'annulent les unes les autres.</p>
<h3 id="touch" tabindex="-1">touch <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>On a vu comment créer et supprimer des dossiers, comment naviguer entre dossiers et comment lister le contenu d'un dossier… mais sans fichier, tout ça paraît bien vide.</p>
<p>La commande <strong>touch</strong> permet de créer un fichier vide à la volée. Comprenez bien qu'il n'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).</p>
<p>Normalement, le but premier de la commande <strong>touch</strong> n'est pas de créer des fichiers mais de modifier le <em>timestamp</em> d'un fichier, c'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'est tout ce qu'on lui demandera.</p>
<p>Notez que vous pouvez créer à la volée une multitude de fichier en une fois.</p>
<p>Tapez donc <code>touch nomdefichier.extension</code></p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-touch.gif" alt="sh-touch"></p>
<h3 id="cp-copy-files" tabindex="-1">cp (CoPy files) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Si vous devez faire une déclinaison d'un fichier, ne vous embêtez pas à aller dans le <em>Finder</em> pour faire un copier/coller, utilisez la commande <strong>cp</strong>.</p>
<p>D'autant plus qu'avec elle vous pouvez copier <strong>et</strong> changer la destination du nouveau fichier créé. C'est-y-pas-beau ?</p>
<p>Ainsi, pour dupliquer un fichier dans un autre dossier tapez <code>cp fichier.txt dossier/fichier2.txt</code></p>
<p>Pensez à rajouter l'option <code>-R</code> si vous souhaitez dupliquer un dossier et son contenu.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-cp.gif" alt="sh-cp"></p>
<h3 id="mv-move-files" tabindex="-1">mv (MoVe files) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Dans le même genre, déplacez des fichiers peut vite être laborieux avec <em>Finder</em> alors qu'avec le terminal… il suffit d'utiliser la commande <strong>mv</strong>.</p>
<p>C'est assez simple, tapez <code>mv fichier.txt dossier/fichier.txt</code></p>
<p>Le petit plus c'est que vous pouvez déplacer <strong>et</strong> renommer le fichier en même temps. D'ailleurs c'est la commande <strong>mv</strong> qu'on utilise quand on souhaite renommer un fichier.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-mv.gif" alt="sh-mv"></p>
<h3 id="rm-remove-directory-entries" tabindex="-1">rm (ReMove directory entries) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Et si on supprimait des fichiers superflus ?</p>
<p>Rien de bien folichon ici, tapez <code>rm (dossier/)fichier.txt</code></p>
<p>Si vous avez bien suivi depuis tout à l'heure, <strong>rmdir</strong> ne permet de supprimer que des dossiers vides. C'est là qu'intervient <code>rm -rf</code>.</p>
<p>L'option <strong>-r</strong> pour récursif, c'est-à-dire qu'il va s'occuper de la cible et tout ses enfants, et <strong>-f</strong> pour le forcer sans être obligé de confirmer chaque suppression, sinon il y a des risques de se faire envoyer bouler.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-rm.gif" alt="sh-rm"></p>
<h3 id="more-less-head-tail" tabindex="-1">more/less/head/tail <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Si comme moi, parfois, vous avez envie de vérifier le contenu d'un fichier sans volonté de le changer, il existe plusieurs outils à votre disposition :</p>
<h4 id="more" tabindex="-1">more <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h4>
<p>Il permet d'afficher le contenu d'un fichier, sans avoir à le charger complètement ce qui explique sa rapidité d'affichage.
<code>more fichier.txt</code></p>
<h4 id="less" tabindex="-1">less <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h4>
<p><strong>less</strong>, c'est <strong>more</strong> mais en mieux. Finalement <strong>less</strong> c'est <em>more</em> que <strong>more</strong> d'où la blague <em>less is more</em>.</p>
<p>En bref, il fait tout comme son prédécesseur mais en mieux, alors ne réfléchissez pas trop et choisissez plutôt <strong>less</strong>
<code>less fichier.txt</code></p>
<h4 id="head" tabindex="-1">head <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h4>
<p>Il vous affichera quant à lui les premières lignes de votre fichier cible, et uniquement les premières.
<code>head fichier.txt</code></p>
<h4 id="tail" tabindex="-1">tail <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h4>
<p>Il… bah… ne vous affichera que la fin du contenu du fichier cible.
<code>tail fichier.txt</code></p>
<h3 id="du-disk-usage" tabindex="-1">du (Disk Usage) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Puisqu'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'est loin d'être pratique avec le Finder.</p>
<p>Alors ne perdez plus votre temps et utilisez la commande <strong>du</strong> dont vous apprécierez l'option <code>-h</code> qui transcrit les octets en quelque chose de plus lisible (KO, MO, GO, TO…)</p>
<p>Tapez donc <code>du -h</code></p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-du.gif" alt="sh-du"></p>
<h3 id="man-manuel" tabindex="-1">man (MANuel) <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>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'est le rôle de <strong>man</strong>.</p>
<p>Tapez donc <code>man nomdelacommande</code> pour lire la doc et retrouver des options oubliées notamment.</p>
<p><em>NB: tout comme <strong>more</strong> ou <strong>less</strong>, tapez "q" pour sortir de la documentation. D'ailleurs <strong>man</strong> devrait ouvrir le document avec <strong>less</strong>.</em></p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-man.gif" alt="sh-man"></p>
<h2 id="les-aliases" tabindex="-1">Les aliases <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h2>
<p>Maintenant que les commandes basiques n'ont plus de secret pour vous, poussons un peu peu plus loin.</p>
<p>Je sais que vous allez dire qu'il y a plein d'options sympathiques pour chaque commande mais ça va être chiant de tout taper à chaque fois. Et vous aurez raison.</p>
<p>C'est là que les <strong>aliases</strong> entrent en jeu.</p>
<p>Un <em>alias</em> ce n'est ni plus ni moins qu'un raccourci. Faisons donc en sorte qu'à chaque fois que vous taperez <code>ls</code>, vous enverrez en fait <code>ls -GFh</code> au shell pour avoir un tout joli output.</p>
<p>Pour ce faire :</p>
<ul>
<li><code>subl ~/.bashrc</code> (ou <em>.zshrc</em>)</li>
<li>ajoutez la ligne
<code>alias ls='ls -GFh'</code></li>
<li>enregistrez et quittez</li>
<li>tapez <code>ls</code></li>
<li>???</li>
<li>Profit</li>
</ul>
<p>Les <em>aliases</em> sont une des plus grandes forces du shell, leur pouvoir ne connait aucune limite si ce n'est celle de votre imagination.</p>
<p>À noter que si vous avez choisi de prendre <em>oh-my-zsh</em>, il est livré avec pléthore d'<em>aliases</em>, liste qui s'allonge encore si vous avez ajouté des plugins à <em>oh-my-zsh</em>.</p>
<p>Pour savoir où vous en êtes et quels aliases vous avez jusque là, tapez la commande <code>alias</code>.</p>
<p>Quelques exemples chez moi :</p>
<ul>
<li>Pour aller dans le dossier parent <code>..='cd ..'</code></li>
<li>Pour aller dans le dossier parent du parent <code>...='cd ../..'</code></li>
<li><code>bi='bower install'</code></li>
<li><code>bl='bower list'</code></li>
<li><code>bs='bower search'</code></li>
<li><code>grl='grunt live'</code></li>
<li><code>grw='grunt watch'</code></li>
<li><code>ni='npm install'</code></li>
<li>Pour connaître son IP locale rapidement <code>ip='ipconfig getifaddr en0'</code></li>
<li>ls en affichant les fichiers systèmes en liste et avec les poids lisible pour "humains" <code>l='ls -lah'</code></li>
<li>ls simple juste en colorisant l'output <code>ls='ls -G'</code></li>
<li>Recharger la config de votre shell <code>reload='source ~/.zshrc'</code></li>
<li>Relancer apache <code>restart='sudo apachectl restart'</code></li>
</ul>
<p>Je vous laisse le loisir de faire vos propres <em>aliases</em> maintenant. :)</p>
<p>S'il vous vient l'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.</p>
<p>Pour ce faire, tapez <code>subl ~/.gitconfig</code> et ajoutez vos <em>aliases</em> sous la section <em>[alias]</em> en ommettant l'implicite commande <em>git</em>.</p>
<p>Par exemple :</p>
<pre class="language-sh" tabindex="0"><code class="language-sh"><span class="token punctuation">[</span>alias<span class="token punctuation">]</span> <br>st <span class="token operator">=</span> status <br>br <span class="token operator">=</span> branch<br>…</code></pre>
<h2 id="les-plugins" tabindex="-1">Les plugins <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h2>
<h3 id="homebrew" tabindex="-1">Homebrew <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Installer des outils CLI sur OSX et les maintenir peut parfois s'avérer laborieux.</p>
<p>C'est pourquoi je vous conseille fortement de ne pas vous emmerder et gérer tout ça avec <a href="http://brew.sh/index_fr.html">Homebrew</a></p>
<p>Ça vous servira à installer beaucoup d'outils simplement, notamment ceux qui suivent.</p>
<h3 id="z-autojump-et-fasd" tabindex="-1">z, autojump et fasd <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Que ce soit <a href="https://github.com/rupa/z">z</a>, <a href="https://github.com/joelthelion/autojump">autojump</a> ou <a href="https://github.com/clvv/fasd">fasd</a>, 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.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-z.gif" alt="sh-z"></p>
<p>Pour les installer, le plus simple est encore de passer par <strong>homebrew</strong></p>
<h3 id="ranger" tabindex="-1">ranger <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p><a href="http://ranger.nongnu.org/">ranger</a> est un explorateur de fichier "à la Finder" mais dans le shell en utilisant les flèches du clavier.</p>
<p>Je sais, ça parait bizarre comme ça mais c'est très pratique et plus rapide que Finder justement.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-ranger.gif" alt="sh-ranger"></p>
<p>À installer via <strong>Homebrew</strong></p>
<h3 id="ncdu" tabindex="-1">ncdu <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Avec <a href="http://dev.yorhel.nl/ncdu">ncdu</a>, on est toujours dans un explorateur de fichiers mais axé sur l'espace disque. C'est le petit frère de la commande <strong>du</strong> (disk usage) sauf que <strong>du</strong> est loin d'être agréable à lire. Grâce à <strong>ncdu</strong>, vous y verrez beaucoup plus clair sur l'utilisation de votre espace disque.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-ncdu.gif" alt="sh-ncdu"></p>
<p>À installer via <strong>Homebrew</strong></p>
<h3 id="htop" tabindex="-1">htop <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">#</a></h3>
<p>Si vous souhaitez toujours avoir un œil sur les performances de votre machine et de l'utilisation de ses ressources, <a href="http://hisham.hm/htop/">htop</a>, petit frère de la commande <strong>top</strong> imbitable à souhait, est fait pour vous. C'est beau et efficace.</p>
<p><em>NB: Il vous faudra lancer htop en sudo (avec les droit admin donc) sinon vous n'afficherez que les processus lancés par votre user, c'est à dire pas grand chose.</em></p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/img/sh-htop.gif" alt="sh-htop"></p>
<p>À installer via <strong>Homebrew</strong></p>
<p>Et voilà, c'est fini, on a fait le tour… des bases en tout cas. Le reste, je le laisse à votre curiosité.</p>
<p>Des questions ? des retours ? Envoyez-moi un ping sur <a href="http://twitter.com/GoOz">Twitter</a>.</p>
<p><em>Cover par <a href="https://www.flickr.com/photos/nathancongleton/6857290985">Nathan Congleton</a></em></p>
Pimp my shell pour les béotiens — Choose your weapons (Partie 2)2014-10-13T07:44:13Zhttps://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/<p>C'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.</p>
<p>Sachant que les fichiers de config sont des fichiers cachés, ils seront plus facile à localiser et ouvrir directement depuis le terminal.</p>
<p>Si vous utilisez <a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/www.sublimetext.com/">Sublime Text</a>, je vous invite à mettre en place la commande CLI de ce dernier en suivant <a href="https://gist.github.com/artero/1236170">ce tutoriel</a>.</p>
<p>Si vous utilisez <a href="https://atom.io/">Atom</a>, normalement c'est déjà installé pour vous.</p>
<p>Si vous utilisez n'importe quel autre éditeur de texte, alors démerdez-vous ou bien utilisez <em>vim</em> ou <em>nano</em> ou n'importe quoi d'autre.</p>
<p>Pour mes exemples, j'utiliserai la commande <code>subl</code> mais évidemment je vous laisse le soin d'adapter la commande avec <code>atom</code> ou <code>vim</code> ou <code>nano</code> selon votre cas.</p>
<p>Bien, maintenant que vous êtes prêts, c'est parti.</p>
<hr>
<p>Avec l'offre que je vous ai fait, vous avez dû faire des choix d'application et de shell au moins.</p>
<p>Alors suivez donc ce tutoriel dont vous êtes le héros :</p>
<ul>
<li><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">Vous avez choisi Terminal</a></li>
<li><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">Vous avez choisi iTerm2</a></li>
<li><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">Vous avez choisi bash</a></li>
<li><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">Vous avez choisi Zsh</a></li>
<li><a href="http://www.google.com">Vous avez choisi tout autre chose</a></li>
</ul>
<h2 id="personnaliser-terminal" tabindex="-1">Personnaliser Terminal <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h2>
<p>Si vous avez choisi <strong>Terminal</strong> et bien il ne reste plus beaucoup de chose à personnaliser.</p>
<p>Je vous invite toutefois à aller faire un tour dans les options <code>⌘+,</code> et notamment l'onglet "Profils", à cocher ce qui vous intéresse.</p>
<p>Je vous conseille aussi de cocher les options "Utiliser les polices grasses", "Afficher les couleurs ANSI" et "Utiliser des couleurs vives pour le texte en gras" comme sur la capture ci-dessous.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/lGPI5S7Etz-400.avif 400w, https://blog.foojin.com/img/lGPI5S7Etz-738.avif 738w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/lGPI5S7Etz-400.webp 400w, https://blog.foojin.com/img/lGPI5S7Etz-738.webp 738w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/lGPI5S7Etz-400.png 400w, https://blog.foojin.com/img/lGPI5S7Etz-738.png 738w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Terminal settings" loading="lazy" decoding="async" src="https://blog.foojin.com/img/lGPI5S7Etz-400.png" width="738" height="596"></picture></p>
<p>Pensez donc à changer de thème aussi, le terminal est déjà tellement rustre de base que laisser la coloration neutre serait encore pis.</p>
<p>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.</p>
<p>Je vous recommande dans ce sens le theme <a href="https://github.com/tomislav/osx-terminal.app-colors-solarized">Solarized</a> ou <a href="http://color.smyck.org/">Smyck</a> ou encore, si vous tenez à le faire vraiment personnalisé, tatez donc du générateur de thème <a href="http://ciembor.github.io/4bit/">4bit</a>.</p>
<h2 id="personnaliser-iterm2" tabindex="-1">Personnaliser iTerm2 <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h2>
<p>Si vous avez choisi <a href="http://www.iterm2.com">iTerm2</a> et que vous l'avez déjà installé, ouvrez donc les paramètres <code>⌘+,</code>.</p>
<p>Si vous avez déjà regardé les préférences de <strong>Terminal</strong>, vous remarquerez que iTerm2 peut se targuer d'être plus puissant mais je dois avouer que la moitié, si ce n'est plus, des paramétrages possibles me sont bien obscurs.</p>
<p>Ceci étant j'en recommande certains à cocher/décocher.</p>
<p>Comme sur l'onglet "Général", il vaut mieux décocher (de mémoire il est activé par défaut) l'option <em>Startup > Open profiles window</em>. Je pars du principe que vous n'aurez pas besoin de plusieurs profils de par votre utilisation du terminal.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/23b3t2-MzF-400.avif 400w, https://blog.foojin.com/img/23b3t2-MzF-800.avif 800w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/23b3t2-MzF-400.webp 400w, https://blog.foojin.com/img/23b3t2-MzF-800.webp 800w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/23b3t2-MzF-400.png 400w, https://blog.foojin.com/img/23b3t2-MzF-800.png 800w" sizes="(min-width: 50em) 812px, 100vw"><img alt="iTerm gen" loading="lazy" decoding="async" src="https://blog.foojin.com/img/23b3t2-MzF-400.png" width="800" height="533"></picture></p>
<p>Sur l'onglet <em>Profiles > General</em>, Cochez l'option "Reuse previous session's directory". 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.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/rLVxCIDxYx-400.avif 400w, https://blog.foojin.com/img/rLVxCIDxYx-812.avif 812w, https://blog.foojin.com/img/rLVxCIDxYx-921.avif 921w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/rLVxCIDxYx-400.webp 400w, https://blog.foojin.com/img/rLVxCIDxYx-812.webp 812w, https://blog.foojin.com/img/rLVxCIDxYx-921.webp 921w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/rLVxCIDxYx-400.png 400w, https://blog.foojin.com/img/rLVxCIDxYx-812.png 812w, https://blog.foojin.com/img/rLVxCIDxYx-921.png 921w" sizes="(min-width: 50em) 812px, 100vw"><img alt="iTerm prof" loading="lazy" decoding="async" src="https://blog.foojin.com/img/rLVxCIDxYx-400.png" width="921" height="572"></picture></p>
<p>Enfin, dans <em>Profiles > Colors</em>, vous pourrez ajouter un theme. Je recommande mes préférés toujours <a href="https://github.com/altercation/solarized/tree/master/iterm2-colors-solarized">Solarized</a>, <a href="https://github.com/mbadolato/iTerm2-Color-Schemes">Monokai, Zenburn, Twilight ou plein d'autres encore</a> ou bien faire vous même le vôtre avec votre pouvoir créatif sur <a href="http://ciembor.github.io/4bit/">4bit</a>.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/JJgQEnryPI-400.avif 400w, https://blog.foojin.com/img/JJgQEnryPI-812.avif 812w, https://blog.foojin.com/img/JJgQEnryPI-927.avif 927w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/JJgQEnryPI-400.webp 400w, https://blog.foojin.com/img/JJgQEnryPI-812.webp 812w, https://blog.foojin.com/img/JJgQEnryPI-927.webp 927w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/JJgQEnryPI-400.png 400w, https://blog.foojin.com/img/JJgQEnryPI-812.png 812w, https://blog.foojin.com/img/JJgQEnryPI-927.png 927w" sizes="(min-width: 50em) 812px, 100vw"><img alt="iTerm colors" loading="lazy" decoding="async" src="https://blog.foojin.com/img/JJgQEnryPI-400.png" width="927" height="711"></picture></p>
<p>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.</p>
<h2 id="personnaliser-bash" tabindex="-1">Personnaliser bash <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h2>
<p><strong>Bash</strong> étant le shell par défaut sur mac OSX, on enchaîne direct sur sa configuration.</p>
<p>Déjà il faut savoir que bash a <strong>deux</strong> fichiers de config : <em>.bash_profile</em> et <em>.bashrc</em> 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, <em>.bashrc</em>, n'existe pas.</p>
<p>Vous allez donc d'abord vous assurer que vous êtes bien dans votre <em>home directory</em> à savoir <em>/Users/votreusername</em> en tapant la commande <code>pwd</code>. Si vous n'y êtes pas et je me demande bien ce que vous avez fait pour ne pas y être, tapez la commande <code>cd</code>.</p>
<p>Une fois que vous y êtes :</p>
<ul>
<li>tapez la commande
<code>cp .bash_profile .bashrc</code></li>
</ul>
<p>pour créer le fichier <em>.bashrc</em> en copiant et donc récupérant le contenu de <em>.bash_profile</em>.</p>
<ul>
<li>Éditez ensuite le <em>.bash_profile</em> avec la commande
<code>subl .bash_profile</code></li>
<li>supprimez tout le contenu et ajouter l'appel d'import du <em>.bashrc</em> avec la ligne
<code>source ~/.bashrc</code></li>
<li>enregistrez et quittez.</li>
</ul>
<p>Désormais tout se fera dans le fichier <em>.bashrc</em>.</p>
<p>Puisque vous avez décidé d'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 <code>ls</code> qui liste le contenu d'un dossier ? C'est parti.</p>
<ul>
<li><code>subl .bashrc</code></li>
<li>pour rendre la ligne de commande colorée, ajoutez la ligne
<code>export CLICOLOR=1</code></li>
<li>Pour colorier les résultats <code>ls</code> ajoutez la ligne
<code>export LSCOLORS=ExFxBxDxCxegedabagacad</code></li>
<li>Enregistrez et quittez</li>
</ul>
<p>Ça commence à prendre forme mais on ira plus loin un peu plus tard.</p>
<p>Passons si vous le voulez bien au <em>prompt</em>.</p>
<p>Personnaliser son <em>prompt</em> paraît très obscur pour les profanes.</p>
<p>Par exemple, pour obtenir le prompt que j'ai sur mon Terminal avec ces couleurs comme le montre l'image ci-dessous, il vous faut ajouter une ligne telle quelle <code>export PS1="\[\033[36m\]\u\[\033[m\]@\[\033[32m\]\h:\[\033[33;1m\]\w\[\033[m\]\$ "</code></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/0MS7Zgegt0-400.avif 400w, https://blog.foojin.com/img/0MS7Zgegt0-574.avif 574w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/0MS7Zgegt0-400.webp 400w, https://blog.foojin.com/img/0MS7Zgegt0-574.webp 574w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/0MS7Zgegt0-400.png 400w, https://blog.foojin.com/img/0MS7Zgegt0-574.png 574w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Bash prompt" loading="lazy" decoding="async" src="https://blog.foojin.com/img/0MS7Zgegt0-400.png" width="574" height="370"></picture></p>
<p>Je ne vais pas vous apprendre à faire ça à la main parce que ce serait, je pense, pousser le bouchon trop loin.</p>
<p>En revanche, je vais vous donner quelques directions simplifiées. Il existe un générateur de prompt pour bash, qui fonctionne à base de <em>drag & drop</em>, c'est simple, clair et ça marche.</p>
<p>Allez donc faire un tour sur <a href="http://bashrcgenerator.com/">http://bashrcgenerator.com/</a> et faites donc votre prompt comme vous le sentez.</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/img/bash-gen.gif" alt="bash gen"></p>
<p><em><strong>NB</strong> : Les changements que vous faites au prompt ne se chargent pas automatiquement, vous devez ouvrir une nouvelle fenêtre ou mieux, taper la commande <code>source ~/.bashrc</code> pour recharger le fichier de config et donc les changements effectués.</em></p>
<p>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 <code>svn/git status</code> intempestifs pour savoir sur quelle révision/branche vous êtes. Sachez donc que vous pouvez demander au prompt de vous afficher d'emblée ces infos. Et ça c'est über cool.</p>
<p>Je vous conseille donc de suivre <a href="http://trevmex.com/post/7320627392/how-to-add-git-and-subversion-info-to-a-bash-prompt">ce tutoriel de Trevmex</a> 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 <code>GoOz@MacBook-Air:DepotSVN (svn:306)$</code>, et dans le cas de Git, le nom de la branche actuelle <code>GoOz@MacBook-Air:DepotGit (master*)$</code>.</p>
<p>Si vous vous sentez chaud et souhaitez vraiment tout comprendre et faire à votre sauce, <a href="http://blog.twistedcode.org/2008/03/customizing-your-bash-prompt.html">faites vous plaisir avec toute la palette de variables, couleurs et diverses possiblités que vous offre bash</a>.</p>
<h2 id="personnaliser-zsh" tabindex="-1">Personnaliser Zsh <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h2>
<h3 id="installation" tabindex="-1">Installation <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h3>
<p>Vous avez choisi <strong>Zsh</strong> et je vous en remercie. Comme vous avez suivi, vous allez me faire le plaisir d'installer <a href="http://ohmyz.sh/">oh-my-zsh</a>.</p>
<p>Pour ce faire, ouvrez votre terminal puis tapez
<code>curl -L http://install.ohmyz.sh | sh</code></p>
<p>ou (peu importe)
<code>wget --no-check-certificate http://install.ohmyz.sh -O - | sh</code></p>
<p>Laissez l'installation se finir et voilà ! Sauf que en fait comme je vous l'ai dit, le shell par défaut est <strong>bash</strong>, et pour utiliser <strong>Zsh</strong> vous avez deux solutions :</p>
<ul>
<li>Soit vous pouvez rendre <strong>Zsh</strong> votre shell par défaut à la place de <strong>bash</strong> en tapant la commande <code>chsh -s /bin/zsh</code></li>
<li>Soit vous pouvez choisir le shell dans les préférences de l'application de votre choix</li>
</ul>
<p><strong>Avec Terminal</strong></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/Ea3H3MZRon-400.avif 400w, https://blog.foojin.com/img/Ea3H3MZRon-736.avif 736w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/Ea3H3MZRon-400.webp 400w, https://blog.foojin.com/img/Ea3H3MZRon-736.webp 736w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/Ea3H3MZRon-400.png 400w, https://blog.foojin.com/img/Ea3H3MZRon-736.png 736w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Terminal zsh" loading="lazy" decoding="async" src="https://blog.foojin.com/img/Ea3H3MZRon-400.png" width="736" height="594"></picture></p>
<p><strong>Avec iTerm2</strong></p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/OskGYjmDdG-400.avif 400w, https://blog.foojin.com/img/OskGYjmDdG-812.avif 812w, https://blog.foojin.com/img/OskGYjmDdG-921.avif 921w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/OskGYjmDdG-400.webp 400w, https://blog.foojin.com/img/OskGYjmDdG-812.webp 812w, https://blog.foojin.com/img/OskGYjmDdG-921.webp 921w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/OskGYjmDdG-400.png 400w, https://blog.foojin.com/img/OskGYjmDdG-812.png 812w, https://blog.foojin.com/img/OskGYjmDdG-921.png 921w" sizes="(min-width: 50em) 812px, 100vw"><img alt="iTerm zsh" loading="lazy" decoding="async" src="https://blog.foojin.com/img/OskGYjmDdG-400.png" width="921" height="572"></picture></p>
<h3 id="les-themes" tabindex="-1">Les thèmes <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h3>
<p><a href="http://ohmyz.sh/">oh-my-zsh</a> vient avec pléthore de thèmes qui sont plus des thèmes de <em>prompt</em> que de coloration puisque vous pourrez écraser facilement les couleurs.</p>
<p>Allez donc faire vos courses sur le site <a href="https://github.com/robbyrussell/oh-my-zsh/wiki/Themes">https://github.com/robbyrussell/oh-my-zsh/wiki/Themes</a> ou encore le site <a href="http://zshthem.es/">http://zshthem.es/</a> pour trouver chaussure à votre pied.
<em><strong>NB</strong> : Certains thèmes requièrent l'installation de polices de caractères particulières voire de scripts shell supplémentaires, je n'en parlerai pas. Donc démerdez-vous :]</em></p>
<p>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 <strong>Zsh</strong></p>
<p>Pour ce faire, vous allez ouvrir ce fichier de config qui s'appelle <em>.zshrc</em> en tapant la commande <code>subl ~/.zshrc</code> puis…</p>
<ul>
<li>trouvez la ligne <code>ZSH_THEME="robbyrussell"</code> qui doit être le thème par défaut et mettez le nom du thème de votre choix.</li>
<li>enregistrez le fichier</li>
<li>rechargez la config en tapant <code>source ~/.zshrc</code></li>
<li>???</li>
<li>Profit</li>
</ul>
<p>Si vous souhaitez ajouter un thème de coloration, ce n'est guère plus compliqué que pour <strong>Terminal</strong>, faites vos courses sur le site <a href="http://iterm2colorschemes.com/">http://iterm2colorschemes.com/</a>, ou sur n'importe quel moteur de recherche, et pour importer un thème allez dans les préférences puis <em>Profiles > Colors</em> puis cliquez sur la liste déroulante <em>Load Presets > Import…</em></p>
<p>Et voilà !</p>
<h3 id="la-configuration" tabindex="-1">La configuration <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h3>
<p>Ouvrez donc le fichier de config .zshrc en tapant <code>subl .zshrc</code>.</p>
<p>Vous remarquerez qu'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.</p>
<h3 id="les-plugins" tabindex="-1">Les Plugins <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">#</a></h3>
<p><strong>Oh-my-Zsh</strong> vient aussi avec plusieurs plugins disponibles. Ces plugins ajoute des fonctionnalités et/ou <em>aliases</em> (ces petits raccourcis fort utiles sur lesquelles on s'attardera dans une autre partie). C'est dans le fichier <em>.zshrc</em> que vous devrez les charger en ajoutant dans les parenthèses de la ligne <code>plugins=()</code> les noms de ceux qui vous intéressent.</p>
<p>Pour voir la liste disponible, faites un tour sur <a href="https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins">le wiki de oh-my-zsh</a>.</p>
<p>C'est à peu près tout pour la base de configuration de <strong>Zsh</strong>.</p>
<hr>
<p>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. ;)</p>
<p><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-les-meilleurs-sont-des-flemmards-partie-3/">Pimp my shell pour les béotiens — Les meilleurs sont des flemmards (Partie 3)</a></p>
Pimp my shell pour les béotiens — Kamoulox ! (Partie 1)2014-10-13T07:43:00Zhttps://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/<p>Quand on fait dans le développement Front-end ou dans l'intégration web (chacun ses appellations, je ne rentrerai pas dans le débat), si l'on veut être efficace et rapide, il faut savoir utiliser de nombreux nouveaux outils (Sass, Compass, Grunt, Bundler, Bower, Gulp, etc).</p>
<p>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.</p>
<p>Je me suis rendu compte que beaucoup d'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 !</p>
<p><strong>Spoiler alert</strong>: c'est loin d'être si méchant finalement et dieu que c'est pratique, intéressant et salvateur.</p>
<p>Mais trêve de mots superfétatoires, lançons-nous.</p>
<p>Pour bien comprendre ce que nous allons faire ensemble, il faut distinguer plusieurs parties :</p>
<ul>
<li><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">L'application</a></li>
<li><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">Le shell</a></li>
<li><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">Le prompt</a></li>
</ul>
<h2 id="l-application" tabindex="-1">L'application <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">#</a></h2>
<h3 id="terminal" tabindex="-1">Terminal <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">#</a></h3>
<p>Votre mac est livré avec sa propre application de terminal, judicieusement appelé <strong>Terminal</strong>, que vous pourrez trouver dans le dossier <em>Applications</em> ou recherchez-le avec spotlight <code>⌘ + Space</code>.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/AIM_yAZDcP-400.avif 400w, https://blog.foojin.com/img/AIM_yAZDcP-573.avif 573w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/AIM_yAZDcP-400.webp 400w, https://blog.foojin.com/img/AIM_yAZDcP-573.webp 573w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/AIM_yAZDcP-400.png 400w, https://blog.foojin.com/img/AIM_yAZDcP-573.png 573w" sizes="(min-width: 50em) 812px, 100vw"><img alt="Terminal" loading="lazy" decoding="async" src="https://blog.foojin.com/img/AIM_yAZDcP-400.png" width="573" height="370"></picture></p>
<p><em>Ci-dessus, Terminal avec le theme Homebrew</em></p>
<p><strong>Terminal</strong>, même si c'est une application livrée par défaut, est largement suffisant; il fait le boulot et il le fait bien.</p>
<p>À chaque nouvelle version d'OSX, il rattrape ses concurrents avec des fonctionnalités qui lui manquaient; il n'a désormais plus grand chose à envier à ses comparses.</p>
<p>Honnêtement, si vous ne vous sentez pas l'âme aventurier bidouilleur, restez avec <strong>Terminal</strong>, on ne vous jugera pas. Je connais des gens très bien, de bonne famille et tout, qui l'utilisent quotidiennement. :)</p>
<h3 id="iterm2" tabindex="-1">iTerm2 <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">#</a></h3>
<p>Dans le monde des alternatives à <strong>Terminal</strong>, on peut trouver <strong>iTerm2</strong> et… c'est à peu près tout en fait. Les autres sont quasi inexistantes.</p>
<p>J'aurais pu faire une liste importante des fonctionnalités qui font la différence mais finalement, à ce jour, il n'en reste plus beaucoup.</p>
<p>On peut noter tout de même ma fonctionnalité préférée, le <em>split view</em> ou <em>split pane</em> dont je ne peux plus me passer (raccourci : <code>⌘ + D</code>).</p>
<p>En bref, cela permet d'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'arborescence de votre dépôt comme le montre la capture ci-dessous.</p>
<p><picture><source type="image/avif" srcset="https://blog.foojin.com/img/-ngnpGcqfT-400.avif 400w, https://blog.foojin.com/img/-ngnpGcqfT-812.avif 812w, https://blog.foojin.com/img/-ngnpGcqfT-1000.avif 1000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/webp" srcset="https://blog.foojin.com/img/-ngnpGcqfT-400.webp 400w, https://blog.foojin.com/img/-ngnpGcqfT-812.webp 812w, https://blog.foojin.com/img/-ngnpGcqfT-1000.webp 1000w" sizes="(min-width: 50em) 812px, 100vw"><source type="image/png" srcset="https://blog.foojin.com/img/-ngnpGcqfT-400.png 400w, https://blog.foojin.com/img/-ngnpGcqfT-812.png 812w, https://blog.foojin.com/img/-ngnpGcqfT-1000.png 1000w" sizes="(min-width: 50em) 812px, 100vw"><img alt="iTerm" loading="lazy" decoding="async" src="https://blog.foojin.com/img/-ngnpGcqfT-400.png" width="1000" height="462"></picture></p>
<p>D'aucuns diront que <strong>iTerm2</strong> propose de nombreuses autres options que <strong>Terminal</strong> ne propose pas, mais même si c'est vrai, ce sont surtout des options pour un public assez confirmé, donc je n'en parlerai pas. :)</p>
<p>En bref, il n'y a pas de mauvais choix, vraiment. C'est soit vous n'avez pas envie de vous faire chier, soit vous avez envie de découvrir autre chose.</p>
<p>Les deux choix me paraissent aussi louable l'un que l'autre.</p>
<p>Si vous voulez tester et/ou adopter iTerm2, alors <a href="http://www.iterm2.com/">rendez-vous sur le site</a></p>
<h2 id="le-shell" tabindex="-1">Le shell <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">#</a></h2>
<p>Le shell est l'interface système, c'est ce qui vous permet de communiquer avec votre machine et ce à base de commandes.</p>
<p>Je ne vais pas rentrer au fond du sujet pour le shell et ce pour deux raisons.</p>
<ol>
<li>je ne suis pas assez calé dans ce domaine.</li>
<li>on s'en fout un peu, pour l'utilisation que vous en aurez, il n'y a pas besoin de se prendre la tête.</li>
</ol>
<p>Du coup, je vais juste parler de <strong>bash</strong> et de <strong>Zsh</strong>.</p>
<p><strong>Bash</strong> est le shell embarqué avec Mac OSX depuis la 10.3. C'est donc celui que vous avez tous par défaut, à moins d'avoir du très, très vieux matériel.</p>
<p>J'ai pas grand chose à en dire, il est très bien, largement suffisant pour du <em>casual use</em>, c'est à dire pour nous autres, gens du <em>front</em>.
<strong>Zsh</strong> quant à lui est un peu plus poussé que <strong>bash</strong> sur plusieurs points mais encore une fois, pour du <em>casual use</em>, vous ne verrez quasi aucune différence. Les gros plus de <strong>Zsh</strong> seraient son système intégré de complétion de commandes, mais qui existe aussi en plugin <a href="http://bash-completion.alioth.debian.org/">bash completion</a> pour combler ce manque, et l'auto-correction dans les cas où vous vous emmêlez les doigts.</p>
<p>Donc finalement, c'est kif-kif pour de l'utilisation de base, mais si vous souhaitez vraiment pousser votre savoir en CLI, prenez Zsh, non mais sérieusement, n'hésitez même pas. :)</p>
<p>D'ailleurs, si vous choisissez Zsh, allez m'installer le Framework bien connu <a href="http://ohmyz.sh/">Oh My Zsh</a>, c'est mieux que mieux.</p>
<p>Là j'en entends au fond qui raillent et se demande bien pourquoi insister sur ce point du shell si c'est pour en parler aussi peu.</p>
<p>Et bien, je voulais surtout bien faire comprendre la dissociation qui existe entre l'application et le shell.</p>
<p>En soi, vous pourriez avoir les couples <em>Terminal+bash</em>, <em>Terminal+Zsh</em>, <em>iTerm2+bash</em>, <em>iTerm2+Zsh</em> et finalement, il n'y en aurait pas un franchement mieux qu'un autre.</p>
<h2 id="le-prompt" tabindex="-1">Le prompt <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">#</a></h2>
<p>Lorsque que le shell est prêt à recevoir une commande il affiche l'invite de commande ou <em>prompt</em> dans la langue de Shakespeare.</p>
<p>C'est ce vous pouvez voir tout à gauche d'une nouvelle ligne…</p>
<p><img src="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/img/bash.gif" alt="Bash"></p>
<p>Sur cette image vous remarquez donc le prompt qui s'affiche comme suit : <code>GoOz@Macbook-Air:repos$</code></p>
<ul>
<li><code>GoOz</code>, le <em>username</em> de ma session utilisateur sur ma machine</li>
<li><code>@MacBook-Air</code> étant le <em>hostname</em> de ma machine</li>
<li><code>:</code>, juste un séparateur</li>
<li><code>repos</code>, le nom du dossier dans lequel je me trouve actuellement</li>
<li><code>$</code>, le séparateur ou indicatif de fin de prompt</li>
</ul>
<p>Remarquez comme, après avoir changé de dossier en faisant la commande <code>cd Perso</code>, <em>repos</em> devient <em>Perso</em>.</p>
<p>Cette petite zone, mes amis, est donc ce qu'on appelle le prompt. Et ce qui est sympa avec lui, c'est qu'on peut en faire à peu près ce que l'on veut, sur tous les shells et toutes les applications.</p>
<h2 id="en-mega-bref" tabindex="-1">En méga bref <a class="header-anchor" href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-sous-osx/">#</a></h2>
<p>Il faut voir ce trio application/shell/prompt comme 3 poupées russes :</p>
<ul>
<li>Le prompt est dépendant du shell puisqu'il est configuré dans le fichier de configuration de ce dernier.</li>
<li>Le Shell dépend de l'application… enfin ce n'est pas tout à fait juste puisqu'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'est bien l'application qui charge le shell.</li>
<li>Et enfin au-dessus de tout, l'application.</li>
</ul>
<p>Voilà voilà. Vous êtes désormais tous incollables sur le sujet, on va pouvoir passer aux choses sérieuses. :)</p>
<p><a href="https://blog.foojin.com/2014/10/13/pimp-my-shell-pour-les-beotiens-choose-your-weapons-partie-2/">Pimp my shell pour les béotiens — Choose your weapons (Partie 2)</a></p>
I want you!2014-09-02T00:00:00Zhttps://blog.foojin.com/2014/09/02/i-want-you/<p>J'ai eu une idée de projet photographique récemment, une idée dont j'avais bien besoin. Mon amour de la photographie ne s'estompe pas avec le temps mais ma motivation pour en faire, elle, est aussi rare que le soleil d'août en France.</p>
<h2 id="mon-projet" tabindex="-1">Mon projet <a class="header-anchor" href="https://blog.foojin.com/2014/09/02/i-want-you/">#</a></h2>
<p>Je vais demander à des gens de prendre mon appareil et de me tirer le portrait.</p>
<p>Jusque-là rien de bien folichon me diriez-vous, sauf que le petit plus c'est que je décide au préalable des réglages de l'appareil, donc il sera en manuel complet, et je laisse au photographe d'un moment le choix du lieu, de la pose et du cadrage. Avec un déclic et un seul.</p>
<p>Il y aura quelques détails en plus qui resteront secret parce qu'il en faut.</p>
<h2 id="pourquoi-j-ai-besoin-de-vous" tabindex="-1">Pourquoi j'ai besoin de vous ? <a class="header-anchor" href="https://blog.foojin.com/2014/09/02/i-want-you/">#</a></h2>
<p>Si c'est pas assez évident, je vous le dis clairement : <strong>j'ai besoin de cobayes</strong>. 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'importe qui fera l'affaire.</p>
<p>Bref, si vous êtes intéressé(e)s, chopez-moi sur <a href="http://twitter.com/GoOz">Twitter</a>, mailez-moi (<em>cycogooz chez gmail.com</em>), appelez-moi si vous avez mon numéro de téléphone, faxez-moi (mais il faudra venir m'installer le fax avant) ou chopez-moi en direct si on se voit souvent.</p>
<p>Dans tous les cas, n'envoyez pas de message via pigeon, je soupçonne mon chat d'intercepter ma correspondance épistolaire.</p>
<p>Merci !</p>
<p><img src="http://media1.giphy.com/media/xIJLgO6rizUJi/giphy.gif" alt=""></p>
Faites abstention au loup2014-05-26T00:00:00Zhttps://blog.foojin.com/2014/05/26/faites-abstention-au-loup/<p>À chaque nouvelle élection, un phénomène massif pointe le bout de son nez, c'est l'<strong>abstentionnisme</strong>.</p>
<p>À chaque nouvelle élection, on spolie ces gens.</p>
<p>À chaque nouvelle élection où les partis d'extrêmes font de bons scores, on se laisse aller en diatribes belliqueuses contre cette partie de la population.</p>
<p>Mais qui sont ces <em>abstentionnistes</em> ? Quels sont leurs réseaux ?</p>
<h2 id="qui-sont-ils" tabindex="-1">Qui sont-ils ? <a class="header-anchor" href="https://blog.foojin.com/2014/05/26/faites-abstention-au-loup/">#</a></h2>
<p>J'aimerais qu'on prenne le temps ici de s'intéresser à ces gens, de savoir qui ils sont, d'où ils viennent et pourquoi ils ne se lèvent pas du canapé, parce que même les plus "<em>démocrates</em>" auto-proclamés, ceux-là même qui défendent la différence de culture, d'ethnicité, d'opinion, ont tendance à cracher sur le lot sans distinction.</p>
<p>Voici donc une liste non-exhaustive des différents type de "<em>branleurs démocrates</em>" :</p>
<ul>
<li><strong>Les ermites</strong>, ou ceux qui sont dans leur petit monde, refusant de s'intégrer à la vie sociale et donc à la vie politique. Ils n'ont souvent même pas eu vent des élections et ne s'en plaignent d'ailleurs pas.</li>
<li><strong>Les indisposés</strong>, 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'aller mettre un papier dans une boîte.</li>
<li><strong>Les ignorants</strong>, 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'est idiot à ce point ؟</li>
<li><strong>Les désabusés</strong>, ou ceux qui n'ont plus foi dans le régime actuel, qui ne voit que répétition d'échec avec pour seule différence l'alternance des bords politiques à chaque mandat, ceux qui prennent conscience que la démocratie représentative s'essouffle.</li>
<li><strong>Les flemmards</strong>, ou ceux qui… qui préfèrent larver devant la télé, la console ou un bon bouquin, parce que c'est le week end et que sortir acheter du pain c'est déjà un effort surhumain, alors aller voter…</li>
<li><strong>Les Fans du Blanc</strong>, ou ceux qui militent pour que le statut du vote blanc soit enfin considéré. Aujourd'hui c'est le cas, le vote blanc est compté et considéré… enfin jusqu'au point où on l'écrit dans les registres, sans avoir de réel poids dans la balance. M'enfin… doit bien rester des déçus, j'imagine.</li>
<li><strong>Les activistes</strong>, ou ceux qui refusent par principe, par conviction philosophique ou politique de participer à ce qu'ils considèrent comme une masacarade démocratique, car participer ce serait dire qu'on corrobore ce système.</li>
</ul>
<p>Voilà, on a fait le tour des groupes les plus importants, si j'en ai oublié, des significatifs, envoyez-moi un Fax.</p>
<h2 id="le-malaise" tabindex="-1">Le malaise <a class="header-anchor" href="https://blog.foojin.com/2014/05/26/faites-abstention-au-loup/">#</a></h2>
<p>Le malaise arrive surtout lorsqu'un parti d'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.</p>
<p>Accuser le <em>voteur extrême</em> ? Non, c'est son droit le plus strict de voter, même si l'on est pas d'accord avec lui.</p>
<p>Accuser le <em>voteur blanc</em> ? Non, lui aussi s'est exprimé malgré tout.</p>
<p>Accuser le <em>voteur nul volontaire</em> ? Ils sont si peu nombreux que ça n'aurait aucun impact.</p>
<p>Il ne reste donc que les abstentionnistes, ceux qui n'ont pas voulu ou pu prendre part aux élections. Ce sont eux les fautifs. On blâme ceux qui n'ont rien fait au motif fallacieux que ce sont des voix en moins <strong>contre</strong> ces partis extrêmes, alors que le principe des élections est, et à toujours été, de voter <strong>pour</strong> ceux que l'on veut voir au pouvoir, mais passons…</p>
<p>J'insiste sur le caractère fallacieux de cette critique. Rien n'est sûr, tout est supposé. Tous supposent que l'abstentionniste n'aurait pas voté extrême s'il avait bougé son cul; rien ne dit que certains votants extrêmes n'étaient pas d'abord partisans de l'abstention avant de recevoir le matraquage médiatique de l'image du mauvais citoyen qu'ils auraient été s'ils s'étaient retenus.</p>
<p>Tout n'est qu'allégation maladroite.</p>
<p>C'est une simili chasse aux sorcières que l'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'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 "fasciste" des deux ? Celui qui impose à l'autre ou celui qui refuse de faire partie du groupe ?</p>
<p>Est-ce donc ça la démocratie tant vantée ? Celle où l'homme était égal à son prochain et libre ?</p>
<p>J'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'est pas l'abstentionnisme le pire des maux de la démocratie moderne, mais le système démocratique actuel qui s'essouffle. Que la solution n'est pas l'obligation ou la sanction, que la solution c'est le recul, c'est rendre le pouvoir au peuple pour espérer son implication mais aussi la redéfinition de ce régime bancal.</p>
<h2 id="en-bref" tabindex="-1">En bref <a class="header-anchor" href="https://blog.foojin.com/2014/05/26/faites-abstention-au-loup/">#</a></h2>
<p>Les abstentionnistes ce sont des gens normaux, comme vous et moi, certains sans véritable raison réfléchie, d'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.</p>
<p>Le score du FN de cette dernière élection européenne n'a rien à voir avec l'abstentionnisme; Ne blâmez pas des gens de s'être retenus, trouvez l'origine du problème et tentez d'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'on peut changer les choses, vraiment changer les choses.</p>
<h2 id="bonus" tabindex="-1">Bonus <a class="header-anchor" href="https://blog.foojin.com/2014/05/26/faites-abstention-au-loup/">#</a></h2>
<p>Aller arrêtons un peu le sérieux voulez-vous bien et rions un peu avec George Carlin…</p>
<p>Je vous dirais bien de commenter si vous avez des choses à dire mais j'ai toujours pas de commentaires fonctionnels donc répondez moi sur <a href="http://twitter.com/GoOz">Twitter</a>.</p>