ThomasorusThe personal wiki of Thomasorus2024-03-12T18:19:37+01:00https://thomasorus.com/feed.xmlThomasoruscontact@thomasorus.comNow2023-04-26T23:34:39+02:00now<h1 id="now" >Now<a href="#now" aria-label="Now permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>What I'm working on right now.</p>
<h2 id="tasks" >Tasks<a href="#tasks" aria-label="Tasks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<ul><li><code aria-hidden="true">[@]</code><span class="visually-hidden">Ongoing task</span> !!! Put plinths on walls</li>
<li><code aria-hidden="true">[@]</code><span class="visually-hidden">Ongoing task</span> ! Finish porting my design system in the website</li>
<li><code aria-hidden="true">[ ]</code><span class="visually-hidden">Opened task</span> !! Create a website rating fighting games by their features</li>
<li><code aria-hidden="true">[ ]</code><span class="visually-hidden">Opened task</span> ! Design new furniture for the living room</li>
<li><code aria-hidden="true">[ ]</code><span class="visually-hidden">Opened task</span> ! Frame pictures in the living room</li>
<li><code aria-hidden="true">[~]</code><span class="visually-hidden">Paused or abandonned task</span> Cerca CSS</li>
<li><code aria-hidden="true">[~]</code><span class="visually-hidden">Paused or abandonned task</span> An article about how to achieve 2D look in 3D</li>
<li><code aria-hidden="true">[~]</code><span class="visually-hidden">Paused or abandonned task</span> The lore of a story I had in mind for a long time</li>
<li><code aria-hidden="true">[~]</code><span class="visually-hidden">Paused or abandonned task</span> Learning and using VIM</li></ul>
<h2 id="definition" >Definition<a href="#definition" aria-label="Definition permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt>[ ]</dt><dd>Opened task</dd><dt>[@]</dt><dd>Ongoing task</dd><dt>[~]</dt><dd>Paused or abandonned task</dd><dt>[x]</dt><dd>Completed task</dd></dl>
Tools2022-01-02T00:39:41+01:00tools<h1 id="tools" >Tools<a href="#tools" aria-label="Tools permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>A collection of tools I use or made.</p>
<h2 id="why-i-make-my-own-tools" >Why I make my own tools<a href="#why-i-make-my-own-tools" aria-label="Why I make my own tools permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>As software developers we are all the time required to follow the next big thing and use <a href="the-soft-power-of-javascript.html">new frameworks or libraries</a>. It comes with a lot of code bloat, it requires to relearn everything from scratch and does not favors building strong fundamentals. It's also exhausting and maintains people into imposter syndrome.</p>
<p>Creating my own instead of using other people's tools is a very appreciable exercise of self-discovery. It allows to ask, ala Marie Kondo, if these tools, frameworks, libraries I use all the time as a software developer bring me happiness. And if not, why do I keep using them?</p>
<p>Coding my tools removes the notion of efficiency and productivity associated with software development. I don't know when the tool I build will be done and it doesn't matter, that's why it's relaxing. Instead of complying with other people way of doing, I discover my own and my software evolves with me.</p>
<p>It's a reappropriation of the means of production towards self-discovery.</p>
Keyboards2023-03-03T17:22:26+01:00keyboards<h1 id="keyboards" >Keyboards<a href="#keyboards" aria-label="Keyboards permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I use two keyboards: the <strong>Happy Hacking Keyboard</strong> (HHKB) by PFU and a <strong>Happy Hacking Keyboard plate replica</strong> made in China.</p>
<h2 id="happy-hacking-keyboard" >Happy Hacking Keyboard<a href="#happy-hacking-keyboard" aria-label="Happy Hacking Keyboard permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<figure><picture><source type="image/webp" srcset="img/hhkb-400.webp 660w, img/hhkb-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="The happy hacking keyboard" srcset="img/hhkb-400.jpg 660w, img/hhkb-700.jpg 1440w" src="img/hhkb.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>The happy hacking keyboard | <small><a href="img/hhkb.jpg">Full size</a></small></figcaption> </figure><p>Bought in 2016 at Akihabara in Japan, this HHKB had been my daily driver since. It took several weeks to get used to it as I learned both to write in QWERTY and the very special layout of this keyboard. It's currently customized with a <a href="https://kbdfans.com/products/pre-orderelectrostatic-capacity-keyboard-japanese-keycaps?_pos=16&_sid=098521c43&_ss=r">japanese keyset</a>. As for all HHKBs, the switches are Topre.</p>
<h2 id="hhkb-plate-replica" >HHKB plate replica<a href="#hhkb-plate-replica" aria-label="HHKB plate replica permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<figure><picture><source type="image/webp" srcset="img/hhkb-plate-400.webp 660w, img/hhkb-plate-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="My plate replica of HHKB" srcset="img/hhkb-plate-400.jpg 660w, img/hhkb-plate-700.jpg 1440w" src="img/hhkb-plate.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>My plate replica of HHKB | <small><a href="img/hhkb-plate.jpg">Full size</a></small></figcaption> </figure><p>Bought in 2018 to have a second keyboard with the HHKB layout to drop at work. This keyboard initially had a rough CNC cut plate with Outemu Purple switches. I unsoldered the switches and replaced them with Cherry MX Silent Red. A friend also lubed them to avoid making noise. A vinyl like sticker was then applied to the plate to hide the rough metal.</p>
Curriculum vitae2021-11-12T16:47:35+01:00curriculum-vitae<h1 id="curriculum-vitae" >Curriculum Vitae<a href="#curriculum-vitae" aria-label="Curriculum Vitae permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Writing in progress...</p>
Raspberry Pi2023-03-03T17:22:26+01:00raspberry-pi<h1 id="my-raspberry-pi-configuration" >My Raspberry Pi configuration<a href="#my-raspberry-pi-configuration" aria-label="My Raspberry Pi configuration permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I've been trying to use a Raspberry Pi as small development machine for personal projects. The overall goal is to spend less time on the computer by creating a distraction free machine with limited capabilities.</p>
<p>I use a Raspberry Pi 4 with 8 gigs or ram and an aluminium heatsink.</p>
<figure><picture><source type="image/webp" srcset="/img/pi-400.webp 660w, /img/pi-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Pi 4 with a heatsink" srcset="/img/pi-400.jpg 660w, /img/pi-700.jpg 1440w" src="/img/pi.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="/img/pi.jpg">Full size</a></small></figcaption> </figure><p>After a lot of <a href="raspberry-pi-distros.html">testing</a> I ended using <strong>Dietpi</strong>. The install experience is poor but compensated by the large amount of tweaks and software proposed. It's probably better to create your own user experience by installing and tweaking the window manager and file manager that suits you.</p>
<p>But what is amazing with Dietpi is how responsive it is considering it's running on a Raspberry Pi. I installed i3 window manager and thunar and almost everything launches instantly. Even an Electron app like Visual Studio Code is usable as there's no lag when typing (but startup and syntax color can be a bit slow).</p>
<p>I use the 32bit version as the 64bit has bugs.</p>
<figure><picture><source type="image/webp" srcset="/img/i3-400.webp 660w, /img/i3-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A screenshot of my i3 Desktop" srcset="/img/i3-400.jpg 660w, /img/i3-700.jpg 1440w" src="/img/i3.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="/img/i3.jpg">Full size</a></small></figcaption> </figure><h2 id="dietpi-installation-guide" >Dietpi installation guide<a href="#dietpi-installation-guide" aria-label="Dietpi installation guide permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This guide is mostly for my own use but feel free to use it.</p>
<h3 id="basic-setup" >Basic setup<a href="#basic-setup" aria-label="Basic setup permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>If you are on Wifi, edit the <code>dietpi</code> and <code>dietpi-wifi</code> files in the boot folder before inserting the sd card, as dietpi will trigger <code>apt update</code> and <code>apt upgrade</code> on launch.</li>
<li>Use <code>dietpi-config</code> in the command line and activate the sound in the audio options and bluetooth (if needed) in the advanced options (note that activating bluetooth sometimes returns an error, but it's working).</li>
<li>Configure the language, keyboard and locale.</li>
<li>Using <code>dietpi-software</code> from the command line launches a menu with ready to use software install. The <code>Optimized software</code> contains the window managers, the <code>additional software</code> contains things like <code>git</code>, <code>openssh</code>, <code>vim</code> and other tools.</li>
<li>If you want to use i3, install <code>i3</code>, <code>i3lock</code>, <code>i3status</code> and <code>suckless-tools</code>.</li>
<li>By default dietpi launches in the terminal. To launch to the window manager, use <code>dietpi-config</code>, go to <code>autostart options</code>. You'll see a list, go <code>Desktops</code> and press Enter on <code>LightDM Login Mask</code>, then select the user (probably dietpi) and exit. The next time you'll reboot you will boot on LightDM and will be able to choose your window manager.</li></ul>
<h3 id="other-programs" >Other programs<a href="#other-programs" aria-label="Other programs permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li><code>thunar</code> as a file manager.</li>
<li><code>chromium-browser</code> for browsing</li>
<li>Hardware acceleration following this <a href="https://www.dedoimedo.com/computers/rpi4-ubuntu-mate-hw-video-acceleration.html">tutorial</a></li>
<li><code>blueman</code> to manager bluetooth devices</li>
<li><code>mps-youtube</code> and <code>youtube-dl</code> to play youtube music in the terminal. The <code>youtube-dl</code> package is old, you have to update it using pip3: <code>pip3 install --upgrade youtube-dl</code> and use your own Youtube V3 Api Key. Set it inside mps-youtube with <code>set api_key KEY</code>.</li>
<li>By default dietpi has no emoji support or foreign languages like Japanese, you might want to install fonts to support them.</li>
<li>I use <code>feh</code> to randomize wallpapers (it's inside my i3 config file)</li></ul>
<h3 id="chrome-extensions" >Chrome extensions<a href="#chrome-extensions" aria-label="Chrome extensions permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Ublock original</li>
<li>Noscript</li>
<li>Ninja cookie</li>
<li>1PasswordX</li>
<li>h264ify</li></ul>
<h3 id="i3-config-file" >i3 config file<a href="#i3-config-file" aria-label="i3 config file permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>My config file is available on <a href="https://gist.githubusercontent.com/Thomasorus/89322ec9b0913e680616548265f5346f/raw/ccfd72704a6fced96ab6642477397c2ef6fa2efc/i3-config.txt">github</a>.</p>
Whiteboard2022-08-28T13:34:05+02:00whiteboard<h1 id="whiteboard" >Whiteboard<a href="#whiteboard" aria-label="Whiteboard permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This page references temporary things I need to store somewhere. Consider it like my post-it wall.</p>
<p>Things I need to study or try:</p>
<ul><li><a href="https://www.youtube.com/watch?v=LnapsmokM_4">Simulating color vision deficiencies in the Blink Renderer</a></li>
<li><a href="https://css-tricks.com/a-complete-guide-to-css-gradients/">A complete guide to CSS Gradients</a></li>
<li><a href="https://csswizardry.com/2020/11/site-speed-topography/">Harry Roberts: Site Speed Topography</a></li>
<li><a href="https://doodad.dev/pattern-generator/">Pattern generator</a></li>
<li><a href="https://www.capitalone.com/tech/software-engineering/wcag-accessiblity-guidelines-mobile/">Web Content Accessibility Guidelines for Mobile</a></li>
<li><a href="https://www.youtube.com/watch?v=lFb7BOI_QFc">Why do corporate art styles feel fake</a></li>
<li><a href="https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c">Finally, a CSS only solution to <code>:hover</code> on touchscreens</a></li>
<li><a href="https://egghead.io/courses/accessible-cross-browser-css-form-styling-7297">Accessible Cross-Browser CSS Form Styling</a></li>
<li><a href="https://www.bbc.co.uk/gel/articles/creating-a-design-system-for-bbc">The lessons learnt creating a design system for BBC Online</a></li>
<li><a href="https://thoughtmaybe.com/cant-get-you-out-of-my-head/">Can’t Get You Out of My Head</a></li>
<li><a href="https://glassmorphism.com/">glassmorphism</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">The Inline Quotation element</a></li>
<li><a href="https://rclone.org/">rClone</a></li>
<li><a href="https://css-tricks.com/video-screencasts/205-sticky-positioning-how-it-works-what-can-break-it-and-dumb-tricks/">Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks</a></li>
<li><a href="https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables">The Power of Composition with CSS Variables</a></li>
<li><a href="https://doodad.dev/dither-me-this/">Dither me this</a></li>
<li><a href="https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/">A Complete Guide To Accessible Front-End Components</a></li>
<li><a href="https://github.com/paulirish/lite-youtube-embed">Lite youtube embed</a></li>
<li><a href="https://lea.verou.me/2021/03/inverted-lightness-variables/">Dark mode in 5 minutes, with inverted lightness variables</a></li>
<li><a href="https://component.gallery/">Component gallery</a></li>
<li><a href="https://ishadeed.com/article/handling-text-over-image-css/">Handling Text Over Images in CSS</a></li>
<li><a href="https://gridjs.io/">Grid.js Advanced Table Plugin</a></li>
<li><a href="https://web.dev/cookie-notice-best-practices/">Best practices for cookie notices</a></li>
<li><a href="https://web.dev/state-of-css-2022/">State of CSS 2022</a></li>
<li><a href="https://daverupert.com/2022/08/modern-alternatives-to-bem/">Modern alternatives to BEM</a></li>
<li><a href="https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522">CSS reset by Elly Loel</a></li>
<li><a href="https://www.autoregex.xyz">Autoregex</a></li>
<li><a href="https://specbranch.com/posts/one-big-server/">One big server</a></li>
<li><a href="https://ava.substack.com/p/modern-malaise">Modern malaise</a></li>
<li><a href="https://www.gawker.com/culture/failure-to-cope-under-capitalism">Failure to cope under capitalism</a></li>
<li><a href="https://webkit.org/blog/13096/css-has-pseudo-class/">Using :has(</a> as a CSS Parent Selector and much more)</li></ul>
Arcade Stick2023-03-03T17:22:26+01:00arcade-stick<h1 id="arcade-sticks" >Arcade sticks<a href="#arcade-sticks" aria-label="Arcade sticks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I've been playing fighting game for 20 years now, but only started using an arcade stick in 2006. While I was at a tournament, I managed to play some games on an arcade cabinet (the famous <a href="https://fr.wikipedia.org/wiki/Sega_Astro_City">Sega Astro City</a>) and discovered how comfortable and pleasant the experience was. I decided I wanted to play on an arcade stick.</p>
<figure><picture><source type="image/webp" srcset="img/group-stick-400.webp 660w, img/group-stick-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A bunch of arcade sticks on a table" srcset="img/group-stick-400.jpg 660w, img/group-stick-700.jpg 1440w" src="img/group-stick.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Different models of arcade sticks during one of our local fighting game sessions. | <small><a href="img/group-stick.jpg">Full size</a></small></figcaption> </figure><p>Back in 2007 most arcade sticks were not even sold in Europe and needed to be imported. They were not that cheap for their poor quality, and building one meant buying it opening it, throwing away all parts and electronics, then adding your own parts.</p>
<p>For the electronics during the PS2 era, most people would buy cheap controllers, open them and solder wires on the connectors and connect those to the buttons and the lever. When the Xbox 360 and Playstation 3 came out in 2005 and 2006, most people would then build <em>dual-mods</em>. Two hackpads, both with a common ground, would be connected and powered at the same time (USB had one cable for power and one for ground). A manual switch was then added, whose role was to send the signal (green and white wires on an USB cable) to the desired controller.</p>
<figure><picture><source type="image/webp" srcset="img/hackpad-400.webp 660w, img/hackpad-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A hackpad" srcset="img/hackpad-400.jpg 660w, img/hackpad-700.jpg 1440w" src="img/hackpad.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A typical hackpad from the Xbox 360 era. | <small><a href="img/hackpad.jpg">Full size</a></small></figcaption> </figure><p>Around the early 2010 with the rise of DIY electronics, people started building custom PCBs that contained the code for several consoles in a single board. Today this part is way easier than it used to be, with boards being affordable for custom builds.</p>
<p>The three main quality brands for levers and buttons from Japan are Sanwa, Seimitsu and Hori. There are regional differences, with the US sometimes using HAPP models, or Korean players using Crown and Fanta models. All brands have different models, and all models have a different feeling. For most of my arcade sticks, I used the classic Sanwa JLF-TP-8YT lever and Sanwa OBS-30 buttons.</p>
<p>I had several models through the years.</p>
<figure><picture><source type="image/webp" srcset="img/stick-lapin-400.webp 660w, img/stick-lapin-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="An arcade stick" srcset="img/stick-lapin-400.jpg 660w, img/stick-lapin-700.jpg 1440w" src="img/stick-lapin.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>For some reason I decided to do a Guilty Gear x Raving Rabbids arcade stick on a Namco PS1 base for my first build. Overall this stick never worked super well. | <small><a href="img/stick-lapin.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/piranese2-400.webp 660w, img/piranese2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A custom arcade stick with an art on it" srcset="img/piranese2-400.jpg 660w, img/piranese2-700.jpg 1440w" src="img/piranese2.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>This case was made by an artisan. I added a print of the famous Piranese prison on it for some reason. Note the manual switch for a dual mode. | <small><a href="img/piranese2.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/stick-glove-400.webp 660w, img/stick-glove-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A boxing glove on an arcade stick" srcset="img/stick-glove-400.jpg 660w, img/stick-glove-700.jpg 1440w" src="img/stick-glove.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>This model is a Madcatz Standard Edition for the Wii, that was repurposed to to a trial-mod for the Playstation 2, Playstation 3 and Xbox 360. | <small><a href="img/stick-glove.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/stick-box-400.webp 660w, img/stick-box-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Several arcade sticks in a box" srcset="img/stick-box-400.jpg 660w, img/stick-box-700.jpg 1440w" src="img/stick-box.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Tree of my arcade sticks. During a period I wanted to do a Mortal Kombat mod on the small Namco Yellow model. Note the Hexagonal buttons. | <small><a href="img/stick-box.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/gamerfinger-400.webp 660w, img/gamerfinger-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A box of buttons" srcset="img/gamerfinger-400 660w, img/gamerfinger-700 1440w" src="img/gamerfinger" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>There has been a few attempts to replace the classic buttons by using Cherry MX switches in buttons. Those are a set I imported from China, they were hexagonal in shape and were not working as well as I hoped due to poor wiring. | <small><a href="img/gamerfinger">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/ps2-hack-400.webp 660w, img/ps2-hack-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A cheap custom stick" srcset="img/ps2-hack-400.jpg 660w, img/ps2-hack-700.jpg 1440w" src="img/ps2-hack.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Around 2017 I re-did a Playstation 2 stick with a hackpad, using a cheap bootleg case and leftovers buttons. | <small><a href="img/ps2-hack.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/hori-small-400.webp 660w, img/hori-small-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Two sticks side by side, one of them is very small" srcset="img/hori-small-400.jpg 660w, img/hori-small-700.jpg 1440w" src="img/hori-small.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Ready-made arcade sticks prices have skyrocketed and are now luxury items, but sometimes you encounter some models that try to be cheap. They are often terrible, like this Hori Mini. | <small><a href="img/hori-small.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/hori-rap4-400.webp 660w, img/hori-rap4-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A hori rap 4 arcade stick" srcset="img/hori-rap4-400.jpg 660w, img/hori-rap4-700.jpg 1440w" src="img/hori-rap4.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>I haven't done a custom stick in years now, and use a Hori Real Arcade Pro 4 first gen. It's affordable and has good Hori parts. | <small><a href="img/hori-rap4.jpg">Full size</a></small></figcaption> </figure>Aesthetics2023-03-03T17:22:26+01:00aesthetics<h1 id="aesthetics" >Aesthetics<a href="#aesthetics" aria-label="Aesthetics permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I'm currently trying to define what my design aesthetics are. This page serves as a reference point that helps me find answers. My ultimate goal would be to create my own design system.</p>
<h2 id="software" >Software<a href="#software" aria-label="Software permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I like minimalist interfaces that work both in light and dark mode.</p>
<figure><picture><source type="image/webp" srcset="img/aesthetics014-400.webp 660w, img/aesthetics014-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Left text editor by 100 rabbits" srcset="img/aesthetics014-400.jpg 660w, img/aesthetics014-700.jpg 1440w" src="img/aesthetics014.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Left text editor by 100 rabbits | <small><a href="img/aesthetics014.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics016-400.webp 660w, img/aesthetics016-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Ronin image editor by 100 rabbits" srcset="img/aesthetics016-400.jpg 660w, img/aesthetics016-700.jpg 1440w" src="img/aesthetics016.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Ronin image editor by 100 rabbits | <small><a href="img/aesthetics016.jpg">Full size</a></small></figcaption> </figure><h2 id="color-and-visual-language" >Color and visual language<a href="#color-and-visual-language" aria-label="Color and visual language permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I like the idea of color and visual language (like icons) having meaning all over the application. For example in my future program I have these data types:</p>
<ul><li>Text</li>
<li>Time</li>
<li>Journal</li></ul>
<figure><picture><source type="image/webp" srcset="img/aesthetics004-400.webp 660w, img/aesthetics004-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Dijo habbit tracker by NerdyPepper" srcset="img/aesthetics004-400.jpg 660w, img/aesthetics004-700.jpg 1440w" src="img/aesthetics004.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Dijo habbit tracker by NerdyPepper | <small><a href="img/aesthetics004.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics015-400.webp 660w, img/aesthetics015-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Orca music programming tool by 100 rabbits" srcset="img/aesthetics015-400.jpg 660w, img/aesthetics015-700.jpg 1440w" src="img/aesthetics015.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Orca music programming tool by 100 rabbits | <small><a href="img/aesthetics015.jpg">Full size</a></small></figcaption> </figure>
<h2 id="presentation" >Presentation<a href="#presentation" aria-label="Presentation permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>For some reason I like it a lot when the capture subject is part of a grander interface. It gives context and intention, and helps to focus on what's important at the same time.</p>
<figure><picture><source type="image/webp" srcset="img/aesthetics009-400.webp 660w, img/aesthetics009-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Fortunae finance tool by uonai" srcset="img/aesthetics009-400.jpg 660w, img/aesthetics009-700.jpg 1440w" src="img/aesthetics009.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Fortunae finance tool by uonai | <small><a href="img/aesthetics009.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics008-400.webp 660w, img/aesthetics008-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="The i3 window manager featuring the terminal RSS reader newsboat and the terminal music player MPSYT" srcset="img/aesthetics008-400.jpg 660w, img/aesthetics008-700.jpg 1440w" src="img/aesthetics008.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>The i3 window manager featuring the terminal RSS reader newsboat and the terminal music player MPSYT | <small><a href="img/aesthetics008.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics006-400.webp 660w, img/aesthetics006-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Fortunae finance tool by uonai" srcset="img/aesthetics006-400.jpg 660w, img/aesthetics006-700.jpg 1440w" src="img/aesthetics006.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Fortunae finance tool by uonai | <small><a href="img/aesthetics006.jpg">Full size</a></small></figcaption> </figure><h2 id="displaying-data" >Displaying data<a href="#displaying-data" aria-label="Displaying data permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I like the idea of retro computer aesthetics for displaying information instead of color (that I think should be used for visual language). It can be graphs, maps, icons, numbers, text.</p>
<p>But I'm not really nostalgic of the aesthetic. It's just more functionnal.</p>
<figure><picture><source type="image/webp" srcset="img/aesthetics002-400.webp 660w, img/aesthetics002-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Ronbun time tracking tool by me" srcset="img/aesthetics002-400.jpg 660w, img/aesthetics002-700.jpg 1440w" src="img/aesthetics002.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Ronbun time tracking tool by me | <small><a href="img/aesthetics002.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics005-400.webp 660w, img/aesthetics005-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A capture of the Uxn virtual stack machine by 100 rabbits" srcset="img/aesthetics005-400.jpg 660w, img/aesthetics005-700.jpg 1440w" src="img/aesthetics005.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A capture of the Uxn virtual stack machine by 100 rabbits | <small><a href="img/aesthetics005.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics003-400.webp 660w, img/aesthetics003-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" srcset="img/aesthetics003-400.jpg 660w, img/aesthetics003-700.jpg 1440w" src="img/aesthetics003.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A map | <small><a href="img/aesthetics003.jpg">Full size</a></small></figcaption> </figure><h2 id="abstract-animations" >Abstract animations<a href="#abstract-animations" aria-label="Abstract animations permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I like abstract animations that give visual identity to the rest of the program. They probably should not appear too much, but could be used in discreet places to make them more interesting (like a footer on a website);</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/aesthetics010.mp4" type="video/mp4"></video><figcaption>Art by <a href="https://twitter.com/lvl374">lvl374</a></figcaption></figure>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/aesthetics012.mp4" type="video/mp4"></video><figcaption>Art by <a href="https://twitter.com/lvl374">lvl374</a></figcaption></figure><h2 id="illustration" >Illustration<a href="#illustration" aria-label="Illustration permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I like a lot of illustrations styles but the one I feel works well for the web uses flat colors and lines. But I don't like the trend of vector illustration as a way to infantilize people like. They have to be eerie, complex and capture the intention.</p>
<p>The added bonus: it's possible to animate them when they are in SVG, making the website more alive.</p>
<figure><picture><source type="image/webp" srcset="img/aesthetics001-400.webp 660w, img/aesthetics001-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Art by @jellyflavor on twitter" srcset="img/aesthetics001-400.jpg 660w, img/aesthetics001-700.jpg 1440w" src="img/aesthetics001.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Art by @jellyflavor on twitter | <small><a href="img/aesthetics001.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics007-400.webp 660w, img/aesthetics007-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Art by @jellyflavor on twitter" srcset="img/aesthetics007-400.jpg 660w, img/aesthetics007-700.jpg 1440w" src="img/aesthetics007.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Art by @jellyflavor on twitter | <small><a href="img/aesthetics007.jpg">Full size</a></small></figcaption> </figure>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/aesthetics011.mp4" type="video/mp4"></video><figcaption>Art by <a href="https://twitter.com/Gaako_illust">Gaako_illust</a></figcaption></figure><h2 id="objects" >Objects<a href="#objects" aria-label="Objects permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I like objects two ways:</p>
<ul><li>Either they are minimalist and self explanoratory</li>
<li>Or they are are complex and don't hide their complexity</li></ul>
<p>In both situation, I like that they are analogic. No touch screen for example, I prefer real buttons.</p>
<figure><picture><source type="image/webp" srcset="img/aesthetics017-400.webp 660w, img/aesthetics017-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Radio by Dieter Rams" srcset="img/aesthetics017-400.jpg 660w, img/aesthetics017-700.jpg 1440w" src="img/aesthetics017.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Radio by Dieter Rams | <small><a href="img/aesthetics017.jpg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/aesthetics018-400.webp 660w, img/aesthetics018-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Pocket operator music instrument" srcset="img/aesthetics018-400.jpg 660w, img/aesthetics018-700.jpg 1440w" src="img/aesthetics018.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Pocket Operator music instrument | <small><a href="img/aesthetics018.jpg">Full size</a></small></figcaption> </figure>Giveaway2023-03-03T17:22:26+01:00giveaway<h1 id="giveaway-list" >Giveaway list<a href="#giveaway-list" aria-label="Giveaway list permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>On this page are unused objects that I want to give away for free to members of the Merveilles community that may need them. My goal is to empower our members with tools so they can achieve a greater life, improve their artistic projects, or just have fun. I prioritize people in financial difficulty or in minority groups (POC, LGBTQA+, etc.).</p>
<p>If one of those objects interested you, contact me on Merveilles. Shipping fees are on you, and I can send them to any part of the world (I'm in Europe).</p>
<h2 id="audigy-internal-soundcard" >Audigy internal soundcard<a href="#audigy-internal-soundcard" aria-label="Audigy internal soundcard permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I don't remember when I got this. It's Create Audigy sound card that is at least 10 years old. It has multiple ports, needs to be plugged to a PCI port. Not tested, so no guarantee it works perfectly.</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/audigy1-400.webp 660w, img/giveaways/audigy1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Audigy card" srcset="img/giveaways/audigy1-400.jpeg 660w, img/giveaways/audigy1-700.jpeg 1440w" src="img/giveaways/audigy1.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/audigy1.jpeg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/giveaways/audigy2-400.webp 660w, img/giveaways/audigy2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Audigy card" srcset="img/giveaways/audigy2-400.jpeg 660w, img/giveaways/audigy2-700.jpeg 1440w" src="img/giveaways/audigy2.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/audigy2.jpeg">Full size</a></small></figcaption> </figure>
<h2 id="cheap-diy-p-s-2-arcade-stick" >Cheap DIY PS2 arcade stick<a href="#cheap-diy-p-s-2-arcade-stick" aria-label="Cheap DIY PS2 arcade stick permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>An arcade stick made of a cheap but sturdy plastic case. The parts are Sanwa and a bit worn out, but still work. It's compatible with Playstation 2 through a hackpad. Can be plugged to a computer using an adapter (see below) but remains a bit complicated to configure. It's probably better to buy a cheap board on ali-express and put it in.</p>
<p>Note: if you are not interested in the case but want the part that's OK, I have some leftovers too.</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/give-stick1-400.webp 660w, img/giveaways/give-stick1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Cheap DIY PS2 arcade stick top" srcset="img/giveaways/give-stick1-400.jpeg 660w, img/giveaways/give-stick1-700.jpeg 1440w" src="img/giveaways/give-stick1.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/give-stick1.jpeg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/giveaways/give-stick2-400.webp 660w, img/giveaways/give-stick2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Cheap DIY PS2 arcade stick insides" srcset="img/giveaways/give-stick2-400.jpeg 660w, img/giveaways/give-stick2-700.jpeg 1440w" src="img/giveaways/give-stick2.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/give-stick2.jpeg">Full size</a></small></figcaption> </figure><h2 id="telex-broadcast-xlr-helmet" >Telex broadcast XLR helmet<a href="#telex-broadcast-xlr-helmet" aria-label="Telex broadcast XLR helmet permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A vintage XLR Telex helmet. Super sturdy, gives you the look of an helicopter pilot. Has a nice sound but may need proper rewiring or customization.</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/helicopter-helmet-400.webp 660w, img/giveaways/helicopter-helmet-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Telex broadcast XLR helmet" srcset="img/giveaways/helicopter-helmet-400.jpeg 660w, img/giveaways/helicopter-helmet-700.jpeg 1440w" src="img/giveaways/helicopter-helmet.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/helicopter-helmet.jpeg">Full size</a></small></figcaption> </figure>
<h2 id="macbook-pro-13-inches-2013" >Macbook Pro 13 inches 2013<a href="#macbook-pro-13-inches-2013" aria-label="Macbook Pro 13 inches 2013 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A second hand Macbook Pro from 2013. It has an i5, 8gigs of ram and an SSD of 256gigabytes. The screen is still sharp, but suffers from a default of conception where air bubbles came between the glass and the LCD.</p>
<p>It's a bit on the slow side on the last MacOS version, so I suggest using an older version, or installing linux on it.</p>
<p>Comes with the magsafe charger and a plastic transparent protection. I can install a distribution on it if you have a sloppy internet connection or lack USB keys.</p>
<p>Please consider people in dire need of a computer before asking for this one.</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/mbpro-400.webp 660w, img/giveaways/mbpro-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Macbook Pro 13 inches 2013" srcset="img/giveaways/mbpro-400.jpeg 660w, img/giveaways/mbpro-700.jpeg 1440w" src="img/giveaways/mbpro.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/mbpro.jpeg">Full size</a></small></figcaption> </figure><h2 id="raspberry-pi-model-b-with-cables" >Raspberry Pi model B with cables<a href="#raspberry-pi-model-b-with-cables" aria-label="Raspberry Pi model B with cables permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This is a Raspberry Pi model B with a set of cables and a case. Cables included are DVI, jack to RCA, a charger with a button switch, a micro-usb to usb adapter and an SD card to SD mini adapter. Not SD card provided.</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/pi2-1-400.webp 660w, img/giveaways/pi2-1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Raspberry Pi model B with cables" srcset="img/giveaways/pi2-1-400.jpeg 660w, img/giveaways/pi2-1-700.jpeg 1440w" src="img/giveaways/pi2-1.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/pi2-1.jpeg">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/giveaways/pi2-2-400.webp 660w, img/giveaways/pi2-2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Raspberry Pi model B with cables" srcset="img/giveaways/pi2-2-400.jpeg 660w, img/giveaways/pi2-2-700.jpeg 1440w" src="img/giveaways/pi2-2.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/pi2-2.jpeg">Full size</a></small></figcaption> </figure>
<h2 id="ps2-adapter" >Ps2 adapter<a href="#ps2-adapter" aria-label="Ps2 adapter permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A simple Playstation 2 to USB adapter.</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/ps2-400.webp 660w, img/giveaways/ps2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Ps2 adapter" srcset="img/giveaways/ps2-400.jpeg 660w, img/giveaways/ps2-700.jpeg 1440w" src="img/giveaways/ps2.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/ps2.jpeg">Full size</a></small></figcaption> </figure>
<h2 id="64-gigabytes-ssd" >64 gigabytes SSD<a href="#64-gigabytes-ssd" aria-label="64 gigabytes SSD permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A small SSD from when it was super expensive.</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/ssd64-400.webp 660w, img/giveaways/ssd64-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="64 gigabytes SSD" srcset="img/giveaways/ssd64-400.jpeg 660w, img/giveaways/ssd64-700.jpeg 1440w" src="img/giveaways/ssd64.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/ssd64.jpeg">Full size</a></small></figcaption> </figure><h2 id="xbox-360-pad" >Xbox 360 pad<a href="#xbox-360-pad" aria-label="Xbox 360 pad permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>For games!</p>
<figure><picture><source type="image/webp" srcset="img/giveaways/xbox360-400.webp 660w, img/giveaways/xbox360-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Xbox 360 pad" srcset="img/giveaways/xbox360-400.jpeg 660w, img/giveaways/xbox360-700.jpeg 1440w" src="img/giveaways/xbox360.jpeg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/giveaways/xbox360.jpeg">Full size</a></small></figcaption> </figure>Art journey2023-10-31T10:08:58+01:00art-journey<h1 id="art-journey" >Art journey<a href="#art-journey" aria-label="Art journey permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This page is a personal summary up my art journey, written to help me reconnect with my roots by listing my influences as well as some of my projects.</p>
<h2 id="part-1-initial-inspirations" >Part 1: Initial inspirations<a href="#part-1-initial-inspirations" aria-label="Part 1: Initial inspirations permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I grew up in a 3000 souls town dedicated to copper craftsmanship. There was no museum and I was almost never exposed to something else that classical art. My family was upper middle class, my parents did minimal studies. My father didn't have a lot of interest in art, unlike my mother who in her teens wanted to go to an art school (and mocked for it) and by the end of her career became an art seller. She is the one who inspired my siblings and I to pursue our art hobbies.</p>
<p>According to my parents I was an impatient and perfectionist kid, who could not stomach making something that did not worked on the first try, and consequently, was giving up fast. All the drawings prior to my teenage years had to be thrown away in an emergency moving, so I have no traces or memories of what I was doing before this period.</p>
<p>But what I remember was that both my parents loved movies (we had a ton of cassette tapes) and music, and that they had a nice collection of vinyls.</p>
<p>It's through the covers of their albums that I had some of the earliest visual shocks, mostly from covers of Pink Floyd and Supertramp.</p>
<figure><picture><source type="image/webp" srcset="img/supertramp-cover-400.webp 660w, img/supertramp-cover-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="The cover of Supertramp album Crime of the Century. In space, two hands are holding prison bars as if they wanted to escape." srcset="img/supertramp-cover-400.jpg 660w, img/supertramp-cover-700.jpg 1440w" src="img/supertramp-cover.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>This cover of Supertramp's album "Crime of the Century" by Paul Wakefield had a profound effect on me when I was a kid. I still love listening to this album. | <small><a href="img/supertramp-cover.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/wish-400.webp 660w, img/wish-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Two people in suits, one of them set on fire, are shaking hands." srcset="img/wish-400.jpg 660w, img/wish-700.jpg 1440w" src="img/wish.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Pink Floyd's "Wish You Were Here" album cover created by Storm Elvin Thorgerson. | <small><a href="img/wish.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/lapse-400.webp 660w, img/lapse-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="On the beach, a multitude of steal frame beds are disposed, going as far as the horizon. A man sits on one of them, lost in thought." srcset="img/lapse-400 660w, img/lapse-700 1440w" src="img/lapse" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Pink Floyd's "A Momentary Lapse of Reason" album cover created by Storm Elvin Thorgerson. | <small><a href="img/lapse">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/division-bell-400.webp 660w, img/division-bell-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Two giant metallic profiles face each others in a field. Between their mouths we can see lights, and what seems to be a church or castle." srcset="img/division-bell-400 660w, img/division-bell-700 1440w" src="img/division-bell" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Pink Floyd's "The Division Bell" album cover created by Storm Elvin Thorgerson. | <small><a href="img/division-bell">Full size</a></small></figcaption> </figure><p>I was also a big reader, mostly children novels (one of my favorites was "Historia de una gaviota y del gato que le enseñó a volar" by Luis Sepulveda), then gravitated towards science fiction, comics and mangas. I read a lot of the kid's French/Belgian classics, but among them my favorite was Gaston Lagaffe. Growing up I also remember enjoying Hugo Pratt's Corto Maltese for its black and white pages, which wasn't common as most European comics were in color.</p>
<figure><picture><source type="image/webp" srcset="img/gaston-400.webp 660w, img/gaston-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Gaston is sleeping into a shelter entirely made of books. His colleagues, who were searching him to scold him, look moved by the mood of this magical place." srcset="img/gaston-400.jpg 660w, img/gaston-700.jpg 1440w" src="img/gaston.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Franquin's Gaton Lagaffe was a comic depicting the life of Gaston, a terrible employee that never did his work and instead preferred inventing things, sleep, and care about his cat and seagull. The whole series mocks the absurdity of office jobs and adult life. This panel is one of the most memorable of the whole series. | <small><a href="img/gaston.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/corto-400.webp 660w, img/corto-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="The sailor Corto Maltese reading in a sofa. In the background, palms and arches suggest a Caribbean location." srcset="img/corto-400.jpg 660w, img/corto-700.jpg 1440w" src="img/corto.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Hugo Pratt's Corto Maltese series impressed me with its black and white renditions. | <small><a href="img/corto.jpg">Full size</a></small></figcaption> </figure><p>I was also reading science fiction and fantasy, and among all of them, Tolkien's Silmarilion and Frank Herbert's Dune were easily the most influential and forged my interest for gigantic sagas, immortal beings, epic story-lines, and cycles of destruction. As an added bonus, the covers of the French edition of Dune were paintings by Wojtek Siudmak and harbored a visual language I had never seen before.</p>
<figure><picture><source type="image/webp" srcset="img/siudmak1-400.webp 660w, img/siudmak1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A surealist painting showing a kind of round mausoleum roof. It's sides are human faces. It is suspended on horse legs. It's front part is open and dark and inside, a fire colored body walks on giant lips. In the front bottom part, spiral staircase give access to the mausoleum to a golden draped figure. In the background, moon crashed on the ground." srcset="img/siudmak1-400.jpg 660w, img/siudmak1-700.jpg 1440w" src="img/siudmak1.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A Wojtek Siudmak painting. Siudmak qualifies his style as fantastic hyper-realism. | <small><a href="img/siudmak1.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/siudmak2-400.webp 660w, img/siudmak2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A woman is floating in the air in a curled up position. She has a long piece of fabric stuck around her legs, that barely hides what looks like a bicycle wheel that does not touch her directly, but seems to transport her." srcset="img/siudmak2-400.jpg 660w, img/siudmak2-700.jpg 1440w" src="img/siudmak2.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A Wojtek Siudmak painting. Siudmak was well known in France in the eighties and nineties for his covers of the Folio SF pocket editions. | <small><a href="img/siudmak2.jpg">Full size</a></small></figcaption> </figure><p>In the mid nineties mangas started to get bigger editors and distributors, and like a lot of kids of my generation, I grew up with Dragon Ball, but also Gunnm and Akira.</p>
<figure><picture><source type="image/webp" srcset="img/gally-400.webp 660w, img/gally-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Gally, a cyborg women, represented in her different bodies, from childhood to adulthood." srcset="img/gally-400.jpg 660w, img/gally-700.jpg 1440w" src="img/gally.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Yukito Kishiro's Gunnm was an exploration of the concept humanity at the age of cyborgs through its main character Gally, who changed bodies at different moments of her life. The physicality of Gally was also a huge influence on me. | <small><a href="img/gally.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/akira-400.webp 660w, img/akira-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A gigantic and dark explosion that looks like a black hole is engulfing a megalopolis, completely destroying it." srcset="img/akira-400.jpg 660w, img/akira-700.jpg 1440w" src="img/akira.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Katsuhiro Ōtomo's Akira, one of the most influential and visually impressive comics ever draw. The animated movie animation is also a masterpiece. | <small><a href="img/akira.jpg">Full size</a></small></figcaption> </figure><p>Around 2000, new and more obscure series started to appear, and among them I discovered BLAME!, which still remains the biggest artistic shock of my life.</p>
<figure><picture><source type="image/webp" srcset="img/blame-1-400.webp 660w, img/blame-1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A giant face is incrusted in a giant building, several pipes connecting it to the structure. In front of it, two robot knights guards." srcset="img/blame-1-400.jpg 660w, img/blame-1-700.jpg 1440w" src="img/blame-1.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Tsutomu Nihei's BLAME! manga. | <small><a href="img/blame-1.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/blame-2-400.webp 660w, img/blame-2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="" srcset="img/blame-2-400.jpg 660w, img/blame-2-700.jpg 1440w" src="img/blame-2.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Tsutomu Nihei's BLAME! manga. | <small><a href="img/blame-2.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/blame-3-400.webp 660w, img/blame-3-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="" srcset="img/blame-3-400.jpg 660w, img/blame-3-700.jpg 1440w" src="img/blame-3.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Tsutomu Nihei's BLAME! manga. | <small><a href="img/blame-3.jpg">Full size</a></small></figcaption> </figure><p>It's obvious in retrospective how BLAME! united several things I already enjoyed into a package made for me. It's a manga ; in black and white ; a science fiction story lasting thousands of years ; it tackles with immortality, a topic that fascinates me ; its landscapes are both realistic and surrealist in the painterly sense ; its creatures are fantastic and gross ; its graphic style is rough ; and most of all, it's contemplative, silent, melancholic, and Sublime.</p>
<p>All those influences were not really conscious at the time. I wasn't able of analyzing and identify what I actually liked about them from an artistic point. I had zero education around art, nor critical thinking. All I knew was that I enjoyed all that.</p>
<p>As a teenager, outside of uninspired doodles copying what I liked and done during math classes, there was nothing of notice to remember. I was starting to do some world building in my head, but could not get the reflex to actually dedicate time to it, too occupied to play video games.</p>
<p>Art was always an afterthought, a dreamy escape from the annoyance of high school life in the pre-smartphone era.</p>
<p>That changed a year later, after I graduated from high school.</p>
Kaku2021-11-12T16:47:35+01:00kaku<h1 id="kaku" >Kaku 書く<a href="#kaku" aria-label="Kaku 書く permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Kaku 書く (write) is my own markup language. It's inspired by Markdown with a few modification for quotes, links, images and lists handling. It was created to fit my needs and is currently used on this website.</p>
<h2 id="purpose-and-mission" >Purpose and mission<a href="#purpose-and-mission" aria-label="Purpose and mission permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Kaku was created as a replacement for Markdown in my own projects. There are two main reasons for its creation:</p>
<ol><li>I don't like some syntax choices of Markdown, for example the use of of square brackets both for images and links.</li>
<li>Markdown does not allow using some HTML tags like <code><span><</span>video></code>, <code><span><</span>audio></code> or <code><span><</span>dl></code>.</li></ol>
<h2 id="how-does-it-work" >How does it work?<a href="#how-does-it-work" aria-label="How does it work? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Check the syntax on the <a href="https://github.com/Thomasorus/Kaku">repository</a>. The parser exists in two branches:</p>
<ol><li>The <code>master</code> branch is the classic parser as explained below</li>
<li>The <code>responsive-lazy-images</code> is a modified version with more advanced image management, but severely opiniated so it can work with <a href="ronbun.html">Ronbun</a></li></ol>
<p>If you are new to Kaku, use the master branch!</p>
<h2 id="license" >License<a href="#license" aria-label="License permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Kaku 書く is a free to use by individuals and organizations that do not operate by capitalist principles. For more information see the <a href="https://github.com/Thomasorus/Kaku/blob/master/LICENSE">license file</a>.</p>
Ronbun2022-03-13T20:07:40+01:00ronbun<h1 id="ronbun" >Ronbun 論文<a href="#ronbun" aria-label="Ronbun 論文 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Ronbun (<em>paper</em>) is my <strong>static site generator</strong>. It's built with nodejs and uses <a href="/kaku.html">Kaku</a> as a markup language and imagemagick on the server to process images. It also process time tracking and presents it<a href="time.html">as graphics</a>.</p>
<p>Ronbun uses a single file as a source of content and a text file for time recordings. It parses files and generates HTML using a template. Ronbun and the <a href="kaku.html">Kaku</a> parser try as much as possible to provide light and accessible pages by using <a href="html-tips.html">standard HTML techniques</a>.</p>
<p>Ronbun was created as a self discovery project following my <a href="tools.html">philosophy</a> about personal projects.</p>
<p>Ronbun's repo is on <a href="https://github.com/Thomasorus/Ronbun">github</a>.</p>
<p>Next features:</p>
<ol><li>Add sitemap</li></ol>
<p>Global goals:</p>
<ol><li>Provide more stats on the tracker</li>
<li>Full rewrite in a more generally available language (C, Python...)</li></ol>
Kantan2021-11-12T16:47:35+01:00kantan<p>Kantan 簡単</p>
<p>Kantan 簡単 (simple, easy) is a bash script that launches a web server, watch files and launch build commands on file change. The goal is to be able to install and configure a web development environment in a few minutes without relying on external package managers or heavy builders.</p>
<p>Kantan's repo is on <a href="https://github.com/Thomasorus/Kantan">Github</a></p>
Moyo2022-02-04T15:15:56+01:00moyo<h1 id="moy" >Moyō 模様<a href="#moy" aria-label="Moyō 模様 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Moyō 模様 (pattern) is a collection of patterns in CSS I use for my websites. Most of them were created as the months passed and I tweaked them for my <a href="time.html">time tracker</a> tool.</p>
<h2 id="about-the-current-color-keyword" >About the <code>currentColor</code> keyword<a href="#about-the-current-color-keyword" aria-label="About the <code>currentColor</code> keyword permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You will often see the <code>currentColor</code> value used in SVG patterns. <code>currentColor</code> is a not very known keyword that acts as a variable. It takes the <code>color</code> value of the current element and if it doesn't exist, the parent element.</p>
<p>It's important if you use themes for your website. For example on this website, I use two variables for the light and dark themes and the <code>prefers-color-scheme</code> mediaquery to activate the theme based on the user operating system preference.</p>
<p>By default text is black and background is white:</p>
<pre><code>:root {
--text: black;
--background: white;
}
</code></pre>
<p>And the opposite for dark theme:</p>
<pre><code>@media (prefers-color-scheme: dark) {
:root {
--text: white;
--background: black;
}
}
</code></pre>
<p>So in the first case, <code>currentColor</code> will be <code>white</code> and in the second case it will be <code>black</code>.</p>
<p>Using <code>currentColor</code> instead of directly reusing the <code>var(--myValue)</code> syntax allows the SVG patterns to be portable and agnostic. It's the same for the <code>transparent</code> keyword, as it allows a part of the pattern to use the color used in the background.</p>
<h2 id="demo-using-svg" >Demo using SVG<a href="#demo-using-svg" aria-label="Demo using SVG permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<div class="svg-demo">
<div><em>#checks</em><svg height="100" width="100"><rect style="fill: url(#checks);" height="100%" width="100%"></rect></svg></div><div><em>#checks-diagonal</em><svg height="100" width="100"><rect style="fill: url(#checks-diagonal);" height="100%" width="100%"></rect></svg></div><div><em>#grid</em><svg height="100" width="100"><rect style="fill: url(#grid);" height="100%" width="100%"></rect></svg></div><div><em>#grid-medium</em><svg height="100" width="100"><rect style="fill: url(#grid-medium);" height="100%" width="100%"></rect></svg></div><div><em>#cross-dots</em><svg height="100" width="100"><rect style="fill: url(#cross-dots);" height="100%" width="100%"></rect></svg></div><div><em>#vertical-lines</em><svg height="100" width="100"><rect style="fill: url(#vertical-lines);" height="100%" width="100%"></rect></svg></div><div><em>#horizontal-lines</em><svg height="100" width="100"><rect style="fill: url(#horizontal-lines);" height="100%" width="100%"></rect></svg></div><div><em>#diagonal-lines-left</em><svg height="100" width="100"><rect style="fill: url(#diagonal-lines-left);" height="100%" width="100%"></rect></svg></div><div><em>#diagonal-lines-right</em><svg height="100" width="100"><rect style="fill: url(#diagonal-lines-right);" height="100%" width="100%"></rect></svg></div><div><em>#vertical-stripes</em><svg height="100" width="100"><rect style="fill: url(#vertical-stripes);" height="100%" width="100%"></rect></svg></div><div><em>#horizontal-stripes</em><svg height="100" width="100"><rect style="fill: url(#horizontal-stripes);" height="100%" width="100%"></rect></svg></div><div><em>#diagonal-stripes-left</em><svg height="100" width="100"><rect style="fill: url(#diagonal-stripes-left);" height="100%" width="100%"></rect></svg></div><div><em>#diagonal-stripes-right</em><svg height="100" width="100"><rect style="fill: url(#diagonal-stripes-right);" height="100%" width="100%"></rect></svg></div><div><em>#double-diagonal-stripes</em><svg height="100" width="100"><rect style="fill: url(#double-diagonal-stripes);" height="100%" width="100%"></rect></svg></div><div><em>#zig-zag</em><svg height="100" width="100"><rect style="fill: url(#zig-zag);" height="100%" width="100%"></rect></svg></div><div><em>#zig-zag-3d</em><svg height="100" width="100"><rect style="fill: url(#zig-zag-3d);" height="100%" width="100%"></rect></svg></div><div><em>#triangles</em><svg height="100" width="100"><rect style="fill: url(#triangles);" height="100%" width="100%"></rect></svg></div><div><em>#quarter-circles</em><svg height="100" width="100"><rect style="fill: url(#quarter-circles);" height="100%" width="100%"></rect></svg></div><div><em>#seigaiha</em><svg height="100" width="100"><rect style="fill: url(#seigaiha);" height="100%" width="100%"></rect></svg></div><div><em>#wave</em><svg height="100" width="100"><rect style="fill: url(#wave);" height="100%" width="100%"></rect></svg></div><div><em>#yinyang</em><svg height="100" width="100"><rect style="fill: url(#yinyang);" height="100%" width="100%"></rect></svg></div><div><em>#circles-small</em><svg height="100" width="100"><rect style="fill: url(#circles-small);" height="100%" width="100%"></rect></svg></div><div><em>#circles-medium</em><svg height="100" width="100"><rect style="fill: url(#circles-medium);" height="100%" width="100%"></rect></svg></div><div><em>#circles-large</em><svg height="100" width="100"><rect style="fill: url(#circles-large);" height="100%" width="100%"></rect></svg></div><div><em>#stars</em><svg height="100" width="100"><rect style="fill: url(#stars);" height="100%" width="100%"></rect></svg></div><div><em>#squares</em><svg height="100" width="100"><rect style="fill: url(#squares);" height="100%" width="100%"></rect></svg></div><div><em>#paper</em><svg height="100" width="100"><rect style="fill: url(#paper);" height="100%" width="100%"></rect></svg></div><div><em>#cubes</em><svg height="100" width="100"><rect style="fill: url(#cubes);" height="100%" width="100%"></rect></svg></div>Chisai2023-03-03T17:22:26+01:00chisai<h1 id="ch-sai-is-a-small-website-generator-editable-and-hosted-on-github-with-automatic-deployment" >Chīsai is a small website generator, editable and hosted on github, with automatic deployment<a href="#ch-sai-is-a-small-website-generator-editable-and-hosted-on-github-with-automatic-deployment" aria-label="Chīsai is a small website generator, editable and hosted on github, with automatic deployment permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<figure><picture><source type="image/webp" srcset="img/chisai-400.webp 660w, img/chisai-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Chīsai is a small website generator, editable and hosted on github, with automatic deployment" srcset="img/chisai-400.png 660w, img/chisai-700.png 1440w" src="img/chisai.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/chisai.png">Full size</a></small></figcaption> </figure>
<h2 id="purpose-and-mission" >Purpose and mission<a href="#purpose-and-mission" aria-label="Purpose and mission permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Chīsai is aimed at empowering people who need a free solution to have their own small space on the internet without falling into the CMS install and maintenance crazyness. All content is in markdown files, in folders, and the user can edit, upload images and host on github.</p>
<p>Chīsai answers three very important things for me when it comes to websites:</p>
<ol><li>It should be easy to modify by someone else</li>
<li>It should be durable and long lasting</li>
<li>Each person should own the code of its website</li></ol>
<h2 id="how-does-it-work" >How does it work?<a href="#how-does-it-work" aria-label="How does it work? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You can see a demo <a href="https://thomasorus.github.io/Chisai/">here</a>. It's quite simple:</p>
<ul><li>Each section is a folder with files named as the dates of their publication.</li>
<li>Each section has it's parent page that regroups all the files inside.</li>
<li>All sections 5 latest entries are regrouped on the home page with a link to see the full content.</li>
<li>Content is edited using the Markdown syntax.</li>
<li>The content (create folders, files, edit files) is edited directly on github</li>
<li>Using github pages and github actions, the site is served and rebuild on each change, making it free to host.</li></ul>
<h2 id="how-to-use-it" >How to use it?<a href="#how-to-use-it" aria-label="How to use it? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>See the <a href="https://github.com/Thomasorus/Chisai/wiki">wiki</a> for extensive guides for everything.</p>
<h2 id="technical-stuff" >Technical stuff<a href="#technical-stuff" aria-label="Technical stuff permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Chīsai main build script <a href="https://github.com/Thomasorus/Chisai/blob/master/src/build.py">is less than 400 lines of Python</a>. It uses a local version of <a href="https://github.com/lepture/mistune">Mistune</a> to parse Markdown, making it independant from any third party script.</p>
<h2 id="who-can-use-it" >Who can use it?<a href="#who-can-use-it" aria-label="Who can use it? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Chīsai is a free to use by individuals and organizations that do not operate by capitalist principles. For more information see the <a href="https://github.com/Thomasorus/Chisai/blob/master/LICENSE">license file</a>.</p>
Ryukoryuko<h1 id="ry-k" >Ryūkō 流行<a href="#ry-k" aria-label="Ryūkō 流行 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Ryūkō is my design system, currently powering this website. It was created as a way to organize and reuse design elements.</p>
Design tokensdesign-tokens<h1 id="design-tokens" >Design tokens<a href="#design-tokens" aria-label="Design tokens permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Design tokens are single units of design reusable in several parts of the website. They can be spaces, font sizes, lines, colors, font families. Basically, if it can't be divided into a smaller unit, it's probably a design token.</p>
<h2 id="fonts" >Fonts<a href="#fonts" aria-label="Fonts permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<div>
<p style="font-family: 'Editorial New Regular'; font-size:20px;">Editorial New Regular is for titles.</p>
<p style="font-family: 'Inter var';">Inter is the default font for most texts.</p>
<p style="font-family: 'IBM Plex Mono';">IBM Plex Mono is for code blocks.</p>
</div><h2 id="spacings" >Spacings<a href="#spacings" aria-label="Spacings permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Spacings are used to determine space between elements. They can be used both in CSS margins and paddings.</p>
<div style="padding:var(--margin-l); border:1px solid black;">
This is a large margin/padding
</div><div style="padding:var(--margin-s); border:1px solid black;">
This is a small margin/padding
</div><h2 id="animations" >Animations<a href="#animations" aria-label="Animations permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Animations are used either to convey information or for styling reasons.</p>
<p class="glitch-text" style="text-transform: uppercase; font-size: 20px; whitespace:nowrap;" data-text="Glitch effect">Glitch effect</p><p>The glitch effect is used on the website title. Its goal is to provide a feeling of strangeness and discomfort that contrasts with the slick design of the website.</p>
<h2 id="border-radius" >Border Radius<a href="#border-radius" aria-label="Border Radius permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Two styles of rounded corners, used mainly on buttons and forms.</p>
<div>
<span style="border-radius: var(--radius-sm); padding:10px; margin:10px; border:1px solid;">Radius small</span>
<span style="border-radius: var(--radius-md); padding:10px; margin:10px; border:1px solid;">Radius medium</span>
</div><h2 id="colors" >Colors<a href="#colors" aria-label="Colors permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Colors are used for specific content of pages in correlation with black and white. They are balanced using <a href="https://accessiblepalette.com/?lightness=97,93,85,79,63,54,48,32,14,8&db3000=0,-8&ffd500=0,-6&86d5a9=0,0&4b3bde=0,0&ffadc9=0,0&808080=0,0">the accessible palette tool</a> to ensure they have the consistent lightness and contrast.</p>
<ul><li>Teal is for projects</li>
<li>Yellow is for journal</li>
<li>Red is for the portfolio</li>
<li>Blue is for knowledge</li>
<li>Purple and pink are for personal</li></ul>
<p>Colors should not be mixed in unrelated categories. Only the home page is allowed to use different colors. Colors are defined as custom elements in CSS using hex codes, as HSL format cannot be used in SVG files.</p>
<div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--black); height:20px; width:20px;"></div><code>--black: #000000;</code>
</div><div style="display:flex; align-items:center;">
<div style="background-color: var(--white); height:20px; width:20px; border:1px dotted black;"></div><code>--white: #ffffff;</code>
</div><div style="display:flex; align-items:center;">
<div style="background-color: var(--grey); height:20px; width:20px;"></div><code>--grey: #eeeeee; </code>
</div><div style="display:flex; align-items:center;">
<div style="background-color: var(--grey-dark); height:20px; width:20px;"></div><code>--grey-dark: #aaaaaa;</code>
</div><div style="display:flex; align-items:center;">
<div style="background-color: var(--grey-darker); height:20px; width:20px;"></div><code>--grey-darker: #555555;</code>
</div><div style="display:flex; align-items:center;">
<div style="background-color: var(--grey-pitchblack); height:20px; width:20px;"></div><code>--grey-pitchblack: #222222;</code>
</div>
</div><div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--yellow); height:20px; width:20px;"></div><code>--yellow: #f2d336;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--yellow-dark); height:20px; width:20px;"></div><code>--yellow-dark: #dfc130;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--yellow-darker); height:20px; width:20px;"></div><code>--yellow-darker: #98841f;</code>
</div>
</div><div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--teal); height:20px; width:20px; border:1px dotted black;"></div><code>--teal: #70eba7;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--teal-dark); height:20px; width:20px;"></div><code>--teal-dark: #5fc88f;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--teal-darker); height:20px; width:20px;"></div><code>--teal-darker: #479e6d;</code>
</div>
</div>
<div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--pink); height:20px; width:20px;"></div>
<code>--pink: #ffadc9;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--pink-dark); height:20px; width:20px;"></div>
<code>--pink-dark: #ff85ad;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--pink-darker); height:20px; width:20px;"></div><code>--pink-darker: #d6245f;</code>
</div>
</div><div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--blue); height:20px; width:20px;">
</div><code>--blue: #f37149;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--blue-dark); height:20px; width:20px;"></div>
<code>--blue-dark: #dd5d36;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--blue-darker); height:20px; width:20px;"></div>
<code>--blue-darker: #c93d13;</code>
</div>
</div><div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--red); height:20px; width:20px;"></div>
<code>--red: #9094fe;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--red-dark); height:20px; width:20px;"></div>
<code>--red-dark: #767aef;</code>
</div>
<div style="display:flex; align-items:center;">
<div style="background-color: var(--red-darker); height:20px; width:20px;"></div>
<code>--red-darker: #595fd9;</code>
</div>
</div>
<h2 id="themes" >Themes<a href="#themes" aria-label="Themes permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Themes are how colors are organized and used semantically. New custom properties are used to determine which colors take which role depending of the parent class. The custom properties names are:</p>
<ul><li>--text</li>
<li>--background</li>
<li>--accent</li>
<li>--background-dark</li>
<li>--border</li></ul>
<div class="portfolio">
<aside><p>Side note</p> .portfolio parent class </aside>
</div>
<div class="projects">
<aside><p>Side note</p> .projects parent class </aside>
</div>
<div class="journal">
<aside><p>Side note</p> .journal parent class </aside>
</div>
<div class="knowledge">
<aside><p>Side note</p> .knowledge parent class </aside>
</div>
<div class="about">
<aside><p>Side note</p> .about parent class </aside>
</div>
<h2 id="icons" >Icons<a href="#icons" aria-label="Icons permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Each section of the website has its own icon illustrating its content. All icons are organized following these rules:</p>
<ul><li>color is the individual</li>
<li>white is the unknow</li>
<li>black is the action</li></ul>
<p>All icons consume colors defined in the themes.</p>
<svg class="project-icon" height="300" viewBox="-10 0 501.94 520.22">
<polygon class="projects-icon__1" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--border)" points="145 111.18 345 11.18 245 211.18 45 311.18 145 111.18" />
<polygon class="projects-icon__2" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--border)" points="5 11.18 255 61.18 205 211.18 5 311.18 5 11.18" />
<polygon class="projects-icon__3" fill="var(--text)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--text)" points="65 81.18 165 81.18 265 281.18 65 181.18 65 81.18" />
<polygon class="projects-icon__4" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--accent)" points="425 411.18 225 511.18 275 261.18 475 261.18 425 411.18" />
<circle fill="var(--text)" class="projects-icon__5" cx="385" cy="201.18" r="25" />
</svg><svg class="knowledge-icon" height="300" viewBox="0 0 520 510">
<rect class="knowledge-icon__1" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" x="5" y="5" width="300" height="300"/>
<rect class="knowledge-icon__2" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" x="215" y="205" width="300" height="300"/>
<circle stroke="var(--accent)" cx="385" cy="385" r="50" fill="var(--accent)"/>
<polygon class="knowledge-icon__3" fill="var(--text)" points="55 485 105 335 255 285 255 485 55 485"/>
<polygon class="knowledge-icon__4" fill="var(--border)" points="45 65 245 165 245 265 45 365 45 65"/>
</svg><svg class="portfolio-icon" height="300" viewBox="-20 0 470 425">
<circle fill="var(--border)" cx="180" cy="400" r="25"/>
<polygon class="portfolio-icon__1" fill="var(--text)" points="100 100 300 0 200 200 0 300 100 100"/>
<circle class="portfolio-icon__2" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" cx="360" cy="170" r="75"/>
<rect fill="var(--text)" x="110" y="160" width="100" height="100"/>
<rect class="portfolio-icon__2" fill="var(--border)" x="40" y="90" width="200" height="200"/>
</svg><svg class="journal-icon" height="300" viewBox="0 -100 550 550">
<polygon class="journal-icon__2" fill="var(--border)" points="400 360 250 410 200 160 450 210 400 360"/>
<polygon class="journal-icon__1" fill="var(--text)" points="0 0 250 50 300 300 100 200 0 0"/>
<circle fill="none" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" cx="310" cy="370" r="75"/>
</svg>
<svg class="journal-icon" height="300" viewBox="-20 0 443.09 464.04">
<polygon fill="none" fill="none" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" points="35 109.04 235 9.04 185 259.04 35 209.04 35 109.04"/>
<polygon fill="none" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" points="415 459.04 115 459.04 165 209.04 315 259.04 415 459.04"/>
<circle fill="var(--text)" cx="75" cy="159.04" r="75"/>
<circle class="about-icon__1" fill="var(--accent)" cx="75" cy="179.04" r="25"/>
<circle class="about-icon__2" fill="var(--accent)" cx="75" cy="309.04" r="50"/></svg><style>
article > svg {
margin: 30px;
}
</style>Bas Gros Poing2023-03-03T17:22:26+01:00bas-gros-poing<h1 id="bas-gros-poing-is-a-website-and-podcast-dedicated-to-fighting-games" >Bas Gros Poing is a website and podcast dedicated to fighting games<a href="#bas-gros-poing-is-a-website-and-podcast-dedicated-to-fighting-games" aria-label="Bas Gros Poing is a website and podcast dedicated to fighting games permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<figure><picture><source type="image/webp" srcset="img/bgp-400.webp 660w, img/bgp-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Bas Gros Poing Logo" srcset="img/bgp-400.png 660w, img/bgp-700.png 1440w" src="img/bgp.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/bgp.png">Full size</a></small></figcaption> </figure><p>Bas Gros Poing was created in 2009 as a podcast to talk about fighting games. The goal at the time was to educate a new crowd of fighting game fans that just joined the community with the release of Street Fighter 4.</p>
<p>It was the first niche boom of podcast in France, and we still were in the blog frenzy, so Bas Gros Poing also became a blog. A logo was made, news and analysis were written, the team grew and at its peak, Bas Gros Poing had several thousands visitors each day.</p>
<p>The project was halted around 2014, and relaunched in 2017. Several people came to help, with the initial core team still present for podcasts recordings.</p>
<ul><li><a href="https://basgrospoing.fr/">Bas Gros Poing</a></li>
<li><a href="https://twitter.com/basgrospoing">Twitter Account</a></li>
<li><a href="https://patreon.com/basgrospoing">Patreon Account</a></li></ul>
Les Tauliers2023-03-03T17:22:26+01:00les-tauliers<h1 id="les-tauliers-is-a-sarcastic-podcast-avec-video-games" >Les Tauliers is a sarcastic podcast avec video games<a href="#les-tauliers-is-a-sarcastic-podcast-avec-video-games" aria-label="Les Tauliers is a sarcastic podcast avec video games permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<figure><picture><source type="image/webp" srcset="img/lestauliers-400.webp 660w, img/lestauliers-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Logo for the podcast Les Tauliers" srcset="img/lestauliers-400.png 660w, img/lestauliers-700.png 1440w" src="img/lestauliers.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/lestauliers.png">Full size</a></small></figcaption> </figure><p>Les Tauliers (French for <em>The owners</em>, referencing that most members were or are magazines or websites directors) is a podcast dedicated video games. It's one of the longest running French podcast still existing today. It has the reputation of being extremely sarcastic, rude, with a borderline sense of humor and is therefore not for everyone.</p>
<p>It was created by <a href="http://www.yannrieder.com/">Yann Rieder</a> and <a href="https://foxmonsieur.com/">Franck Extanasié</a> in 2011, to gather some old guards from the video game press. I was invited several time to talk about fighting games, and joined definitely in 2020.</p>
<p>Visit the <a href="https://lestauliers.com/">official website</a>.</p>
Art Eater2023-03-03T17:22:26+01:00art-eater<h1 id="art-eater-provides-in-depth-discussion-about-visual-art-in-contemporary-culture" >Art Eater provides in depth discussion about visual art in contemporary culture<a href="#art-eater-provides-in-depth-discussion-about-visual-art-in-contemporary-culture" aria-label="Art Eater provides in depth discussion about visual art in contemporary culture permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<figure><picture><source type="image/webp" srcset="img/arteater-400.webp 660w, img/arteater-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Logo for the Art Eater Project" srcset="img/arteater-400.jpg 660w, img/arteater-700.jpg 1440w" src="img/arteater.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="img/arteater.jpg">Full size</a></small></figcaption> </figure><p>Art Eater was initially the personal blog of <a href="https://twitter.com/Richmond_Lee">Richmond Lee</a>, where he published posts about animation and cultural influences in video games. He was well known for his article about <a href="https://art-eater.com/articles/darkstalkers-and-the-twelve-principles-of-animation">the animation of Darkstalkers</a>, or his series "<a href="https://art-eater.com/articles/a-buddhist-s-guide-to-asura-s-wrath-part-1-buddhist-cyborgs-and-the-story-of-the-asura">Buddhist's Guide to Asura's Wrath</a>".</p>
<p>After a few years of blogging Richmond got caught up by life and lacked time to continue. The website also started to decay due to lack of updates, and in the end disappeared from the internet.</p>
<p>Art Eater was one of my favorite websites ever, so I contacted Richmond and proposed to redo the website for free, because <em>it has to be on the internet</em>. We dug into Richmond's archives, the Archive.org Web Machine, and managed to salvage almost everything.</p>
<p>The website was back online in 2020, ten years after its initial release. The crew also grew, with a podcast covering multiple subjects. It's now a very active project for which I act as the webmaster and a guest member.</p>
<p>Visit the <a href="https://art-eater.com/">Art Eater website</a>.</p>
Tracking2021-11-12T16:47:36+01:00tracking<h1 id="tracking" >Tracking<a href="#tracking" aria-label="Tracking permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I track <a href="time.html">time</a> spent on my hobbies. First I hated the idea. I saw it as self-surveillance, as an intrusion of accounting and management in my personal space where precisely, you don't count your time.</p>
<p>After two months I realized I had the wrong feeling. Tracking hours has become a tool for self-discovery. It allows me to take a huge step back and to be more careful about my well-being. It also helps making connections between what I do and what I feel every day.</p>
<p>For example, for the first two months of 2020 I spent around 70 hours on personal projects. It's 7.8 hours a week, which means I overall worked a day more each week on personal stuff. It made me realize I was on the wrong path to accomplish one of my goals, which is to be less productive and more creative.</p>
<p>For people like me who wonders where their free time disappears, tracking time helps. My advice however, is to find a personal way of tracking time instead of using apps, bullet journals or stuff related to productivity. Finding your own way of tracking your own time is also part of the self-discovery thing.</p>
<p>To me tracking time doesn't mean trying to be more productive, but the opposite.</p>
20192021-11-12T16:47:36+01:002019<h1 id="2019-overview" >2019 Overview<a href="#2019-overview" aria-label="2019 Overview permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<h2 id="readings-of-2019" >Readings of 2019<a href="#readings-of-2019" aria-label="Readings of 2019 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>All the things I read in 2019.</p>
<code>...</code> Means the series is still ongoing but that I started it in 2019<h3 id="novels" >Novels<a href="#novels" aria-label="Novels permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>The Remembrance of Earth's Past trilogy - Liu Cixin</li>
<li>The unfathomable depth of loneliness - Hao Jinfang</li>
<li>The Book of the New Sun Vol.1 - Gene Wolf</li>
<li>Viking Mythology - Neil Gamain</li></ul>
<h3 id="mangas" >Mangas<a href="#mangas" aria-label="Mangas permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Beastars...</li>
<li>Vinland Saga...</li>
<li>Kingdom...</li>
<li>Yagate Kimi ni Naru (Bloom into You)</li>
<li>Shamo</li>
<li>Sun Ken Rock</li>
<li>Kusuriya no Hitorigoto...</li>
<li>Goblin Slayer...</li>
<li>Blame! (reprint)</li>
<li>Aposimz...</li>
<li>No gun's life...</li>
<li>At the Mountains of Madness (Lovecraft by Gou Tanabe)</li>
<li>In the abyss of time (Lovecraft by Gou Tanabe)</li>
<li>Shishunki Renaissance! David-kun</li>
<li>Gunnm (reprint)</li>
<li>Gunnm Last Order</li>
<li>Gunnm: Mars Chronicles...</li>
<li>Blue Giant</li>
<li>Saltiness</li></ul>
<h3 id="comics" >Comics<a href="#comics" aria-label="Comics permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Shangri La</li>
<li>Mécanique Céleste</li></ul>
<h3 id="art-books" >Art books<a href="#art-books" aria-label="Art books permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Gustave Doré (Catalogue d'exposition Gustave Doré - Musée d'Orsay)</li>
<li>Katsuya Terrada Real Size</li></ul>
<h3 id="magazines" >Magazines<a href="#magazines" aria-label="Magazines permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>L'étiquette 1 & 2</li>
<li>Atom Magazine</li></ul>
<h3 id="notable-articles" >Notable articles<a href="#notable-articles" aria-label="Notable articles permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li><a href="https://www.newyorker.com/magazine/2019/12/16/how-william-gibson-keeps-his-science-fiction-real">How William Gibson Keeps His Science Fiction Real</a></li>
<li><a href="http://paulgraham.com/genius.html">The Bus Ticket Theory of Genius</a></li>
<li><a href="http://www.slate.fr/story/184164/boulangeries-guerre-culturelle-pain-adieu-baguette-disparition-petit-commerce">La France du pain est coupée en deux</a></li>
<li><a href="https://www.nytimes.com/interactive/2019/11/16/world/asia/china-xinjiang-documents.html">Absolutely No Mercy: Leaked Files Expose How China Organized Mass Detentions of Muslims</a></li>
<li><a href="https://www.forbes.com/sites/johnkoetsier/2019/09/02/hong-kong-protestors-using-mesh-messaging-app-china-cant-block-usage-up-3685/">Hong Kong Protestors Using Mesh Messaging App China Can't Block</a></li>
<li><a href="https://matthiasott.com/articles/into-the-personal-website-verse">Into the Personal-Website-Verse</a></li>
<li><a href="https://www.gamekult.com/actualite/une-petite-histoire-du-jeu-de-baston-en-dix-morceaux-3050819125.html">Une petite histoire du jeu de baston en dix morceaux</a></li>
<li><a href="https://www.newyorker.com/magazine/2019/04/08/the-day-the-dinosaurs-died">The Day the Dinosaurs Died</a></li>
<li><a href="https://kotaku.com/how-biowares-anthem-went-wrong-1833731964">How BioWare's Anthem Went Wrong</a></li></ul>
<h2 id="writings-of-2019" >Writings of 2019<a href="#writings-of-2019" aria-label="Writings of 2019 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>All the things I wrote in 2019.</p>
<h3 id="wrote" >Wrote<a href="#wrote" aria-label="Wrote permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li><a href="https://www.redbull.com/fr-fr/evo-2019-tournois-esport-infos">L’EVO 2019, le plus gros tournoi esport du monde</a></li>
<li><a href="https://www.redbull.com/fr-fr/lethal-league-blaze-esport">Lethal League Blaze, l’autre jeu de combat qui ne dit pas son nom</a></li>
<li><a href="https://www.redbull.com/fr-fr/samurai-shodown-esport-jeu-combat">Samurai Showdown, l’original outsider de l’esport baston</a></li>
<li><a href="https://twitter.com/Thomasorus/status/1144623832587821056">Embrasser, étendre, étouffer le podcast</a></li>
<li><a href="https://basgrospoing.fr/fr/articles/la-schizophrenie-street-fighter-iii-third-strike">La schizophrénie Street Fighter III: Third Strike</a></li>
<li><a href="https://www.redbull.com/fr-fr/mortal-kombat-pro-kompetition">Premières fatalities sur Mortal Kombat XI</a></li>
<li><a href="https://www.redbull.com/fr-fr/rza-mortal-kombat?linkId=65552039">RZA : une main de velours dans un gant de ninja</a></li></ul>
<h3 id="interviewed" >interviewed<a href="#interviewed" aria-label="interviewed permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li><a href="https://twitter.com/Vincent_Jule/status/1144341580771409921">Samurai Showdown: Le retour d'une franchise culte... et un nouvel âge d'or du jeu de combat?</a></li></ul>
<h3 id="published" >Published<a href="#published" aria-label="Published permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li><a href="https://basgrospoing.fr/fr/articles/theorie-ruissellement-jeu-de-combat-esport">Trickle-Down Economics in the FGC and E-Sports</a></li></ul>
<h3 id="played" >Played<a href="#played" aria-label="Played permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Flappy Fighter</li>
<li>Untitled Goose Game</li>
<li>Mortal Kombat XI</li>
<li>Samurai Showdown 2019</li>
<li>Apex Legends</li>
<li>Furi</li>
<li>Thumper</li>
<li>Céleste</li>
<li>Hollow Knight</li>
<li>The Red Strings Club</li>
<li>Tekken 7</li>
<li>Disco Elysium</li>
<li>A Plague Tale: Innocence</li></ul>
<h3 id="coded" >Coded<a href="#coded" aria-label="Coded permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li><a href="https://podcastouvert.fr/">Podcast Ouvert</a></li>
<li><a href="https://claviers-mecaniques.fr/">Claviers mécaniques</a> - Frontend</li>
<li><a href="https://happy-tereshkova-b21ae0.netlify.com/">Art Eater</a></li>
<li><a href="https://github.com/Thomasorus/Podcast-player">A podcast player</a></li>
<li><a href="https://github.com/Thomasorus/UI-concept-tests">Some concepts for UIs</a></li>
<li><a href="https://github.com/Thomasorus/wiki-engine">My wiki engine</a></li>
<li>A ton of interfaces at work with accessibility</li>
<li>Web components with accessibility</li></ul>
<h2 id="watched-in-2019" >Watched in 2019<a href="#watched-in-2019" aria-label="Watched in 2019 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>All the things I watched in 2019.</p>
<p>... Means the series is still ongoing but that I started it in 2019</p>
<h3 id="anime" >Anime<a href="#anime" aria-label="Anime permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Carole & Tuesday</li>
<li>Sailor Moon S1 (original show)</li></ul>
<h3 id="movies" >Movies<a href="#movies" aria-label="Movies permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Promare</li></ul>
<h3 id="documentaries" >Documentaries<a href="#documentaries" aria-label="Documentaries permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>10 years with Hayao Miyazaki</li></ul>
<h3 id="series" >Series<a href="#series" aria-label="Series permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Mindhunter</li></ul>
<h3 id="tv-shows" >Tv shows<a href="#tv-shows" aria-label="Tv shows permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Terrace House</li></ul>
<h3 id="notable-videos" >Notable videos<a href="#notable-videos" aria-label="Notable videos permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>How Mind Control Saved Oddworld: Abe's Odyssey</li>
<li>The Real Fake Cameras Of Toy Story 4</li></ul>
My ideal phone2021-11-12T16:47:36+01:00my-ideal-phone<h1 id="my-ideal-phone" >My ideal phone<a href="#my-ideal-phone" aria-label="My ideal phone permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>The advancement in do it yourself and open source electronics for phone parts made me think about what would be my ideal phone. What I'd love is a productivity phone with a touch of audio capabilities for leisure.</p>
<p>Ideally the hardware would have:</p>
<ul><li>A physical keyboard like the Blackberry phones</li>
<li>An energy efficient and readable small screen</li>
<li>A 4G antenna to allow sharing connections</li>
<li>An USB-C port for charging and data transfer</li>
<li>A headphone jack for music and microphone</li>
<li>A big storage capacity</li></ul>
<p>On the software side:</p>
<ul><li>Phone calls and texts of course</li>
<li>The ability to use contacts, calendars and notes from a third party provider instead of storing it locally</li>
<li>A podcast app with search on the Apple directory, download and play</li>
<li>A music application that can play local files but also download them from a private library</li>
<li>A few utility and productivity apps like calendar, calculator, notes, etc...</li>
<li>A few discussion apps for open source services like signal and connections</li></ul>
<p>And that's it. Not having a browser would be a huge change as I am addicted to distractions coming from it. No camera is not a huge deal as I would probably buy a dedicated camera instead. The lack of GPS could be bothersome but I don't often travel that much.</p>
The soft power of JavaScript2022-03-13T20:07:40+01:00the-soft-power-of-javascript<h1 id="the-soft-power-of-java-script" >The soft power of JavaScript<a href="#the-soft-power-of-java-script" aria-label="The soft power of JavaScript permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I've been thinking a lot about JavaScript lately. Not about the language itself but about the ecosystem, the economics and politics of it and how, like the United States movie industry or the K-pop music industry, it became a soft power tool that we're forced to consume and use.</p>
<p>I feel it works this way:</p>
<ol><li>Big Tech releases <strong>thing.js</strong> and people who worked on it promote it in conferences</li>
<li>Tech influencers see <strong>thing.js</strong> as a new revenue opportunity that may stick on the long run and start investing in it</li>
<li>They publish books, record courses, write blog posts and create a lot of noise around <strong>thing.js</strong></li>
<li>Tech leads around the world are tasked to make technical stacks decisions, they look on the internet and see there's a lot of noise surrounding <strong>thing.js</strong> and that it's a big tech product</li>
<li><strong>thing.js</strong> is now chosen as the corner stone of the stack and developers have to learn it to find jobs: they buy courses, go to boot-camps, watch videos, read blog posts, giving money to influencers</li>
<li>Rince and repeat</li></ol>
<p>To me this spiral of events narrows our ability to think outside this ecosystem. It gives us the illusion of choice (<em>React, Vue, Angular, Svelte?</em>) and simplicity (<em>just npm install!</em>) and automatically makes us mold projects to the ecosystem (<em>it's an app not a website</em>) and increases the overall complexity.</p>
<p>For this very reason and for the same project scope than a previous classic front-end tech stack, small teams then need to grow in size. Suddenly you need a dev ops for builds, a design system lead, more people to slice everything in components, you deport parts of what was usually a backend work to front-end work. But is the output and the durability of the project proportional to the number of people added to the team? I don't think it is.</p>
<figure><blockquote >But jquery was all spaghetti code and manual dom updates! MVC had ugly templates and massive, messy controllers! All this was hard to maintain and hard to evolve!</blockquote><figcaption>— Someone, somewhere</figcaption></figure><p>I know about this, having worked on a few projects of this kind. And obviously when you are big tech and have thousands of developers you need to slice everything into bits so people can work. But for us, the normal day developers in small to medium technical departments in small to big companies, what's the benefit? It's hard to compare if the <em>old way</em> of doing things made it harder to maintain and evolve the front-end of a project. But what I'm seeing right now is dozens of job offers in digital services companies for migrations of hundreds of AngularJS components into another framework to basically do the same thing.</p>
<p>Personally this whole soft power thing increases my imposter syndrome and makes me numb. Always catching up with the next big thing, I didn't asked myself for years if I actually like what I'm using or if it's justified to use it in the first place. The question is not if we should use <strong>thing.js</strong> but if <strong>other-thing.js</strong> is better.</p>
<p>I'm happy I met alternative coding scenes where people ask themselves if what they are doing is sustainable and necessary. I'm happy about what I do at least for personal projects. I know better how, why and where I want to do development in the future.</p>
<p>Of course I may be wrong about all this. But what I am sure is that this soft power ecosystem is exhausting my love for front-end work, one project at a time.</p>
<em>21/10/2020</em>I removed the computer2022-03-13T20:03:30+01:00i-removed-the-computer<h1 id="i-removed-the-computer" >I removed the computer<a href="#i-removed-the-computer" aria-label="I removed the computer permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>My family had its first computer 20 years ago. Each day I would come back from school to spend hours on it. When I turned eighteen I bought my first computer. I installed it on my desk where I usually did homeworks, and since that time a computer has always been on my desk. I coded, wrote, recorded podcasts, read, played... It didn't change during my art school years, as I had a dedicated desk to paint at school. Once I graduated, I basically stopped painting because I was fed up with art. I started many projects that were exclusively made on a computer and had a lot of fun. I thought it would be this way forever.</p>
<p>But one day, it changed.</p>
<p>Sitting at as desk never bothered me that much. It was a position where I could watch a movie, play video games or write, and feel comfortable. Five years ago I went from working in a shop, standing all day, to being a web developer, sitting all day. From this moment onward sitting at a desk felt like a <em>work position</em>. It wasn't a problem when I was doing <em>productive</em> hobbies like recording, writing or coding, but it became harder to play video games, and impossible to watch a movie or a show. Due to chronicle occipital neuralgia I can't be in a relaxed position while sitting at a desk, I need to sit straight.</p>
<p>The desire to draw and paint also came back and with it, the constant frustration of not having a dedicated space for these activities. Mixing electronics and art furniture (ink, water, giant sheets of paper) is a bad idea when you are as clumsy as I am. Cables from peripherals are on the way. When I lean to draw the screen is in my face. You can't have both in the same space unless you have a giant desk.</p>
<p>And there's this procrastination problem. When I don't feel like doing anything, I sit at my desk, and I <em>use</em> it. I refresh my feeds, I launch programs, I mindlessly seek <em>something</em> that could free me from this anxious state I'm in. Of course it never works and I sometimes leave the desk frustrated. <em>I had free time and did nothing, I didn't even relax</em> is a common feeling.</p>
<p>So today I removed the computer from my desk. It is now in the living room, under the TV, with a wireless keyboard and trackpad. I plan to use a gamepad to play, in a relaxing position, all these games I accumulated. As I needed a way to write, code and record podcasts, I bought a Raspberry Pi and took several hours to <a href="raspberry-pi.html">create a setup</a> that is both productive and limited. I can code, write and record (even if I still have sound issues). But being a 32bit ARM computer, I can't install Slack, Discord, Steam or anything else. The only source of distraction is the browser and it can barely run a 1080p video and navigate the web without struggling.</p>
<p>I hid the Raspberry Pi behind the screen, who now floats above the desk thanks to an arm support. Most importantly, it can be moved out to the side in a few seconds to regain the full depth of the desk. I installed my pencils, brushes and notebooks and hope that, in the future, if I feel the need to procrastinate, I will do it with paper instead.</p>
<p>Changing a 16 year old habit isn't easy. I don't know if that will work. I fear that the Raspberry Pi might be too limited for some of my projects, but using a more powerful computer brings the risk of more distraction. We'll see how it works.</p>
<em>15/11/2020</em>Renovation journal2022-03-13T20:03:30+01:00renovation-journal<h1 id="renovation-journal" >Renovation journal<a href="#renovation-journal" aria-label="Renovation journal permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This is the journal of my apartment renovation.</p>
<h2 id="november-16-th-2020" >November 16th 2020<a href="#november-16-th-2020" aria-label="November 16th 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>First day of renovations!</p>
<p>This day was one made for discovery. First I went to the do-it-yourself store. I bought gloves, scrappers, glue solvent, ground protection canvas, a bucket, masks and several other little things I needed to start. I spent more time in the store than I wanted and arrived mid-afternoon in the apartment.</p>
<p>I had to remove plates of polystyrene glued to the entrance and the corridor ceiling and remove the wallpaper from the entrance hall.</p>
<p>I started with the ceiling plates, removing them one by one and stuffing them inside a trash bag. The risk with the ceiling was that the glue used to stick the plates would rip off the plaster. Fortunately for me, coating was used as glue and most polystyrene plates came off easily, only leaving coated dots. I did the entrance hall and the whole corridor. Once I was finished my arms hurt.</p>
<p>To recover some strength I decided to continue with the entrance wallpapers. I pierced little holes in it with a special tool. Then I soaked the wall with a glue solvent, using a sponge. Most of the paper came off easily but some parts needed two passes. Under it, the wall is in a correct state but obviously it will need a new plaster before painting. I removed the paper from the first wall, finding my marks as I was doing it.</p>
<p>While doing this, I worried about the ceiling's coated dots. I tried to sand them but it was too hard, nothing came off. Discouraged, I took a metal scraper and a hammer and started going under. It took some trials and errors but I found a good technique: bend the scraper at 45 degrees, hammer once, then go closer to the ceiling little by little, each time hammering. This way the whole coated dots came of in one to three parts. Doing it this way added marks and little holes in the ceiling but it will be faster to re-coat the holes than sand what's there. I removed half of the dots in the entrance all this day.</p>
<p>I think I spent around 3 hours and half between the store and the work this day. I went home happy but a bit worried about the time needed to do the ceiling.</p>
<h2 id="november-17-th-2020" >November 17th 2020<a href="#november-17-th-2020" aria-label="November 17th 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Second day of work! This time I came earlier in the afternoon and continued the work in the entrance hall. I had to remove the interphone, the ring bell, an electricity box, curtains that were hiding the entrance door, as well as the curtains bar. It took a bit of time, as well as removing the paper around the door.</p>
<p>I started feeling dizzy, soaking some wall there, another one there, forgetting about scrapping the first one and having to soak it again. Overall I wasn't happy it took me so much time to do this, I felt it was supposed to go faster. I finished removing the dots from the ceiling in the entrance hall and went home exhausted with arms hurting.</p>
<h2 id="november-19-th-2020" >November 19th 2020<a href="#november-19-th-2020" aria-label="November 19th 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I didn't go to the apartment yesterday as I was sick. I arrived defeated and felt I was not going to be able to do anything. I decided to put some music to help me focus and started listening to <em>L'école du micro d'argent</em> from <strong>IAM</strong>. The <a href="https://www.youtube.com/watch?v=x4uHgwHdXOA">first song</a> starts this way:</p>
<pre><code>Assis en tailleur, voilà des heures que je médite
Sur ma montagne et je n'arrive pas à faire le vide
Je focalise sur le diaphragme, j'augmente mon énergie
Réveille la bête qui dans mon âme est tapie
</code></pre>
<p>This song gave me a burst of motivation and confidence and I decided I wasn't going let a damn ceiling dictate my life! <em>Eat that frog</em> they say, so I was going to eat this damn ceiling. I moved my stepladder in the corridor and started going hard on the coating dots while singing. It took me almost 2 hours with a few breaks to rest my harms but in the end I did it, the ceiling is now free of coating dots!</p>
<p>Feeling confident, I decided I should try removing the corridor wallpaper. I picked a little piece in my hand, pulled it and... Everything came off easily, in a single pull, without any glue solvent! The sound of wallpaper being teared off from the wall is so satisfying. The larger the piece, the deeper the sound, the most satisfaction it procures.</p>
<p>In around 30 minutes the whole corridor was wallpaper free. It felt sooooo good to see it naked! I thought I would spend two days on this, and I was already done.</p>
<p>I managed to talk with the renovation contractor to fix a date for the walls demolition. He said to me <em>is Saturday ok</em> and I answered <em>wait what this Saturday</em> and eventually that's how I learned three men were coming the day after tomorrow to smash the wall in my new apartment. Knowing how noisy it would be, I knocked to the door of all my neighbors to warn them that Saturday wasn't a good day for a morning sleep-in.</p>
<h2 id="november-20-th-2020" >November 20th 2020<a href="#november-20-th-2020" aria-label="November 20th 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This day I wasn't alone! Coralie wasn't working and came to help. We decided she would tear off some wallpaper while I was preparing the place for the contractors. She started peeling the paper in my future bedroom while I was removing electrical outlets, light switches and more wallpaper. Since the contractors are going to remove walls and then fix the walls, ceilings and grounds, I try to remove anything that would slow them down.</p>
<p>I also wrote notes on paper to warn the neighbors I could not meet. The most important one, right below my apartment, wasn't there again and stuck a note in his door basically saying <em>SORRY IT'S GONNA BE NOISY AS HELL FOR A DAY</em>. We went home and eat soba.</p>
<h2 id="november-21-th-2020" >November 21th 2020<a href="#november-21-th-2020" aria-label="November 21th 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>My alarm wakes me at 7am. I haven't woken up so early in months and I feel like sleeping more. Coralie came to check I was awake, admitting that she was very stressed by the idea of me not waking up. I took a breakfast and prepared a thermos of coffee for the contractors. A friend who renovated his house gave me some advices: be clear in your instructions, stay calm if something goes wrong, stay firm if contractors try to negotiate. And that bringing some coffee was always welcome.</p>
<p>I met them at the apartment, and they were nice folks. One of them is around 30 and the other is older, around 45 if I have to guess. We talked a bit, drank coffee, discussed the remodeling and what I was planning for the apartment. They grab a lot of tools, put blankets on the ground.</p>
<p>Then, one of them picked a hammer and started smashing on a wall. That was both frightening and super cool. Friends asked me why I didn't try it myself but I didn't want to exhaust myself as I had a lot to do today too. The second contractor started smashing the walls too. I was in the kitchen, disassembling furniture and hearing the sound of bricks, stones, plaster raining on the floor. It was quite something!</p>
<p>When they stopped I opened the kitchen door and saw... nothing. There was no wall left, only the door frame. I could see the whole living room from the kitchen. The whole thing was so spacious and luminous, it was amazing! I was relieved seeing it was as good as I hope. The contractors then started the hard work of removing the debris from the ground. They filled around then 100 litters garbage bins and took them down by the stairs. The poor guys were sweating hard. We took another coffee and discussed the result. I apologized for making them suffer like this. They said it was ok and that they were used to it.</p>
<p>Once they were done they smashed another wall. The corridor ends with a big, two meters square closet that is right next the smallest bedroom. I wanted it removed, as well as the door frames. Another door will be added at the end of the corridor.</p>
<p>Lunchtime arrived, they went to eat something and I went home. All morning I was texting photos and videos of the remodeling to Coralie and my family. I added some details in message apps, rested a little, then went back around 2pm. The contractors were, once again, filling garbage bins and taking them down by the stairs. On my side of things I managed to remove all kitchen cabinets from the walls and the ground. The previous owner was the uncle Scrooge type. To avoid buying enough metal feet for the cabinets, he only gave two to each and then fixed all the cabinets together with <em>dozens</em> of screws! It took me hours to remove them all!</p>
<p>In the middle of the afternoon the contractors were done moving debris and went to the bathroom to empty it. They removed the furniture and struggled with the tub. Meanwhile, I went to the now extended room and decided it was time to remove this ugly wood paneling. Wood paneling is often serves two purposes: first it isolates the room by creating a small space between the wood and the wall ; and secondly it hides ugly walls. It was the only unknown in the apartment.</p>
<p>And <em>oh boy</em>. As I was removing the wood panels, I discovered an ugly and humid wall, with swelling plaster all around it. The wall is basically unusable and cannot be re-plastered directly. It needs scraping, a lot of it, to go back to reach the concrete wall behind. The fake wooden floor isn't even going to the wall! There're 3 centimeters between the floor and the wall! I became super worried about the time and cost those walls were going to cost me.</p>
<p>I asked the contractors about it, and they said it was probably wiser and cheaper to clean the wall a bit then glue plasterboard. They explained some types came with an insulation layer that prevents humidity from reaching the plaster side and the painting. I phoned the company, explaining them my discovery. They took measures and then updated the invoice, which grew by a substantial margin.</p>
<p>I already knew when I started this project that <em>things don't go as planned and always cost more than you think</em>, so I wasn't that angry or stressed. Plus adding an insulation layer will reduce the heating cost so in the long run it's worth it. I asked for advice to friends and family who were in this situation before and all said the same ting: do it.</p>
<p>I went home around 6pm, showered, took the car again to get us Bò Búns. We started watching my <em>Yamada neighbors</em>, but I was so tired I went to bed in the middle. I fell asleep instantly.</p>
<h2 id="november-22-2020" >November 22 2020<a href="#november-22-2020" aria-label="November 22 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I woke up late after a strange dream where a long-time lost friend and I were kidnapping Trump and evacuating him from a location (a golden maze like mansion, very fitting) using exhaust pipes. I remember he stayed stuck inside, so we had to flush several toilets to make him go down. It was very satisfying.</p>
<p>My body was numb and painful. The day before was hard and I wasn't doing any sport before this so it was kind of logical. Got up and went to the bakery by a fresh charcoal baguette for me, buckwheat bread for Coralie and chocolate viennese for the two of us. Also bought eggs and crêpes. We had breakfast while watching The Mandalorian, then went back to the apartment.</p>
<p>Coralie was frustrated she could not help yesterday because of her handicap. She came determined to be useful and started peeling the kitchen wallpaper (she loves doing it, she says it's like removing dead skins). Meanwhile, I started removing all the electrical gutters. There were so many of them! Some of them were even empty! What happened in this place before?!</p>
<p>But removing them allowed me to make a wonderful discovery! The building is from the sixties and in this period, they didn't have ground connection. When buying an apartment of this period, it's always the lottery. I knew the kitchen and bathroom had the ground connection because that's mandatory, but I wasn't sure about the other rooms. Well turns out all of them have it!</p>
<p>The apartment is on the last floor and the previous owner used the attic to pass a ground cable from the fuse box to all the rooms. It was done poorly and cheaply, with holes in the ceilings and cables hidden in ugly plastic electrical gutters. If I'm not happy about the ugliness, I'm super happy I won't have to do it myself. Now all I have to do to make it pretty is adding hollow plinths to hide the cables. I'll also try to add gigabit Ethernet cables and sockets in each room.</p>
<p>Coralie managed to finish peeling the kitchen walls and targeted a new victim: the last bedroom. This one was frightening to us. A thick wallpaper that was repaint loosely. I managed to catch a little piece, pulled and... <em>EVERYTHING CAME IN A SINGLE SHEET</em>. Apparently the wallpaper and glue were the same as in the corridor. We removed everything in 20 minutes then went to toilets and started doing the same. Unfortunately it wasn't as easy but most of it came off nicely.</p>
<p>Finally, we discussed our discoveries of the day. When removing the wallpaper, we realized there was moisture traces on the plaster in the last bedroom. Not on all walls, only the one facing the outside. It was the same traces as the wood paneled wall. Worried, I went to the second bedroom that I thought was in correct shape. I started knocking at the walls and realized that one of them made a hollow sound. Using a flat screw diver, I dig a little in the wall and realized it had the same problem, only minimized by a second plaster coat and paint.</p>
<p>This room is oriented to the north and already had mild moisture traces in a ceiling corner. We knew this room was a bit cold and humid, because the previous owner added a controlled mechanical ventilation to the ceiling. I started asking myself if we shouldn't isolate and plasterboard all the bedroom walls facing outside. Between the first room and this one, it would probably double the initial invoice.</p>
<p>I asked my father about it, and he said I should do it. He was right to say that once we will be installed, if we feel the cold, we're not going to empty the room again to plasterboard it, and we'll end up not liking the apartment. Adding insulation will also reduce the cost of heating the rooms.</p>
<p>Right now I feel like a builder in the <em>Grand Design</em> show. In this show each time people go over budget and feel terrible about it. Fortunately for me, I knew it would happen and planned it, but it's still a shock. We'll see with the contractor tomorrow.</p>
<h2 id="november-23-2020" >November 23 2020<a href="#november-23-2020" aria-label="November 23 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Woke up early again and went to the apartment to meet with the main contractor. We made a tour and talked about the need to insulate the walls, he agreed with me it would probably be better. I also explained I needed time to check the electrical installation with a pro before positioning the plasterboard. It annoyed him a little bit, but he accepted that we postpone the rest of the renovation when I told him we could continue either in December or January as I'm not moving in until February.</p>
<p>He called an electrician he works with regularly, who accepted to meet with me tomorrow. I went back home around 10am for a video call. Once it was done I made lunch and suddenly felt super tired. I decided I should rest today and go back tomorrow. I have to make phone calls to get electricity anyway.</p>
<h2 id="november-24-2020" >November 24 2020<a href="#november-24-2020" aria-label="November 24 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I have electricity! It was quick and everything is working fine. I went to the apartment at 1pm to meet with the electrician. He was recommended to me by two persons and after seeing ground connection cables in all rooms, I felt it was going to be fine. Turns out I should not have.</p>
<p>The electrician was supposed to stay 30 minutes, he stayed more than one hour. The electricity in my apartment is a freaking mess. First, I have two electrical systems! The old one dating from construction is used for light switches and some electrical outlets. The new one, redid later, is used for the other electrical outlets. But here's the problem: all heaters are connected to the same circuit as the outlets instead of their own. Which means if a heater takes a lot of juice and other electrical items do it too, the circuit breaker will be triggered.</p>
<p>Except it might not! Because apparently the person that did the electrical box choose a too high amperage compared to the electricity consumption (the stuff he used is not even available in public store, where did he get that?!). That means that cables, who are too thin to take such a charge, would melt before the circuit breaker cuts the juice. It's the same for other parts of the apartment: the oven has excessively thin wire, the induction cooker too, and so on...</p>
<p>Considering we don't know which parts of the old system are still in use, that we can't know for sure, and that the most recent one is garbage... everything has to be redone. Of course that means more money. If I'm not running short at the moment, with the electrician and insulation bill, half of my reserves will be gone. I know it's an investment and that it will pay itself the day I sell the apartment. But this will also drastically reduce the freedom of choice for the bathroom and the kitchen, and I wanted to customize them to our needs to feel right at home. Or I can extend the budget in exchange for more freelance work? We'll see.</p>
<p>On the plus side, doing this electrical upgrade would mean a new and cleaner electrical box, displacing some light bulbs to better places, having more electrical outlets in some rooms. I also plan to work at home as much as I can in the future, so moving the modem to a more secure and accessible place as well as adding Ethernet cables to each room at the same time of electricity might be handy.</p>
<p>But the saddest part is that we probably won't be able to enter the apartment in March like we wanted. Electricity has to be done before the insulation and the electrician is a busy man. He might not be available until the end of January, and we expected to move mid-February. With the time needed to finish renovations, install the bathroom and kitchen, that means moving in April or May.</p>
<p>I brooded all afternoon after the electrician left. I spent the rest of the day cutting the paneling boards in two, so I can transport them into my car. While doing, I realized the apartment was full of light and even a little warm as the sun was passing through the windows. It felt good and reminded me why I was doing all this.</p>
<p>On the way home I went to the post office to send some paperwork, and to the bank to pay the first part of the construction workers' bill. I bought a muffin at the bakery and ate it in the sofa.</p>
<h2 id="november-25-th-2020" >November 25th 2020<a href="#november-25-th-2020" aria-label="November 25th 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today was probably the shortest time I spent in the apartment but also the most exhausting. I went there with a simple idea: remove all the mess that had accumulated. I brought a big 100 liters sturdy bin to facilitate transportation. Then I prepared Yaya (the affective nickname we give to our ugly 2005 Toyota Yaris Verso) for transportation by folding the seats under the floor. <em>My body is ready</em> I thought while I was climbing to the fourth floor.</p>
<p>Oh jeez my body was so <em>NOT</em> ready! First I charged the bin with the paneling boards. Probably overly optimistic, I put a <em>little too much</em> in and when I lifted it I remember saying "Ooooh shit" out loud. Nevertheless, I went down with this massive amount of wood in my arms, stopping every two floor. I filled Yaya with the planks, then went back up there and started again. Just the wood panels took me 4 round trips! I was so tired but it wasn't over. I also had to get the plastic gullies down, as well as steel frame parts, a gigantic roll of wallpaper and five more bags filled of wallpaper.</p>
<p>The last round trip was super painful with one of my knees making me suffer a lot, something that never happened before. Exhausted I just grabbed my jacket, went down again and unable to do anything, went back home where I showered, eat and went to sleep.</p>
<h2 id="november-26-th-2020" >November 26th 2020<a href="#november-26-th-2020" aria-label="November 26th 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Quite a busy but satisfying day! I took Yaya to the waste disposal in the morning, it took me some time, but I was happy that I had sorted everything right, a skill I sort of acquired while we emptied the family house last summer and I acted as the garbage collector!</p>
<p>With the car empty I went to the DIY store to buy some furniture: a broom, ground protection sheets, a big brush, masking tape and a humidity treatment for my walls. I went home to eat lunch and had a very hard time getting out of the sofa with my body hurting from yesterday.</p>
<p>I finally managed to go to the apartment around 3pm. My original plan was to dismantle the kitchen cabinets and charge them into the car. But once I was there, I felt a bit demotivated by the state of the apartment. It was a mess! There was broken plaster everywhere, white dust is covering the black floor, pieces of wood, electric cables and screws. It was so dirty!</p>
<p>So to regain some motivation I decided I was going to clean this place (and also because it was less exhausting). So I swept the floor for something like two hours, removing everything I could remove. I also took the time to empty the holes in the wood floor created by the absence of the walls we removed. It's in this situation I really appreciated buying working gloves. After doing the bedrooms and the bathroom I stopped to dismantle the kitchen cabinet.</p>
<p>While I was doing it I thought to myself there were in good shape and that they could be useful. I texted a friend that is almost done renovating his apartment. He was interested but had to ask his girlfriend, who is apparently a bit bothered by his habit of bringing furniture from nowhere. While I waited for his answer, I decided it was time to empty the kitchen.</p>
<p>I moved the last cabinets and the oven in the living room. Then I started unscrewing the counter-top to the wall. I was worried I would break the plasterboard it was glued to while trying to move it. As with many things in the apartment, the whole thing was so old that I could remove it easily, with glue breaking instantly.</p>
<p>The sink had been fitted inside the counter-top and the counter-top on a cupboard. My goal was to saw the extremities of the counter-top but I didn't have to: by just pressing a little the chipboard inside the counter-top broke! I was surprised but apparently the wood had rotten and was more brittle than I expected.</p>
<p>When looking inside the cupboard I finally realized how <em>old</em> all this kitchen installation was. The cupboard was customized with a small hole for the gas conduct! But the building abandoned gas more than twenty years ago! How old is this thing?! Since the gas tap was added after putting the conduct in the hole, I had to saw a part of the cupboard to then move it away from the wall.</p>
<p>I cleaned the kitchen and received a text message. It was my friend saying his girlfriend say <em>NO</em>. I'll have to move the cabinets down by myself, <em>sigh</em>. But looking at them, I thought it was probably stupid to put them into the trash, so I'll see if I can give them to a charity once the lock-down is over.</p>
<p>I was still motivated to do something, so I looked in the kitchen and thought... that I really didn't like this glass fabric on the ceiling. It's gross with, with traces of fat. The painting is flaking off when I touch it... <em>Yeah, I should remove it</em>.</p>
<p>Now with glass fabric, either you are lucky and everything comes off gently. Or you are doomed and the glue is too strong and you have to peel it. And I was super lucky! But while tearing it, all the paint started to flake off and it was suddenly <em>snowing dry paint</em> in the kitchen I just finished cleaning.</p>
<p>Once I was done I realized that there was a lot of paint and glue particles left on the ceiling and, just moving inside the room made them fall. Suddenly I was like the purple thing in Alex Norris comics saying <em>Oh no</em> out loud. So I took the broom and undertook the absolutely relaxing, not arm hurting at all task of sweeping my kitchen ceiling.</p>
<p>It took me around 20 minutes and time for cleaning afterwards. Once I was done I texted Coralie <em>How about pizza :smirk_emoji:</em> and she texted back <em>I already bought one</em>. This woman can anticipate my needs like no one.</p>
<p>So I went home, showered, fell into the sofa, ate pizza, drank a local beer made with alga (did I mention I live nearby the sea?), watched <em>Grand Design</em> on Youtube. In this episode a couple overspends while renovating a chapel. <em>Wow they're crazy</em> I thought while gluttonously eating a pizza slice.</p>
<h2 id="december-2-2020" >December 2 2020<a href="#december-2-2020" aria-label="December 2 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>It's been a few days since I went to the apartment. After the previous week and I felt extremely tired and physically broken. I decided I should rest a little bit. My plan was to go on Monday to clean the last things left as, on Tuesday, I was starting a new exciting mission at work. In my mind it was settled: after this monday, I would only work in the apartment on the weekends.</p>
<p>But I learned that my mission was postponed, which hit me harder than I thought. Then the invoice for the electrical renovation came in and it was way larger than what I expected. I asked a friend about it and he told me it was overpriced and that I should ask someone else. He gave me a number and I called. I also called the first electrician to bargain a little bit but it's not really in my nature to bargain when I don't have the keys to understand the values of things.</p>
<p>On Tuesday I was supposed to go but decided not to. I was demotivated.</p>
<p>And today on Wednesday, I finally found some motivation and went. Well most of it came from the rendez-vous with the new electrician. He seems like a nice guy, he gave good advices. He'll do his own invoice soon. What relieved me is that he can start working much sooner than the first electrician. If the invoice is in my range, I may have electricity done sooner than I envisioned!</p>
<p>After the rendez-vous I went home to eat, then came back one again in the apartment. I felt completely lost to be honest. There's so much to do I didn't know where to start. I still have some bookshelves to remove but screws are stuck. I have furniture leftovers to walk down, the charity to call for the kitchen cabinets. And so many walls in a bad state.</p>
<p>Not knowing exactly what to do, I decided I should start with the humidity traces on the walls. I picked a scraper and a hammer, and started removing plaster that had separated from the walls. I don't want the future plasterboard to be glued to volatile plaster. I brushed the walls in one of the bedroom to clean them a bit, and then sprayed a special product for humidity stains. A few minutes later I cleaned everything but some stains are still there. I'll have to redo it another time.</p>
<p>I also finally took the time to go inside the attic. It's clean and there's a kind of wool insulation everywhere. I could barely distinguish the internet fibre cable and the electrical sheaths. It probably won't be easy to pass electrical cables there.</p>
<p>My original plan was to stay a little bit more but my phone lost the internet connection. With no way to listen to music or podcasts, the cold weather even inside, and my motivation reaching new bottoms, I decided to call it a day and went home.</p>
<h2 id="december-4-2020" >December 4, 2020<a href="#december-4-2020" aria-label="December 4, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A few days ago I mailed the co-ownership syndicate to inform them I wanted to use the attic. I received a mail from them and they were a bit shocked to learn there was a ventilation and electrical system there. Looks like the previous owner never bothered to warn the other co-owners that he was using the common parts of the building to install off-standards systems for himself.</p>
<p>They agreed to my demand, so I can use the attic. But the installation has to be done by a professional, I will have to pay if we damage the insulation and if anything should happen due to my installation, it will be my responsibility.</p>
<p>Well at least that's cleared!</p>
<h2 id="december-9-2020" >December 9, 2020<a href="#december-9-2020" aria-label="December 9, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I had a hard time finding motivation all weekend and it lasted until Monday, woops. On Tuesday I had to drive Coralie to a rendezvous at the hospital in the middle of the afternoon, so no work. I took this opportunity to buy the next things I needed to continue the renovation: renovation coating, coating knifes and WD40.</p>
<p>Wednesday I went to the apartment and started renovating the entrance walls. A lot of small holes and scratches to fill if I want a flat wall to paint later. It was my first time doing the coating with knifes, so I watched youtube tutorials to understand how to do it. Fortunately, for me, it's a renovation coating, not a smoothing one. Seeing how hard it is already to just fill holes, I hope sanding will be enough to get a flat wall.</p>
<p>I spent around two and a half hours doing the entrance. It was a very enjoyable and meditative task.</p>
<p>Once done I went into the attic again. You can't walk on the floor because of the insulation. I had to go from one beam to another. I discovered a mess with abandoned cables, sheaths and electric boxes. But the biggest mess is the ventilation system, which is suspended to the beams and breathes out inside the attic! All the humidity, grease and dirt was ending there! What was the previous owner thinking?!</p>
<p>The reason I went there was to judge if I was going to pay for a new ventilation system. My initial renovation invoice had doubled with the insulation. Now with the electricity and the ventilation, it quadrupled. I had to really think about it and make a choice.</p>
<h2 id="december-11-2020" >December 11, 2020<a href="#december-11-2020" aria-label="December 11, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I was called in a hurry by my father to help him move to his new house. I arrived a bit after the movers were done and helped him setting up furniture, especially the office of my step-mother. She is an independent scenographer and needs her office quick. So we built the shelves, installed the desks, a heater, a whiteboard and several other things. It was cool doing this together and I could feel he needed help and felt a bit overwhelmed so I'm glad I cam.</p>
<p>What I'm not glad I did was badly wounding my back. I forced too much and was unable to walk correctly for one hour. After that it was impossible to bend over, I was stuck. Nevertheless, we kept going and I arrived back home at 10 pm, feeling like my body was a boulder.</p>
<p>So of course, this Friday 9, I could not do any renovation. I stayed in bed most of the day, studying the quotes. In the end I decided we should redo everything. The new electrician is the same price as the first one (whom I haven't heard of again by the way) but had better ideas on how to do all this.</p>
<p>We're going to centralize the whole electrical system inside the kitchen, as well as the internet. A specialized box will contain all the circuit breakers, the Ethernet cables, the optic fibre cable and the modem.</p>
<p>For the ventilation, we're going to remove the old system from the attic. If we were to keep using it, we would have to drill a hole and add a chimney on the roof. Instead, we'll put the ventilation engine inside the toilets, using a fake ceiling to hide it. The toilets are between the bathroom and the kitchen, and next to the building natural ventilation conduct. We're going to move the ventilation from the ceiling to the walls, connecting the three rooms together and exhaust the air through the building conduct.</p>
<p>This way there will be nothing inside the attic anymore except for the low voltage cables. I signed the quote and paid the deposit. Adil, the new electrician, will start early in January. I'm worried about the cost but relieved everything is settled now. I now have a goal, which is finishing the walls at the same time Adil finishes the electricity.</p>
<p>Once that's done, the insulation will come and the last renovations should go fast. Next steps: ordering a kitchen and drawing plans for the bathroom. I have a good feeling about the latter.</p>
<h2 id="december-14-2020" >December 14, 2020<a href="#december-14-2020" aria-label="December 14, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today I went to check the result of my coating in the entrance. And I'm glad, it's not bad! I'll have to check how it looks once it's sanded but I'm happy with the result.</p>
<p>I thought I had filled all the holes and scratches in the entrance but turns out there's more. So I spent quite some time fixing them. I went faster than before now that I have more experience. Once it was done, I went into the corridor to begin a big coating job: an interior corner.</p>
<p>The previous owner had an electric cable going there, then through a wall to power an electric heater located in the next room. I removed the cable as it's going to be replaced, but the sheath was partly inside the plaster. This interior corner being on the opposite of a wall we removed, it was kind of frail and a lot of debris came off. No choice but to fill it with a lot of coating and try to make a ninety degree corner.</p>
<p>I asked myself what I could do next and focused on preparing the kitchen walls. There was a TON of wall plugs (Is that how they are called?) and I think I spent more than half an hour removing them all. Some were so stuck I had to cut them.</p>
<h2 id="december-15-2020" >December 15, 2020<a href="#december-15-2020" aria-label="December 15, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Went to see my friend Marc to borrow two important pieces of equipment: a construction site vacuum cleaner and a giraffe sander. He was in the middle of painting a room (he's almost done renovating his own apartment) so I could not stay long. Went to the DIY store and bought glasses and a noise reduction helmet.</p>
<p>I was feeling good, so I thought <em>come on, why not start with a ceiling</em>?! I connected everything and started and <em>omagad this thing is heavy and looking at the ceiling for so long hurts my neck so much and I have less strength in my arms than I thought</em>. I had to go little by little, resting 5 to 10 minutes between each passage, but I made it! It took me around one hour I think. I'm happy with the result. This ceiling had had glass fabric before I removed it, and it left a lot of glue and paint chips. Everything is gone and outside a plaster rift I don't think I'll have a lot to do.</p>
<p>Then I went into the entrance to sand the walls I carefully coated the previous days. It... didn't go as well as I wanted. The previous owner probably put wallpaper because in some parts, the coating crackled and fell, revealing the plaster. I wanted to remove all traces of coating to have a clean plastered wall, but even the sanding machine could not remove it. The result is not that great: in some places even after sanding I have a thin thickness. I'm not sure if it will be visible once everything is painted or if I have to redo a full wall smooth coat before painting.</p>
<p>The place was a mess after all this sanding so I took some time to vacuum and clean. Overall I'm happy with all this but damn, it's going to be a long journey to sand all the ceilings and walls.</p>
<h2 id="december-16-2020" >December 16, 2020<a href="#december-16-2020" aria-label="December 16, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I originally planned to continue sanding today but my muscles were sore. We decided to go kitchen hunting with Coralie. Marc's partner Swenn explained to me they bought their kitchen at Leroy Merlin, so I proposed we went and take a look. We spent some time there checking lights, paintings, showers, and of course kitchens. I found something I really like, Coralie, not that much but she doesn't hate it. It's dark flat panels with a wood worktop and overall wood pieces there and there.</p>
<p>Seeing different styles made us realize a thing we actually don't want: cabinets going from the ground to almost the ceiling. It feels too big, it makes us suffocate. We'll try having the cabinets to go higher than 1,6 to 1,8 meters. We'll be able to put plants and bottles on top of them. We still have to really think about all this as for now, we only choose the style and not the configuration.</p>
<p>Ikea was nearby so we went there too. In the end none of the kitchens pleased me. There's something I felt for the first time: it's so easy to identify their furniture that if I took their kitchen, it would not be <em>my</em> kitchen but <em>an Ikea kitchen inside my house</em>. Maybe that's because of how mainstream the brand is now? Maybe because it's the default place everyone (including us) go? Either way, I don't want them even if they are good on the practical side.</p>
<p>We spent little time in Ikea, but it exhausted us. These shops are intentionally designed as mazes and it's incredibly taxing mentally. We got out as quick as possible and went home.</p>
<h2 id="december-17-2020" >December 17, 2020<a href="#december-17-2020" aria-label="December 17, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I was still feeling tired today and decided to not sand another ceiling. Instead I moved to the first bedroom, which is fully painted in grey. I was determined to sand the walls as it seemed to me this room was one of the easiest to deal with and I wanted a victory!</p>
<p>Surprise! I didn't get one! I started sanding and the paint would not come off the all. I know you are not supposed to totally remove it, just scratch so the new paint will stick. But these walls were badly painted and appear to have a big grain. I wanted to sand it off to have a flat surface and even with the girafe and an 60 millimeters grain, I could only scratch the surface. I also removed the plinths and discovered broken plaster everywhere. I managed to sand all the walls, brush and clean them after.</p>
<p>Then I turned my attention to this damn corridor. Again, using a cutter and a brush, I cleaned the holes and cracks. The ceiling has a lot of them, particularly because of the polystyrene plates that were glued with coat. I coated as much as I could for more than hour, then fatigue from having the arms up hit me like a truck. I think I did not more than a fifth of the corridor and it made me mad it was so slow.</p>
<p>I ended up thinking I should maybe just plasterboard the whole ceiling. I have dozens and dozens of holes to fix, plus the cracks. It's going to take me hours. I could just drive to the next DIY shop, buy a plasterboard and some glue and with the help of a friend, have it done in one to two hours. I'll think about it.</p>
<h2 id="december-19-2020" >December 19, 2020<a href="#december-19-2020" aria-label="December 19, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>My arms and back hurt so much yesterday! It felt like having ants in the hands for the whole day, so I stayed at home. Today Coralie decided to join me to finish her most favorite activity: pealing wallpaper! I'm glad she enjoys this, as I hate it.</p>
<p>We worked for around 4 hours. She managed to do almost all the kitchen, as well as the last bedroom. On my side, I started fixing the plaster at the wall's bottom in the bedroom and I sanded two days ago. It took quite some time and when I was done, I proceeded to fix the little holes and cracks in the walls. But I soon discovered that... I was NOT going to enjoy these walls if they stayed this way. So I decided to remove the paint grain by coating the entire walls with a very thin layer of plaster. I only managed to do one of the walls but I was happy with the result. Now the surface doesn't show any grain or roughness. I'll sand them with a thin grain to make sure it stays flat.</p>
<p>While Coralie was finishing her job, I went to the kitchen and finally removed the last glass wallpaper, feeing the last wall. Again, it took time as some parts were heavily glued and hard to access.</p>
<p>When we went home Coralie was satisfied but exhausted. Her back and arms hurt. She went to take a shower, I cooked dinner and she went to bed at 9am.</p>
<h2 id="december-20-2020" >December 20, 2020<a href="#december-20-2020" aria-label="December 20, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Back again today with Coralie. She was determined to finally remove all the wallpaper in the last corners of walls. She also fought her fear of heights and used the stepladder to get at the top of walls.</p>
<p>As for me, I sanded the walls in the bedroom I plastered yesterday. I used a smaller grain and it worked well, I now have a smooth wall. We went home quite early as we were tired from yesterday and wanted to have some tea.</p>
<h2 id="december-21-2020" >December 21, 2020<a href="#december-21-2020" aria-label="December 21, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today I stayed at home! I was tired and wanted to work on the kitchen plans. I think I spent something like 2 and a half hours just drawing plans and checking furniture? I'm kinda lucky overall: the kitchen is 3 meters by 3 meters and most standard furniture is 60 centimeters wide. So I know I have 5 units to chose for each wall.</p>
<p>But that's not so easy! Should I put the fridge on this side or this side? Is this dishwasher small enough to fit? In the end I'm starting to have an idea of how we'll occupy the space. I don't want a kitchen with furniture going all over the walls. I want them to be around 1,7 meters tall, add some pretty wood on top and finally some plants. But I'm still unsure we'll have enough storage if we don't add cupboards to the walls.</p>
<p>I'll have to take an appointment with a seller. Maybe there are obvious solutions I'm not seeing.</p>
<h2 id="december-22-2020" >December 22, 2020<a href="#december-22-2020" aria-label="December 22, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Alone today! I want to finish the bedroom and to do so, I inspected the paint and plaster cracks in the ceiling. First it wasn't so bad. The building is 60 years old, so of course things moved and cracked. But then I found another crack, and this one... was not a crack, it was an entire one square meter of plaster that was not glued to the wall at all. So I had to remove all of it and I'll need to re-plaster it. <strong>I'M SO SICK OF PLASTER</strong>.</p>
<p>This ceiling was full of cracks and is now full of holes. Then I sanded it and it went OK. No other major discovery outside some humidity traces but I'm not surprised, I'll treat them later.</p>
<h2 id="december-23-2020" >December 23, 2020<a href="#december-23-2020" aria-label="December 23, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Home alone again today. My friend Philippe agreed to help and will come tomorrow so instead of finishing the bedroom ceiling, I sanded the other bedroom. Ceiling, walls, everything! I also removed screws and plinths and cleaned everything. I inspected the ceiling in our future office. Some placed seemed cracked, but it was in fact paper! Finally a room with something made correctly. The previous owner applied a ready to paint wallpaper on this ceiling before painting.</p>
<p>I decided to not remove it and just fix the small holes there and there, if that's possible of course.</p>
<h2 id="december-24-2020" >December 24, 2020<a href="#december-24-2020" aria-label="December 24, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Went to the DIY store to buy more plaster, masks and cutters. Philippe joined me early in the afternoon and started to fix all the little holes and scratches in the second bedroom. As for me, I geared up again and sanded the ceiling of the bathroom. This one was easy and allowed me to check the humidity problems. Overall everything seems ok except for one corner where the bath was. I treated it with a special product and outside one or two paint cracks, I won't have a lot to do, which is a relief!</p>
<p>I moved to the office and removed screws and plinths. Once again the plaster behind the plinths is very old and breaks easily, so I'll have to fix it. I scratched it as much as I could to avoid falling pieces. Then I cleaned everything and we stopped early to go home and prepare dinner!</p>
<p>I was so happy to have help today. It's not that I mind being alone but being two, one sanding and the other plastering, makes the whole renovation project go super fast.</p>
<h2 id="december-26-2020" >December 26, 2020<a href="#december-26-2020" aria-label="December 26, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Small day! Since it's the holydays, I wanted to avoid mankind noise on a Saturday so I just went to do some plastering. I don't think I've mentioned it before but I've been listening to <em>Darknet Diaries</em> while working, an amazing podcast telling stories about hackers, penetration testing and many other things.</p>
<p>So, while listening, I plastered the holes in the first bedroom. The small ones, that are mostly paint or cracks, went ok. The big one, almost a square meter large and half a centimeter profound was super hard to work on. The bucket of plaster I bought on the 24 is almost empty and I'm not sure I made it correctly since it's hard to make a flat surface when it's so large.</p>
<p>I also treated again the mold traces there and there. They went easily in the kitchen where the plasterboard is easy to clean. It's more complicated in angles and plaster where some of them went off, but not all. I'll have to redo it again next time.</p>
<p>Went home to learn that a storm named <em>Bella</em> will hit our city tonight. Unfortunately I didn't close the shutters so I had to go back and seal everything.</p>
<h2 id="december-28-2020" >December 28, 2020<a href="#december-28-2020" aria-label="December 28, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The clock is ticking! I have the giraffe and the vacuum cleaner until January 5 so I need to get all the walls and ceilings done.</p>
<p>Today I started with the third bedroom, our future office. The fixes I did on the ceiling seemed OK. I filled all the screw holes and redid all the plaster at the bottom of walls, where the plinths were. Those plasters parts were among the most broken I've seen in the apartment and it took me around an hours to do everything in the room.</p>
<p>Then I sanded the ceiling in the second bedroom, as well as the walls. Those are the walls Philippe worked on and I was eager to see them sanded as... It makes the walls feel so clean! It's such a joy to witness walls without holes inside them, totally smooth! But still, there were some work left to do. First, some holes escaped our vigilance, so I filled them. I also redid the plaster where the old plinths were, fixed a corner and a small crack at the ceiling. I'll probably do a smoothing plaster on these walls tomorrow as they are almost ready for it.</p>
<p>I finished my day with the first bedroom and was quite relieved. Most of the plaster I added to fix cracks on the ceiling is OK. The only problem is, I did not put enough, which creates some dips. It was to be expected since some parts were almost a centimeter deep. After sanding again, I cleaned with a broom and redid plaster to achieve a flat surface. I'm not 100% sure it will be good enough, maybe I'll have other fixes to do before calling it done.</p>
<p>Overall a productive day, which quite surprisingly I spent without listening to any music or podcast. I also finally <em>got</em> the moves to work with plaster, and understood the importance of mixing it to make it more sticky and easy to work. Oh, talking about plaster, I'm almost at 15 kilograms of hole fixing plaster since I started the project. If I had know I would use so much, I would have bought a big bucket from the start.</p>
<h2 id="december-29-2020" >December 29, 2020<a href="#december-29-2020" aria-label="December 29, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I was feeling a bit weak today and decided to move forward some tasks that didn't involved wearing a mask and carrying a gigantic sanding machine. First I tried the smoothing plaster on a wall and... it went OK I guess? This plaster is way more liquid and dries super fast, making it hard to do some corrections. I tried only applying a small coat on the first wall, and a more thick one on the second. We'll see once sanded what is the result.</p>
<p>After this I moved to the living room and started enlarging the ceiling cracks. There were a lot of them but fortunately, there were no big plaster surface detached from the wood blanks that compose the basis of the ceiling. I detected two huge cracks going from one side of the room to the other and enlarged them. I'll plaster them soon.</p>
<p>Finally, I did the same in the kitchen. There was a crack that went from the window to behind the door. It was only fixed on the surface by the previous owner. I digged deeper inside it to be sure we well have enough depth so it won't crack again. The crack also went through the light location and almost all the plaster around it came off.</p>
<p>I cleaned everything while listening to the Haven soundtrack by Danger, it was super cool. I also listened to the Full Stack Radio episode with DHH talking about their new web stack, it was interesting. Tomorrow I'll go buy more filling plaster (a big bucket this time!) and will restart the sanding process.</p>
<p>December 30, 2020</p>
<p>A productive day!</p>
<p>It all started with a trip to the DIY shop, a trip that led to many interrogations. You see I've been using filling plaster for weeks now, always the same brand and type. Each time I thought <em>ok this is enough</em> and each time I had to go back and buy more. So this time I was determined to buy the <em>BIG BUCKET</em>. So I arrived at the stored, rushed straight for it and, took the bigger bucket and... it was <em>light</em>.</p>
<p>Like, incredibly lighter than the previous bucket I bought. I thought what the hell, is this a demo bucket? So I picked another. Light too. Is it a version where you have to put water in? No, it's written on it, paste plaster. I thought I was going nuts, so I weighed another bucket from another brand. This 3 kilograms bucket was heavier than this supposed 5 litters bucket. <em>WHAT IS GOING ON</em>. I thought forget about the bigger bucket, take the usual one... But there were none left.</p>
<p>Suddenly someone from the shop comes around and said "I think you have questions about plaster". So I took the bigger bucket, showed it to him and murmured <em>why is it so light I don't understand</em>. He laughs and told me it was a lighter version of the plaster. A more modern one, made of micro balls, easier to use. So I took it (it wasn't more expensive) and went to the apartment.</p>
<p>I was so curious I wanted to see what it looked like so I opened the bucket and found something that looked like... <em>Coconut foam dessert</em>?! I stared at this thing for almost 10 seconds in disbelief. How was this thing supposed to replace traditional plaster? But well, that's all I had so I grabbed the stepladder and decided to fill the cracked I expended on the living room ceiling. And it was... interesting? It's way easier to apply and it sticks a bit better. You also don't have to mix it as much as traditional plaster.</p>
<p>I filled all the cracks in the living room, then moved to the kitchen where I did the same. On large cracks, this type of plaster is way easier to use and I was done super fast. I then moved to the bedroom with problematic ceilings, started the sander and sanded again the plaster from my previous attempts at making a flat surface. It was, again, not good on the 1 square meter part and this ceiling is starting to drive me nuts. So again, I had to re-plaster it (this time with the coconut foam type) and I hope that tomorrow, when I sand it, again, it will be the last time I have to do this (I'm angry at a ceiling, yes).</p>
<p>Moved to chamber 2 and started sanding the walls I plastered with smoothing plaster. I had to use a smaller grain with the sander in order to remove the small edges and holes. And it turns out the better strategy was a thin layer of this plaster, not a thick one. The thicker one had too many hollows due to my lack of skill with the spatulas. The good news is: I now have <strong>my first smooth and ready to paint wall</strong>! And it's so smooooooth when you touch it.</p>
<p>Galvanized by this incredible win, I smooth plastered the other walls of the room with a thin layer. It was hard, as the walls were way bigger and the plaster kept drying. I moved fast and was able to finish everything when the night fell.</p>
<p>I think I spent the whole day listening to a <a href="https://haven-game.bandcamp.com/track/08-16-home">single song</a> from the Haven soundtrack. First, it was because I enjoyed it. Then because I was stuck with my gloves, my helmet, glasses and equipment and could not reach my phone in my pocket. But it didn't really bothered me.</p>
<p>Tomorrow: I'll probably prepare more walls for smoothing plaster. As I'm not supposed to do noisy renovation work on January first, I'll prepare as many walls as I can and sand them on saturday.</p>
<h2 id="december-31-2020" >December 31, 2020<a href="#december-31-2020" aria-label="December 31, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today my goal was to prepare as much walls as I could for future coating. But first, I wanted to see the result of the previous walls, so I sanded them and I was quite happy with the result. Even if there's a few scratches left in some places it's such a huge progress compared to the initial state of the walls. The damn square meter ceiling hole is getting <em>better</em> but after sanding it, I could see it wasn't quite there too, so I had to re-plaster it again. I hope this time will be the last. As for the other ceilings, I sanded them all and except for one part where the coconut foam plaster was not dry and came off, the rest is good. I only patched a few scratches that I missed.</p>
<p>After this I kept sanding everything I could find. I sanded the last bedroom walls, the corridor walls, the corridor ceiling as well as the entrance. This way I'll have enough surface to plaster tomorrow. Came home earlier than I expected to celebrate the new year.</p>
<h2 id="january-1-2021" >January 1, 2021<a href="#january-1-2021" aria-label="January 1, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Happy new year! It's plaster day! And damn, I had no stamina or energy when I arrived at the apartment. I was thinking of doing at least one room and the corridor, but ended up with only <em>one wall</em>. The plaster was drying faster than I could apply it, the wall being clearer than the others, it was hard to see where I already applied plaster. In some cases, I undid what I previously did and it made me angry.</p>
<p>After one hour and one wall I called it a day and came back home. I was tired, hungry and demotivated. I called Marc and he assured me I could probably keep the sander and the vacuum cleaner until Tuesday next week, and also take them again later if needed. I'll try to finish everything and clean by Tuesday. I want the place clean for when the electrician starts his work.</p>
<h2 id="january-3-2021" >January 3, 2021<a href="#january-3-2021" aria-label="January 3, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I took a few days to rest and recharge and now... I'm okay I guess.</p>
<p>So today I went back and started a <em>plastering extravaganza</em>. My goal was simple: plaster as much walls as I can to be able to sand them the next day and return the vacuum cleaner to Marc on Tuesday evening. First I finished the the last bedroom walls. It took more time than I expected but overall it went well. I'm still finding this smoothing plaster hard to work sometimes. It's not liquid enough to do a small layer without, sometimes, making several layers when I scrape.</p>
<p>Once I was done with this room I attacked the corridor, doing all the walls, corners, door frames. Some parts needed filling plaster before smoothing but I was so bored I decided to give it a go and see later. It took again more time than I wanted and when I finished the night was coming and I still had the entrance to do. I was starting to run out of plaster again and felt it was maybe better to stop there.</p>
<p>I listened to the last episode of the very good podcast <em>Les démons du midi</em> which is about video game music. It was a very good choice.</p>
<h2 id="january-4-2021" >January 4, 2021<a href="#january-4-2021" aria-label="January 4, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today was a sanding day! The goal? Sand everything that needs it in the bedrooms and corridor and achieve a milestone. So of course I went, of course I put all my equipment, and of course I sanded the last bedroom and the corridor. I don't know if I'm getting used to it and built some muscles but I can sand for a longer period now. It's cool but at the same time it makes more muscles strains than when I was making pauses more often.</p>
<p>I used a small manual sander my father gave me to clean the door frames and corners, as well as some parts where I added too much plaster yesterday. The result is... not as good as the previous rooms I think. I was probably more impatient when I did the last one and the corridor. We'll see how it goes during the painting phase. If there are too much traces, I'll fix them independently instead of plastering all the wall.</p>
<p>I went back to this damn square mater of ceiling and this time, I gently hand sanded it. I feel the plaster if fragile and that I probably didn't employ the best method to fix this. Once I removed most of the holes and bumps, I thought... It was starting to be good. When I entered the room and look at this specific part of the ceiling, it didn't struck me as a big patch of mess like before. Still, it's not perfect yet! So I applied a thin layer of smoothing plaster on it. Maybe it will be the last coat. Crossing fingers!</p>
<p>Finally, I was DONE with the global sanding and plastering for the bedrooms and the corridor. There's still some things to fix there and there but overall, all walls and ceilings are ready for painting. But before that, the whole place needed a good cleaning. There was plaster dust everywhere. So much that I realized the windows where dirty and that I wrote "LOL" in the dust on one of them.</p>
<p>And all this dust, it gave me a feeling of... underachievement? It didn't felt like I achieved a milestone. So I decided to clean all those rooms. I cleaned all the walls with a broom, then vacuumed all the rooms. When I did the first aspiration of dust, I realized <em>oh my, it's true that I bought an apartment with a black floor</em>. I quickly realized that, since I didn't protect the floor, I had splashes of plaster everywhere. It gave me a feeling of <em>undone</em> that bothered my achievement sense!</p>
<p>So <em>of course</em> I took a mop, water and soap, and mopped all the floors, scratching all those plaster stains. It felt like a battle, me versus those little bastards preventing me to achieve my glorious moment of finish! The mop had a too short stick and it broke my back. I think it took me around one hour and three water changes?</p>
<p>BUT THIS IS IT. I HAVE CLEAN WALLS. CLEAN FLOORS. CLEAN CEILINGS. I AM THE KING OF THE WORLD!</p>
<h2 id="january-5-2020" >January 5, 2020<a href="#january-5-2020" aria-label="January 5, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This is Tuesday and I have to give back the vacuum cleaner to Marc tomorrow! I decided to finish it once and for all and sanded the whole living room ceiling. It took quite some time but went way more smoothly than I thought, I was happy! I sanded the entrance ceiling too.</p>
<p>Once I was done I added water to my almost finished plaster bucket to make it more liquid, then plastered the entrance walls to hide the various holes and scratches.</p>
<p>And now for a perfect finish... I went to the infamous bedroom with it's square meter of plaster. I once again hand sanded it to erase all traces and bumps and I was left with... a finished ceiling. I was so happy and relieved to finally be done with this.</p>
<p>At the end of the day the electrician called me. He will start his work Thursday next week. I can ask for the renovators to come at the end of June to put the plasterboard and finish the walls. Everything seems to be fine!</p>
<h2 id="january-6-2020" >January 6, 2020<a href="#january-6-2020" aria-label="January 6, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Last day before I take a break! Sanded the entrance walls and cleaned the whole living room area, the entrance and the kitchen. It took a while, as there were a lot of furniture still hanging there. I started moving them downstairs in order to put them at the recycling center.</p>
<p>But after 4 back and forth of 4 floors, I was totally beaten. I knew I should not have done that but my knee started to hurt, so I left old furniture in the staircase near my door. I hope won't bother the neighbor as it's not in his way, but I should have clean this anyway.</p>
<p>I'm thinking of asking friend to come and help put everything down and then I'll drive all this once and for all.</p>
<p>But here we are, I'm done with sanding and plaster! At least until I start doing the kitchen and bathroom. It's such a milestone and I'm so happy.</p>
<h2 id="january-8-2020" >January 8, 2020<a href="#january-8-2020" aria-label="January 8, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I've been resting a lot for two days. I'm a little sick but today we decided to go back to the kitchen stores to make our final choice. We have to decide where we'll put everything and tell the electrician so he can add the power sockets.</p>
<p>First, we went back to the kitchen I liked. I found nothing new about it but Coralie was... reluctant! She really changed her mind about it. She found it felt cheap. I agree it's not the best kitchen in the world but since we can't spend too much, that's the best we can do.</p>
<p>She wanted to try other handles to see if it was better. It actually worked better for her but not for me. I think we tried or checked almost a dozen handles with different shapes, colors and sizes but something was not working. I can't believe I'm writing this. I feel so OLD with my kitchen handles problem, omagad.</p>
<p>We went out and concluded the best kitchen was probably a fire camp in the middle of the room with a suspended pot and laugh a lot. We didn't know what to do and Coralie needed a frame for a custom print she bought from one of our artist friend, so we went, again, to Ikea.</p>
<p>And that's when the most strange thing of the day happened. We went by the kitchens again, initially to see if we could combine our kitchen choice with Ikea handles. And then, while watching, we stopped by a demo kitchen that was <em>the total opposite</em> of our tastes.</p>
<p>It was a clearer model, with green doors and light wood. There were no handles but knobs, in full wood. We were initially watching the knobs and suddenly we realized... this kitchen was <em>relaxing</em>. It felt lighter, gentler. We were going for anthracite doors with metal handles and now we're here with green doors and wooden knobs? What was going ong?!</p>
<p>We sit there in the demo space and started talking. We realized we were in a full <em>brutalist paradox</em>. It's an expression I found, mocking the fact that a lot of people like brutalist architecture (me included) but few people would be able to live in them.</p>
<p>We have a kitchen with a single window on the north wall. It's one of the darkest places of the apartment and yes, adding black and anthracite furniture on two walls might make it oppressive. On the opposite side of the kitchen demo at Ikea, there was another demo place, full black with a lot of angles, straight lines. I already decided I didn't wanted this but Coralie initially liked it.</p>
<p>Now she looked at it and said "If I was in this kitchen during breakfast, I would have the feeling of making breakfast for the ambassador".</p>
<p>So there we are, stuck between what we like with our brains and what we like with our guts. Now we have to decide which side to go. That means... we still don't know which kitchen to take.</p>
<h2 id="january-9-2020" >January 9, 2020<a href="#january-9-2020" aria-label="January 9, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>We went <em>kitchen hunting</em> today. Thanks to the kitchen gods, it look like all kitchen stores are located in the same area, so we decided to go. What should have been equal time spent in all the store turned into something else. Basically we went to the first one, that is more high end than the others, to get the feeling of what is the top and compare more easily after. But we were met by a seller, a young man that was very polite and natural. A former woodworker that chronic pain in hands forced him to stop, and now he sells kitchen, quite the journey. he asked for a budget. I told him one and he said it was probably not doable for his standards. So we rose the standard a bit just to see what was possible. Oh boy I was not expecting this.</p>
<p>He made us take the grand tour. He described <em>everything</em>. From hinges to laser soldered wood to... waterproof plinths? Everything was top quality (the furniture is guaranteed 10 years, the hinges 20 years) and he demonstrated it by literally standing inside a drawer (he was probably around 70 kilograms) and explaining other things like how everything is more sturdy thanks to specific fabrication, how everything is solvent free, and many, many other things. For a seller he was more genuine than I thought he would be.</p>
<p>We sat and discussed plans, electronics and other things. I explained how our main problem was having enough counter space and storage while conserving low profile furniture. I also wanted things like the oven to not be near the ground, as I'm tall and fed up about crouching all the time. He proposed to make us a plan and a 3D visualization for the next Saturday and we accepted.</p>
<p>This non-planned meeting took us over 2 hours! So, when we were finally out, we were exhausted and we were running out of time. The curfew was starting at 6pm, we had less than one hour to visit the other stores. So we rushed all of them, took a bit of time to discuss with people there when we could, and collect catalogs. We discovered that most sellers had the same basic prices but that options could raise the price significantly from one store to the other.</p>
<p>The most important discovery, I felt, was that most people going to IKEA could actually afford more original and quality products if they just took the time to visit specific stores. It look like either IKEA is more expensive than before, or kitchen makers lowered their prices.</p>
<h2 id="january-14-2020" >January 14, 2020<a href="#january-14-2020" aria-label="January 14, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>First day of electricity, I was excited! Excited but tired, as I had to wake up at 7pm to open the door at 8pm. These days I usually wake up at... 11am.</p>
<p>So the three electricians arrived. We went to each room, placed every electric socket, light switch and Ethernet plugs! And right after, they started removing old sockets, cutting old wires... The metal tubes with the original electrical installation were removed and it was so satisfying. I could see the rooms without those rusted pipes, which made me feel much closer to the end of renovations (it's just a feeling, it's not done lol).</p>
<p>I stayed with them all morning to do more plaster. The entrance ceiling holes were filled, as well as the part of the corridor ceiling that will soon be in one of the chambers. I plan to sand them soon and maybe I'll add smooth plaster. I also fixed little things while answering questions about the apartment.</p>
<h2 id="january-15-2020" >January 15, 2020<a href="#january-15-2020" aria-label="January 15, 2020 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Small day today! We went with Coralie, so she could finish peeling the wallpapers inside the toilets. Meanwhile I started sanding the kitchen door frame and plinths to see how they reacted. My initial goal was to try to sand until the wood was visible. No luck, the wood was covered by a resin, and this resin was then painted several times over the years, resulting in a supet thick coat that all plinths and door frames have. It will be a nightmare to sand all these frames, especially because some have sculptural details.</p>
<p>While I was pesting and wasting sanding paper, I asked Coralie to plaster the holes inside the toilets. She was... reluctant. Actually no, she was not enjoying plaster. She accepted and finished, but when we went home I could feel she was still bothered by it. I asked and she told me she <em>hated</em> doing plaster. It was like a gut hate!</p>
<h2 id="january-16-2021" >January 16, 2021<a href="#january-16-2021" aria-label="January 16, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today was the big meeting to see what the kitchen maker decided. We had a meeting at 2pm and left at 5:30 pm, so it took quite a time! First he presented us with a general look and he made some changes we were surpised about.</p>
<p>The biggest change between my plans and his was the induction cooker and extractor hood. He positioned them on the right side, while I was putting them on the left side to keep more counter space. His idea was that the cooker plate was that it made more sense to be able to prepare your food and just reach out directly to cook them. He also made the counter go upside the drying dryer, which added counter space. The only non-counter space is the fridge in the corner near the window, the place with the least amount of light. Of cours he added several drawers, and also a free space to put the cat litter.</p>
<p>On the other side, there's a cellar type column 160 tall, with internal drawers to put all our food and bottles. Next to it is another column with the microwave and the oven. Both are at the top of the column, which mean I won't have to crouch to use the oven. And of course there's a sink with space on each side (nice) and under it, a closet and the dishwasher. The counter goes to the wall, between the hot water tank and the washing machine.</p>
<p>Once the presentation was done, we travelled through the shop to see each piece individually. I also suggested we changed the wood aspect to something clearer. The wood tone was too noisy to my taste. We also had to choose handles. I've never so <em>old</em> than when it took us 20 minutes to choose handles for kitchen cabinets. We also saw the oven, extractor and other things.</p>
<p>And finally, the price. It was, of course, expensive. Not much more than going to IKEA, probably a quarter more expensive I think. I was prepared for the price and overall the maker respected our budget. But I wasn't sure. It felt like a caprice to spend more money than necessary. It felt unreasonable. We had to take some time with Coralie to talk about this, which the kitchen maker agreed. She told me deciding right now, without going to other shops to ask for more quotes, was probably not the right thing to do. And of course she was right.</p>
<p>But I liked it.</p>
<p>It's stupid, we're talking about a kitchen. But I felt this proposal would make this space practical and relaxing. I liked this idea. I've always had this issue that I feel I don't deserve better, just the norm. That I should not even try making it better, and accept that this is how things are. A kitchen is just the place where you cook, why bother making it better? An old habit of my money-less days of thinking about practicality without considering my own well-being, tastes and desires. At this moment, I felt I should not fall into this self-deprecation trap.</p>
<p>Also, the kitchen maker took time and found solutions to most of our problems while respecting the budget I asked. He exceeded my expectations. I felt his professionalism and service deserved payment. Thanks to him, we knew how to fix our problems. Leaving and asking the same thing to someone else for cheaper using his expertise would be extremely unrespectful. As a former seller that had his fair share of bad clients, and as a professional that thinks expertise and service deserves payment, I didn't want to this kind of people I despise.</p>
<p>I know a lot of people don't have this chance, but I can do freelancing, high paying work when I need money. I prefer working a few days more to earn money, instead of losing several hours in different stores, create a contest between them, waste everyone's time, compare quotes, hunt for the lowest price on the internet, and finally announce who is the <em>winner</em>. Organizing a competition to save a bit of money is not my thing.</p>
<p>And finally, I decided upfront when I bought the apartment that this whole project should be done respecting my own standards, way of thinking, physical and mental capabilities. I've spent a lot of time and money already to do things in what I consider is the right way of renovating this place. I did not cover broken walls, I fixed them. I decided to insulte to prevent humidity problems, not hide them with paint. I'm fixing the electricity so it can last and be safe.</p>
<p>So why was I trying to compromise for the kitchen?</p>
<p>So yeah, I went back and accepted the quote. The maker will come monday to make measurements. I'll have a green tea, long lasting, eco-friendly, made in France kitchen. I felt it was the right choice.</p>
<h2 id="january-18-2021" >January 18, 2021<a href="#january-18-2021" aria-label="January 18, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I went to the apartment this morning to open the door for the kitchen maker so he can take measurements for the furniture. While he was working I started removing plinths from the door frames. Behind them I found the junction between the walls and the wooden door frame. It's most of the time in good shape but the wood clearly moved in some parts, leading to gaps.</p>
<p>I removed the frame inside the kitchen, sanded it and plastered it. I'm not sure how it will look like so I'll let it rest for two days and then go back and sand and see if I enjoy the result. I hope I will, as I don't want to sand all those door frame plinths.</p>
<p>When the kitchen maker was done I left.</p>
<h2 id="january-26-2021" >January 26, 2021<a href="#january-26-2021" aria-label="January 26, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I came back from a family reunion (the first since August) with a new tool: a small electric sander! I borrowed it from my mother. It's the type that looks like a small iron. I was skeptical but it was suuuuuuuuuch a good tool!</p>
<p>Today I went to the apartment with the goal of sanding door frames. I finished the kitchen's frame and doors, it went way smoothly than before. I then proceeded to the corridor door and door frame. It takes a lot of time and sandpaper but it's actually not hard on the muscles and it vibrates way less than with the previous sander.</p>
<p>I also removed more plinths around the door frames and added or sanded plaster. Overall it's starting to look great and I think once painted with the same color as walls, everything will look super fresh. Well, I still have 5 doors to do but that's a start!</p>
<h2 id="january-28-2021" >January 28, 2021<a href="#january-28-2021" aria-label="January 28, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today I went while the electricians were present. They are progressing well and doing a very nice job. Almost all trenches are done, a lot of them already have the cables in and all the light holes are done in the ceilings. While they were working I sanded the entrance door, removed cleats from walls in the living room, fixed several cracks I missed there and there and continued sanding more door frames or plastering them.</p>
<p>When we all left (curfew is 6pm due to COVID) I was happy with the progress we all made. It also gives more courage when not working alone. I've felt a bit down these past few weeks, which explains why I did not work as much as I should have in the apartment. But seing the electricity getting done is really boosting me.</p>
<p>But the other trouble is actually having the artisans come back for the walls, the door frame, the tiling and other things. Without their work done, I can't start painting and I want to get it done by mid-February and focus on the bathroom before March comes. It's going to be tight.</p>
<h2 id="february-4-2021" >February 4, 2021<a href="#february-4-2021" aria-label="February 4, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>So, where to begin...</p>
<p>I finally managed to get the artisans on the phone on Monday 1st. Turns out they were ready and were going to come on Thursday! I told the electricians that everyone would be here on the same day and would finally be able to discuss how to finish the walls!</p>
<p>Comes Thursday and I'm there around 8am. One of the electricians has come to take some tools and needs to leave for another house (they are so busy it's frightening). The plasterer, his apprentice and the project manager were also there, so I opened the doors and they started bringing their tools and huge swats of plaster. We made another tour to check everything.</p>
<p>We were supposed to remove tiles from a wall in the kitchen. The project manager did not know it was plaster behind and told me it was going to destroy the wall to remove them. He proposed we glue new plaster on top of the existing tiles. I said no, what the hell, no, I don't want to hide mess, I want it fixed. Then he concluded, removing the plaster and adding a new one is the only option. He agrees to put new plaster for the same initial price of removing the tiles, but I have to remove the existing wall and the tiles by myself. I agree and around 9:30am I leave, go home and ate breakfast.</p>
<p>My mission of the day was to find doors for a closet we are building in the entrance. I wanted folding doors and had a hard time finding affordable ones as it sometimes went up to 400 euros for two doors! So I went to two furniture stores and found literally nothing. IKEA was near, I drove there and discovered the entire store was closed because of COVID restrictions (the store is 23k square meters, 3k meters too much).</p>
<p>Disappointed, I went back to my car, grabbed my phone, texted my partner that <em>doors are a pain</em> and then visited IKEA's website. I found was I was looking for, went back to the store and it turns out even the drive had to close and only deliveries were possible. Even more disappointed, I went back to the apartment to see how things were going and warn them we might not have a door quickly.</p>
<p>There were so many people! Three artisans and two electricians were working at the same time, gluing plaster walls, filling trenches... It was crazy! And quite cool, it motivated me! After explaining my door problems to the plasterer, he suggested I went back to the furniture shops to see if they had normal 63 centimeters doors (it's a standard) with framing. We could use this instead of creating the whole thing ourselves.</p>
<p>I went home to eat lunch, I also checked a bit more the IKEA store but could not find the right size. So, again, back to the furniture store. Went directly to the carpentry part and discovered there were... no more doors to sell. <em>WHY ARE DOORS SO HARD TO BUY???</em>. I went to another store, no doors left too. Finally, I went to a third store and no more luck.</p>
<p>While doing this, I was also trying to find clipsable laminated floor tiles to fill holes in the floor and it turns out my color does not exist, that there is no standard for the clipsable part and that, if you are not lucky, they won't have the same width.</p>
<p>Anyway, I went back to the apartment to see the progress to fix my mood. They were going so fast! Half of the rooms were done. Suddenly I realized that tomorrow morning, the plastered had to <em>add a freaking door in my corridor and there was no door in sight</em>. I asked if he wanted me to bring a door with a frame, he said well yeah, why not, a door with a frame is easier.</p>
<p>I drove home and booted my computer, thinking that if there was no doors in my city, there might be some doors in the nearest one. At this point my brain had stopped functioning properly, I was exhausted and <em>I NEEDED DOORS</em>. Well guess what? I found them! Turns out there was some stock of other models in two different stores, a bit more expensive than the ones I wanted, but not by much.</p>
<p>Feeling lucky, I clicked to order, choose the drive pickup for the next morning. One door at 10am, the other at 10:30am. Relieved, I went to shower and told my partner <em>I found doors</em>. Then she reminded me I had to drive her somewhere at 11am. And that I can't store two doors in the car with her sitting on the passenger seat. So, I'll have to deliver my doors <em>before</em> driving her.</p>
<em>BUT WAIT THERE'S MORE</em>.<p>I have a broken built-in oven in the back of the car already. I can't store an oven, two doors and a girlfriend in my car, it's not going to fit. So first thing in the morning, I have to drive to the recycling center to drop this oven, drive to the first shop to pick a door, to the second shop to pick a second door, drop the doors at the apartment and <em>then</em> I'll drive my partner. All this in less then two hours.</p>
<p>And what does my non-functioning, door-obsessed brain concludes from thi situation? <em>This is fine</em>.</p>
<p>I go to bed exhausted.</p>
<h2 id="february-5-2021" >February 5, 2021<a href="#february-5-2021" aria-label="February 5, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I wake up at 1am. I think about my doors.</p>
<p>I have a sudden realization: I picked the wrong door for the closet. I picked a left opening door but the door is turned 180 degrees in the closet, so I needed a right opening door. I have to change my order quickly. I boot my phone. An updated was installed. I have to enter my pin code. I mess up my pin code 3 times, now my sim card is blocked. I go on wifi.</p>
<p>Turns out I can't cancel my order. I have to make a phone call for this. The shop opens at 9am. But I won't be able to make a phone call, I blocked my phone sim card. So I have to login to my phone's carrier website to find the recovery phone. While trying to access the section of the website, a popup asks me to change my password. I don't want to change my password, but there's nothing to close the popup. I try several times but I can't close it. I changed my password. I access my PUK code. I enter the PUK code. My sim card is unlocked. I'll be able to phone the store tomorrow. I change the alarm hour to 9am to sleep a bit more.</p>
<p>I wake up at 8:30am. I think about my doors.</p>
<p>I call the shop and cancels the door order. The lady is super nice, it's done in five minutes. I'm ready to order a door that opens to the right. But wait. Is this kind of door <em>really</em> what I want. I'll have visible hinges. I don't want visible hinges. Hinges are ugly. I should not order a new door. I should go back to my initial IKEA plan. Yes, that's it, I'm doing this. I'll order a door without frame on IKEA's website and have it delivered.</p>
<p>While I'm trying to make coffee, I start to realize this whole plan of oven dropping, door picking, door dropping, girlfriend picking, girlfriend dropping might be a little too complicated to do in two hours (and that's with one door removed from the equation). So I cancel my drive picking for the second door, thinking I'll phone them to change the hour. While bread is toasting, I try to call the shop, but nobody answers. I decide I'll go ask them directly.</p>
<p>Coralie wakes up while I'm trying to order a door on IKEA's website for the closet. When I'm ready to checkout, the delivery date indicates February 17. 17 like in two weeks. BUT I NEED A DOOR <em>NOW</em>. The website indicates me the nearest opened IKEA. It's a two and half hour drive. Still not fully woken, I conclude that, <em>this is fine</em>. When I explain this to my partner, she looks at me without understanding everything except I'm planning to drive 5 hours to pick <em>a door</em>. So she asks, <em>why don't you just buy a wood plank?</em></p>
<p>I look at her in disbelief for a moment then realize: she is a <em>GENIUS</em>. I can sand and paint this wood plank. This is it! Now all I have to do is just drive her to her appointment, drop the oven, drive her back, pick and deliver my door and my wood plank. Bingo! What an organized person I am! I drive her and go to the recycling center. I drop the oven (actually there was <em>two</em> ovens but that's a long story, don't ask please) and drive to the apartment. I want to ask the plasterer if a wooden plank is OK for him. I park, walk through the stairs and open the door...</p>
<p>I walk in at 11:30. I find a door lying on the ground of my apartment.</p>
<p>At this very moment, my mind froze. There's a door. The exact same one I have to pick. It's already there. Why is it there? I walk to the plasterer and asks him why there's a door. He says the project manager dropped it in the morning. Didn't I received a text with a picture of the door? No I did not. I explain to him I already bought a door. He says this is unfortunate. Oh and by the way, the plaster in my bathroom was rotten so he had to remove it and re-plaster. Since it's out of the contract and took too much time, he asks me to move down the rubble for him so he can finish what was planned today. I accept.</p>
<p>I drive to the store. I'm still in shock. I go to the reception and explains to them I have too many doors. They are not sure what I'm talking about. I say I need to cancel my door order. They accept and say there's no problem. The lady is funny, she walks to the storage to cancel my order. When she gets back, she says it took 45 minutes to find this door in the storage. I tell her that contrary to me, at least they found the right door and now they know where it is. She laughs.</p>
<p>I go back inside the shop to buy my floor tiles. I pick the closest color. The demo tile says it's 19 centimeters wide. I have to bother someone to get a packet of them. I buy it. When I go back to the car, I think to myself that <em>those tiles actually don't look super wide</em>. I measure them. They are 16 centimeters wide. I picked the wrong size. I resist the urge to kick my car.</p>
<p>It's too late to change the tiles, I go pick Coralie. While driving I explain something about doors and tiles. She's not sure she understands what's going on. I drop her home and go eat with friends. We pick burgers. I'm with my dirty, working clothes. I look tired. They ask me how renovations are going.</p>
<p>I tell them I ordered two doors, ended up with three doors but that I actually needed one door.</p>
<p>They look at me and laugh. We go eat on a public place with stairs. We talk about work and stuff. It's cool to eat outside and feeling the sun on my skin. I relax a little bit. They have to go back to work. I'm a bit sad, it was too short. I drive home and pick my 100 liters trash can. Coralie comes with me to the apartment. She wants to see the progress, and will then be on her way to buy some stuff.</p>
<p>Once the visit is done and she's gone, I start picking the rubble and dropping it my trash can. Turns out plaster and tiling is <em>heavy</em>. I think I did 5 or 6 trips from the fourth floor to bring everything down. I did not have anything else than paper grocery store bags, so I put the rubble there. Around 4:30pm I'm done and prepare myself to go to the recycling center.</p>
<p>We talk about the closet and, knowing I will use a wood plank for the door, the project manager asks me to buy cleats to reinforce the rails that will support the door. It's not like I have any choice, so I agree, of course. I go to the recycling center and drops everything into the right containers.</p>
<p>It's almost curfew time. I use the last remaining minutes to go to the store and buy a big hammer and check for the wood planks. There are no wood planks left. I can't make my closet door. I have no energy left to change my floor tiles, that will wait. I go out with my hammer, drive to the apartment. I'm tired and frustrated. I pick the hammer and punches a few holes in the kitchen wall.</p>
<p>I drive home. Coralie is there. She bought beer and snacks so we could relax together in the sofa. I shower and we drink together. She says she doesn't understand anything about my current door situation. <em>It's okay</em> I say. <em>I'll find a wood plank tomorrow</em>.</p>
<p>I have no door and I must scream.</p>
<h2 id="february-06-2021" >February 06, 2021<a href="#february-06-2021" aria-label="February 06, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>After a small breakfast I talk about the wood plank problem with Coralie. We think about a way of doing a lighter door and decide we could probably use slim MDF to sandwich a polystyrene plank, and reinforce all this with a wood frame. I like this idea and around 1pm I go to the furniture store and buy everything I need.</p>
<p>Once I'm in the apartment I prepare everything. I lay down the MDF plank, cut wood lintels the right size, add glue and put everything together. I lay a plaster board plank on it and go searching for anything heavy. Plaster bags, trash bags, a vacuum cleaner, a cupboard. I lay everything on it and turn my attention to the kitchen.</p>
<p>I start hammering the wall and it goes down fairly well. The parts with tiles are more solid but overall, everything goes according to plan. What takes more time is filling the trash can with rubble and walking it down, then transfering it into bags and into the car. I think I did 500 liters of rubble with this wall, so five up and downs.</p>
<p>Around 4:30pm I prepared the polystyrene and added it to the door, using a special glue. Then of course, more wood glue on the frame, the next MDF plank, and more weight on top of everything. I'm a little worried the weight might not be enough but we'll see.</p>
<p>Around 5:15pm all the ruble was in my car, I left for the recycling center. On the road my phone played <em>Don't stop believing</em> by Journey and I started singing like a maniac. On the way back I felt I needed something to give me energy until I crossed the finish line.</p>
<p>So I blasted Nickelback.</p>
<h2 id="february-8-2021" >February 8, 2021<a href="#february-8-2021" aria-label="February 8, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Woke up early as plasterers were supposed to come today. They did not show up except for gathering equipment and go to another construction site, which made me quite mad.</p>
<p>But well, I had my fair share of work. When I arrived my main problem was to get rid of the wood beams fixed to walls. I tried unscrewing them with no luck, everything was too tight. I tried cutting them with my saw, they were too hard. So I did what every person in this kind of situation do: I phoned my dad.</p>
<p>Next thing I know, I was in my car for one hour and a half, playing Rage Against The Machine, en route to my dad's place to gather some tools. I arrived right for lunch. We ate all together and right after I took some of his tools. We discussed the possibility to do the plumbing together and he agreed to help on Wednesday. I went back home and started cutting everything with the angle grinder. Most of the beams came off pretty easily! Turns out having good equipment helps when doing renovation!</p>
<p>While cutting the beams I also gained access to the old gaz conducts. I thought about cutting them but was unsure. What if by <em>any chance</em> there was some gaz left? I could blow up the apartment! And die! I was already tired and my anxiety started to peek.</p>
<p>I went to see my neighbor to ask him about the gaz. Turns out it's illegal to have electric heating in this building because the wiring is not strong enough to support all the apartments using electric heating. I didn't know that, and can now add it to my list of illegal things the previous owner did.</p>
<p>But well, actually there was no gaz going to my apartment anymore of course. The main pipe in the staircase was not connected to a gas meter. There was a giant <strong>CONDEMNED DEVICE</strong> on the pipe. And the other pipe that was supposed to be connected to a gas meter and go to my apartment was also closed. There was also a number, 54, to indicate the number of the apartment. 54 is mine.</p>
<p>So I went on, took the angle grinder and cut the pipe that was coming in my corridor. It was actually the only visible pipe left visible so I was glade to remove it. My anxiety started to play with me while I was cutting. Cutting copper produces a smell, and my brain kept confusing it with a gaz smell. So right after cutting, I was half-panicking, thinking <em>gaz is leaking I'm gonna die and kill everyone in the building</em>.</p>
<p>Of course there was no gaz. But I was so panicked I used some hardened plaster and filled the gaz pipes, <em>just in case</em>. When I was done I went home and during the evening I kept wondering <em>if I come back tomorrow and the building exploded it's gonna be my fault</em>.</p>
<h2 id="february-9-2021" >February 9, 2021<a href="#february-9-2021" aria-label="February 9, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Super tired. Nothing fancy today. It was super cold so I just went to the apartment to take detailed pictures of the pipes for my dad. I also cleaned a little bit and fixed holes between cinder blocks to avoid air flows.</p>
<h2 id="february-10-2021" >February 10, 2021<a href="#february-10-2021" aria-label="February 10, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>My dad arrived around 9am. He had all the equipment needed including a soldering station. If you don't know, a soldering station is composed of a bottle of acetylene, a bottle of oxygen, pipes and a torch (there's actually more things than that). Most plumber have portable kits. My father use his soldering station in his own workshop with a chariot. So his bottles are around 1,2 meter tall. And they weight a ton. And my apartment is on the fourth floor. And there's no elevator.</p>
<p>Surely you know what that means right? Yup, moving two steel bottles in a row. It was <em>hard</em>. Worse of all, if I can endure some physical pain because I'm young despite being as muscular as a shrimp, my dad is 64 years old, worked manually for 50 years, and now has half of his body broken. The reason we decided to do this so suddenly is because of a chirurgical intervention he'll endure the next week, which will force rest on him for two months.</p>
<p>So we had to take care of each other and we had to finish today. First we made a plan about the setup I wanted. Basically I want every water supply pipe under the sink, so you don't have to move home appliances to access them. That means grouping everything inside a 60 centimeters place. I also wanted two new supply pipes in the bathroom.</p>
<p>Once the plans were set, we went to the furniture shop and picked everything we needed. Most of it was copper joints and pipes, as well as wall fixations. I was initially planning to do all this by myself and I realize now how foolish I was to just think about this. You need experience to avoid basic mistakes. There are several type of connectors, in different sizes. Some require soldering, others don't.</p>
<p>We went back home and started cutting and soldering. My dad did most of the soldering while I was keeping pipes straight for him. It went pretty well, we only missed a few pieces to close old supply pipes. The furniture store didn't have them, so we had to go to another one, wasting a bit of time. On the way back we bought some sandwiches. Overall we were having a good time, things were moving as we expected.</p>
<p>But after eating, everything changed. We had ONE pipe to solder left. And that's when the oxygen bottle was empty. The flame became pure acetylene, burning the pipe. We tried to finish, but it didn't worked out. We were supposed to finish at 4pm so my dad could go home before curfew. It was 2:30pm and we didn't have anything to solder. So where do you find oxygen bottles here?!</p>
<p>I searched and found a supplier. As with traditional gaz bottles, we had to move the empty bottle down. Then we went to the supplier location but they were not selling directly. They gave us the a store address, on the other side of the city. We went there, bought the new bottle and went back home. Of course we had, AGAIN, to move the bottle in the stairs up to the fourth floor. For ONE weld.</p>
<p>Once everything was connected, we cleaned the pipes and welded the last pipe. We put water back in the system. The weld was leaking. My dad was super mad! He was already feeling exhausted and his body hurt. While he was finishing the bathroom he made a mistake a cut the wrong pipe, which gave him extra work.</p>
<p>I left him there and rushed to the furniture store again. I bought an extension pipe called a police hat. We cut and put it in position. Everything seemed ok. Except it was now past curfew time. My dad could not go home and we had two more welds to do.</p>
<p>We were tired so I told him to just come and sleep at home. He agreed, we went home, had a nice dinner. He talked about how it was going to be super hard to move in by the end of march, considering the plasterers were late on schedule, that the bathroom was not done and the kitchen not finished. I agreed, called my current landlord to ask him if we could stay one more month. He said no problem.</p>
<p>So here we go, we now have one more month to finish this. I'm both relieved and annoyed.</p>
<h2 id="february-11-2021" >February 11, 2021<a href="#february-11-2021" aria-label="February 11, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>We woke up early, ate breakfast and went to the apartment. There we met with the electricians. They were removing the excess electric pipes and doing plaster in the trenches. I asked them to put a mask on while my dad was here, as he cannot have the operation if he has COVID. They all agreed, and we all went back to work.</p>
<p>Soldering went... super great actually. In 20 minutes everything was done. We put the water in the pipes and no leaks! It's done! I was so happy!</p>
<p>Just when we were celebrating our victory, we looked outside and discovered... snow. It was snowing. HARD. Like **VERY HARD**. Sticking to the road snowing. We grabbed all my father tools (including those two damn bottles!), charged his truck and on the road he went! I asked him to be careful and thanked him.</p>
<p>I went up, we discussed renovations with the electrician. I thanked them about not making a fuss for the masks. I was tired by feeling quite fresh for some reason. I cleaned my tools and went home. It was Thursday and I had a technical test to deliver on Friday. I was working on it in the evenings during the week and decided I should give it more thought while I had time.</p>
<h2 id="february-12-2021" >February 12, 2021<a href="#february-12-2021" aria-label="February 12, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today I went back to the apartment in the middle of the afternoon, after sending my technical assignement, to work on the exhaust pipes. I took some time to make plans and went to the furniture store, again. I bought all I needed and went back home directly.</p>
<h2 id="february-13-2021" >February 13, 2021<a href="#february-13-2021" aria-label="February 13, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I went to another furniture store to buy fixation clips for my exhaustion pipes. I accidentally met with a good friend and we discussed renovations and took news from each other. It was good to see a familiar face, I miss friends so much. I took my clips and went home.</p>
<p>The first thing I did was fixing the supply pipes on the walls. Everything was wobbling and that's not something you want as it produces loud sounds when pouring water. It took me around one hour to secure all the pipes. Then I started working on this thing and... well I won't make a very good plumber because my original plans did not take the supply pipes into account.</p>
<p>Overall I managed to do two thirds of an initial installation. I had a hard time finding space to make everything fit in those 60 centimeters. It was also complicated to have a steep enough main exhaust pipe. The previous owner made a mess with a pipe laying on the ground and water had to go up to reach the building exhaust pipe.</p>
<p>I think I'm good but I was starting to feel tired and cold, and had a hard time visualizing how everything was going to fit together with the new plaster wall that will eventually cover all this. If the pipes bump out too much I could lose a lot of space. I'll finish tomorrow or the day after tomorrow.</p>
<h2 id="february-15-2021" >February 15, 2021<a href="#february-15-2021" aria-label="February 15, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Back to pipe problems! By looking at them again I thought about putting the evacuation pipe below the water pipes and went to by some angled pipes.</p>
<p>But when I came back I realized that this idea wasn't good at all. It was bumping out of the wall way too much. So I totally shifted ideas and added the evacuation pipe higher than the supply pipes. It was a bit tricky had they had to cross each others eventually.</p>
<p>After a few hours of work I glued everything in place and crossed fingers for no leaks.</p>
<p>The other thing that happened today was the lack of any plasterer coming. I was told he would come this monday and he did not show up at all and no news from the project manager. I was furious as it already happened the week before without any explanation.</p>
<p>I texted the project manager saying to him I waited a big part of the day and nobody came. He explained the plasterer's daughter was sick and he had to stay home. I get it, but at least <strong>tell me</strong> what's going on!</p>
<h2 id="february-16-2021" >February 16, 2021<a href="#february-16-2021" aria-label="February 16, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Today I just went to the apartment to check if the pipes were leaking or not. I tried the whole system several times and... no leaks! I was so happy it was finally done.</p>
<p>The plaster project manager gave me a rendez-vous to check what needed to be done next. There's still a lot to do: fix the broken walls, the strips between plaster boards, the entrance closet, the kitchen wall... We discussed planning and he guaranteed everything would be done by the end of the month.</p>
<p>I had joint pains in my hands and overall felt super tired and tense even if I was a bit relieved that things were again moving forward. I went home.</p>
<h2 id="february-17-2021" >February 17, 2021<a href="#february-17-2021" aria-label="February 17, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A contractor is coming today to work on the kitchen wall! I went to the store to buy a filling foam can, as I have useless ventilation pipes in my kitchen wall that I want to be closed.</p>
<p>While waiting for the contractor to come I filled them and with the leftovers, filled a joint on one of the windows. When the contractor came we explained everything and while he was working, I started some cleaning. There was dust and plaster stains on the ground and I wanted it cleaned.</p>
<p>I don't know how I did but after less than one hour of cleaning, I suddenly felt a very strong pinch in my back. I could not pull weight on my left leg, walk correctly or bend down.</p>
<p>I tried laying down but the cold ground was not helping. I told the contractor I had to leave and asked him if he had any question. He said no.</p>
<p>After going home I layed on the sofa for hours, half stuck and in pain. That was not how I had planned this week.</p>
<h2 id="february-19-2021" >February 19, 2021<a href="#february-19-2021" aria-label="February 19, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>My back is a bit better so today, we decided to go and see how the kitchen and the closet were going. Turns out they were almost finished!</p>
<p>After that we went to a store to see what was available for shower trays. Our future bathroom is super small, around 4 to 5 square meters. It's hard to find furniture that fits in and is still comfortable enough.</p>
<p>We went home empty handed after being unable to find something that pleased us.</p>
<h2 id="february-25-2021" >February 25, 2021<a href="#february-25-2021" aria-label="February 25, 2021 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I get a text message from the project manager. He tells me they put the water on and that it flooded the kitchen, ignoring or forgetting that I told him all water pipes were not closed.</p>
<p>Went in the afternoon and saw plasterers finishing the plasterboards in-between. They explained to me that due to pressure, water went up to the ceiling and then down. It soaked the inside the plaster, that already started to dry. But the power socket probably took some water.</p>
<p>I took my electric cutter and cut the plaster where the water pipes were. I tried pluging in the flexibles pipes from the sink to finally close everything. Long story short my pliers were shit and I could not have an enough tight grip, so I had to go and by a new one.</p>
<p>I finished everything and cleaned a little bit. Then noticed that one of the plasterers did not cut a small pipe coming out of the ceiling, he just... plastered around it? I was angry, took my electric cutter and cut the pipe. A small bit fell on my arm and burned my sweatshirt, making me even more angry.</p>
<p>Went home, angryness started to leave me and I was just disillusioned. I just want them to finish and get out of my apartment, I'm tired.</p>
20202022-03-13T20:03:30+01:002020<h1 id="2020-year-review" >2020 Year review<a href="#2020-year-review" aria-label="2020 Year review permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>2020 was one of the best years I experienced in recent memory.</p>
<p>Considering everything that happened, it might sound rude or tactless. But in the middle of the mess, I evolved as a person like I never did before. I faced and solved problems I was burying inside of me for years. I reconnected with my partner. I coded personal projects that helped me question my field. I shared my knowledge with others. I bought an apartment and am still renovating it.</p>
<p>When 2020 started my goals were:</p>
<ul><li>Stop helping others with their websites</li>
<li>Discover leaner stacks for web development</li>
<li>Redo my website as a personal journal or wiki</li>
<li>Write articles, guides, fictions</li>
<li>Draw</li></ul>
<p>But my ultimate goal was to get out of a <em>productivity mindset</em> and switch to a <em>self-discovery mindset</em>:</p>
<figure><blockquote cite="https://twitter.com/Thomasorus/status/1212451154422116352">I hope next year instead of a display of <strong>work</strong>, I'll be able to do a display of <strong>creations</strong>.</blockquote><figcaption>— Me, <a href="https://twitter.com/Thomasorus/status/1212451154422116352">Last Year</a></figcaption></figure><p>I wanted to question the value, benefits and enjoyment of <em>everything</em> I did, used or saw.</p>
<h2 id="time-tracking-as-self-discovery" >Time tracking as self-discovery<a href="#time-tracking-as-self-discovery" aria-label="Time tracking as self-discovery permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Considering I have bad memory and do way too much stuff, my first move of 2020 was to start tracking the time spent on personal projects. I was inspired to do it by several people I met in the <a href="https://merveilles.town">Merveilles community</a> who use such tools as a way to reflect on themselves. But I didn't want to use an app or someone else system. So I just... wrote down my time in a text file following this format:</p>
<pre><code>//year week activity project hours
2020 1 Development Website 1
</code></pre>
<p>I didn't have any idea how I would exploit this data. Actually, I only finished the visualization in July 2020. But having it readable allowed me to self-reflect and understand why I was feeling tired or restless. In early 2020 we worked with my friends Sword and Pr0sk on the translation and publication of a <a href="https://basgrospoing.fr/fr/articles/le-netcode-des-jeux-de-combat">massive article about netcodes</a> in fighting games. At the same time I was upgrading our CMS to the latest version. All this took me around 40 hours in the first two months of the year. At the same time I was still recording podcasts, developing stuff for me and of course, going to work.</p>
<p>So on week 9 of 2020, I was exhausted and at the same time I was feeling guilty of not working. Looking at my time tracker, I realized how stupid I was. I decided I had <em>earned</em> to do nothing. And so I did. It was the first of several similar cycles. Work on something, then rest.</p>
<p>And of course right after this, lock-down started in France.</p>
<h2 id="lock-down-rhymes-with-breakdown" >Lock-down rhymes with breakdown<a href="#lock-down-rhymes-with-breakdown" aria-label="Lock-down rhymes with breakdown permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Lock-down <del>was</del> is still a <em>mess</em> in France. And it was even worse with my client. We were supposed to work from home and told it could happen anytime. For the first two weeks of lock-down, I was up every morning to check my emails in the wait of my access. I was extremely stressed. Finally we had found a way of working with difficult people. Projects were moving forward under my guidance. But the access to work from home? They never came.</p>
<p>So, my partner was working, and I was not. To keep me occupied I broke my first engagement and started doing a website for someone else. I redid the whole <a href="https://art-eater.com/">Art Eater</a> website. Saying I did it for others is a bit lying. I wanted this website online for myself, because I loved it and it went offline years ago, leaving a big hole on the internet.</p>
<p>But when the second month of lock-down started I collapsed. As the days went by, each day seemed more and more like the day that preceded. Anxiety spikes, characterized by tetany crisis, became common. I gradually had more difficulties getting out of bed. Depression symptoms appeared.</p>
<p>So I did something I never dared to do. I asked my partner for help. I asked her to read my journal, as I was unable to speak. She said nothing, didn't judge, and helped me get back on my feet. We made a program to keep me occupied. Sport, reading, studying, coding. Little by little I was able to get my head out of the water, but remained fragile.</p>
<p>But there was a benefit from this. I finally stopped lying to myself. I am depressive and anxious and I have been escaping this state with work and social gatherings. Lock-down removed my escape roads and I had to learn to live with myself. This realization profoundly changed me. When not in shape, just go to bed, cry, and wait for it to pass. When you feel like doing nothing, just sleep. The goal now isn't to suppress feelings, but to let them flow in me.</p>
<p>As I explained to my partner, I am sometimes feeling terrible. But I am now in a better place, because I <em>feel</em> things. I am now way more honest with myself.</p>
<h2 id="the-birth-of-my-tools" >The birth of my tools<a href="#the-birth-of-my-tools" aria-label="The birth of my tools permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This change in mindset actually helped with my personal projects. I was already working on my static site generator for a while, exploring different roads. But when lock-down ended and I went back to work, I was hitting a dead-end. I had too much text files, I had redone this thing 3 times (even one time in Python). My problem? I was still following other people rules and way of thinking.</p>
<p>So I re-started from the beginning. What is a website? An accumulation of text. What am I using to write text? A text editor and the Markdown language. Do I like using them? Actually, no! I hate writing in Markdown! So why do I use it? Because there's nothing else available! If it doesn't exists, why not create it?</p>
<p>And it clicked. I was terrified and felt I was not capable of doing it, but went for it anyway.</p>
<p>I explored different syntaxes for a new and personal markup language. I called it <a href="kaku.html">Kaku</a> and I wrote a parser in JavaScript to convert its text to HTML. It took a lot of time, as I rewrote it 3 or 4 times, each time exploring a new approach and making it more robust. I now write everything in Kaku and <strong>I love it</strong>.</p>
<p>My static site generator <a href="ronbun.html">Ronbun</a> also found it's final form during this period (it's now using a single text file for all pages and has no external dependencies), as well as my <a href="time.html">time tracker</a> tool. In the span of a few months I created my own ecosystem of tools that fit my needs. Using them feels <em>natural</em>. Of course there were bugs and limitations I didn't saw coming. But that's the beauty of it: the projects evolved at the same time as my needs and tastes.</p>
<h2 id="all-i-want-is-dark-nails" >All I want is dark nails<a href="#all-i-want-is-dark-nails" aria-label="All I want is dark nails permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>During this exploratory period right after lock-down, my partner was exhausted. Working and taking care of me was asking a lot. One evening we ended up talking for hours. We confessed we were exhausted by years of efforts to grow into <em>adults</em> as society expects us, and that it made us miserable. She has no desire to be a <em>woman</em> and bear the responsibilities it implies in our society. I have no desire to be a <em>man</em> and apply the behaviors expected of them, like control an strength. I realized that <strong>all I want is dark clothes, dark nails, a sensible life made of creative doubts and enraging blockades</strong>. So I did. I painted my nails. I bought women clothes because I liked them. I now dress entirely in black. I'll have new piercings soon. I have never felt as whole as today.</p>
<p>When I went back to work from May to June, it was also the moment we bought an apartment. We were searching for a long time and finally found something we loved. I decided I would do this whole operation <em>my way</em>. Which meant a low stress, un-destructive way. I hired a broker as I was not feeling capable of meetings half a dozen bankers (not did I want to <em>prove</em> I was capable of doing it). He made the deal for me. My notary was recommended by a friend. Same for the artisans and the electrician. I made a deal with my banker to not have repayment during the renovations, and took several months for them so I would not feel pressured. I didn't want to turn this into a demonstration of control and strength. Until now, it has been working great.</p>
<p>It wasn't without challenges though. As I tried to take more responsibilities at home I felt it was not going to work. I was not able to manage unexpected problems, even the smallest ones. I had trouble focusing. Muscular pain. And worst of all, the unstoppable feeling that something terrible was going to happen. I needed help and counseling was not enough. As my mission was over and I was not working, I decided it was a good opportunity to get medication. My doctor was super helpful and found the right treatment right away. I have been feeling great for months now.</p>
<p>In September we took a few weeks of vacations and explored the nearest region. It felt good. I was happy like I haven't be for a long time.</p>
<h2 id="all-they-want-is-java-script" >All they want is JavaScript<a href="#all-they-want-is-java-script" aria-label="All they want is JavaScript permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>From July to December I was not working due to the pandemic. I took the time to explore a lot of things related to my field, frontend web development. First, I wrote an <a href="html-tips.html">extensive guide</a> on HTML. I wanted to share knowledge with the Merveilles community, but also felt it was time to use my personal wiki for, well, wiki things!</p>
<p>I also continued studying JavaScript using the very good <a href="https://beginnerjavascript.com/">Wes Bos course</a>. I like this language, all my tools are built with it. But I really dislike the way we are doing web development using JavaScript frameworks like React, Angular or Vue. A monoculture emerged around them, pushed by companies using <a href="the-soft-power-of-javascript.html">soft power tactics</a>to make them unquestionable in web development. So I compiled <a href="list-of-javascript-frameworks.html">a list of alternatives</a> to study them a little bit. The act of creating my own tools with little time and without external ressources reinforced my feeling that the field is moving towards too much complexity. I feel we are bending the projects needs to the framework or libraries needs and that instead of solving problems related to the project, we assemble kits and solve problems related to them.</p>
<p>Which leads me to my current problem: work. My employer can't find a job that suits me. When I tried finding one myself, I only got negative answers. I don't <em>fit</em> in the definition of frontend developer, which now seems to mean <em>backend developer in the browser for over-complex technical stacks in JavaScript</em>. I'm a frontend developer specialized in design systems, UX and accessibility. In half of the job interviews I did I could see why they should hire me. But they did not. I know too well why: people only hire my profile when everything is a mess and needs to be rebooted, which leads to incredible pourparlers between dozens of people questioning your expertise, making the project near to impossible to finish.</p>
<p>So what should I do? I really don't know! Either I become the frontend developer everyone wants me to be, or I continue to wipe everybody's mess when it's already too late. What I would actually love to do is develop art directed pages for magazines. Replicate bold or original print layouts. I love writing, I love design, I love frontend technology. But making a living from this is probably impossible. What a headache!</p>
<h2 id="2021-goals" >2021 Goals<a href="#2021-goals" aria-label="2021 Goals permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This post has been far too long already so let's wrap this up with 2021 projects and goals. Here's the list:</p>
<dl><dt>Work on art directed articles</dt><dd>I love this, so why not try making more? It would step up my knowledge in an area of frontend that I actually care about!</dd><dt>A new portfolio</dt><dd>During my job interviews I had to explain what my specialty was. I'm bored repeating it, so I'll make a portfolio website and join it in my job applications so people understand more easily what I do.</dd><dt>Write CSS guidelines</dt><dd>I really enjoyed writing my HTML tips and tricks pages. I'll do something for CSS, probably related to the different methodologies. I love this stuff. I love CSS.</dd><dt>Code less</dt><dd>Yeah that doesn't sound logical but I actually want to code less. I won't change my tools in 2021 or only make small evolutions. I wanted to redo them in C, but it will have to wait because I have to...</dd><dt>MAKE ART</dt><dd>That's the thing I could not do in 2020. I want to do it. I know I will suck for a long time, but I want to untie this knot that has been bothering me for years. I have ideas to do some with friends. Why not do a comics of a dozen pages?</dd><dt>WRITE FICTION</dt><dd>The second thing I want to tackle this year. I'm only able to draw things I wrote before, so I'll have to finally put on paper this lores that I have in my head.</dd><dt>Be responsible</dt><dd>Being responsible at home and in life frees my partner and helps her moving forward. I want to help her.</dd><dt>Relax</dt><dd>Yeah, I love relaxing. I've already started. Never spent that much time in my sofa.</dd></dl>
<p>And that's all!</p>
<p>What a strange year. A global tragedy was the trigger of a massive personal renewal that left me feeling better, more sensible and authentic. Of course the state of the world outside my window worries me and I will not isolate myself from it. I will participate as much as I can, as long as I can.</p>
<p>See you next year!</p>
Lost in the dev world2022-03-13T20:03:30+01:00lost-in-the-dev-world<h1 id="lost-in-the-dev-world" >Lost in the dev world<a href="#lost-in-the-dev-world" aria-label="Lost in the dev world permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I worked for money only 4 months in 2020.</p>
<p>First because of lockdown, then because my mission ended and my employer could not find a new one (well they found some, but the client cancelled at the last moment).</p>
<p>I've been waiting since July and as I explained in my <a href="2020.html">2020 restrospective</a>, this free time allowed me to move forward on the personal side, as well as building my own <a href="tools.html">tools</a>, <a href="knowledge.html">writing a lot"</a> and <a href="renovation-journal.html">renovating my apartment</a>.</p>
<p>But on the profesionnal side, I'm in a dead end.</p>
<figure><blockquote >I don't <em>fit</em> in the definition of frontend developer, which now seems to mean <em>backend developer in the browser for over-complex technical stacks in JavaScript</em>.</blockquote><figcaption>— Me, Earlier this year</figcaption></figure><p>Then I discovered <a href="https://www.sarasoueidan.com/hire/">Sara Soueidan great 'hire me' page</a>. I was relieved to see that the role I try to explain to others is called <em>Design Engineer</em>. People like me <em>do exist</em> after all!</p>
<h2 id="but-wait-are-design-engineers-that-needed" >But wait, are design engineers <em>that</em> needed?<a href="#but-wait-are-design-engineers-that-needed" aria-label="But wait, are design engineers <em>that</em> needed? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>But I quickly realized that my employer's clients (and probably the vast majority of companies that are not startups) have no idea that people like us exist. Those companies started hiring UX designers 3 years ago. They just discovered design systems. And when they agree to make one, it's always to make the current designs fit inside it instead of starting over and ask the good questions.</p>
<p>Yes, they sometimes care about accessibility, but not that much. That's a public posture, how can you be against accessibility? When they have a designer, he might see a design system as a constraint and blocks its adoption (been there, saw that).</p>
<p>You may think <em>"What's the problem, can't you just change jobs?!"</em> and you are right! I tried and did around ten jobs interviews mostly with modern startups or companies. But for two teams in need of someone like me there was eight <a href="https://twitter.com/heydonworks/status/1349077285232648193/">graphql perverts</a> trying to corner me into a role I didn't want to play.</p>
<p>As for the remaining teams, they considered they could need me, but not now. They see design engineering as a cost, not as a benefit. I suppose they will only consider it when everything is a mess and they want to start over.</p>
<p>To escape this situation, I thought about freelancing. Maybe design engineering is better suited for freelancers as you start projects or fix them, then leave it to in-house developers?</p>
<p>I've considered it seriously, looked into it, and decided it wasn't for me (yet). You see, France's digital world (even the infamous <em>FrenchTech</em>) is not only late in technologies and development practices, <strong>it's also super late at paying bills</strong> (and very, <em>very</em> insistant at lowering rates).</p>
<p>I've heard horror stories about 12 to 24 months late payments. So most freelancers I know try to avoid working with French companies now, and focus on US clients.</p>
<p>I think I don't have the mental fortitude to deal with this or build a new US based network.</p>
<h2 id="it-s-not-the-code-it-s-the-environment" >It's not the code, it's the environment<a href="#it-s-not-the-code-it-s-the-environment" aria-label="It's not the code, it's the environment permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>So salaried employment is my only solution!</p>
<p>I've had a proprosition to become a teacher for a bootcamp. Considering I wrote a <a href="html-tips.html">massive HTML guide</a>, <a href="css-good-practices.html">CSS good practices</a> and <a href="css-methodologies.html">methodologies</a> as well as <a href="the-soft-power-of-javascript.html">an analysis about the JavaScript ecosystem</a> and keeps a page about <a href="list-of-javascript-frameworks.html">alternative frameworks</a>, I might be a good fit.</p>
<p>I should probably apply. But I enjoy coding HTML, CSS and JavaScript sooooo much.</p>
<p>I just don't enjoy <em>the environment</em> in which I do it anymore. Rich but cheap companies, change aware managers, agile methodologies as a justification for bad project management, massive technical debt piloting the roadmap. I'm fed up. All of this makes me want to give back my keyboard and call it a day.</p>
<p>What blocks from doing it (and accepting this teaching job) is an absurd feeling that it would mean <em>giving up</em> and I'm not desperate enough to give up yet.</p>
<p>So if you are <strong>not</strong> a cheap, organisational change aware, <em>yolo</em> agile, <em>Javascript evangelical tech bro spirit</em> company and need a design engineer, feel free to contact me using the links below.</p>
<p>I'd love to hear that you exist.</p>
Personal systems productivity and slippers2022-03-13T20:03:30+01:00personal-systems-productivity-and-slippers<h1 id="personal-systems-productivity-and-slippers" >Personal systems, productivity, and slippers<a href="#personal-systems-productivity-and-slippers" aria-label="Personal systems, productivity, and slippers permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I was recently talking with a very busy friend about personal tooling. He's a freelancer that also manages several hobby projects. As a busy person, he tries to have a kind of <em>system</em> that speeds up his tasks and eases his work day. I'm a bit the same, so we dug deeper into the subject, until I came to a realization.</p>
<p>Yes, we use tools to achieve the same goal, but we have very different relationships with them.</p>
<h2 id="our-personal-systems" >Our personal systems<a href="#our-personal-systems" aria-label="Our personal systems permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This friend is a smart, very intellectual guy capable of self-reflection. He often changes the way his system works to try to achieve automations. But at some point, managing and self-reflecting on this system has become another task in itself that seems to add work to his already busy schedule.</p>
<p>Since he can't program, he has to tinker inside existing apps and follow this field evolution. Else, if another tool comes out and is doing exactly whan he needs, he could miss it! He uses things like the Shortcut app in iOs to automate tasks. He tracks his time, both for profesionnal and personal projects, through a service like Toggle. I don't know his whole setup but I'm sure that if something is considered top notch, he's using it!</p>
<p>Now, let's compare to my own kinda <em>yolo</em> system. I have a single text file that serves as a journal, a wiki and a bookmarking tool. A program I made turns it into a website. I created my own <a href="time.html">time tracking system</a> that uses another text file. My own <a href="kaku.html">markup language</a> is used to write those text files, while my <a href="moyo.html">pattern library</a> allows me to decorate things. I use a salvaged computer that runs a very specific linux distribution named <a href="https://regolith-linux.org/">Regolith</a>, and use very few external services outside of Github and a chat programs.</p>
<p>So there's quite a difference between us. But what I feel is the biggest one is how, at first sight, my tools are very personal but unproductive. Meanwhile, my friend's tools seem super productive but very generic.</p>
<h2 id="features-versus-pleasure" >Features versus pleasure<a href="#features-versus-pleasure" aria-label="Features versus pleasure permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Let's take our time tracking systems.</p>
<p>With just a shortcut on his phone, my friend can start and stop a timer. The data will be added to his Toggle account, that will produce a nice report, shared on all his devices. He can probably program time for each task, get alerts when he exceeds the time allowed. Installing and configuring all this probably took him no more than an hour.</p>
<p>My time tracking system is a text file. It's the most unprecise clocking system you can think of. There's no app to launch a timer, it counts only in hours and only serves data by week. If I forgot to fill time and how much a task took me, I have to remember and estimate. Data is only visible on a <a href="time.html">page</a>, and only if I rebuild and re-publish it. It took me dozens of hours to create all the parts involved and it doesn't even do a lot.</p>
<p>I don't know for my friend about his, but <strong>I LOVE my time tracking system</strong>. It's so <em>me</em>. It's carefree. A little bit irresponsible. It sets boundaries. It allows self-reflection, yet does not allow micro-analysis. Its design is funky and weird. Outsiders told me they found it fascinating, which I think is <em>so cool</em>. How many people can say a time tracking system is <em>cool</em>?</p>
<h2 id="removing-annoyances" >Removing annoyances<a href="#removing-annoyances" aria-label="Removing annoyances permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>It's the same for my website and my markup language. It took me around 150 hours to code those two things. I redid both 3 times. I could just have taken a simple static site generator like <a href="https://www.11ty.dev/">Eleventy</a> and write in <a href="https://fr.wikipedia.org/wiki/Markdown">Markdown</a>.</p>
<p>But if Eleventy is super cool, I <strong>hate</strong> the NPM ecosystem that supports it because it's fragile and <em>alive</em>. There are notifications in the terminal telling me this thing is deprecated, this thing has a vulnerability. this one needs funding. And Eleventy will evolve, which means I'll have to do... updates?! Gosh, the horror! The last thing I want when I sit to write in my own space is some outsider telling me to do things!</p>
<p>It's the same for Markdown. I like inline Markdown! But I hate writing Markdown links! Using <code>[Text of link](Link to image)</code> for a link does not work for me. When I decide to post a link, I often already have it copied. So <em>I need to paste this thing as fast as possible</em> and I will decide what text to use after. Markdown asks for the text before the link, that means I have to write all those characters, paste my link, then come back to the square brackets to write my text, then go back at the end to continue my sentence. Ugh, <em>procedures</em>.</p>
<p>All this can sound as minor inconveniences, and they are. But they add up, and their sum will lead to an interruption of my workflow and, eventually, to procrastination.</p>
<h2 id="tools-as-slippers" >Tools as slippers<a href="#tools-as-slippers" aria-label="Tools as slippers permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If the tools I use while working create friction, the time I need to do the work will increase, and time will be wasted, not saved. Imagine having a hammer with a squared handle. You can still hammer things, but that will be very unpleasant and will make you want to quit.</p>
<p>If you can, why not change the hammer handle? Even model it to your own hand? That's what I consider an exercise in self-discovery, as noted in my <a href="tools.html">tools page</a>.</p>
<p>If, one day, I need a precise client oriented time tracking system like my friend's one, I will build it. It probably won't be available on all platforms. It will miss features that many people feel are important. It might be awkward to use. The style will probably be weird to others.</p>
<p>But I'll make sure that, when I use it, it feels like I'm wearing my favorite pair of slippers.</p>
<p>Now if you excuse me, I have to ask my partner at which hour I started writing this, because I forgot to look at the time but still need to input it.🙈</p>
One year with antidepressants2022-03-13T20:03:30+01:00one-year-with-antidepressants<h1 id="antidepressants-can-t-change-the-world-but-they-made-it-tolerable-for-me" >Antidepressants can't change the world, but they made it tolerable for me<a href="#antidepressants-can-t-change-the-world-but-they-made-it-tolerable-for-me" aria-label="Antidepressants can't change the world, but they made it tolerable for me permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I've been taking antidepressants for a year now, and I wanted to write a kind of note about how it went. France is known for prescribing a lot of antidepressants, and it's often seen as a kind of morale or motivational failure ("Man up!") that can or should be fixed with a rest ("Go to the beach!").</p>
<p>As a result, the first time I talked about it, my partner was suddenly alarmed. We were out of the first Covid lockdown in France, and it seemed I was doing better after I broke two months prior. Or, should I say, the work of <em>re-sensibilization</em> I was gradually doing with my therapist (allowing myself to listen to my physical and mental sensations) broke loose. The dam that was preventing the feels to overflow me broke, and it took quite some time for everything to settle down.</p>
<p>So two months later, I didn't know what my profesionnal future was going to be, I was buying an apartment, I could not see my therapist to talk about all this. Nor do I wanted to see my therapist. I had already told her I was fed up with fighting for control, that I wanted the <em>easy mode</em> for a moment. So, in a very pragmatic approach, I wrote down on paper what I was feeling and went to see my doctor, and read in front of her what I had written.</p>
<p>Overall, my symptoms were:</p>
<ul><li>An inabiliby to manage unexpected problems. Even the smallest ones took gigantic proportions, made me feel overwhelmed and created panic crisis.</li>
<li>Fatigue. Fortunately, not a massive fatigue that made me unable to socialize. But just getting up in the morning was a chore.</li>
<li>The inabiliby to focus on mentally uncomfortable tasks. It made starting new things very difficult.</li>
<li>Physical pain in the neck, but not entirely due to work desk. My muscles were getting tense for no reasons during conversations.</li>
<li>A feeling of a fear that everything could suddenly collapse. Like, as if something catastrophic was about to happen. It was not very conscious, it just manifested every so often.</li></ul>
<p>And so, because of all the uncertainties related to my career and all the work that was coming with the apartment that I didn't know how to handle, I suggested I could, maybe, start taking antidepressants. She agreed and, seeing it was more an anxious depressive disorder than a fully fledged depression, decided to give me a very mild one dosage.</p>
<p>It turned out to be a very nice move from her. It removed almost all the symptoms I listed earlier, but didn't make me dull, more tired or unable to feel. As a result, I have never felt so good in years. I have never felt so <em>myself</em>. Turns out it wasn't just a feeling. My partner said something that really touched me, she said she felt I was <em>more like the old me, the one when we met</em>.</p>
<p>As a result, I've made considerable progress on many things in the last year. I'm more focused, anxiety and physical pain are gone, as well as the feeling of catastrophe. The considerable amount of work I did in my apartment made me extremely more relaxed about maintaining unexpected problems too.</p>
<p>Today, after renewing my prescription, my doctor talked to me about the future. Am I ready to stop taking antidepressants? At the moment, no. I don't even want to, as I am making huge progress into discovering myself, at the right pace. A moment will inevitably come, when I will have to stop, but... <em>waves at everything bad that is currently happening in the world</em>.</p>
<p>Anyway, that's my personal testimony about taking antidepressants. Please don't take it as a medical advice. Antidepressants are not a magic pill, it's just that <strong>for me</strong>, they worked and since there's a stigma around them, I wanted to encourage people that have the same symptoms as me to, maybe, try talking about them with their doctor, and see how it goes from there.</p>
<p>Take care.</p>
About the no-js mindset2022-03-13T20:03:30+01:00about-the-no-js-mindset<h1 id="too-much-java-script-is-bad-no-java-script-isn-t-better" >Too much JavaScript is bad, no JavaScript isn't better<a href="#too-much-java-script-is-bad-no-java-script-isn-t-better" aria-label="Too much JavaScript is bad, no JavaScript isn't better permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I'm currently working on a proposal to revamp the design and user experience of the <a href="https://sourcehut.org/">Sourcehut</a> open source project. One of the most common feedbacks I got from its users was to not add JavaScript to the project. It was not a surprise, as I am spending a lot of time on the fediverse with <del>nerds</del> people who rely on second hand electronics, bad/expensive internet connection, or are just non-wasteful by philosophy and aren't keen to see any JavaScript loom into their favorite websites or projects.</p>
<p>And sincerely, despite being a front-end web developer that likes this language, I totally get why it gets such bad press.</p>
<p>For the last ten years, the JavaScript powered websites methodology (as in: <em>HTML is generated by JavaScript</em>) was used in situations where it was stupid and unproductive. Way too many people confused <em>applications</em> (example: Google Maps) with <em>interactive documents</em> (example: Twitter), creating heavy, under-performing, battery draining websites ; especially on aging computers and phones, forcing hardware replacement for no reason (and let's not talk about tracking and ads, <em>uh</em>).</p>
<p>Quite logically, an "anti-JS" sentiment took form, with people wanting websites without JavaScript <em>at all</em>, as it makes those more usable on their older hardware and software (and for some, more secure).</p>
<p>But despite understanding the feeling, I can't really agree with the conclusion. Despite my job title, I don't love <code>npm install</code>-ing gigs of code from the internet and serving you loading spinners while I rage against my <code>package.json</code> updates. I'm not the developer advocate of an evil corporation <a href="the-soft-power-of-javascript.html">soft powering you</a> into my monopolistic tribe.</p>
<p>I disagree because I feel this "anti-JS" idea is as exclusive as the "pro-JS" side that birthed it, and because both sides disregard either the technical or human capabilities of their users by taking a scorching earth approach at solving their own issues.</p>
<h2 id="java-script-is-a-double-edged-sword" >JavaScript is a double edged sword<a href="#java-script-is-a-double-edged-sword" aria-label="JavaScript is a double edged sword permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The web has been widely available for twenty years, but they are still a lot of people who did not get used to it. Digital divide is a real thing, with a lot of users struggling when using our websites, both on computers or phones. And if we decided to totally ban JavaScript from the web, those people would have an even harder time than they do now due, to a massive degradation of their user experience.</p>
<p>Let's take a few examples.</p>
<ul><li>A simple JavaScript shopping cart is easier to use and requires less resources than automatically being redirected to a cart page each time you add something into it by pressing a button.</li>
<li>A tax calculator that updates in real time when you enter data, and tells you in real time what you're going to pay, is less stressful, more efficient and requires less back and forth than a page based experience.</li>
<li>An insurance company offering a complex subscription tunnel composed of a dozen of pages is a non-ending, unnavigable mess ; that could be replaced by several smaller forms, stacked onto each others, which can be saved, edited and reduced on the fly, all in a single page.</li>
<li>Someone with dyslexia that needs an adapted design would have to go into its configuration panel to select a dyslexia mode in a form, then validate it, which would reload the whole website with a new stylesheet. It could be replace by a simple toggle button, without reload, in any page.</li></ul>
<p>A <em>one size fits all</em> JavaScripty solution like we have today excludes people economically, promotes environmental waste and capitalism. But a <em>one size fits all</em> non-JavaScripty solution is ableism disguised as techno resistance. You could think that the latter is better than the former, but in reality <strong>we can solve both problems by making JavaScript not be mandatory on interactive documents and using it as a user experience enhancement tool</strong>.</p>
<p>That's what <a href="https://rb.gy/qkqokj">progressive enhancement</a> and <a href="https://rb.gy/fa0uaa">graceful degradation</a> are made for, and they already work very well. You should equally be able to get housing benefits by struggling one hour <a href="https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/">on your Playstation Portable</a> with a basic user experience if that's all you have, or in five minutes on a recent iPhone by using an automatic form filler that picks your data locked with your fingerprint.</p>
<p>Websites that find the right balance between user experience and technical capabilities are already a thing. Promoting a <em>pro</em> or <em>anti</em> JavaScript sentiment is a retrograde approach at a time when we have the tools and knowledge to do better. And it's not just me thinking this. The mindset around JavaScript usage is already shifting in the industry, with more people promoting a more responsible approach, and tools adapting to this new reality.</p>
<h2 id="java-script-evolves-towards-less-java-script" >JavaScript evolves towards less JavaScript<a href="#java-script-evolves-towards-less-java-script" aria-label="JavaScript evolves towards less JavaScript permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Most of the frontend frameworks <em>à la mode</em> are now used in <em>meta-frameworks</em> (with <a href="https://nextjs.org/">Next</a> being the leader) that provide server side rendering with interactions (yes, they are recreating PHP and Jquery <em>duh</em>), thus working on older hardware. Some of those frameworks are not even libraries anymore, but compilers (like <a href="https://svelte.dev/">Svelte</a>) that outputs super tiny and efficient code, far from the bloat we currently experience.</p>
<p>We've seen the rise of <em>micro-frameworks</em> that work exactly like their fatter counterpart, but are 10 times smaller (<a href="https://preactjs.com/">Preact</a> vs <a href="https://reactjs.org/">React</a>) and most of them are even faster. We're even witnessing the creation of Frameworks that compile to HTML and create "islands" of JavaScript interactions, combining the best of both world (that's <a href="https://astro.build/">Astro</a>), even if all of them don't yet have an answer when JavaScript is disabled (but <a href="https://remix.run/">Remix</a> does and seems impressive on this aspect).</p>
<p>Of course all those previously mentioned frameworks rely heavily on a massive ecosystem of tooling which is still problematic, unsecured, brittle and way too heavy (and most of it, owned by Microsoft now). But at least the user experience they output is starting to empower their users instead of their developers. And for folks that don't like NPM but still want to compile JavaScript, there are single binaries like (<a href="https://esbuild.github.io/">esbuild</a>) that you can just install on your system and use <a href="https://jvns.ca/blog/2021/11/15/esbuild-vue/">the way you want</a>.</p>
<p>And finally, if you truly <em>hate</em> JavaScript to the point you don't even want to write it for the sake of your users, there are great libraries who can manage interactions through HTML attributes (<a href="https://htmx.org/">HTMX</a>, <a href="https://alpinejs.dev/">Alpine</a>) for Ajax calls or dom interactions. They already have a lot of success in non-JS culture teams like Python, Ruby or even JAVA.</p>
<p>This is not to say that everything is perfect. It's still gonna take years to undo the damage that Angular and React did to the web while keeping their benefits. But things are progressing in the right direction and maybe, soon, we'll be able to have websites that don't look and feel like a 2005 page, while visiting them on a 2005 computer.</p>
<p>So yes, please, let's use JavaScript. But responsibly.</p>
20212024-01-01T17:49:15+01:002021<h1 id="2021-year-review" >2021 Year review<a href="#2021-year-review" aria-label="2021 Year review permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>2021 was both the more exhausting and relaxing year I experienced in my life.</p>
<p>I did so much stuff I'm not even sure I can list them all. Just with my renovation work, I had to learn sanding, plastering, painting, plumbing, electricity, heating, woodworking ; and use several tools I never heard of before. I automated podcasts, built open source tools, hired one designer and two artists to work on my own website, wrote articles about chairs, JavaScript and depression. I even took a client for freelance work, a first!</p>
<p>And on the other side, I spent several weeks doing almost nothing at all. Not even working for money. Because, for 96% of the year <strong>I was payed an almost full salary by my company without working as single hour</strong>.</p>
<h2 id="renovation-conflicts-and-the-diabolic-wooden-floor" >Renovation conflicts and the diabolic wooden floor<a href="#renovation-conflicts-and-the-diabolic-wooden-floor" aria-label="Renovation conflicts and the diabolic wooden floor permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When 2020 finished I was two months into renovating an apartment I just bought. Overall it was going alright despite some bad surprises and a lot of work. But what I did not expect was how my relationship with the project manager handling some of the renovation was going to degrade. This guy was the most unreliable, unclear and dishonest person I ever worked with. He announced dates without respecting them. Promised to finish some work so electricians could do theirs, and did not deliver. And his guys were terrible. A door was badly positioned and is now askew. All the drywall they added was bulging. They added an entire drywall on rails <strong>and the wall was moving and trembling when pressed on.</strong></p>
<p>But the worst thing is, they were the dirtiest people I ever met. They ruined the laminated floor by not protecting it. Plaster crusts everywhere, that took hours to be removed. When I told the project manager it was unacceptable, they cleaned it, but also completely soaked the floor, resulting in the floor bulging. When their work was finished I did not accept the reception PV and we had to find a middle ground to protect each of our sides.</p>
<p>In the end, upon discovering a wooden floor under the damaged laminated one, I decided to remove the latter. Which meant removing 60 square meters of planks from the fourth floor to my car. And then moving up by hand a 50kg sanding machine and spending a full day sanding the floor. And after that, once moved in, the floor was squeaking so much that my downstairs neighbor came to complain. So I had to drill dozens of holes in the floor, to then cut it where slats where rubbing each other. And then putting expansive foam under it so it stops moving and muffles the sound of the remaining squeaking.</p>
<p>It's 2022 and I haven't finished doing this for the whole apartment, which say how painfully slow this process is. And the plinths. The damn plinths.</p>
<h2 id="the-renovation-benefactors" >The renovation benefactors<a href="#the-renovation-benefactors" aria-label="The renovation benefactors permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Fortunately, it wasn't just incompetent workers and unreliable project managers. My electrician and his guys were the kindest and more professional people ever. They redid the entire electric installation of the apartment on budget and on time despite several setbacks. They made extremely good suggestions, came to fix what was not working and overall, just rocked.</p>
<p>Another person that helped a lot was our... kitchen designer. I must admit that prior to this, <em>kitchen hunting</em> was not an activity I ever envisioned doing. Spending an afternoon going from one kitchen shop to another is not exactly fun, but we had the chance to meet a young seller/kitchen designer. Despite our limited budget he agreed to take on the project and did a very good job of balancing our demands.</p>
<p>Trusting him was one of the best decisions I made this year. He came, took measurements, prevented us from doing mistakes, quickly provided plans for the electricians so they could work without delay. When delivered (on the fourth floor, my god the poor delivery guys), the kitchen furniture was already assembled, which meant way less work. Everything was also super high quality and will last for at least a decade, maybe even two. Not going the cheap route bought me time, effort and peace of mind.</p>
<p>Finally, several friends came in. They helped sanding, moving super heavy things on the fourth floor. One of them even came a whole week to help me install a wooden floor on the balcony. Without them I would not have been able to achieve this.</p>
<h2 id="dads-truly-are-something" >Dads truly are something<a href="#dads-truly-are-something" aria-label="Dads truly are something permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>But, if I have to be honest, the best man of my benefactors list was none other than my own dad. It sounds cliché that a dad would know how to do everything in a house. But damn, my dad really knows how to do everything in a house. Yet, he's a physically broken man. They had to operate his hands, reattach his shoulder, remove part of his spine, two times. So when he came to help me, I supposed we were going to take it slow.</p>
<p>Oh boy, that was not his plan at all. We did two 50 plus hours weeks of manual work. We installed the kitchen furniture and home appliances for three whole days. We spent all the rest doing the bathroom. Soldering pipes, gluing water evacuations, cutting cinder blocks, laying down the shower base, tiling walls, installing the furniture and sink, and so many other things I don't even remember.</p>
<p>And if not for him pushing me like this, this apartment would never have been ready for when we moved in. I expected this to took no more than a week and it took two plus several extra days after. Despite tiredness I enjoyed it a a lot. We had very good weather and spent our breaks on the balcony, eating and drinking under the sun.</p>
<p>We never spend so much time together since I was a kid and I think we both enjoyed it a lot.</p>
<h2 id="the-gautoz-project" >The Gautoz project<a href="#the-gautoz-project" aria-label="The Gautoz project permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>What I did not explain before is how physically violent all this renovation work was. I hurt myself a lot during all those weeks. My back got blocked two times, my hands were damaged (the left one still is), my neck was sore all the time. I was often in pause due to physical or mental pain and in those moments is when I pursued some personal projects.</p>
<p>Early in the year I created <a href="chisai.html">Chisai</a> for <a href="https://gautoz.cool">Gautoz</a>. Gautoz is a former video game journalist extremely respected in the French industry. He decided to go independent on Twitch in 2021 and, outside of his stream, seemed to have nothing prepared. As I am not a big fan of streaming but enjoy a lot the way he covers video games, I offered to build him a website.</p>
<p>Chisai was originally built for him, but was then open sourced, given a name and even got a mascot that I commissioned to <a href="https://www.artstation.com/chlowski">Chloé Stawski</a>. It was the first time I was paying an artist for art and I'm glad it was her. Chisai has been adopted by a few people here and there, and I'm happy if it served them well.</p>
<p>While I was handling the website side of things, my good friend <a href="http://www.yannrieder.com/">Yann Rieder</a> took upon himself to create a podcast version of Gautoz livestreams (the fact that Yann, one if not the most respectful person in the French podcast scene, decided to help, says a lot about how valuable Gautoz's work is).</p>
<p>Then the pandemic started, and I thought that I should probably try to speed up things for Yann, who was getting way too much work during this period. <a href="botoz.html">Botoz</a>, a set of Python scripts that create RSS feeds and mp3 files was born from this. Yann beta tested it for a few weeks and, later in the year, I totally automated the process.</p>
<h2 id="calling-it-done-mid-year" >Calling it done mid-year<a href="#calling-it-done-mid-year" aria-label="Calling it done mid-year permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>We moved in the new apartment in late April, and I have to give credit to my partner for preparing it alone while juggling with work. We hired professional movers, as we knew we would not be able to move an entire apartment from the second to the fourth floor, without elevators, even with friends, in a reasonable time frame.</p>
<p>What followed were a few weeks of cleaning our old apartment, installing our stuff, getting used to live here, finishing touches there and there. I worked on Botoz, then started working on something I wanted for a long time: my own website redesign, and a design system!</p>
<p>I hired <a href="https://merveilles.town/@atari">Atari</a> to propose a few direction, we agreed on one, and then he went on designing while I started coding. The result, still ongoing, is the website you are looking at right now. I also add to rework <a href="ronbun.html">Ronbun</a> a few times to implement this new design. Later on, I commissioned <a href="https://sasj.nl/">Saskia Freeke</a> to create some quirky icons, that I haven't had the time to implement yet.</p>
<p>I also mentored someone while doing a website for a friend, and also did some writing during this period and then...</p>
<p>I stopped. I just stopped.</p>
<h2 id="relaxing-and-finding-a-new-job" >Relaxing, and finding a new job<a href="#relaxing-and-finding-a-new-job" aria-label="Relaxing, and finding a new job permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>In late July and early August, I did nothing. Suddenly I am in <em>my house</em> and there's nothing critical left to do. I adapted this place to my needs, it's quiet, practical and comfy. I feel at ease here, in a way I haven't felt before.</p>
<p>I relaxed instead of keeping myself busy. I read books, I played video games in the couch (something that was impossible before because of the proximity between the living room and the bedrooms). I even took naps and spent some hours daydreaming.</p>
<p>Quite logically, relaxing means doing less personal projects. It shows in my <a href="time.html">time tracker</a>. Once summer was over, the time I allocated to my projects decreased significantly. Outside of a big refactoring of Ronbun to mix content and time entries, most of the work I did was split in little chunks there and there.</p>
<p>Outside of a freelance gig I took for a few weeks (mostly because it was on the amazing <a href="https://getkirby.com/">Kirby CMS</a> and I liked the client), and doing self teaching for my new job (that I got by <a href="https://twitter.com/Thomasorus/status/1435908199929065475">shitposting on Twitter</a>) I did almost nothing but having fun and relaxing until the end of the year.</p>
<p>And it felt <em>so good</em>.</p>
<h2 id="did-i-achieved-my-goals" >Did I achieved my goals?<a href="#did-i-achieved-my-goals" aria-label="Did I achieved my goals? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Most of them, yes!</p>
<dl><dt>Work on art directed articles</dt><dd>I did not, but worked on my own design system and content, so I take it as a success.</dd><dt>A new portfolio</dt><dd>I <a href="portfolio.html">did it</a> and it was a waste of time since it did not convince anyone.</dd><dt>Write CSS guidelines</dt><dd><a href="css-methodologies.html">Done</a>!</dd><dt>Code less</dt><dd><strong>FAILED</strong>. I coded almost twice as much in 2021 than in 2020. If I have to work on something in 2022 it would be a way to post more easily on my website. Things like my drawings, thoughts, or evolve my time tracking system.</dd><dt>MAKE ART</dt><dd>I DID IT! I started taking Live model drawing lessons in Septembre, and it's been a blast. That's the most fun I have each week, my skills are improving and I even started drawing a little bit outside of lessons. Probably the biggest personal success of the year!</dd><dt>WRITE FICTION</dt><dd>I did some, but not much. Still, it's a start and I hope I can continue.</dd><dt>Be responsible</dt><dd>I think I succeeded. My partner had to handle a lot in 2020 and I think I managed to help her back in 2021. She's been improving and achieving her goals too, and also started to relax a lot more since we moved in.</dd><dt>Relax</dt><dd>Oh <em>yeah</em>, don't worry, I relax.</dd></dl>
<h2 id="2022-goals" >2022 Goals<a href="#2022-goals" aria-label="2022 Goals permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt>Draw more</dt><dd>That's the one. I want to install a drawing corner in my home and draw more. I want to do more human bodies, muscles, portrait and erotica.</dd><dt>Write more</dt><dd> For now I'm only developing characters. I think it's more about thinking about doing it, because each time I engage in this activity it's actually going well.</dd><dt>Engage in more unproductive activities</dt><dd>My book and steam backlogs are ready and waiting for me, I'm not worried.</dd><dt>Code less</dt><dd>Since I have a new job that involves coding all day, I'll probably code less anyway. Most of it will be devoted to continuing my design system and my website.</dd><dt>Explore more</dt><dd>I want to continue growing into a more peculiar adult. Discover new things in life, dare to go out of bounds, and have fun.</dd></dl>
<p>See you next year!</p>
Drawing2023-03-03T17:22:26+01:00drawing<h1 id="drawing" >Drawing<a href="#drawing" aria-label="Drawing permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<em>(The drawings in this page were made between September 2021 and February 2022)</em><p>I've been drawing since I was a kid, but was never very talented at it. My parents explained that, when I was very young, my perfectionist nature would make me trash almost all drawings I was making due to frustration. Perhaps for this reason I stopped and only started drawing again in high school to pass time in lessons I was not interested in.</p>
<p>To me, drawing was, more than anything else, the thing you do to create comics. I've grown up reading a ton of French, Belgian and Japanese comics, but not so much fine art outside of a art history school lessons. Comics are what built my visual culture growing up. I think my first important visual shock was the discovery of BLAME! by <a href="https://en.wikipedia.org/wiki/Tsutomu_Nihei">Tsutomu Nihei</a>. Even today there's nothing that looks like it.</p>
<figure><picture><source type="image/webp" srcset="/img/march-2022-1-400.webp 660w, /img/march-2022-1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Drawing made between September 2021 and February 2022" srcset="/img/march-2022-1-400.jpg 660w, /img/march-2022-1-700.jpg 1440w" src="/img/march-2022-1.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="/img/march-2022-1.jpg">Full size</a></small></figcaption> </figure><p>I went to art school during the mid-2000. At this period, art teachers hated that students were either inspired by Tim Burton aesthetics or manga aesthetics. I mostly draw there, and I already had trouble with shadows and shades. But according to my teachers, I had a good sense for lines and volumes. I was (and am still) terrible with colors. I don't know how they work. I don't know how to mix paint, color pens. I was an absolute disaster during the very short color lesson I had.</p>
<p>So I just kept drawing in black and white, because that's what my aesthetics are. I discovered a lot of artists that I adore. Unsurprisingly, my favorite painter is <a href="https://en.wikipedia.org/wiki/Pierre_Soulages">Pierre Soulages</a>. I had several difficult art crisis and blocks in art school, trying to find my voice and my process. When I graduated in 2009, this research wasn't finished or had enough roots to continue to grow. Also, I was so frustrated with art that I entirely stopped doing any.</p>
<figure><picture><source type="image/webp" srcset="/img/march-2022-2-400.webp 660w, /img/march-2022-2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Drawing made between September 2021 and February 2022" srcset="/img/march-2022-2-400.jpg 660w, /img/march-2022-2-700.jpg 1440w" src="/img/march-2022-2.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="/img/march-2022-2.jpg">Full size</a></small></figcaption> </figure><p>The pause turned into a 13 years struggle. I would start drawing again, be unsatisfied, not able to find my roots, that were dried at this point, and give up. Also I had no idea what to draw, or in which conditions. The only thing that made me draw in art school was writing stories and depicting them. Comics basically wired my brain in this strange way. I require context to find a subject and get the desire to draw.</p>
<p>Not so surprisingly, the trigger came again from comics. In 2021 I started watching <a href="https://www.naokiurasawa.com/">Manben</a>, a series by manga artist <a href="https://en.wikipedia.org/wiki/Naoki_Urasawa">Naoki Urasawa</a>, that documents how manga artists work by filming them for days. This series is probably the biggest art un-blocker you can find. Some of those artists strive for the perfect line. Others will redo drawings ten times, making a crust of white eraser on their paper. Others use photos, scanners, lousy brush strokes, or even photoshop version 4.0 and can't draw a line correctly 9 times out of 10 after 30 years of career.</p>
<p>This was a trigger for me to understand that drawing, like most craftsmanship, is about figuring out a process you find interesting and feel like doing thousands of times without getting bored. The result may not look like what you strive for or the artists your admire, but will be the pure, unfiltered result of who you are.</p>
<figure><picture><source type="image/webp" srcset="/img/march-2022-3-400.webp 660w, /img/march-2022-3-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Drawing made between September 2021 and February 2022" srcset="/img/march-2022-3-400.jpg 660w, /img/march-2022-3-700.jpg 1440w" src="/img/march-2022-3.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="/img/march-2022-3.jpg">Full size</a></small></figcaption> </figure><p>So, I've started drawing again in 2021. I go to live model drawing lessons, again in an art school. It's a ton of fun, probably because I'm now in a situation where I can do whatever I want and answer to nobody but myself. Drawing isn't linked to grades, or a future career. It's all about finding what I enjoy doing while doing it, and seeing an often unexpected result at the end. It never ceases to surprise me.</p>
<p>My favorite tools are gray pens, markers and black ink with brushes. I draw on large paper, most of the time on 50 by 60 centimeters sheets. I feel constrained by small paper sizes, as I can't draw with my arm and need to use only my wrist, which tends to frustrate me. I also have hard time drawing with models far from me, or for long sessions. It's actually super hard for me to last more than 20 minutes on a drawing.</p>
<p>Today my favorite drawers are probably <a href="https://en.wikipedia.org/wiki/Hiroaki_Samura">Hiroaki Samura</a>, <a href="https://en.wikipedia.org/wiki/Takehiko_Inoue">Takehiko Inoue</a>, <a href="https://en.wikipedia.org/wiki/Katsuya_Terada">Katsuya Terada</a> and <a href="https://en.wikipedia.org/wiki/Shin-ichi_Sakamoto">Shin'ichi Sakamoto</a>. Unsurprisingly, all of them are or were manga artists, all of them depict humans, animals and surroundings in expressive strokes and expressions.</p>
<p>I like drawing people, and the expression that shows through their bodies and faces.</p>
<figure><picture><source type="image/webp" srcset="/img/march-2022-4-400.webp 660w, /img/march-2022-4-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Drawing made between September 2021 and February 2022" srcset="/img/march-2022-4-400.jpg 660w, /img/march-2022-4-700.jpg 1440w" src="/img/march-2022-4.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption><small><a href="/img/march-2022-4.jpg">Full size</a></small></figcaption> </figure>Recovering from depression2022-04-13T20:01:33+02:00recovering-from-depression<h1 id="recovering-from-depression" >Recovering from depression<a href="#recovering-from-depression" aria-label="Recovering from depression permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Last year I wrote about <a href="one-year-with-antidepressants.html">how and why I started taking antidepressants</a> to better manage depression and anxiety. My commitment to normalize talking about mental health issues has not changed, so here's an update on where I am right now.</p>
<p>At the time of writing, I no longer take antidepressants and have been somehow managing. One of the reasons I started taking them was because both my physical and mental feelings were going wild and I was unable to control them into something positive. I needed to be a bit insensitive. Not much, but just enough.</p>
<p>Last December I started a new job, and despite me liking it, it's still work and work makes tires you by design. The combination of long hours and antidepressants shifted the balance go on the opposite side. I was getting too desensitized, and wondering what I should do about it.</p>
<p>That's when I encountered a conference talk on depression by <a href="https://yapko.com/michael-yapko/">Michael Yapko</a>. It's called <em>How to recover from depression</em> and it's available on <a href="https://www.youtube.com/watch?v=TVgQ_tgWMyU">Youtube</a> and in <a href="https://psychlopaedia.org/health/how-to-prevent-depression-full-transcript/">text format</a>. Yapko identifies risk factors (<em>"anything that increases the likelihood of somebody suffering a particular disease or condition"</em>) that increase your chances to have depression. For example, children of depressed parents have three to six times more chance to be depressed, making depression a contagious social disease.</p>
<p>Learning about those risks factors was a huge help in stopping antidepressants and I wanted, both as a reminder for myself and for others, to write them down.</p>
<p>Please be aware that again, this is not a medical advice and that if you need one, you should seek help form a professional.</p>
<h2 id="depression-risk-factors" >Depression risk factors<a href="#depression-risk-factors" aria-label="Depression risk factors permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Risk factors can be extremely personal, or quite the opposite, shared by a lot of people. And that's those more common ones that Yapko describe in his talk.</p>
<p>He explains five of them:</p>
<ol><li>Internal orientation</li>
<li>Stress generation</li>
<li>Rumination</li>
<li>Global thinking</li>
<li>Unrealistic expectations</li></ol>
<h3 id="internal-orientation" >Internal orientation<a href="#internal-orientation" aria-label="Internal orientation permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Internal orientation is the act of using yourself as the reference point. It's using feelings to make decisions, and using feelings to interpret what you are interpreting.</p>
<p>The internal orientation drives people inwardly. It's a narcissistic self-absorption attitude driven by the <em>"Trust your feelings"</em> advice (which according to Yapko is a very <em>very</em> bad advice). The problem is, feelings are deceiving and can make things look way worse, or way better, than what they really are.</p>
<figure><blockquote cite="https://www.youtube.com/watch?v=TVgQ_tgWMyU">If you look at the times that people get in the most trouble, it's when they get wrapped up inside in whatever they happen to believe that may have next to nothing to do with what's actually going on out there. Clinicians call this cognitive rigidity.</blockquote><figcaption>— Michael Yapko, <a href="https://www.youtube.com/watch?v=TVgQ_tgWMyU">How to recover from depression</a></figcaption></figure><p>Depressed people think things and then make the mistake of actually believing themselves. To try to get out of this subjective mindset, they have to learn to reality test. Going outside of themselves to better understand what's really happening and generate multiple explanations to an event that is triggering depression.</p>
<h3 id="stress-generation" >Stress generation<a href="#stress-generation" aria-label="Stress generation permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Internal orientation, among other things, can lead to bad decision making. And bad decision making complicates and exacerbates depression by creating stress. Yapko takes the simple example of exercising. It has the same success rate as a treatment as antidepressants. But someone listening to their feelings won't do it. Same for going to the doctor, or a therapist, or stopping alcohol.</p>
<figure><blockquote cite="https://www.youtube.com/watch?v=TVgQ_tgWMyU">What stress generation speaks to is how people make decisions that complicate their depression, exacerbate their depression. They don’t do it intentionally, but it speaks to the quality of their decision-making strategies, and when people don’t have good decision-making strategies, when they just follow their heart, just follow their feelings, they’re going to make mistakes.</blockquote><figcaption>— Michael Yapko, <a href="https://www.youtube.com/watch?v=TVgQ_tgWMyU">How to recover from depression</a></figcaption></figure><p>Feelings come and go, but consequences of our actions last. To get out of these stressing loops, depressed people need to take actions that are consistent with their personal goals, and avoid taking actions consistent with their feelings. It's particularly important to not take decisions without a balanced mood, as its state influences the perceptions and the quality of decisions.</p>
<h3 id="rumination" >Rumination<a href="#rumination" aria-label="Rumination permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Rumination is the act of spinning around the same thoughts and endlessly analyzing at the expense of taking action. Rumination increases anxiety and depression by making basic things, like sleeping, difficult.</p>
<p>Ruminators are often trying to figure out what to do next based on what happened before. They use the past to predict the future, an habit called <em>past orientation</em>.</p>
<figure><blockquote cite="https://www.youtube.com/watch?v=TVgQ_tgWMyU">So they say things like, “I'll never be happy.” Prediction for the future. “Why not?” “Because I never have been.” “I'll never get a good job.” “Why not?” “Because I've never had one.” ” I'll never have a good relationship.” “Why not?” “Because I've never had one.” [...] For as long as somebody gets caught up in that loop, they're not going anywhere, why it becomes so incredibly important to convert to action.</blockquote><figcaption>— Michael Yapko, <a href="https://www.youtube.com/watch?v=TVgQ_tgWMyU">How to recover from depression</a></figcaption></figure><p>To get out of this loop, it's important to not define itself by the unchangeable history. For survivors of a traumatic event, it's important to recognize it, but not let it orientate the future as it will close the field of possibilities.</p>
<p>One of the cures of rumination taking action in a timely and effective manner. Another one is to learn the difference between useful analysis and useless rumination.</p>
<h3 id="global-cognition-or-thinking" >Global cognition or thinking<a href="#global-cognition-or-thinking" aria-label="Global cognition or thinking permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Global cognition is the act of generalizing instead of problem solving. It's the unfamous <em>"Men/Women are all the same"</em> after a breakup.</p>
<p>Being a global thinker prevents from achieving goals by forbidding going into specifics. It doesn't mean that people are globally thinking every aspect of their life. They can be very good at problem solving specific things, and unable to do the same into other areas without even acknowledging it.</p>
<figure><blockquote cite="https://www.youtube.com/watch?v=TVgQ_tgWMyU">They say to me, “Well, all I want is to be happy. Is that too much to ask? All I want is a good relationship. Is that too much to ask?” Then I'll ask the specifics. “So, what do you think it takes to build a good relationship?” And the person comes back with an equally global response when they say, “Chemistry”. If you think in those global terms, metaphorically you see the forest, but you don't see the trees, then you can't be an effective problem solver.</blockquote><figcaption>— Michael Yapko, <a href="https://www.youtube.com/watch?v=TVgQ_tgWMyU">How to recover from depression</a></figcaption></figure><p>Global thinking takes time to fix as it requires exercising with a therapist to sequence the steps needed to achieve a desired goal. It's basically learning to flow chart and micro-analyzing life.</p>
<h3 id="unrealistic-expectations" >Unrealistic expectations<a href="#unrealistic-expectations" aria-label="Unrealistic expectations permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Having unrealistic expectations is a recipe for hurt and disappointment. The main problem is, do people know that they have unrealistic expectations?</p>
<figure><blockquote cite="https://www.youtube.com/watch?v=TVgQ_tgWMyU">You've got to know who you're dealing with and whether the expectations are realistic before you walk into a situation that's charged, before you walk into a job interview, before anything. Lay it out. What are your expectations? How do you know whether this is realistic or not? If you get good at doing that, you will save yourself a lot of disappointment.</blockquote><figcaption>— Michael Yapko, <a href="https://www.youtube.com/watch?v=TVgQ_tgWMyU">How to recover from depression</a></figcaption></figure><p>Basic examples could be expecting repeated signs of affection from a partner that has never been very demonstrative to begin with. It can also be not expecting unrealistic things from others when they don't have any control on those things, like winning the lottery. It's not that expecting things is bad, just that those things have to be in line with reality.</p>
<p>Taking a step back to reality check expectations is also a skill that can be learned.</p>
<h2 id="working-against-those-risk-factors" >Working against those risk factors<a href="#working-against-those-risk-factors" aria-label="Working against those risk factors permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Reading about those risk factors and how it can be socially contagious was eye opening. Rumination and unrealistic expectations are common in my family and were transmitted to my siblings and I. The generated stress often leads to a destructive attitude that is shared by several members. Fortunately, most of us in the family identified those patterns pretty early in adult life and worked to mitigate them.</p>
<p>I'm a bit inclined to internal orientation and I ruminate <em>a lot</em> instead of taking action. What surprised me was that my previous therapist did not thought about rumination as something dangerous. She said that sometimes, it's good to imagine how things could have turn out or fantasize to relieve stress, so I never interpreted it as something negative.</p>
<p>After watching the video and thinking it through, I stopped taking my antidepressants. Despite being at a very, very low dosage, withdrawal symptoms were brutal for two weeks. But having read about them and remembering to not listen to myself too much, I passed through it and came out clean.</p>
<p>But I quickly realized that I had other habits feeding my depression that I needed to eliminate. Among them, I stopped bringing my phone inside my bedroom, and bought a sunlight alarm clock. Removing my phone was actually the biggest and quickest benefit I felt. It significantly reduced my ruminations. It also leveled up my mood in the morning because, <em>shocked-pikachu.jpg</em>, getting up and opening shutters before seeing a screen is good for humans.</p>
<p>Still, there was last one thing. I got used to drink alcohol, even in small quantities, as was a way to relieve stress after work.</p>
<figure><blockquote cite="https://www.youtube.com/watch?v=TVgQ_tgWMyU">Why do I say stop drinking? If you are depressed, if you are vulnerable to depression, your alcohol intake should be zero. Alcohol is a bad drug for people who are depressed or prone to depression. It has been shown to aggravate the same neuro pathways as depression. If you are a depressed person, your alcohol consumption should be zero. [...] When I say alcohol's a bad drug, I am understating it.</blockquote><figcaption>— Michael Yapko, <a href="https://www.youtube.com/watch?v=TVgQ_tgWMyU">How to recover from depression</a></figcaption></figure><p>Seeing how Yapko insisted alcohol was a terrible mistake, I packed all the bottles of my house into bags and dropped them to a friend's, to its delight. I didn't drink for a month, then relaxed my rules to allow myself a beer under conditions: no alcohol in the house, no alcohol outside the house during working days.</p>
<p>I compensate the lack of alcohol with two things, ginger ale and sport. I registered to a gym two months ago and am now trying to go two times a week. It's expensive and I dislike the place, the effort and the overall experience so much it turns into a battle against internal orientation every time. But I try to remember it's a mean that aligns to my goals, and the dopamine rush during the after workout shower is real.</p>
<p>Overall it's been working well for those last two months. I still ruminate, I still listen to myself a little bit too much, but I'm starting to identify those moments and mentally push them away. It's probably going to take months, if not years, before I can say I recovered from depression and anxiety, but I'm happy to finally having this goal in my life, and taking action to achieve it.</p>
<p>Take care.</p>
Every web stack is a product now2023-01-06T17:18:29+01:00every-web-stack-is-a-product-now<h1 id="every-web-stack-is-a-product-now" >Every web stack is a product now<a href="#every-web-stack-is-a-product-now" aria-label="Every web stack is a product now permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p>When I write <em>web development</em> below, I mostly mean <em>front-end web development</em>, so things that relate to HTML, CSS and JavaScript.</aside><p>When I started web development seven years ago, I was in survival mode after years of low paying wages and unemployment. It <em>had</em> to work, and for it to work, I <em>had</em> to always learn more, read and listen about web development all the time, monitor the field, socialize as much as possible with my peers. This way, I would not get disposable and lose my job. I would build a network. I would be safe.</p>
<p>In some aspects, it worked. I saw the adoption of JavaScript based tech stacks coming, and jumped onboard. I found places that made good use of my skills in code and visual design, and worked there. I built a network. Everything worked out as planned. And I enjoyed doing it.</p>
<p>But lately, everything related to web development feels stale and toxic.</p>
<p>I think it's because this whole ecosystem is currently shifting to a new paradigm, which turns frameworks, libraries and people who make them into marketed, vertically integrated, growth oriented, open sourced, <strong>products</strong>.</p>
<p>As a result, nothing feels genuine anymore. Almost every article, newsletter or podcast feels like an ad. The tone and content are streamlined to avoid discomfort and controversy. Everybody oozes fake positivity about how great web development is, or will be, by using their framework (which works best when coupled with the products its sponsoring company does, of course).</p>
<p>As critical voices are categorized as downers, sometimes even harassed (especially if they are women), the field turns into an ever-increasing technical mono-culture. Old concepts are re-branded and sold as novelty. The developer experience is considered more important than user experience or the website's performances.</p>
<p>Way often these tools, products and services don't make sense in real life. They are either too expensive in the long run, vendor locked-in traps, or over-engineered and thus too complex for small to medium average teams. And yet, they still are picked, as alternatives are made invisible by the marketing noise.</p>
<p>Monitoring the field doesn't feel like learning new things anymore. It feels like reading a never ending flow of brand content updates similar to consumer tech products. Like smartphones, it's all about this new feature nobody asked for, the % of power/speed gained compared to the last model, all presented during keynotes.</p>
<p>So I think it's time for me to let go and stop caring about this nonsense. Delete social media lists, unsubscribe from podcasts and newsletters. Remove this mental charge from my brain.</p>
<p>If I ever lack a skill or specific knowledge, I'll learn it when I need it. If my company needs me to learn something new, it will be done on company time. As it should be.</p>
20222024-01-01T17:49:15+01:002022<h1 id="2022" >2022<a href="#2022" aria-label="2022 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>It pains me to report that 2022 was quite a shitty year. Not everything was bad, but most of it was. I'm quite tired and frustrated, so please excuse the disjointed nature of this recap.</p>
<h2 id="the-positive" >The positive<a href="#the-positive" aria-label="The positive permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The new job is going great. I have zero personal interest in the project itself, only professional interest, which is actually great as I don't self-pressure myself into work. It's challenging, in a good way. Some parts are going too slowly, which frustrates me, but that's the way things are, especially this year with the recession.</p>
<p>The job forces me to go to Paris every month which tires me, but it's actually worth the time. I work with great humans, which makes our encounters pleasant. I also reconnected with a lot of old Parisian friends, some of them not seen for years. It's been such a pleasure to catch on with everyone. I also made new friends, which is always great.</p>
<p>During the first half of the year I also did some freelance work for a nice client. The project was cool, on a topic I enjoyed working on. But it was also bigger and took more time than all of us involved expected. Still a very positive experience in the end.</p>
<p>I went to a meetup with the European members of the <a href="https://merveilles.town">Merveilles</a> community. It happened on an island near Venice, so I took the time to visit the city! It was beautiful, my first true vacation since 2019, as well as my first solo travel for a very long time. And the folks were exactly the kind of splendid human beings I expected them to be. I'm glad I met them and I can't wait to go back again this year</p>
<p>I draw a lot this year during my drawing classes! I have a ton of paper sheets I need to order, a lot of them will go to the trash as the drawings are terrible, but that was such an joyfull experience. I wrote about <a href="drawing.html">my relationship</a> with drawing, and how I see it. I also started taking online lessons and writing <a href="drawing-notes.html">notes</a> on the topic, but did not progress as much as I wanted.</p>
<p>And finally, I made some progress on personal issues. As I <a href="recovering-from-depression.html">wrote last January</a> I managed to recover from depression and stopped taking antidepressants. I also worked with my partner to evolve our relationship, which she accepted and I'm grateful.</p>
<h2 id="the-negative" >The negative<a href="#the-negative" aria-label="The negative permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Health.</p>
<p>I got COVID in August. I coughed for two months and had to stop going to the gym, which resulted in terrible mood swings. COVID also reactivated my asthma and weakened me a lot. My partner still has long COVID, among several other health issues, that requires my help from time to time, but mostly it hurts morale.</p>
<p>When I was just recovering from COVID, I caught the flu. A strange kind of flu that lasted for weeks, once again preventing me from doing any exercise, social activities, personal projects like going to my drawing lessons, which I had to quit for months.</p>
<p>And now I have osteoarthritis on my thumbs, as well as inflamed hands, which is not a good things when your job depends on them. It was triggered by a caulk silicone gun, and since that time it's been progressing, slowly but surely, to the point where some mundane everyday actions now hurt.</p>
<p>I've always been someone that could physically do almost anything in a carefree manner, and coming to the realization that those times are now over has been hard. I can still do most things, but I need specialized tools to avoid forcing. At 36, it hurts morale.</p>
<p>What also hurt morale was seeing my grandmother slowly but surely losing her independence, to the point where she had to be placed in an retirement house. She feels better now, but it triggered a chain of events that took a toll on everyone involved, and also conversations with parents about that to do about them when it happens.</p>
<p>And, finally, when I thought the year was finally ending and nothing bad could happen in the last short few days of the year, a friend died from a stroke on Christmas day. It's the third person I know, in tree years, that suffers from a stroke due to stress, and the second to die from it, and I don't like this trend.</p>
<p>It was the final trigger that made me choose to stop freelancing. I've transferred my clients to colleagues, and will solely focus on my daily job and hobbies from now on.</p>
Also:
<ul><li>French people almost elected fascists to power this year, the alternative being reincarnated Margaret Thatcher in a smoking.</li>
<li>Social services are being destroyed by our government, to the point where it's almost not functioning anymore.</li>
<li>The ocean was on fire, we hit temperature records, the heatwaves almost killed a family member.</li>
<li>I stopped <a href="every-web-stack-is-a-product-now.html">caring web development</a>.</li></ul>
<h2 id="did-i-achieved-my-2021-goals" >Did I achieved my 2021 goals?<a href="#did-i-achieved-my-2021-goals" aria-label="Did I achieved my 2021 goals? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Details for 2021 goals are written <a href="2021.html#2022-goals">here</a>.</p>
<dl><dt>Draw more</dt><dd>Success! I installed a drawing corner, and I definitely draw more. I've done mostly human bodies, muscles, portraits, but no erotica. I'm probably too shy.</dd><dt>Write more</dt><dd>Failed! I should start writing fiction again, but I'm tired.</dd><dt>Engage in more unproductive activities</dt><dd>Mixed bag! I worked during the first six months, but played a lot of video games during the rest of the year.</dd><dt>Code less</dt><dd>Failed! Again because of freelance work, but I also started a new personal project with a friend and did some things there and there.</dd><dt>Explore more</dt><dd>Success! I've been coming into terms with a lot of things, dared to try several others, and will continue in 2023.</dd></dl>
<h2 id="2023-goals" >2023 goals<a href="#2023-goals" aria-label="2023 goals permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>They are basically the same, but refined:</p>
<dl><dt>Draw better</dt><dd>I need to focus on my own process this year, and work on some long term, finished pieces that require thinking.</dd><dt>Engage in more unproductive activities</dt><dd>Big focus on my pile of comics and books. So many books to read!</dd><dt>Code for fun</dt><dd>I'll continue this personal project I mentioned before, and probably work on new personal tools for habit tracking and time tracking.</dd><dt>Self exploration</dt><dd>That will be the more challenging one, but it's also very personal, so I won't go into details here.</dd></dl>
<p>See you next year!</p>
From static site generator to static site processor2023-03-06T10:28:34+01:00from-static-site-generator-to-static-site-processor<h1 id="from-static-site-generator-to-static-site-processor" >From static site generator to static site processor<a href="#from-static-site-generator-to-static-site-processor" aria-label="From static site generator to static site processor permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>My website was in a state of rotting for a year, but I'm finally happy to report it's fixed now! The various changes made will allow me to write, update and publish way more easily than before.</p>
<p>It took some time as I felt kinda stuck in the clumsiness of the project. It had become a mix of JavaScript for the data processing and page generation ; and of bash scripts for tasks related to assets and development. The whole thing was failing very often, to the point I was not feeling any joy using it. If you've not been following for a long time, building this website has been one of the joyous experiences of my career on the past 3 years, so I felt terrible to have this playground kinda broken.</p>
<p>I needed a change of mindset. I already had several JavaScript modules for parsing my text files, my markup language, processing data from them. I wanted to continue to use those modules, as I think they are the real value of my project. They reflect how I work and think, they are representative of my journey.</p>
<p>Then, I thought about what constitutes a personal static site generator, and came to the conclusion it's not what spits the HTML and CSS, but the data processing happening before the generation that delivers an array of items that will be turned into a website. Maybe I should not do a full static site generator, but a static site processor that delivers data that can be transformed into a website.</p>
<p>This way, I could continue having fun by plugging new ideas into my <em>brain machine</em>, and disregard the actual generation of files, the optimization of assets. But as a web developer specialized in coding interfaces, I cannot not care, I have <em>standards</em>. I want a fast, cohesive, fun and accessible experience. And for this I need tools to process the parts that I don't want to manage myself anymore.</p>
<h2 id="finding-a-good-html-printer" >Finding a good HTML printer<a href="#finding-a-good-html-printer" aria-label="Finding a good HTML printer permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
So I decided to look again at existing static site generators for Node. To please me, it had to satisfy those needs:
<ul><li>It needs to be a basic HTML printer, not a framework with front-end libraries.</li>
<li>It must be opinionated enough on its tool chain so I don't have to add config files to process assets and pages.</li>
<li>It mustn't be opinionated on the data source and allow pre-processing of the source files.</li>
<li>Easy to maintain, update and run.</li></ul>
<p>And of course, I found nothing. <a href="https://www.11ty.dev/">Eleventy</a> is probably the closest to my needs, but it still hasn't migrated to ES modules ; its documentation is complete but somehow, I find it confusing and messy and can hardly find what I'm looking for ; and you still have to configure a lot of stuff for the assets processing, thus are stuck in the <em>fabulous world of the JavaScript ecosystem</em>.</p>
<p>I was disappointed for a few weeks, until I saw <a href="https://toot.cafe/@baldur">Baldur</a> talk about its experience with <a href="https://deno.land/">Deno</a>. Deno is a JavaScript runtime equivalent to Node, but with several differences that instantly satisfied my laziness:</p>
<ul><li>It has its own shell to run scripts which makes it environment independent.</li>
<li>There's no package manager, just imports using URLs, so no <code>node_modules</code> madness (but you can store your modules for offline use if you want).</li>
<li>Its JavaScript API is the closest as it can be to the browser JavaScript API, which is good to me as a front-end developer.</li>
<li>It's a full tool chain that comes with a linter, a test runner, a formater, so there's no time wasted on this.</li>
<li>It has a no-dependency external stdlib for more complex needs.</li></ul>
<p>And it turned out that <a href="https://mastodon.gal/@misteroom">Óscar Otero</a>, who really enjoys Eleventy, made its own version of it for Deno, called <a href="https://lume.land/">Lume</a>. It follows Deno principles of being near zero configuration, non-opinionated about the source of data, and comes with a set of official, easy to use plugins, and a clear, concise documentation.</p>
<p>I grabbed my modules, made them even more modular and oriented towards data processing, and connected them to Lume through the config file, and it... worked. There isn't a lot to say, I just imported the modules I needed, configured the process and copy for the assets ; created a for loop into a template file ; split my template into layout partials for more clarity ; and the website was generated.</p>
<h2 id="simplifying-the-project" >Simplifying the project<a href="#simplifying-the-project" aria-label="Simplifying the project permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Seeing this tooling part was done, I could then go back to what I wanted: fixing stuff in my static site processor, ease the writing and modifying of the website.</p>
<p>Here's a list of changes for the data processing:</p>
<ul><li>The builder can now take several content files instead of one, which should allow me to group content in separated files. For example, I could group all the journal entries into a single file, or use a file per page if I wanted. I really like this flexibility.</li>
<li>I added creation date to all posts. With my website in this current form turning 4 years old, I felt some pages needed time contextualization. Some information could be outdated, and dates help to make sense of what you read. I did not have any dates prior to this, so I used the git history to catch the oldest commit for each page, and updated the content files.</li>
<li>I also added a generation date, updated when the content changes. This part isn't perfect, as it uses the live RSS file as a source of truth and compare markups, not the content itself. Inline markup changes (for example image sizes) can then trigger a date change, but that's a sacrifice I'm OK with. This part was the trickiest to get right.</li>
<li>Added the ability to exclude pages from the RSS Feed. Since some pages are just automatic listings of other pages, they did not provide any value for RSS users and polluted their feeds without giving anything valuable when updated.</li>
<li>Redid the whole RSS feed in ATOM, as I felt its specs made more sense to me.</li></ul>
For the design and tooling:
<ul><li>The design system powering this website was a different project in a different repository. Each time I changed something I had to open it, make a change, then move the processed file into the SSG. It made me mad every time, so I imported all the CSS files inside Lume, it processed them without trouble, and I can now experiment live with my CSS in a single place. I'm also porting the design system documentation on the website.</li>
<li>The templating that was done in my modules is now almost entirely done using nunjucks files. I like nunjucks, it's an easy to use and understand syntax.</li>
<li>I removed the icons from the footer. We are so used to use basic icons for everything that I never questioned the fact they did not fit in the style of the website. And text is more clear for readers.</li>
<li>I moved the configuration panel to the footer instead of the main menu. I felt it was out of place, as the other elements of the menu are navigation links.</li>
<li>In the configuration panel, I removed the ability to change fonts. I initially added them for accessibility purposes, but this effort was misguided. You can read more about fonts and accessibility <a href="https://www.nngroup.com/articles/best-font-for-online-reading/">in this research</a>.</li>
<li>Drastically reduced the size of fonts from 300kb to 65kb using sub-setting. It's the only thing I could not fully automate as it takes a lot of time to scan the site.</li>
<li>Fixed image generation sizes to only three: mobile, desktop, full-size. Visitors on mobile should have a better experience now. Also I don't have to run a separate script and it takes way less time after caching.</li>
<li>Fixed a lot of small visual annoyances and bugs, most you probably never noticed.</li></ul>
<p>I'm probably forgetting a lot of stuff, and I still have many things left to do.</p>
<p>I'm happy to be in a place where it's now possible to just open my code editor, write or code, save and publish without stressing about something breaking.</p>
<p>Again, many thanks to all the people who created the tools I'm now using, especially to Óscar Otero who created lume.</p>
Design and disappointment2023-04-26T10:22:15+02:00design-and-disappointment<h1 id="design-and-disappointment" >Design and disappointment<a href="#design-and-disappointment" aria-label="Design and disappointment permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>After I became a front-end developer, I thought liking design could differentiate me from others in my field. After all, finding a front-end developer who cares when something looks bad is hard, and I was told those kind of people were valuable. So I doubled down on the <a href="https://www.trysmudford.com/blog/design-foundations/">Design Engineer</a> role and learned quite a few things about design, systems, accessibility, etc.</p>
<p>But after more than seven years working in all types of companies, I feel like I wasted my time and energy trying to be in a position that ultimately leads to disappointment and yield no results.</p>
<p>From my experience, when time or money are missing, design is the first thing to get cut in favor of business features. And that's normal. A pretty page that does nothing is useless, an ugly page that gets the job done is better. You have to improvise, and constraints can make the job interesting. I'm not mad about this.</p>
<p>But where I worked, design was underfunded <em>every time</em>, in <em>every company</em> no matter its size, business field, or claim of being <em>design centric</em> or not. And once again, I learned to deal with it. I can adapt and compose with low budgets. It's not about being fancy, it's about having standards to compose great websites.</p>
<p>But then every time, non-designers meddled in and turned everything into a shit show.</p>
<p>Sales, marketers, CEOs, careerist managers ; they all had <em>opinions</em> on design, despite most of them having zero or dated experience in the field. They acted as thought leaders and requested changes so they could justify their yearly bonuses, ask for promotions, boost their egos, or display leadership ; dispossessing me of the authority over my work in the process.</p>
<p>This is a common issue in many corporations, where value is measured by the number of projects you push in production each year. In this kind of environment, successfully bootstrapping a design system is almost impossible, as it doesn't bring a fast enough return on investment (and no <em>WOW</em> effect) for the yearly rewards of those supervising it. And if you get it started, avoiding the destruction of its rules by outsiders is an already lost battle that eventually leads to burnout (been there, done that).</p>
<p>Companies claim that design matters, but if they don't relinquish their power over it and entrust it to their team, they are just posturing. In the end it's a governance issue, and breaking a cycle of vertical domination takes more effort than a line in a job offer.</p>
<p>And so, here I am, in the middle of this mess. A stooge pushing my UX/UI/A11Y/code gospel like Sisyphus pushes its boulder. All my time is spent extinguish fires in design committees, or twisting ready-made designs in my code editor to make them usable in an existing project not ready to receive them. It's heartbreaking, and not the experience I was expecting when I started walking this path.</p>
<p>I'm seriously considering stopping with the Design Engineer role, and just be a common front-end developer that just writes JavaScript for a living (I honestly enjoy <a href="https://svelte.dev/">Svelte</a>). Or do back-end web development in a new, very foreign language, like <a href="https://elixir-lang.org/">Elixir</a> or <a href="https://elm-lang.org/">Elm</a>. Or completely change field and do programming outside the web.</p>
<p>I recently found out about <a href="https://janet.guide">Janet</a>. It looks fun. Maybe I'll be a Janet developer.</p>
Fighting games tournaments can still be great2023-11-19T00:57:54+01:00fighting-games-tournaments-can-still-be-great<h1 id="fighting-games-tournaments-can-still-be-great" >Fighting games tournaments can still be great<a href="#fighting-games-tournaments-can-still-be-great" aria-label="Fighting games tournaments can still be great permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Last week I took a plane to Lyon, France, to participate in a Street Fighter 3: Third Strike tournament. You might have notice that I wrote a <a href="fighting-games.html">a few notes</a> about the game recently, but I also wanted to write my feelings about the tournament.</p>
<figure><video controls playsinline preload="metadata" src="img/sf3-intro.mp4" type="video/mp4"></video><figcaption>The introduction of Street Fighter 3: Third Strike.</figcaption></figure><p>Street Fighter 3 is a very peculiar game in all its aspects. First of all, it doesn't feel, play or even functions like a traditional Street Fighter game, even according to its creators:</p>
<figure><blockquote cite="https://www.polygon.com/2020/12/8/22151873/street-fighter-3-an-oral-history">There's competitive games like that, where the match is essentially a confrontation of theoretical knowledge that each player has built up. But Street Fighter 3 is a game that, by design, doesn't have a fixed answer to those questions. There is no "best" tactic; you can spend your whole life trying to find the perfect theoretical approach to a situation in SF3, but it will never be quite right. You always have to be reading your opponent in the moment; you can't just fall back on your theories. It's a game that lets you search for answers forever. And that was the opposite of Street Fighter 2.</blockquote><figcaption>— Shinichiro Obata - Street Fighter 3 planner, <a href="https://www.polygon.com/2020/12/8/22151873/street-fighter-3-an-oral-history">Street Fighter 3: An oral history</a></figcaption></figure><p>Its first version (New Generation) had a very rocky development (as narrated in <a href="https://www.polygon.com/2020/12/8/22151873/street-fighter-3-an-oral-history">this article</a>) and the last one, Third Strike was purposely a swan song of the Capcom fighting game arcade era, with the next entry in the series only releasing almost 10 years later.</p>
<figure><blockquote cite="https://shmuplations.com/sfiii/">The subtitle “Fight for the Future” [...] we wanted to signal to players that this was a game you could only play at game centers, and convey our hope that the tradition of live arcade FTG matches will continue for a long time to come.</blockquote><figcaption>— Capcom, <a href="https://shmuplations.com/sfiii/">Gamest magazine translated by shmuplations</a></figcaption></figure><p>Surprisingly, 24 years later, its creators hopes are realized. We still play it on arcade cabinets and had more than 100 players at the tournament (a first in Europe!) ; and if the game is kind of "solved" and well discovered and documented, players keep looking for answers and solutions on their own personal journey with the game!</p>
<hr><p>I'm not a serious Third Strike player, I just have fundamentals in fighting games, but I love playing this game in a tournament setting even if I lose all the time. There are multiple reasons for why specifically this game, and that's what I wanted to write about today.</p>
<p>First of all, the game is fun. The parry mechanic is intoxicating and makes you want to bet your whole life bar on a single risky read. The characters are diverse and charming, both in look and <a href="https://www.youtube.com/playlist?list=PLPDk6gzWmX91cP0kQEXEBLQDES2o2Tt-H">gameplay</a>. Also the game is incredibly well animated, pretty, and its <a href="https://www.youtube.com/playlist?list=PL2D4C428C2C10BCFF">soundtrack</a> is a banger.</p>
<figure><audio controls src="img/nyc-99.mp3" type="audio/mpeg" preload="metadata"></audio><figcaption>Alex & Ken's Stage - Jazzy NYC '99</figcaption></figure><p>Secondly, the game is notoriously known for its unbalanced roster. What could be an issue actually acts as a filter. In recent years complaining about perceived <em>unfair</em> game balance has become standard due to social media, consumer culture and professionalization (it's always capitalism). It undermines my enjoyment of this whole genre of games, and going to a tournament knowing that <strong>noboby</strong> will complain about it felt <em>super great</em>.</p>
<p>The other thing that felt great are the side effects of the hardware. Most fighting games tournaments are run on consoles provided by the tournament organizers, and each player brings its controller. When the tournament is not running, players <em>freeplay</em> on available stations. But it takes a bit of time: players have to plug their controller, go back to the character select screen, check if their buttons are configured properly, pick a character, and finally the match starts. It may not sound much, but it takes usually 2 to 5 minutes, and a fighting game fight rarely lasts longer than that.</p>
<p>So quite logically, people run sets. First to 3 or 5, best of 3 or 5. The players waiting behind have to announce they will play the winner of the set, or the already installed players won't move. Newcomers often find this situation anxiety-inducing, as you are interrupting people who are often better than you and asking a person to leave.</p>
<p>But Third Strike has not satisfactory console ports, so all tournaments are held on arcade cabinets (most of the time the <a href="https://wiki.arcadeotaku.com/w/Sega_Astro_City">Sega Astro City</a>) running the 1999 <a href="https://en.wikipedia.org/wiki/CP_System_III">original dedicated arcade boards</a>.</p>
<p>Quite logically, nobody brings a controller, everyone has the same button config, and the game automatically falls back to the character select screen after each match. You just sit, pick the character and play. And in a true arcade culture fashion, you only have a single chance to prove you're the best. If you win, you stay and play against a new opponent. If you lose, you stand up, go back in line and wait for your turn.</p>
<p>That may sounds harsh but it's actually a blessing in disguise. The dynamics of play are very different. You have to get into the game fast, commit on your actions, reflect on what went wrong or you'll lose all the time. But even when I lost, I did not wait long to play again due to the 20 (!) arcade cabs. It actually was one of the fighting games events where I played the most <em>in my entire life</em>.</p>
<figure><picture><source type="image/webp" srcset="img/tsb1-400.webp 660w, img/tsb1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="The TSB event, with a lot of arcade cabs lined one after the other." srcset="img/tsb1-400.jpg 660w, img/tsb1-700.jpg 1440w" src="img/tsb1.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>The arcade cabs are connected together in "Versus Mode", providing each player with a screen and a panel to play. | <small><a href="img/tsb1.jpg">Full size</a></small></figcaption> </figure><p>And finally, it was not an e-sport event, which means it excluded a whole bunch of annoying things that became standard when capitalism immersed itself into fighting games tournaments. There was no money to win, no sponsor to announce, no ad breaks, no ugly jerseys, no external pressure to perform, no fanboys, no autograph sessions. The tournament was self-funded and organized by two non-profits, but still managed to bring an impressive production value to the table with an amazing scene, a stream that regularly rolled commentators from different countries so everyone felt included, and prestigious guest players from Japan.</p>
<p>Going there, I was not expecting much. I just wanted to hang out with friends and see folks I missed for years, maybe visit the city. But when the first day ended, my roommates and I talked at length during the night about <em>how fun and great fighting games are</em>. It was a feeling of enjoyment I had forgotten, as if I had finally reconnected with a lost friend.</p>
<p>The sudden realization that yes, fighting games tournaments can still be great, and that I missed them so much.</p>
<figure><picture><source type="image/webp" srcset="img/tsb2-400.webp 660w, img/tsb2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="The screen of an arcade cab with Street Fighter playing." srcset="img/tsb2-400.jpg 660w, img/tsb2-700.jpg 1440w" src="img/tsb2.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Preparing for a fight on the arcade cab. | <small><a href="img/tsb2.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/tsb3-400.webp 660w, img/tsb3-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Two arcade cabs under a movie screen. There are decorations and a red light." srcset="img/tsb3-400.jpg 660w, img/tsb3-700.jpg 1440w" src="img/tsb3.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Finals were played in a separated room, decorated for the occasion. | <small><a href="img/tsb3.jpg">Full size</a></small></figcaption> </figure><figure><video controls playsinline preload="metadata" src="img/tsb-match.mp4" type="video/mp4"></video><figcaption>When the organizers were packing up things they left us with a single setup to play, which was turned into a team tournament between the two sides of the room. One of the most amazing moments of my already long fighting game life. Video courtesy of <a href="https://twitter.com/Pr0sk_/">Pr0sk</a>.</figcaption></figure><figure><picture><source type="image/webp" srcset="img/tsb4-400.webp 660w, img/tsb4-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A group of around 100 persons taking a picture together." srcset="img/tsb4-400.jpg 660w, img/tsb4-700.jpg 1440w" src="img/tsb4.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>The family photo at the end of the tournament. | <small><a href="img/tsb4.jpg">Full size</a></small></figcaption> </figure>20232024-03-09T18:28:39+01:002023<h1 id="2023" >2023<a href="#2023" aria-label="2023 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Yes, it's a year recap <em>two months</em> after the year ended. You can probably guess a two month delay means a lot of things happened.</p>
<p>The TL;DR is that I finished the year on sick leave due to burnout. At the moment of writing I am unemployed and recovering. I also decided to become a freelancer (<a href="portfolio.html">check my portfolio</a> and hire me!). On the personal side, I broke many barriers that were dragging me down, evolved immensely on the emotional side, which led to new encounters, new experiences. I came to peace with leaving behind old hobbies, and created a space around drawing that bring me immense joy.</p>
<aside><p>Side note</p> All titles of this recap are songs I listened way too much this year. Can you identify them? </aside><h2 id="bien-cordialement" >Bien cordialement<a href="#bien-cordialement" aria-label="Bien cordialement permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>So, about work. My realization this year, after burning out for the third time in 8 years, was how alone employment in tech is. In a year that saw the biggest strikes in France since World War 2 and incredible inflation, I was alone going on strike and publicly challenging management about raises. Tech workers don't have any class consciousness, don't fight for their rights, and don't get involved in companies, preferring to job hop. In these circumstances, social progress at work is near impossible.</p>
<p>I doubt it will be different in any other company I could join, so I decided to stop looking for one and become a freelancer. Workers rights are getting destroyed in France, and it's probably the last period where I can benefit from unemployment benefits to start my own thing.</p>
<p>I'm both happy and deeply annoyed by this decision. Happy because I can finally end this infantilizing relationship employment creates. I may have more varied and interesting work coming, and I can have some leverage about who I work for, and how.</p>
<p>But I am not blind. I know that, while trying to better my situation, I am doing exactly what the shitheads that govern us want: increase workers atomization and de-socialization, make them give up on class warfare, enslave them in closed platforms and algorithms, and make them carry all the risks and costs.</p>
<p>Remembering this, and being lucky to be safe on the financial side for a while, I'll try to build an organic and direct customer base without relying on platforms. Get in touch if you like my work and think I could fit in your projects!</p>
<h2 id="such-small-hands" >Such small hands<a href="#such-small-hands" aria-label="Such small hands permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>On the personal side the year started pretty badly. I turned 37 and I did not like it. My beard and hair had started to turn white. I felt that my self-discovery years were behind me. I felt disconnected from people my age and their lives, and outside of the internet, I had not found peers I could freely speak with. I lacked a connection with folks in real life who could help me grow as a person.</p>
<p>If I'm not 100% satisfied as I haven't found an IRL community I can 100% thrive in, my efforts to socialize, meet new people, experience new things, are slowly but surely bearing fruits. This year felt like awakening to new sensations, mental and physical states, after being numb for years. I feel alive and in the moment, but also relieved and detached. It’s great. I feel like I am breaking out of my shell, slowly revealing my true self, one I had never allowed myself to show to anyone.</p>
<p>Yet, I still have work to do on myself. Most notably, opening myself up to feel also means experiencing the world in a more direct, violent way, which is very anxiety inducing. It requires being more strict with things like sleep, diet and exercise. It's hard but I don't regret it. I'd rather feel alive even in the bad moments than numb like before.</p>
<h2 id="the-moth-and-the-flame" >The moth and the flame<a href="#the-moth-and-the-flame" aria-label="The moth and the flame permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>On hobby side, things are moving in the right direction. I consciously decided to stop anything that felt too close to hustle culture. It was a sad realization, but fighting games and programming, two of my favourite activities in the past years, started to feel like job related hobbies. They felt like a <em>productive</em> way of spending my free time, because they benefited my professional carrier.</p>
<p>But it was so exhausting and pervasive it drained me. <em>Don't play this game when you haven't tried the last entry of TEKKEN! Don't read this comic when you could read a programming book instead! Why learn about this topic when you could learn about computer science?! <strong>Be productive on your free time! BETTER YOURSELF!!</strong></em></p>
<p>The discourse and changes emanating from the professionalization of the fighting games scene (<a href="fighting-games-tournaments-can-still-be-great.html">I briefly talked about it here</a>), as well as the <a href="every-web-stack-is-a-product-now.html">debilitating productization</a> (is that a word?) of the web development scene drained the fun out of them for me. I felt I had to move away from them before I started hating them.</p>
<p>And so I did, and it felt great. I spent hours on my sofa, dozing off, reading comics and books, watching anime, playing video games, drawing. I'm not entirely free of this productivity mindset, but I'm getting there.</p>
<h2 id="down-by-the-river" >Down by the river<a href="#down-by-the-river" aria-label="Down by the river permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A thing I totally nailed this year is drawing.</p>
<p>I drew erotica for this first time, deep dived into surrealist pieces, experimented with my tools, re-connected with my inspirations, salvaged and triaged all my previous works, and even started writing about <a href="art-journey.html">my art journey</a>. Writing this has been among the most interesting and positive things I did this year, and I can't wait to continue exploring my past self and reflect on who I am and why I do the things I do.</p>
<p>Among the other things I nailed is the decision to never force myself to draw, and especially to absolutely never think about, or act, as if my art was <em>content</em> that should be monetized. I created an <a href="http://instagram.com/sorus_draws">instagram account</a> to share my art with family and friends, but that's it, there won't be any hustle. No obligatory daily story. No urgent weekly post. No considerations for my "audience". No twisting of an idea to make it work better on social media. No prints until I want to to do it for myself. No big plans or overthought subjects.</p>
<p>Drawing is now the ultimate hustle-free corner of my life, and I enjoy it immensely. And it's not just the act of drawing. I started to experience comforting feelings from my tools. I like manipulating them. The weight of my mechanical pens in my hand ; the grain of paper under the pulp of my finger ; the sound they make when tracing ; the smell. I now keep my favorite mechanical pencil and notebook with me, even when going outside, and I don't even draw outside of my house! I just like having them around me.</p>
<p>All those aspects of <em>drawing</em> bring me so much joy now. I don't even draw very often or for very long. Some pieces stay on the table for weeks. But every time I see them I feel joy, not pressure, failure or urgency. I know I will go back to them eventually. This feeling is the best.</p>
<h2 id="did-i-achieved-my-2023-goals" >Did I achieved my 2023 goals?<a href="#did-i-achieved-my-2023-goals" aria-label="Did I achieved my 2023 goals? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt>Draw better</dt><dd>Yes.</dd><dt>Engage in more unproductive activities</dt><dd>Yes.</dd><dt>Code for fun</dt><dd>No.</dd><dt>Self exploration</dt><dd>Yes.</dd></dl>
<h2 id="2024-goals" >2024 goals<a href="#2024-goals" aria-label="2024 goals permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<ul><li>Take care of my loved ones.</li>
<li>Go on vacation both alone, and with my partner.</li>
<li>Continue my personal explorations.</li>
<li>Take action towards curing my anxiety.</li>
<li>Be a responsible self-employed adult.</li>
<li>Update myself on what I missed in web dev, but only one time in the year.</li>
<li>Build bridges between my drawings and my influences to refine my style.</li>
<li>Be more experimental in my art.</li>
<li>Participate in at least one zine or expo.</li>
<li>Be even more unproductive on my free time.</li></ul>
<p>See you next year!</p>
HTML tips2022-11-01T13:06:57+01:00html-tips<h1 id="html-simple-tips-and-tricks-for-your-website" >HTML simple tips and tricks for your website<a href="#html-simple-tips-and-tricks-for-your-website" aria-label="HTML simple tips and tricks for your website permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>The goal of this page is to help you with easy tricks to make the HTML of your website accessible, readable by everyone and optimized for low bandwidth.</p>
<p>This tips and tricks are from personal experience working as a front-end web developer specialized in UI and accessibility for the last 5 years. It might not be perfect or 100% accurate. If you find any problem, please <a href="/now.html" title="Go to my contact page" aria-label="Go to my contact page">contact me</a>.</p>
<h2 id="i-need-to-go-fast" >I need to go fast<a href="#i-need-to-go-fast" aria-label="I need to go fast permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Then visit the <a href="/make-my-website-accessible-and-look-ok.html">TL;DR</a> page, where a set of sensible defaults will be given to you for a basic website.</p>
<p>If you're not in a hurry, continue below.</p>
<h2 id="about-accessibility" >About accessibility<a href="#about-accessibility" aria-label="About accessibility permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Accessibility is making your website inclusive for people with disabilities. If respecting accessibility can seem like a chore, it's actually a good way of learning good HTML practices and everything in these pages is therefore influenced by it.</p>
<ul><li><a href="what-is-accessibility.html">So, what is accessibility?</a></li>
<li><a href="accessibility-rules-and-tools.html">Basic rules about accessibility and tools to enforce them</a></li></ul>
<h2 id="the-basics-of-html" >The basics of HTML<a href="#the-basics-of-html" aria-label="The basics of HTML permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This section will give your some basic knowledge and code to get started. It will also explain the basics of semantic HTML and why it's important. As everything in these pages, it's a toolbox of things I use, not a full specification rewriting, and it's heavily influenced by my own practices.</p>
<ul><li><a href="the-basics-of-html.html">The basics: the head, the div and the span</a></li>
<li><a href="what-is-semantic-html.html">What is semantic HTML and why should I care?</a></li></ul>
<h2 id="layouts-in-html" >Layouts in HTML<a href="#layouts-in-html" aria-label="Layouts in HTML permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Once you have the basics sets it's probably time to do some layouts. There are parts that you can do just in HTML, and others that need CSS. Layouts are the ones who need CSS. <strong>You can save dozens of lines of HTML by using 3 lines of CSS when you are doing layout</strong>. So don't try doing all your layout only in HTML. You'll just have a hard time doing what you want and your markup will be ugly.</p>
<p>Layout examples will be given through these pages, try to inspect them with your browser, reuse and tweak them to your needs.</p>
<ul><li><a href="never-use-tables-for-layout.html">Don't you dare use tables for layout!</a></li>
<li><a href="the-display-property.html">The basics of layout with the display property</a></li>
<li><a href="flexbox-the-goat.html">Flexbox, the goat</a></li>
<li><a href="css-grid-the-almighty.html">CSS Grid the almighty</a></li></ul>
<h2 id="common-elements-inside-your-layouts" >Common elements inside your layouts<a href="#common-elements-inside-your-layouts" aria-label="Common elements inside your layouts permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>So we have our page layouts structured by semantic HTML elements. Now is the time to put some content. Text! Images! Videos! Titles! We want them all!</p>
<ul><li><a href="order-your-titles-correctly.html">Order your titles correctly</a></li>
<li><a href="organize-your-text-content.html">Organize your text content</a></li>
<li><a href="all-about-images.html">All about images</a></li>
<li><a href="all-about-video-and-audio.html">All about video and audio</a></li>
<li><a href="doing-forms-correctly.html">Doing forms correctly</a></li>
<li><a href="tables-are-not-that-complicated.html">Tables are not that complicated</a></li></ul>
<h2 id="the-inline-semantic-elements" >The inline semantic elements<a href="#the-inline-semantic-elements" aria-label="The inline semantic elements permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>What's the difference between the text semantic elements and the inline semantic elements? Well the first ones are still used to structure your content, but the second ones are used to indicate more precisely what the text inside is about.</p>
<ul><li><a href="make-your-links-clear-and-accessible.html">Make your links clear and accessible</a></li>
<li><a href="when-to-use-a-button-and-a-link.html">When to use a button and a link</a></li>
<li><a href="strong-b-em-and-i.html">The mess of strong b em and i</a></li>
<li><a href="other-kinda-useful-semantic-elements.html">Other kinda useful semantic elements</a></li></ul>
<h2 id="the-not-very-used-interactive-elements" >The not very used interactive elements<a href="#the-not-very-used-interactive-elements" aria-label="The not very used interactive elements permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Interactive elements are fully functional tools in HTML. Unfortunately they are difficult to style and most often not used that much for this reason. Still some of them are really cool.</p>
<ul><li><a href="html-interactive-elements.html">Some interactive elements that can be useful</a></li></ul>
<h2 id="page-updates" >Page updates<a href="#page-updates" aria-label="Page updates permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt><code>03/11/2020</code></dt><dd>Added a SVG subsection in the image page</dd><dt><code>24/08/2020</code></dt><dd>Added a section about reader modes in the accessibility section.</dd><dt><code>22/08/2020</code></dt><dd>In the interactive elements page I wrote that <code><span><</span>details></code> and <code><span><</span>summary></code> could not be animated. I was wrong.</dd></dl>
Make my website accessible and look OK2022-11-01T13:06:03+01:00make-my-website-accessible-and-look-ok<h1 id="make-my-website-accessible-and-look-ok" >Make my website accessible and look OK<a href="#make-my-website-accessible-and-look-ok" aria-label="Make my website accessible and look OK permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Let's say you want to put a blog, a digital garden or a wiki page online. You ain't fancy, you just want a readable column of text, good markup, and throw content without it breaking.</p>
<h2 id="the-basics" >The basics<a href="#the-basics" aria-label="The basics permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Start with this and customize it to have dynamic information where needed:</p>
<pre><code><span><</span>!DOCTYPE html>
<span><</span>html lang="en">
<span><</span>head>
<span><</span>meta charset="UTF-8">
<span><</span>meta name="viewport" content="width=device-width, initial-scale=1">
<span><</span>title>Unique page title - My Site<span><</span>/title>
<span><</span>link rel="stylesheet" href="/assets/css/styles.css">
<span><</span>meta name="description" content="Page description">
<span><</span>/head>
<span><</span>body>
<span><</span>!-- Content -->
<span><</span>/body>
<span><</span>/html>
</code></pre>
<p>If you want a more evolved version with link embeds for social media, favicons, a color theme, etc. see <a href="https://www.matuzo.at/blog/html-boilerplate/">Matuzo's</a> boilerplate which details line by line what you can have in the <code><span><</span>head></code>.</p>
<p>In your stylesheet, add a padding to the <code><span><</span>body></code> and bump the font size a little bit while keeping it readable:</p>
<pre><code>body {
padding: 1rem;
font-size: 1.2rem;
line-height: 1.4;
}
</code></pre>
<h2 id="the-header-footer-menus" >The header, footer, menus<a href="#the-header-footer-menus" aria-label="The header, footer, menus permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If you have a part of your website at the top that people can skip, name it <code><span><</span>header></code>. If you have a part of your website at the bottom that people can skip, name it <code><span><</span>footer></code>.</p>
<p>If you have a navigation menu to go to different parts of your website, put them inside <code><span><</span>nav></code>. You can nest <code><span><</span>nav></code> inside <code><span><</span>header></code> or <code><span><</span>footer></code> if you want.</p>
<p>For the links inside your navigation menus, use a list.</p>
<pre><code><span><</span>header>
<span><</span>nav>
<span><</span>ul>
<span><</span>li><span><</span>a href="#">Link 1<span><</span>/a><span><</span>/li>
<span><</span>li><span><</span>a href="#">Link 2<span><</span>/a><span><</span>/li>
<span><</span>li><span><</span>a href="#">Link 3<span><</span>/a><span><</span>/li>
<span><</span>/ul>
<span><</span>/nav>
<span><</span>/header>
</code></pre>
<p>If you have several <code><span><</span>nav></code> in your page, name them using <code>aria-label</code>.</p>
<pre><code><span><</span>header>
<span><</span>nav aria-label="Main">
...
<span><</span>/nav>
<span><</span>/header>
...
<span><</span>footer>
<span><</span>nav aria-label="Secondary">
...
<span><</span>/nav>
<span><</span>/footer>
</code></pre>
<p>If you have a breadcrumb menu, name it with <code>aria-label="breadcrumbs"</code> and use the <code>aria-current="page"</code> on the link corresponding the current page.</p>
<pre><code><span><</span>nav aria-label="Breadcrumb">
<span><</span>ol role="list">
<span><</span>li><span><</span>a href="/">Home<span><</span>/a><span><</span>/li>
<span><</span>li><span><</span>a href="/page2">Second Page<span><</span>/a><span><</span>/li>
<span><</span>li><span><</span>a href="/page2/current-page" aria-current="page">Current page<span><</span>/a><span><</span>/li>
<span><</span>/ol>
<span><</span>/nav>
</code></pre>
<p>And use this style to make it look like a breadcrumb:</p>
<pre><code>[aria-label="Breadcrumb"] ol {
display: flex;
padding:0;
}
[aria-label="Breadcrumb"] ol * + *::before {
content: ">";
padding:0.5rem;
}
</code></pre>
<h2 id="structure-the-page" >Structure the page<a href="#structure-the-page" aria-label="Structure the page permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Put the main content of the website inside <code><span><</span>main></code>. Then, if you have different sections, split them. The easiest way is to use one or several <code><span><</span>article></code> for the content, and <code><span><</span>aside></code> for the related but not main content.</p>
<pre><code><span><</span>body>
<span><</span>header>
<span><</span>nav><span><</span>/nav>
<span><</span>/header>
<span><</span>main>
<span><</span>article><span><</span>/article>
<span><</span>aside><span><</span>/aside>
<span><</span>/main>
<span><</span>footer><span><</span>/footer>
<span><</span>/body>
</code></pre>
<p>Prefer using several <code><span><</span>article></code> tags instead of using <code><span><</span>section></code>. For example if you have a list of articles:</p>
<pre><code><span><</span>main>
<span><</span>article>
<span><</span>h2>Article title<span><</span>/h2>
<span><</span>p>Excerpt<span><</span>/p>
<span><</span>a href="#">Link<span><</span>/a>
<span><</span>/article>
<span><</span>article>
<span><</span>h2>Article title<span><</span>/h2>
<span><</span>p>Excerpt<span><</span>/p>
<span><</span>a href="#">Link<span><</span>/a>
<span><</span>/article>
<span><</span>article>
<span><</span>h2>Article title<span><</span>/h2>
<span><</span>p>Excerpt<span><</span>/p>
<span><</span>a href="#">Link<span><</span>/a>
<span><</span>/article>
<span><</span>/main>
</code></pre>
<h2 id="the-page-content" >The page content<a href="#the-page-content" aria-label="The page content permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Add everything you want inside the <code><span><</span>article></code> tag. Texts, images, videos, audios, embeds, everything will fit.</p>
<p>Since most of these elements are inline, you might have things being side by side, and be tempted to nest them inside a <code><span><</span>div></code>. Don't do it for now, as we will fix this later.</p>
<p>Just don't forget to order your titles correctly! Only a single <code><span><</span>h1></code>, subsequent <code><span><</span>h2></code> and <code><span><</span>h3></code>, and don't use them for styling. If you need a specific size for an element, style it.</p>
<h2 id="add-sensible-defaults" >Add sensible defaults<a href="#add-sensible-defaults" aria-label="Add sensible defaults permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Add <a href="https://piccalil.li/blog/a-modern-css-reset/">Andy Bell</a>'s CSS reset to your CSS file. It will reset some styles to avoid headaches later down the road.</p>
<p>Then reduce the width of the text column and center it (work for anything else like the <code><span><</span>header></code>, <code><span><</span>nav></code>, etc.):</p>
<pre><code>article,
header,
nav,
footer {
max-width: 70ch;
margin: auto;
}
</code></pre>
<p>You want a regular vertical flow between the elements inside your column of text. Avoid styling each element and instead use this:</p>
<pre><code>article > * + * {
margin-top: 1rem;
}
</code></pre>
<p>It will add a similar margin at the top of elements if they have another element before them. This way, the first element of your text column won't have it, and no matter what you insert inside the text column, it will be have a margin.</p>
<p>Note that you can use this technique <em>everywhere</em>. In lists, on the body, it works perfectly. You can even create a set of <code>.flow</code> classes with different margin size inside.</p>
<h2 id="that-s-it" >That's it!<a href="#that-s-it" aria-label="That's it! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You now have a simple and barebones website, but made with sensible defaults and decently accessible. You can see the result of these bits of code <a href="https://codepen.io/Thomasorus/pen/OJEMxby">here</a>.</p>
<p>You can now add your own styles like fonts, colors, anything that make it more personal.</p>
<p>Have fun!</p>
What is accessibility2022-03-13T20:03:30+01:00what-is-accessibility<h1 id="what-is-accessibility" >What is accessibility ?<a href="#what-is-accessibility" aria-label="What is accessibility ? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I will often refer to <em>accessibility</em> in these pages, which globally means having a website that people with disabilities can use. Disabilities come in a lot of ways. The most obvious one is blindness, who requires the use of a screen reader. But there's a lot of handicaps that can give your a hard time on the internet.</p>
<p>You might be deaf, which means you need a transcribed version of an audio or video file. You might have dyslexia, which means you have a hard time reading text and need special fonts (and surprisingly <em>Comic Sans MS</em> is one of them). You might have anxiety and panic disorders, which means you can't go to some websites who are too cluttered or trigger too many animations. You might have a cognitive impairment, which means you have a hard time understanding some websites. There are a lot of others handicaps that might make the web hard to use.</p>
<p>Coding properly for accessibility (basically, respecting standards) doesn't mean your website is accessible by magic. It means other tools can take over by using the code you wrote. Screen readers are the obvious ones, but others like reader mode in your browser of choice is also one of them as it allows to change colors, fonts, etc...</p>
<h2 id="is-accessibility-all-about-code" >Is accessibility all about code?<a href="#is-accessibility-all-about-code" aria-label="Is accessibility all about code? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>No, not at all.</p>
<p>All accessibility problems cannot be solved only by code. Some are only fixable by enforcing an inclusive interface and user experience design. You might have heard that enforcing accessibility leads to design constraints, which is true. But from experience it's entirely possible to have a nice design and user experience while being accessible. People saying it's not possible are lazy liars. Also you might have heard that enforcing accessibility is bad for SEO. It's also a lie as both can work together, you just have to want it.</p>
<p>Respecting accessibility in UI and UX design often leads to better designs and user experiences for all users. So when I say that something <em>is good for accessibility</em> it often means it's <em>good for all your users</em>, and following these advises will result in a better website of everyone.</p>
<h2 id="accessibility-is-hard" >Accessibility is hard<a href="#accessibility-is-hard" aria-label="Accessibility is hard permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>To enforce accessibility you need to get yourself into the shoes of your disabled users. Is this usable by screen readers? Is it understandable by people with cognitive impairments? Questioning everything you do is a good way of doing it, but on the long run it leads to the realization that basically nothing is perfect despite your efforts.</p>
<p>And that's the hard pill to swallow: you probably can't make accessibility perfect by yourself (especially on big projects) without funding, manpower and a lot of testing. It's a huge task and you should aim for <em>usable</em> instead of <em>perfection</em> or you'll never see it end. Try to detect what is important for your user in each page or situation and make sure it works.</p>
<p>Ask yourself, what is the goal of the website you make? For a bank it's numbers, are the numbers accessible? For a journal it's text, are the texts accessible? For a government taxes website, it's being as clear as possible about legal stuff.</p>
<p>What is the main think you can't mess around with? Make it your top accessibility priority, everywhere, and fix it. Once it's done, then you'll come back to fix those small problems, like typos or unimportant texts not being clear enough.</p>
<p>Choose the right battle and fight it until the end!</p>
<p>Next: <a href="accessibility-rules-and-tools.html">Basic rules about accessibility and tools to enforce them</a></p>
Accessibility rules and tools2021-11-12T16:47:36+01:00accessibility-rules-and-tools<h1 id="accessibility-basic-rules-and-tools" >Accessibility basic rules and tools<a href="#accessibility-basic-rules-and-tools" aria-label="Accessibility basic rules and tools permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Accessibility is a vast, very hard to navigate maze that even people like me who worked on it almost two years can't properly handle correctly. So I don't expect myself to be able to explain everything, and I don't expect you to think about everything.</p>
<p>In this page I will simply list the essential rules I had to enforce myself and that will help you get started. Later, you can dig a bit more by yourself to fix your own specific problems.</p>
<h2 id="how-screen-readers-users-use-them" >How screen readers users use them?<a href="#how-screen-readers-users-use-them" aria-label="How screen readers users use them? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Most people don't know it, but <strong>screen readers users don't only use the tab key to navigate in pages</strong>!</p>
<p>What does that means? That means don't panic when you start tabbing everywhere and see the focus not stopping where you want! When I first started I thought accessibility was all about adding the <code>tab-index="0"</code> HTML attribute to almost every element because otherwise, the tab key would not stop on it. But that's not how that works!</p>
<p>Screen readers users will use a combination of arrows to read phrases or letters, shortcuts to access titles and other parts of the website, as well as the tab key, but only to get out of input element in forms or access links and buttons! Like any other users with experience using a tool, they probably use it in a way that is totally foreign to you!</p>
<p>That's why it's important to have your website tested by actually disabled people. Don't assume how disabled people use the web, ask them to guide you if you can. You will probably be surprised at how fast screen readers users can navigate a page.</p>
<h2 id="the-basic-rules" >The basic rules<a href="#the-basic-rules" aria-label="The basic rules permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Here are some basic but essential rules to help you get started:</p>
<ul><li>Don't block the ability to zoom in or zoom out on your website.</li>
<li>Don't go below 13 pixels in font size. Yes users can zoom, but that would be way more comfortable if they didn't have to do it in the first place!</li>
<li>The basic 16px font size that all browsers have is often a good thing to follow.</li>
<li>Don't use super thin fonts. They are pretty but very hard to read!</li>
<li>Don't overdo it with animations, flashes and stuff that can trigger stress.</li>
<li>If your website is not compatible with reader mode, try providing an accessibility menu allowing the change of colors and fonts.</li>
<li>Take care about color contrasts, you need a ratio of 4.5:1 to be sure most people can read your texts.</li>
<li>Don't indicate states on your website or application by only using colors (like green and red) as colorblind people can't distinguish them (that's the reason traffic lights don't do it!)</li>
<li>Try not using icons alone, especially when for ultra specific things that don't make sense on their own. Add text to indicate what it is.</li>
<li>Don't put crucial information inside images, even if you add an <code>alt</code> attribute!</li>
<li>Ensure keyboard focus is visible and clear. Most of the time, it means not disabling the <code>focus</code> styles in CSS.</li>
<li>Provide a <em>Skip to Content</em> link at the top of your website.</li>
<li>If you have audio content, provide a transcript.</li>
<li>If you have video content, provide subtitles.</li></ul>
<h2 id="how-to-hide-text-destined-to-screen-readers-users" >How to hide text destined to screen readers users<a href="#how-to-hide-text-destined-to-screen-readers-users" aria-label="How to hide text destined to screen readers users permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You can use this CSS class:</p>
<pre><code>.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
</code></pre>
<p>But don't overdo it, it must be the exception, not the rule. Some screen readers users can actually see but prefer a combination of voice and text. If you start hiding walls of text the user can't see, you're gonna create a very unpleasant experience.</p>
<h2 id="how-to-hide-things-from-screen-readers" >How to hide things from screen readers<a href="#how-to-hide-things-from-screen-readers" aria-label="How to hide things from screen readers permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Use the <code>aria-hidden="true"</code> attribute on the HTML element of your choice. Again, the exception, not the rule. Use it if something can't be vocalize, but provide a textual explanation of it right after.</p>
<h2 id="what-is-a-skip-content-link" >What is a skip content link?<a href="#what-is-a-skip-content-link" aria-label="What is a skip content link? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Screen readers users have shortcuts to access the different parts of your website, but that doesn't mean you can't give them your own shortcuts. Escape or skip links are an invisible menu of anchor links to different parts of your page, that you can add right after the <code><span><</span>body></code>.</p>
<p>It's not technically complicated to implement and can save your screen readers users tons of time, especially if you have big and complex header or navigation before the main content.</p>
<h2 id="what-tools-can-i-use" >What tools can I use?<a href="#what-tools-can-i-use" aria-label="What tools can I use? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>One of the most used combinations of screen readers and browser are <a href="https://www.nvaccess.org/download/">NVDA</a> and <a href="https://firefox.com">Firefox</a>. But you can also use the <a href="https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn">Chromevox</a> extension for Chrome to get an in-browser screen reader. Most operating systems also provide voice over and from what I heard, the one on iOS is particularly good.</p>
<p>In Firefox Dev Tools, the "Accessibility" tab will show you a textual representation of your website nodes that can help you detect what will be vocalized and won't. There is a lot of browser extensions for accessibility that will scan the current page and tell you what is violation the rules.</p>
<p>I've used the <a href="https://www.deque.com/axe/">Axe extension</a> in the past and enjoyed it, but there's a lot more.</p>
<h2 id="how-does-the-reader-mode-works" >How does the reader mode works?<a href="#how-does-the-reader-mode-works" aria-label="How does the reader mode works? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>All modern browsers provide a reader mode that strips most of the design to keep only text and images. They also allow changing fonts, background colors, text to speech and other features.</p>
<p>The problem is... it's not clear how and why some pages allow the reader mode to exist and others don't. According to this <a href="http://zumguy.com/enabling-reading-mode-on-your-website/">article</a> analyzing a <a href="https://github.com/mozilla/readability/">standalone version</a> of Firefox reader mode, an algorithm analyzes the content inside <code><span><</span>p></code> elements, checks how <em>content-y</em> they are and assigns them a score. Commas, length of phrases and other parameters are taken into account to score the page and decide if yes or no, it deserves reader mode.</p>
<p>It means that small pages are not going to offer reader mode, which is a shame. But you probably can't do anything about it outside reorganizing content.</p>
<p>Next: <a href="the-basics-of-html.html">The basics: head, div and span</a></p>
The basics of HTML2021-11-12T16:47:36+01:00the-basics-of-html<h1 id="the-basics-of-html" >The basics of HTML<a href="#the-basics-of-html" aria-label="The basics of HTML permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This section will give your some basic knowledge and tips about HTML, mostly what semantic tag to use in what situation.</p>
<h2 id="what-you-need-to-get-started" >What you need to get started<a href="#what-you-need-to-get-started" aria-label="What you need to get started permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You need this:</p>
<pre><code><span><</span>!DOCTYPE html>
<span><</span>html lang="en">
<span><</span>head>
<span><</span>meta charset="UTF-8">
<span><</span>meta name="viewport" content="width=device-width, initial-scale=1.0">
<span><</span>title>Document<span><</span>/title>
<span><</span>/head>
<span><</span>body>
// Code
<span><</span>/body>
<span><</span>/html>
</code></pre>
<p>You need to indicate that the document is HTML, the language of the document and of course its encoding. You also need a title as it will be visible in the tab and spoken by screen readers when the page is loaded.</p>
<p>The <code><span><</span>meta name="viewport>"</code> is especially important. It can be used to block the zoom or zoom out of the page. But don't do it, please <strong>never block the user from zooming in or zooming out on a website</strong>. This is the basic accessibility thing, don't deactivate it!</p>
<p>Of course there's a lot more that can go into the <code><span><</span>head></code> of a website. Styles, scripts, meta-descriptions, open graph tags... The head has its own life in itself that you can explore, but it's not the purpose of this guide to give you an extended lesson about it so we'll skip it and start adding things inside the <code><span><</span>body></code>.</p>
<h2 id="divs-and-spans" >Divs and spans<a href="#divs-and-spans" aria-label="Divs and spans permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>HTML is all about putting...things! Inside... other things? So your first reflex is probably to grab a <code><span><</span>div></code> or a <code><span><</span>span></code>, the good old ones! But what's the difference between them?</p>
<p>If you put several <code><span><</span>div></code> one after the other, you'll see they stack one above the other. That's because a <code><span><</span>div></code> has the <code>display:block;</code> CSS property by default. <code>display:block</code> makes the element start on a new line and take 100% of its container width.</p>
<p>If you do the same with <code><span><</span>span></code>, they will stack one after the other. That's because a <code><span><</span>span></code> has the <code>display:inline;</code> CSS property by default, which tells the element to start on the same line as the previous element and that its width and heigh are decided by content.</p>
<p>So just by knowing that, you already know how to stack things vertically and horizontally. Great right?</p>
<h2 id="wait-wait-wait-there-s-css-in-my-html" >Wait wait wait... There's CSS in my HTML?<a href="#wait-wait-wait-there-s-css-in-my-html" aria-label="Wait wait wait... There's CSS in my HTML? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Yes! And for a good reason! Imagine your CSS file disappears and your are left only with your HTML page. Without some pre-made styling, everything would have the same font size, would be inline... That would be unreadable!</p>
<p>That's the reason why browsers implement their own styling when encountering an HTML element. It's a great feature but unfortunately, some people really hate it. When you want to style the HTML elements with your own design, you sometimes have to undo some of the basic styling of the browser.</p>
<p>And yes, some of them are verbose to undo, like buttons. That's the reason some people use what is called "resets" CSS files, to undo the default styling and ease the CSS work.</p>
<p>But please be careful when resetting styles. When you undo the browser styling, you also undo accessibility styles. If you ever used the tab key to navigate inside a website, you saw that the focused element is distinguished from the rest with borders or outlines. Going too hard on un-style can break those things and left you with... nothing. You are lost.</p>
<p>Speaking of being lost, <code><span><</span>div></code> and <code><span><</span>span></code> can sometimes get your users in trouble, unlike the amazing <em>semantic HTML</em> elements.</p>
<p>Next: <a href="what-is-semantic-html.html">What is semantic HTML?</a></p>
What is semantic HTML2021-11-12T16:47:36+01:00what-is-semantic-html<h1 id="what-is-semantic-html" >What is semantic HTML?<a href="#what-is-semantic-html" aria-label="What is semantic HTML? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>When you use <code>int</code> or <code>string</code> in a programming language, you know exactly what each of them is doing and it helps in code readability right? Well HTML is the same, it has things with names that help knowing what they do. The problem is, unlike a typed language, HTML is cool with you doing mistakes and won't throw an error if you don't use the right tool for the job. So in the end you can do mistakes and still have a visually working website who is awful under the hood.</p>
<p>But visually impaired users use a lot of shortcuts with their screen readers to simply jump to different parts of the page, and those shortcuts only work if HTML is semantically valid! So having good HTML and following a solid structure helps them, but also other users. For example, to use the reader mode in several browsers, your HTML has to be semantically valid, or the reader mode won't be available.</p>
<p>There is a lot, <em>a LOT</em> of semantic HTML elements and even I who loves HTML doesn't know them all, so I will only cover the most useful.</p>
<h2 id="content-sectioning" >Content sectioning<a href="#content-sectioning" aria-label="Content sectioning permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>These semantic elements have the same style properties as a <code><span><</span>div></code> (they stack on top of each others) and won't change anything related to your design, so feel free to use them without stressing. You can even add them to an existing design without trouble!</p>
<p>You at least need those:</p>
<dl><dt><code><span><</span>header></code></dt><dd>Put the content from the top portion of your website that your user will read the first time they visit but will skip afterwards, inside this.</dd><dt><code><span><</span>nav></code></dt><dd>Put your navigation elements inside this. You can have several <code><span><</span>nav></code> but you then need to use the <code>aria-label</code> attribute to name them for screen readers users.</dd><dt><code><span><</span>main></code></dt><dd>Put the main parts of your website inside this one. Very useful as it indicates to screen readers users they reached the main part of the page.</dd><dt><code><span><</span>article></code></dt><dd>Put the main content of your website inside this one. It must be content that is self-sustainable. Imagine if you had to remove everything but one thing, and put it inside this tag.</dd><dt><code><span><</span>aside></code></dt><dd>put the content indirectly related to the article content inside this one. It can be a sidebar or a side note for example.</dd><dt><code><span><</span>footer></code></dt><dd>Put the content from the bottom portion of your website that your user will read the first time they visit but will skip afterwards, inside this.</dd></dl>
<p>A basic page might look like this for example:</p>
<pre><code><span><</span>body>
<span><</span>header><span><</span>/header>
<span><</span>nav><span><</span>/nav>
<span><</span>main>
<span><</span>article><span><</span>/article>
<span><</span>aside><span><</span>/aside>
<span><</span>/main>
<span><</span>footer><span><</span>/footer>
<span><</span>/body>
</code></pre>
<p>I did not mention the <code>section</code> element but it can be quite useful if you need to split your content in different sections that are directly related to your content and that are of equal importance. For example a blog post should have its main content and comments inside <code><span><</span>article></code>, but comments should be inside a <code>section</code> to make it clearer for screen readers users that the blog post has ended.</p>
<pre><code><span><</span>main>
<span><</span>article>
Text
<span><</span>section aria-label="Comments"><span><</span>/section>
<span><</span>/article>
<span><</span>/main>
</code></pre>
<p>You can find the other content semantic element on this <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">page</a>.</p>
<h2 id="stop-right-there-what-is-this-aria-thing-in-the-previous-example" >Stop right there, what is this <code>aria</code> thing in the previous example?<a href="#stop-right-there-what-is-this-aria-thing-in-the-previous-example" aria-label="Stop right there, what is this <code>aria</code> thing in the previous example? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You'll often see <code>aria</code> attributes inside the HTML code presented in this page. As stated by the MDN docs on this <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">page</a>, <em>Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.</em></p>
<p>Aria is a massive spec to learn and apply so I will just give you some basic ones in this page. Try to follow them as much as you can to give a better readability to your website layouts.</p>
<p>Next: <a href="never-use-tables-for-layout.html">Don't use tables for layout</a></p>
Never use tables for layout2021-11-12T16:47:36+01:00never-use-tables-for-layout<h1 id="never-use-tables-for-layout" >Never use tables for layout<a href="#never-use-tables-for-layout" aria-label="Never use tables for layout permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>I'm gonna say it again. <strong>Never use tables for layout</strong>. I'm dead serious. Never do it.</p>
<p>If you come from the pre-HTML 5 era, you probably used to organize the elements of your page with tables because it was the norm. But using tables for something else that presenting data is a catastrophic thing for accessibility. When a screen reader meets a table, the screen readers tells him he's entering a table, so the user thinks he's going to hear about data organized in row and columns.</p>
<p>Also using tables makes your HTML super verbose, hard to read and hard to debug. They are way simpler solutions to do what most people try to do with tables.</p>
<p>Next: <a href="the-display-property.html">The display property</a></p>
The display property2021-11-12T16:47:36+01:00the-display-property<h1 id="the-display-property" >The <code>display</code> property<a href="#the-display-property" aria-label="The <code>display</code> property permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Here's a primer to help you get started width <code>display: ???</code>, the basic tool for doing layouts in HTML and CSS. As always there's a ton of values that can be used, but we'll just focus on the most common/useful ones.</p>
<h2 id="the-good-old-ones" >The good old ones<a href="#the-good-old-ones" aria-label="The good old ones permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>First the good old ones that you apply directly on each element.</p>
<dl><dt><code>inline</code></dt><dd>Elements are stacked one after the other on the same line until there's no space so a new line is created.</dd><dt><code>block</code></dt><dd>Elements are stacks on top of each other.</dd><dt><code>inline-block</code></dt><dd>The best of both worlds as it acts like an inline element but its height and width can be changed!</dd></dl>
<p>Those values are still in use today but are way less common in modern layout than they used to. Before <code>flexbox</code> and <code>grid</code>, developers used a lot of <code>inline-block</code> layouts to make responsive design work and content flow nicely. It was sometimes very complicated and the reason why things like grid frameworks were very popular.</p>
<p>Today there is absolutely no reason to not use <code>flexbox</code> and <code>grid</code>. They can even be used on Internet Explorer 11 if written correctly and compiled with a tool like <a href="https://github.com/postcss/autoprefixer" title="Go to Autoprefixer github page" aria-label="Go to Autoprefixer github page">Autoprefixer</a>.</p>
<p>Next: <a href="flexbox-the-goat.html">Flexbox, the goat</a></p>
Flexbox the goat2022-03-13T20:03:30+01:00flexbox-the-goat<h1 id="flexbox-the-goat" >Flexbox, the GOAT<a href="#flexbox-the-goat" aria-label="Flexbox, the GOAT permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>A few years ago the massive adoption of flexbox was like a wet dream coming true. Imagine: you take the inline-block property where things stack right after each other, but you can decide the direction of this stacking both on the <code>x</code> and <code>y</code> axis ; and also how the elements behave between themselves!</p>
<p>The main difference comes from the declaration. Instead of declaring <code>display:flex;</code> on each element, you only declare it on the parent and it acts on the children.</p>
<pre><code><span><</span>div style="display:flex;">
<span><</span>div>1<span><</span>/div>
<span><</span>div>2<span><</span>/div>
<span><</span>/div>
</code></pre>
<p>So how does that work?</p>
<h2 id="decide-the-direction" >Decide the direction<a href="#decide-the-direction" aria-label="Decide the direction permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>First, you decide if the flow goes horizontally or vertically, and in which direction. For this, you can use the great <code>flex-flow: ???;</code> shortcut property. Its most common options are:</p>
<dl><dt><code>row</code></dt><dd>the children will be displayed from left to right</dd><dt><code>row-reverse</code></dt><dd>the children will be displayed from right to left</dd><dt><code>column</code></dt><dd>the children will be displayed from top to bottom</dd><dt><code>column-reverse</code></dt><dd>the children will be displayed from bottom to top</dd></dl>
<p>You can also decide if the child elements should wrap aka create a new line when they lack to be on a single line, by adding <code>wrap</code> or <code>nowrap</code>.</p>
<p>Real code examples:</p>
<span class="visually-hidden">Hello screen reader users! Several code examples of layouts are demonstrated in this page. There is no real content inside these examples that would help you understand them. So instead, for each code example, I decided tell you the code example is hidden, but you can inspect it with developer tools if you are a one. Sorry for the lack of a better solution.</span><code>flex-flow: row wrap;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><code>flex-flow: row-reverse wrap;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row-reverse wrap;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div>
<code>flex-flow: column wrap;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:column wrap;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><code>column-reverse wrap</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:column-reverse wrap;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><p>Neat right?</p>
<h2 id="align-your-children-on-the-x-axis" >Align your children on the X axis!<a href="#align-your-children-on-the-x-axis" aria-label="Align your children on the X axis! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Alignment is cool but what if you could decided the distance between those aligned children or even better, let the browser handle it for you?</p>
<p>Let's reuse this example of a row going from left to right:</p>
<pre><code><span><</span>div style="display:flex; flex-flow:row wrap;">
<span><</span>div>1<span><</span>/div>
<span><</span>div>2<span><</span>/div>
<span><</span>/div>
</code></pre>
<p>We're going to use <code>justify-content: ???;</code> to fine tune the way child elements behave between each others on the horizontal axis:</p>
<dl><dt><code>flex-start</code></dt><dd>The default value, stack everything at the start of te flow.</dd><dt><code>flex-end</code></dt><dd>Stack everything at the end of the flow.</dd><dt><code>center</code></dt><dd>Stack all elements at the center with equal white space on the left and right.</dd><dt><code>space-between</code></dt><dd>Space elements as far as possible from each others.</dd><dt><code>space-around</code></dt><dd>Automatically gives each child element the same left and right margins.</dd><dt><code>space-evenly</code></dt><dd>Creates equal white space between all elements.</dd></dl>
<p>Real code examples:</p>
<code>justify-content: flex-start;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap; justify-content: flex-start;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><code>justify-content: flex-end;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap; justify-content: flex-end;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><code>justify-content: center;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap; justify-content: center;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><code>justify-content: space-between;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap; justify-content: space-between;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><code>justify-content: space-around;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap; justify-content: space-around;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><code>justify-content: space-evenly;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap; justify-content: space-evenly;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div>
<h2 id="align-your-children-on-the-y-axis" >Align your children on the Y axis!<a href="#align-your-children-on-the-y-axis" aria-label="Align your children on the Y axis! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Now the cool thing is... The <code>align-items: ???;</code> CSS property takes the same values as <code>justify-content</code>, but for the vertical axis! Which means we have a way to align on the <code>x</code> and <code>y</code> axis in two lines of code!</p>
<p>It allows us to create the holy grail of alignment: center both vertically and horizontally in two lines of CSS!</p>
<code>justify-content: center; align-items: center;</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:flex; flex-flow:row wrap; justify-content: center; align-items: center;">
<div class="code-example-children pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children pattern-dots">
<div class="code-example-value">2</div>
</div>
</div><p>Praise flexbox! <span aria-label="Happy smiley praising with hands up!">(/≧▽≦)/</span></p>
<p>There's a lot more you can do with Flexbox. You can align items individually, reorder items, decide if they are allowed to shrink or grow in size. If you want to learn more about Flex, try the in-game browser <a href="https://flexboxfroggy.com">Flexbox Froggy</a>. If you are not into games try this free course on <a href="https://www.youtube.com/watch?v=Vj7NZ6FiQvo&list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid&index=1">youtube</a>.</p>
<p>You might be thinking <em>Yeah this is cool, but not as cool as my good old tables</em>. Well rejoice dear reader as I'm going to make you happy.</p>
<p>Next: <a href="css-grid-the-almighty.html">CSS Grid the almighty</a></p>
CSS Grid the almighty2022-03-13T20:03:30+01:00css-grid-the-almighty<h1 id="css-grid-the-almighty" >CSS Grid the almighty<a href="#css-grid-the-almighty" aria-label="CSS Grid the almighty permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>CSS Grid is a relatively new spec that saw massive adoption from browser around the start of 2018 and is now used almost everywhere. So what it is about?</p>
<p>Basically, it's about making virtual grids with columns and rows. You might have met 12 column grids in CSS frameworks like Bootstrap before? That's what Grid allows you to replicate in a few lines of code, except it's way more powerful and easy to use.</p>
<p>Even more than Flexbox, it's a <em>massive</em> spec with tons of use cases and syntax tricks. It's extremely powerful but it's also easy to get lost in it, so we'll just try a few layouts and use cases to get you started with columns and rows.</p>
<h2 id="so-you-like-columns" >So you like columns?<a href="#so-you-like-columns" aria-label="So you like columns? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>For this example we'll go with just 6 vertical columns. How would that work?</p>
<p>First we have to use <code>display: grid;</code> on the parent element, just like we did with flexbox. Then we can declare our grid with the <code>grid-template-columns: ???;</code> property.</p>
<span class="visually-hidden">Hello screen reader users! Several code examples of layouts are demonstrated in this page. There is no real content inside these examples that would help you understand them. So instead, for each code example, I decided tell you the code example is hidden, but you can inspect it with developer tools if you are a one. Sorry for the lack of a better solution.</span><code>grid-template-columns: repeat(6, 1fr);</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:grid; grid-template-columns: repeat(6, 1fr)">
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">5</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">6</div>
</div>
</div><p>So let's break it down, what's going on here? The <code>repeat()</code> shortcut is a function we use to declare the number of columns we wanted instead of writing <code>1fr 1fr 1fr 1fr 1fr 1fr</code>.</p>
<p>The <code>fr</code> is a CSS unit, like pixels or percentages, that means <code>fractional unit</code>. In this example, <code>1fr</code> repeated six times means <em>split the space in six and give each children the same space</em>.</p>
<p>So what happens if we decide that the first column should take 2 times the space of other columns? The grid readjust itself nicely:</p>
<code>grid-template-columns: 2fr repeat(5, 1fr);</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:grid; grid-template-columns: 2fr repeat(5, 1fr)">
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">5</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">6</div>
</div>
</div><p>But wait, what happens if there is not enough children? The grid keeps it's 6 column layouts and populate the 5 elements inside the 5 first columns:</p>
<code>grid-template-columns: repeat(6, 1fr);</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:grid; grid-template-columns: repeat(6, 1fr)">
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">5</div>
</div>
</div><p>If too many children, the grid will create a new row:</p>
<code>grid-template-columns: repeat(6, 1fr);</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:grid; grid-template-columns: repeat(6, 1fr)">
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">5</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">6</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">7</div>
</div>
</div><p>In Grid tutorials you will often hear about the "explicit" and "implicit" columns and rows. The explicit is the one you declared with your code. The implicit is the one created by the browser when there's no written rules to handle specific use cases or bugs. You can declare rules for both implicit and explicit grids even if I won't go into details on this.</p>
<p>Of course we could have a grid where columns have a fixed size in pixels. Doing so would ensure the columns keep a reasonable size even on mobile, but it would make the whole thing un-responsive!</p>
<code>grid-template-columns: repeat(6, 140px);</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="overflow:scroll-x;display:grid; grid-template-columns: repeat(6, 140px)">
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">5</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">6</div>
</div>
</div><p>At this point, you're probably thinking that a media query is needed to make the grid go from <code>fr</code> units to <code>px</code> units when the viewport is smaller. What a chore right ?...</p>
<p>Well dear reader I have something incredible for you...</p>
<div style="display:flex; align-items:center; justify-content:space-evenly; margin:50px; text-align:center;"><span aria-label="Smiley throwing sparkles" style="white-space:nowrap;">(ノ◕ヮ◕)ノ*:・゚✧</span><strong>THE INCREDIBLE <br> MEGA AWESOME <br> NO MEDIA QUERIES <br> RESPONSIVE GRID</strong><span aria-label="Smiley being super chill" style="white-space:nowrap;">〜( ̄▽ ̄〜)</span></div><code>grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));</code>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)">
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">5</div>
</div>
<div class="code-example-children-grid pattern-dots">
<div class="code-example-value">6</div>
</div>
</div><p>Try resizing it! Great right?! So what's happening here?</p>
<ul><li>First, we removed the fixed number of columns in the <code>repeat</code> to let the child elements decide how much columns the grid should have. Frightening? Don't worry.</li>
<li>Then, we added the <code>auto-fit</code> property to let child elements grow in size (it can be replaced with <code>auto-fill</code> if you don't want your columns to grow).</li>
<li>Finally, we added the <code>minmax</code> function that let us define what the minimum and maximum size the column should have. We set a pixel width at the minimum to forbid the columns to shrink too much, and a fractional unit as the maximum to allow them to take as much space as they want.</li></ul>
<p>What it means is this: the grid will try to stack as many children as possible inside the available width until the minimum size is met. In this case, a new row will be created.</p>
<h2 id="ok-but-how-do-i-position-stuff" >Ok but how do I position stuff?<a href="#ok-but-how-do-i-position-stuff" aria-label="Ok but how do I position stuff? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>In CSS frameworks like Bootstrap, you have utility classes to say <em>start here and span this much columns</em> and you can do exactly the same with CSS Grid, using the <code>grid-column: ? / ?;</code> shortcut property on the column of your choice.</p>
<p>There's actually two syntax you can use:</p>
<dl><dt><code>? / ?</code></dt><dd>Where the first <code>?</code> is the starting column and the second <code>?</code> is the ending column.</dd><dt><code>? / span ?</code></dt><dd>Where the first <code>?</code> is the starting column and the <code>span ?</code> is the width of the column in <code>fr</code> unit.</dd></dl>
<p>Let's try different things with our grid:</p>
<pre><code>grid-column: 1 / 3;
grid-column: 5 / span 2;
grid-column: 2 / span 4;
grid-column: 2 / span 1;
grid-column: 5 / span 1;
grid-column: 1 / 7;
</code></pre>
<p>Results in:</p>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)">
<div class="code-example-children-grid pattern-dots" style="grid-column: 1 /3">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-column: 5 /span 2">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-column: 2 /span 4">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-column: 2 /span 1">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-column: 5 /span 1">
<div class="code-example-value">5</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-column: 1 /7">
<div class="code-example-value">6</div>
</div>
</div><h2 id="ok-what-about-the-rows" >Ok, what about the rows?<a href="#ok-what-about-the-rows" aria-label="Ok, what about the rows? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>It's basically the same as the columns, except it's for the rows. Use the <code>grid-template-rows</code> to declare the number of rows you need. And of course, you can decide where to place each children using <code>grid-row</code>, the equivalent for rows of <code>grid-columns</code>. It's super useful for art directed pages as you can place everything where you want.</p>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example" aria-hidden="true" style="display:grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(6, 1fr);">
<div class="code-example-children-grid pattern-dots" style="grid-row: 2 / span 1;">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-row: 4 / span 1;">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-row: 3 / span 1; grid-column: 6 / span 1;">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-row: 2 / span 2; grid-column: 3 / span 2;">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-row: 1 / span 4; grid-column: 5 / span 1;">
<div class="code-example-value">5</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-row: 1 / span 1; grid-column: 2 / span 1;">
<div class="code-example-value">6</div>
</div>
</div><h2 id="all-this-is-quite-complicated-is-there-a-simpler-way" >All this is quite complicated, is there a simpler way?<a href="#all-this-is-quite-complicated-is-there-a-simpler-way" aria-label="All this is quite complicated, is there a simpler way? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>It can become messy to work this way, so one final tip for you: the best way to make complex layouts from row and grids is to use <code>grid-template-area: ??;</code> and <code>grid-area: ??;</code>, a very funky yet super useful combination of CSS grid.</p>
<p>With this syntax, you <em>draw</em> your layout inside a string in CSS, declaring names for each of your child elements. Let's say we have 5 elements that we want to shape like a star. The result would look like this:</p>
<pre><code>grid-template-areas:
"lefttop . righttop"
". center . "
"leftbottom . rightbottom";
</code></pre>
<p>By doing this, we created a 3 by 3 grid. The <code>.</code> character inside the declaration means an element exists but has no name and thus, should be given empty space. Now all we have to do is report those names to our children and <em> voila</em>:</p>
<span class="visually-hidden">Hidden code demo below.</span>
<div class="code-example code-example-grid-star" aria-hidden="true">
<div class="code-example-children-grid pattern-dots" style="grid-area: lefttop;">
<div class="code-example-value">1</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-area: righttop;">
<div class="code-example-value">2</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-area: center;">
<div class="code-example-value">3</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-area: leftbottom;">
<div class="code-example-value">4</div>
</div>
<div class="code-example-children-grid pattern-dots" style="grid-area: rightbottom;">
<div class="code-example-value">5</div>
</div>
</div><p>This syntax is very useful for more visual minded people and can lead to great art directed pages. The Smashing Magazine website has a very nice article on the subject on this <a href="https://www.smashingmagazine.com/2018/04/art-directing-web-css-grid/">page</a>.</p>
<h2 id="i-want-moar" >I want MOAR!<a href="#i-want-moar" aria-label="I want MOAR! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If you want to train your CSS grid skills, try playing the amazing Grid Garden game on this <a href="http://cssgridgarden.com/">page</a>. If you want more examples but in a sort of short video format, visit this <a href="https://www.youtube.com/watch?v=DCZdCKjnBCs">page</a>. For a complete free video course on CSS Grid, I recommend <a href="https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG">this one</a>.</p>
<strong>And that's it for modern layout in HTML and CSS!</strong><p>Congratulations for reading thus far, that was a lot to take! Now let's talk about the content of your pages and about the elements you're going to use to format it!</p>
<p>Next: <a href="order-your-titles-correctly.html">Order your titles correctly</a></p>
Order your titles correctly2021-11-12T16:47:36+01:00order-your-titles-correctly<h1 id="order-your-titles-correctly" >Order your titles correctly<a href="#order-your-titles-correctly" aria-label="Order your titles correctly permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This one is simple, use <code><span><</span>h1></code>, <code><span><</span>h2></code>, <code>h3</code>, etc... Your page should at least have an <code><span><</span>h1></code> and should not jump from <code><span><</span>h1></code> to <code><span><</span>h3></code> without an <code><span><</span>h2></code>. If you want a smaller title, use CSS but don't ruin the semantic for styling purposes! The same applies when, for example, you have a smaller title before the main title. If this happens, change the smaller title to a simple text.</p>
<p>The reason why it is important is because screen readers users have shortcuts that allows them to jump directly to your titles and count on you to organize them logically. In long pages it can rapidly become hard to link to certain parts of your page. Adding an id and a hidden link to your titles can help your users share specific parts of your page. With this technique, the user can click the title to add the id to the url.</p>
<p>This website actually uses this system. You can find the JavaScript function for this <a href="https://github.com/Thomasorus/Kaku/blob/master/src/module.js">in the github repo of my parser</a> <a href="/kaku.html" title="Go to Kaku page" aria-label="Go to Kaku page">Kaku</a>.</p>
<p>Next: <a href="organize-your-text-content.html">Organize your text content</a></p>
Make your links clear and accessible2022-03-13T20:03:30+01:00make-your-links-clear-and-accessible<h1 id="make-your-links-clear-and-accessible" >Make your links clear and accessible<a href="#make-your-links-clear-and-accessible" aria-label="Make your links clear and accessible permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Links are pretty straightforward, you put an <code><span><</span>a></code> with an <code>href</code> attribute and you're good right? Yes, but often links lack readability due to poor phrasing. Try not using texts like <em>more</em> or <em>click here</em> outside of clear phrases, as they do not convey what's going to happen when you click. Try to have a different texts for each link.</p>
<p>If you can't use a more contextualized text, then add the <code>title</code> attribute in the link with more context inside, and it will provide a tool-tip when the user hover on the link. You will also have to add an <code>aria-label</code> attribute with the same contextualized text for screen readers.</p>
<p>Inside those attributes, don't use the work "link". It's not explicit, it doesn't convey meaning. Also because screen readers already say <em>link</em>, your screen readers visitors will hear <em>Link, Link</em>.</p>
<p>Last but not least: if you use <code>target="blank"</code> to open to a new tab, you have to vocalize it using the same <code>aria-label</code> attribute. Just add <code>(open in a new tab)</code> at the end of your text so screen readers users know that the previous page is still open.</p>
<p>So the end result might look like this:</p>
<pre><code><span><</span>a href="/home.html" title="Go to the home page" aria-label="Go to the home page (open in a new tab)" target="blank">here<span><</span>/a>
</code></pre>
<p>Knowing all this, it's often less work and trouble to just rephrase the link!</p>
<p>Next: <a href="when-to-use-a-button-and-a-link.html">When to use a button and a link</a></p>
Organize your text content2021-11-12T16:47:36+01:00organize-your-text-content<h1 id="organize-your-text-content" >Organize your text content<a href="#organize-your-text-content" aria-label="Organize your text content permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Remember when I talked about the box-content semantic elements, the <code><span><</span>nav></code>, <code><span><</span>main></code> and others? Well there's a <em>lot</em> more of them for the text. If you care enough, you can probably find a semantic HTML element for anything. Here's a few that you should use:</p>
<h2 id="text-blocks-with-p" >Text blocks with <code><span><</span>p></code><a href="#text-blocks-with-p" aria-label="Text blocks with <code><span><</span>p></code> permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If you don't know what to use for your block of text, your probably need a paragraph. Paragraphs come with a natural margin that makes them readable even without adding style. Paragraphs are good, use them!</p>
<h2 id="quotes-with-blockhouse" >Quotes with <code><span><</span>blockhouse></code><a href="#quotes-with-blockhouse" aria-label="Quotes with <code><span><</span>blockhouse></code> permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The good old quote we often see in articles! It can actually comes with the <code><span><</span>cite></code> element and attribute to help you sources your quotes, as well as a <code><span><</span>footer></code> to indicate the end of the quote and its author. Take a look at the specifications on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote/">this page</a> to make better quotes.</p>
<h2 id="lists-with-ul-ol-dl" >Lists with <code><span><</span>ul></code>, <code><span><</span>ol></code>, <code><span><</span>dl></code><a href="#lists-with-ul-ol-dl" aria-label="Lists with <code><span><</span>ul></code>, <code><span><</span>ol></code>, <code><span><</span>dl></code> permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If you enumerate something (text, links, etc...) you probably should add them in a list. Lists are useful for screen readers users as they are announced as a list with the total number of elements inside. Then when reading each entry, the screen reader voices its position.</p>
<code><span><</span>ul></code> with <code><span><</span>li></code> inside creates an unordered list with bullets:<ul><li>Element A</li>
<li>Element C</li>
<li>Element Z</li></ul>
<code><span><</span>ol></code> with <code><span><</span>li></code> will create an ordered list with numbers for each element:<ol><li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li></ol>
<code><span><</span>dl></code> is not very popular but is super useful as it's a definition list. Most people still use two columns tables for definitions, but this is way better for screen readers users.<dl><dt>Term 1</dt><dd>Definition 1</dd><dt>Term 2</dt><dd>Definition 2</dd><dt>Term 3</dt><dd>definition 3</dd></dl>
<p>Of course all those lists come with their basic design, but please note that you can change them very easily. You can make your lists go in a single line, change their separation, or even use a custom image instead of dots! Just be careful to not put informative content as a decoration, as it will not be vocalized. Also when reading the source code of a page, HTML lists are very easy to understand.</p>
<h2 id="pre-formatted-text-with-pre" >Pre-formatted text with <code><span><</span>pre></code><a href="#pre-formatted-text-with-pre" aria-label="Pre-formatted text with <code><span><</span>pre></code> permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If you have to present some code, it's probably good to wrap it inside a <code><span><</span>pre></code> tag to preserve its formatting. Please note that you should also use the inline semantic <code><span><</span>code></code> element (we'll talk about it later in these pages).</p>
<h2 id="make-breaks-with-hr" >Make breaks with <code><span><</span>hr></code><a href="#make-breaks-with-hr" aria-label="Make breaks with <code><span><</span>hr></code> permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The <code><span><</span>hr></code> element is to indicate a break inside your content: a kind of pause, a change of subject. You could think that the old <code><span><</span>hr></code> element is useless when we can style these breaks with CSS, but they indicate to screen readers users that they can take a break too!</p>
<p>Next: <a href="all-about-images.html">All about images</a></p>
All about images2021-11-12T16:47:36+01:00all-about-images<h1 id="all-about-images" >All about images<a href="#all-about-images" aria-label="All about images permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Just as links, images can feel pretty straightforward. Put an <code><span><</span>img></code> tag, an <code>src</code> and an <code>alt</code> attributes and you're good right?!</p>
<p>Well yeah but... what if we could do much more, like loading the right image size depending on viewport, let the browser decide between image formats or even only load images when they are in the viewport?</p>
<h2 id="load-the-right-image-size-and-density" >Load the right image size and density<a href="#load-the-right-image-size-and-density" aria-label="Load the right image size and density permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The <code><span><</span>img></code> element has an <code>srcset</code> attribute that allows you to add several links to several versions of your image. You can do two things with <code>srcset</code>:</p>
<ol><li>Ask the browser to change the image depending of the width of the viewport.</li>
<li>Ask the browser to change the image depending of the pixel density of the display.</li></ol>
<p>In the example below, I have 4 versions of the same image that I want the browser to use when the viewport is less than 300, 600, 900 and 1200 pixels in width:</p>
<pre><code><span><</span>img
src="img-1200.jpg"
srcset="img-300.jpg 300w, img-600.jpg 600w, img-900.jpg 900w, img-1200.jpg 1200w"
/>
</code></pre>
<p>And for pixel density for 1k, 2k or 4k screens:</p>
<pre><code><span><</span>img
src="img-1k.jpg"
srcset="img-1k.jpg 1x, img-2k.jpg 2x, img-4k.jpg x4"
alt="this is an image"
/>
</code></pre>
<p>But you can also combine them, for example for a favicon:</p>
<pre><code><span><</span>img
src="icon32px.png"
"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"
alt="this is an image"
/>
</code></pre>
<p>This way you are sure you only load the right size or density for your readers.</p>
<h2 id="load-the-right-image-format" >Load the right image format<a href="#load-the-right-image-format" aria-label="Load the right image format permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You maybe saw it before and wondered what was the <code><span><</span>picture></code> element good for? Well it's quite simple, it's used to contain several <code><span><</span>source></code> elements and an <code><span><</span>img></code> element.</p>
<p>The <code><span><</span>source></code> elements are used to give alternate versions of the same image. The most obvious use-case is to load several formats to allow to browser to pick the lighter if it supports it.</p>
<p>Let's take an example with a <code>jpg</code> and a <code>webp</code>.</p>
<pre><code><span><</span>picture>
<span><</span>source srcset="img1.webp" type="image/webp">
<span><</span>img src="img1.jpg" alt="this is an image" />
<span><</span>/picture>
</code></pre>
<p>If the browser supports the webp format, it will automatically use the webp file instead of the jpg. Please note that if the browser does not support the <code><span><</span>picture></code> element the <code><span><</span>img></code> one will still work, so there is no good reason to not use them.</p>
<h2 id="lazy-loading-images" >Lazy loading images<a href="#lazy-loading-images" aria-label="Lazy loading images permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Lazy loading has become native in most browsers and is quite simple to use: <code>loading:"lazy"</code> on your <code><span><</span>img></code> element and you are good to go. They are several ways of doing lazy loading for older browsers who don't support this feature. All of them require to use JavaScript. If you want to support old browsers, take a look at this <a href="https://css-tricks.com/the-complete-guide-to-lazy-loading-images/">article</a>.</p>
<h2 id="combine-all-this-together" >Combine all this together!<a href="#combine-all-this-together" aria-label="Combine all this together! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>But you don't have to choose between all these features, you can combine them to have images at the right size, of the best type, only loaded when in the viewport, and all this only in HTML.</p>
<pre><code><span><</span>picture>
<span><</span>source
type="image/webp"
srcset="img-300.webp 300w, img-600.webp 600w, img-900.webp 900w, img-1200.webp 1200w">
<span><</span>img
loading="lazy"
src="img.jpg"
srcset="img-300.jpg 300w, img-600.jpg 600w, img-900.jpg 900w, img-1200.jpg 1200w" alt="The happy hacking keyboard">
<span><</span>/picture>
</code></pre>
<p>Knowing that images are the most heavy thing loaded by websites, it's incredible that this syntax isn't more known and used!</p>
<h2 id="about-svg-files" >About svg files<a href="#about-svg-files" aria-label="About svg files permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The SVG format (for <em>Scalable Vector Graphics</em>) is using vector graphics with an XML markup language. It can therefore used in a browser as inline code to display images, which is a good thing as it reduces the number of requests made by the browser.</p>
<p>Here's a few tips:</p>
<ul><li>During export from programs like Illustrator, Affinity Designer or Inkscape, take care of not exporting an SVG with an image inside.</li>
<li>SVG exports often come with a lot of useless information stored inside, which makes them verbose and heavy. Compress them by using an SVG compressor like <a href="https://jakearchibald.github.io/svgomg/">SVGO</a>.</li>
<li>The width and height of the SVG doesn't matter much from a file weight perspective but their design can be ugly on unreadable if too small or too big.</li>
<li>Most of the time you will put the inline SVG inside a <code><span><</span>div></code> or a <code><span><</span>span></code> that has a fixed width and height and the SVG file will overflow. To make it fit, use a simple CSS rule like <code>width:100%; height:100%;</code>.</li></ul>
<p>SVG can be informative or decorative and its purpose can change the way you handle accessibility. If you are using an SVG for informative purposes (like a graph), you should add a <code><span><</span>title></code> to add a tooltip and/pr an <code>aria-label</code> attribute to just vocalize it.</p>
<pre><code><span><</span>svg role="img" aria-label="Accessible Name">
<span><</span>title>Accessible Name<span><</span>/title>
<span><</span>!-- child elements of the inline SVG -->
<span><</span>/svg>
</code></pre>
<p>If the SVG is used for decorative purposes (like an icon) you can simply hide it using <code>aria-hidden="true"</code>.</p>
<pre><code><span><</span>svg role="img" aria-hidden="true">
<span><</span>!-- child elements of the inline SVG -->
<span><</span>/svg>
</code></pre>
<p>Next: <a href="all-about-video-and-audio.html">All about video and audio</a></p>
All about video and audio2021-11-12T16:47:36+01:00all-about-video-and-audio<h1 id="all-about-video-and-audio" >All about video and audio<a href="#all-about-video-and-audio" aria-label="All about video and audio permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>The <code><span><</span>video></code> and <code><span><</span>audio></code> elements are super easy and convenient ways to embed multimedia content on the web without relying on a third party. But if the tags are very straightforward, the video and audio formats can be a headache.</p>
<p>You have a lot of formats available but most of them are not supported on every browser. To make it quick you have containers and you have codecs. Containers are the format of the file, the <code>.mp4</code> for example. Codecs are the compression algorithm used.</p>
<p>So which video codec should you use?</p>
<h2 id="the-video-codecs-and-containers-supported-on-the-web" >The video codecs and containers supported on the web<a href="#the-video-codecs-and-containers-supported-on-the-web" aria-label="The video codecs and containers supported on the web permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If you are in a hurry and can only produce one export, go with the h264 video codec and MP3 audio codec in a <code>.mp4</code> container. It will run everywhere. If you think your Firefox users have the AAC codec installed on their machine, you can replace the MP3 codec by AAC as it has better sound quality.</p>
<p>If you want high quality and compression you will have to export your videos two times and do this combination:</p>
<dl><dt>Apple machines</dt><dd>A <code>.mp4</code> container with h265 video encoding and AAC audio encoding.</dd><dt>Others</dt><dd>A <code>.webm</code> container with AV1 video codec and probably Opus for audio encoding.</dd></dl>
<p>If you only want open source and cover a maximum of machines, the best combination is probably a <code>.webm</code> container with a vp8 for video encoding and mp3 for the audio (mp3 is open source since 2017). Be careful as this won't work in Safari until Safari 14.</p>
<h2 id="the-audio-codecs-and-containers-supported-on-the-web" >The audio codecs and containers supported on the web<a href="#the-audio-codecs-and-containers-supported-on-the-web" aria-label="The audio codecs and containers supported on the web permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Basically if you want to archive some audio or put in on the web so people can remix it, you'd better use a lossless audio codec and in this case, FLAC is the king, being compatible with almost everything.</p>
<p>If you are putting audio for streaming and want a good quality, the AAC codec in a <code>.mp4</code> container is probably a good pick, but be careful of Firefox users without the codec on their systems. For them you can use the Vorbis codec with a <code>.ogg</code> container.</p>
<p>If you don't care about quality and just want everything to work, go with <code>.mp3</code>.</p>
<h2 id="wait-i-can-pick-two" >Wait, I can pick two?<a href="#wait-i-can-pick-two" aria-label="Wait, I can pick two? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>That's the beauty of it, just like with the <code><span><</span>picture></code> element, you can add multiple sources to your <code><span><</span>video></code> and <code><span><</span>audio></code> elements and let the browser choose.</p>
<pre><code><span><</span>audio controls>
<span><</span>source src="foo.opus" type="audio/ogg; codecs=opus"/>
<span><</span>source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<span><</span>source src="foo.mp3" type="audio/mpeg"/>
<span><</span>/audio>
</code></pre>
<h2 id="save-bandwidth-with-these-simple-tricks" >Save bandwidth with these simple tricks!<a href="#save-bandwidth-with-these-simple-tricks" aria-label="Save bandwidth with these simple tricks! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The <code>preload="metadata"</code> attribute only loads the metadata of your files like the first frame or its length until the user plays the file. And if you want to save even more data, use <code>preload="none"</code>. In the case of a video, the preview will be totally dark but that can be mitigated by using the <code>poster</code> attribute with a link to an image.</p>
<p>Finally, you should know that converting animated gif to videos often result in radically smaller files, and you can trick the user in believing a gif is being played!</p>
<h2 id="the-multiple-configurations-of-the-video-player" >The multiple configurations of the video player<a href="#the-multiple-configurations-of-the-video-player" aria-label="The multiple configurations of the video player permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The <code><span><</span>video></code> and <code><span><</span>audio></code> elements comes with a set of attributes that allows you to tweak how they act. The <code><span><</span>audio></code> element is often left untouched but the <code><span><</span>video></code> one has several attributes that allows it to act as a video player or as a fake gif!</p>
<p>Make a traditional video with the <code>control</code> attribute:</p>
<pre><code><span><</span>video controls" src="path to video" type="video/mp4"><span><</span>/video>
</code></pre>
<p>Make a fake gif from a video using those attributes. <code>loop</code> will restart the video, <code>mute</code> will remove sound and <code>autoplay</code> will start it automatically. Be careful as <code>autoplay</code> will not respect the <code>preload</code> attribute, making the video downloaded instantly.</p>
<pre><code><span><</span>video autoplay loop mute src="link to fake gif video" type="video/mp4"><span><</span>/video>
</code></pre>
<p>Finally, please note that the <code>playsinline</code> attribute prevents videos from playing full screen on mobile when launched. If that's not the behavior your want, don't forget to add it.</p>
<p>Next: <a href="doing-forms-correctly.html">Doing forms correctly</a></p>
Doing forms correctly2021-11-12T16:47:36+01:00doing-forms-correctly<h1 id="doing-forms-correctly" >Doing forms correctly<a href="#doing-forms-correctly" aria-label="Doing forms correctly permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Forms are incredibly complicated to get right from an accessibility standpoint. I don't know all the good practices but I've seen some bad ones that I can warn you about. Please contact me if you find a mistake in this section as I really am not 100% sure about everything.</p>
<h2 id="forms-require-strict-html" >Forms require strict HTML<a href="#forms-require-strict-html" aria-label="Forms require strict HTML permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>With more people validating forms with JavaScript, we've seen a drop in code quality of forms. But the reality is quite simple: if you forget about some parts of the form, screen readers users will not know they are in a form to begin with!</p>
<ol><li>A form starts and ends with the <code><span><</span>form></code> element even if you validate it with JavaScript. Also add an <code>id</code> to it.</li>
<li>Each <code><span><</span>input></code>, no matter its type, needs and <code>id</code> and a <code><span><</span>label></code> with the <code>for</code> attribute pointing to it.</li>
<li>If you have a multi-section form, regroup them with the <code><span><</span>fieldset></code> element and add the <code><span><</span>legend></code> element as the "title" of this fieldset.</li>
<li>End your form with a <code><span><</span>button></code> when you can, use the <code>for</code> attribute to point on the form's id, and use an <code>aria-label</code> to give more context.</li></ol>
<p>For accessibility reasons:</p>
<ul><li>Use contextualized text for your labels, be precise about what each input is about! If you can't have a clear label, same as links: add a <code>title</code> attribute to the input as well as a <code>aria-label</code>.</li>
<li>Don't rely on the <code>placeholder</code> attribute for examples of what is expected! The placeholder text is often hard to read and disappears once the input becomes active, making it difficult for users with cognitive impairment.</li>
<li>If you want to add an example of what is expected from the user, you can either add it directly in the label (often not very accepted by designers) or add it below the input and then refer to it with the <code>aria-describedby</code> attribute (see example below). Using this, screen readers will first read the label, then the <code>aria-describedby</code> text in one go.</li></ul>
<p>Wrapping it up, here's an example that you can inspect with your browser's developer tools:</p>
<span class="visually-hidden">This is a form demo below, not a real one, don't activate it!</span>
<form id="monsters">
<fieldset>
<legend>Choose your favorite monster</legend>
<small id="error" style="color:red; display:none;">Error: you need to choose a monster.</small><br/>
<input type="radio" id="kraken" name="monster" aria-describedby="kraken-desc">
<label for="kraken">Kraken</label><br/>
<small id="kraken-desc">The kraken is a kind of giant squid.</small><br/>
<input type="radio" id="sasquatch" name="monster" aria-describedby="sasquatch-desc">
<label for="sasquatch">Sasquatch</label><br/>
<small id="sasquatch-desc">The Sasquatch is a kind of giant ape.</small><br/>
<input type="radio" id="mothman" name="monster" aria-describedby="mothman-desc">
<label for="mothman">Mothman</label><br/>
<small id="mothman-desc">The Mothman is a kind of giant moth.</small><br/>
</fieldset>
</form>
<button type="submit" form="monsters" value="Submit" aria-label="Validate the monsters form">Validate</button><p>That's it for the code, but more often than you think, bad forms are the result of non inclusive design practices, some of which we will see below.</p>
<h2 id="information-below-forms" >Information below forms<a href="#information-below-forms" aria-label="Information below forms permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Ever filled a form and right under the validate button, seen a wall of text written in 10 pixels size that is actually the terms and conditions? Well that can be a problem!</p>
<p>Most forms end with words like <em>Continue</em> or <em>Validate</em> and by doing so, suggest that the page is finished. A screen reader user can't know there's something else below.</p>
<p>This problem can be super tedious to explain to designers as most of them don't want a wall of text before the form, and don't ever suggest this to a marketing team! So an accessible solution is to simply use an invisible anchor link pointing to the wall of text right before the form starts.</p>
<p>Screen readers users are humans too, they dislike walls of text about legal stuff like anyone else! This solution allows them to either read it or even better, skip it, like we all do <em>right?</em></p>
<h2 id="don-t-put-text-sections-inside-a-form" >Don't put text sections inside a form!<a href="#don-t-put-text-sections-inside-a-form" aria-label="Don't put text sections inside a form! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You probably already tried to tab between inputs in a form. That's because inputs are capturing elements that <strong>you can only escape by using the tab key</strong>. And when you do, <strong>the tab key will lead you to the next native focus-able element</strong> like another input, a button or a link.</p>
<p>It's important because too many designers put big explanation texts about the form between inputs. Since screen readers users can only use the tab key to get out of an input and will land on the next focus-able element, they will not have the explanation texts vocalized and have no way of access them. We saw that <code>aria-describedby</code> can be used to link to a descriptive text, but that's applying a bandage on a broken leg.</p>
<p>Removing texts sections inside forms might seem like a chore and, when talking about it with designers, they will probably tell you it's a going to make the whole experience bland or suffocating in the case of massive forms.</p>
<p>But the reality is that <strong>a form that needs explanation texts between inputs is a bad design right from the start</strong>. You should give all necessary information before filling the form, otherwise users might start filling it and realize in the middle they didn't have to, or are not concerned about it.</p>
<p>Your labels with the descriptions attached should be enough to make it a pleasant and understandable experience. Yes forms are not fun but we can't sacrifice usability to some <em>funnel</em> concept marketers enjoy to create.</p>
<h2 id="handling-errors-in-forms-is-a-pain" >Handling errors in forms is a pain<a href="#handling-errors-in-forms-is-a-pain" aria-label="Handling errors in forms is a pain permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Handling errors in forms is super complicated and nobody seems to agree about how to do it correctly. It's especially hard with accessibility in mind, and not only because of screen readers. So take my advises with a grain of salt as I may be wrong on some cases and am still learning about this.</p>
<p>The first rule to respect is that triggering error messages should only happen either when the user tabs out of the input or when the user validates the form. Don't trigger error messages while the user is typing. Wait for him to go out of the input or it will be a vocalized nightmare or a panic inducing behavior. You might think that's counter-intuitive as screen readers users may not know that they wrote it wrong but that's actually OK if you do the following right.</p>
<p>When the user validates the form using the button, if an input is required and not filled or wrongly filled, move the user focus to this problematic input using the <code>.focus()</code> function in JavaScript. This way the user can promptly fill or fix it, then go back below super fast to validate the form again.</p>
<p>The error message should be added the same way as the instructions, with an <code>aria-describedby</code>. You can actually have two <code>id</code> as a value for <code>aria-describedby</code>, so screen readers will read the label, then the description, then the error message. Finally, a <code>aria-invalid="true"</code> needs to be added to each invalid input.</p>
<p>For the sake of the example, imagine we did not choose a monster below and tried validating the form. In JavaScript, we should add the <code>error</code> id to each input's <code>aria-describedby</code> so screen readers can vocalize the error message, and remove the <code>display:none</code> from the error message itself so non-screen readers users can see it too.</p>
<span class="visually-hidden">There is a form demo below, you can inspect it using the development tools.</span>
<form id="monsters">
<fieldset>
<legend>Choose your favorite monster</legend>
<small id="error" style="color:red;">Error: you need to choose a monster.</small><br/>
<input type="radio" id="kraken" name="monster" aria-describedby="kraken-desc error" aria-invalid="true">
<label for="kraken">Kraken</label><br/>
<small id="kraken-desc">The kraken is a kind of giant squid.</small><br/>
<input type="radio" id="sasquatch" name="monster" aria-describedby="sasquatch-desc error" aria-invalid="true">
<label for="sasquatch">Sasquatch</label><br/>
<small id="sasquatch-desc">The Sasquatch is a kind of giant ape.</small><br/>
<input type="radio" id="mothman" name="monster" aria-describedby="mothman-desc error" aria-invalid="true">
<label for="mothman">Mothman</label><br/>
<small id="mothman-desc">The Mothman is a kind of giant moth.</small><br/>
</fieldset>
</form>
<button type="submit" form="monsters" value="Submit" aria-label="Validate the monsters form">Validate</button><p>Because of all this and contrary to popular practices, <strong>it's forbidden to disable a form button</strong>, even if the user made errors or did not finish filling the form. If the validation button is disabled it disappears from vocalization and the user has to travel through the whole form to find which input is not good. This is less practical than sending him directly to the input when the button is clicked.</p>
<p>Applying this can be tricky on legacy applications that handle errors in a monolithic way. Even if you do front-end surface level error checking, the user might make a typo that can only be identified when the form is sent and the back-end discovers it by using information stored in a database. If this happens, the error handling in the back-end needs to be written in a way that returns which information is wrong, to allow the front-end to <code>.focus()</code> on the wrong input.</p>
<p>If the back-end returns a vague message then the front-end can't do anything outside using <code>.focus()</code> to move the user to a standard error message, and the user has to redo the entire form and find by himself what he did wrongly. This is a super bad user experience even for non-disabled users.</p>
<p>The best solution is of course to do error checking on the back-end on each input with an ajax call right after the user exits it. But for various reasons going from time to cost of requests, it's not always possible.</p>
<p>Good luck with your forms and more than anything, <strong>test your forms with real users, disabled or not, to find out if everything is ok</strong>. On this particular subject, you can't trust yourself, your client, product owner, designer or common tester. You need real, fresh experience.</p>
<p>Next: <a href="tables-are-not-that-complicated.html">Tables are not that complicated</a></p>
Strong b em and i2022-03-13T20:03:30+01:00strong-b-em-and-i<h1 id="strong-versus-b-versus-em-versus-i" ><code><span><</span>strong></code> versus <code><span><</span>b></code> versus <code><span><</span>em></code> versus <code><span><</span>i></code><a href="#strong-versus-b-versus-em-versus-i" aria-label="<code><span><</span>strong></code> versus <code><span><</span>b></code> versus <code><span><</span>em></code> versus <code><span><</span>i></code> permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Here we are, at the doors of the great war of semantic inline elements. So who's right between <code><span><</span>strong></code> and <code><span><</span>b></code>? Who wins between <code><span><</span>em></code> and <code><span><</span>i></code>?</p>
<p>Well, they all win.</p>
<p>Everyone is a winner excepts us the developers who have to implement this. Let's try to explain this strange situation.</p>
<p>Imagine a website for a touristic area with a cliff:</p>
<ul><li>The <code><span><</span>b></code> tag is used to draw the reader's attention. So it should draw attention to the cliff: "This wonderful area has a forest but also a <b>wonderful cliff</b>".</li>
<li>The <code><span><</span>strong></code> tag is to indicate the importance and seriousness of something. So it should warn people about the cliff: "Please be careful near the cliff as <strong>there are no ramps to prevent you from falling and the winds are strong</strong>".</li>
<li>The <code><span><</span>i></code> tag is used to indicate that something is set off from the normal prose. For example it should be used for the foreign name of the cliff: "This cliff name is <i>mh'irr'la</i>" or the thoughts of someone thinking about the cliff: "<i>Is the cliff really in love with me or is it just a farce?</i> thought Jonathan".</li>
<li>The <code><span><</span>em></code> tag is used to stress something on the subject, almost as if you speak it aloud. So it should help denote something about the cliff: "Ah yes, the <em>cliff</em>, the one that is actually 2 meters tall".</li></ul>
<p>I hope it makes sense. The sad reality is that no one writes prose in HTML, so you'll probably be stuck with whatever the <abbr title="What you see is what you get">wysiwyg</abbr> editor or markup language parser of your choice decided to use. For example this page is written using <a href="/kaku.html" title="Go to Kaku page" aria-label="Go to Kaku page">Kaku</a> who compiles to <code><span><</span>strong></code> and <code><span><</span>em></code> by default.</p>
<p>Next: <a href="other-kinda-useful-semantic-elements.html">Other kinda useful semantic elements</a></p>
When to use a button and a link2021-11-12T16:47:36+01:00when-to-use-a-button-and-a-link<h1 id="when-to-use-a-button-and-a-link" >When to use a button and a link<a href="#when-to-use-a-button-and-a-link" aria-label="When to use a button and a link permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>For most document type websites the question between links and buttons doesn't really exist. But in application type websites, it's often that developers don't pick the right one or that designers make links look like buttons.</p>
<p>So to make it clear:</p>
<ul><li>An <code><span><</span>a></code> is for a page change or a new tab. When changing page, a screen reader user will be automatically moved to the top of the page and will start reading it from there.</li>
<li>A <code><span><</span>button></code> is for activating something like a modal or a form. Once pressed, even if things change in the page, it doesn't move a screen reader user somewhere else and it doesn't vocalize anything.</li></ul>
<p>This difference of behavior is super important, especially in single page JavaScript web applications where urls are changed dynamically, but no page change is triggered in the browser! When such a thing happens, the developer has to manually move the focus of the screen reader user to the next point of interest inside the app and vocalize what happened and where the user is.</p>
<p>To do this, the developer has to use the <code>.focus()</code> function in JavaScript. I'm not 100% sure about how to vocalize the page change so I'm not gonna give any advice on this. If you know good practices please <a href="about.html">contact me</a> so I can update this part.</p>
<p>One last thing: I don't care about your reasons, don't replace a <code><span><</span>button></code> by a <code><span><</span>div></code>.</p>
<p>Next: <a href="strong-b-em-and-i.html">The mess of strong b em and i</a></p>
HTML interactive elements2023-03-03T17:22:26+01:00html-interactive-elements<h1 id="some-cool-html-interactive-elements" >Some cool HTML interactive elements<a href="#some-cool-html-interactive-elements" aria-label="Some cool HTML interactive elements permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>You might not know these but they can be super useful. Their main default is that they are sometimes hard to style properly.</p>
<dl><dt><code><span><</span>details></code> and <code><span><</span>summary></code></dt><dd>Allows you to make a kind of accordion box in pure HTML. By default closed but the <code>open</code> attribute on <code><span><</span>details></code> can make it open.</dd><dt><code><span><</span>datalist></code></dt><dd>Can be used as an input with a list of options auto-suggested by what the user is typing.</dd><dt><code><span><</span>progress></code></dt><dd>A progress with several attributes for showing progress. It's very hard to style correctly but you can have the same accessibility by using the <code>role="progressbar</code> on a div.</dd></dl>
<details>
<summary>Click me for a code demo</summary>
<figure><picture><source type="image/webp" srcset="img/dio-400.webp 660w, img/dio-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="You though it was code but it was me Dio!" srcset="img/dio-400.jpg 660w, img/dio-700.jpg 1440w" src="img/dio.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>SURPRISE | <small><a href="img/dio.jpg">Full size</a></small></figcaption> </figure>
</details><p>A datalist can be useful but requires a full form, which is quite a lot of code:</p>
<label for="jojolist">Choose a Jojo character from this list:</label><br>
<input list="jojo" id="jojolist" name="muchJojo" />
<datalist id="jojo">
<option value="Jonathan">
<option value="Joseph">
<option value="Jotaro">
<option value="Josuke">
<option value="DIO">
</datalist><p>A progress bar using <code><span><</span>progress></code> has this look:</p>
<progress aria-valuenow="20" aria-valuemin="0" aria-valuetext="Step 2: Copying files... " aria-valuemax="100" style="display:block; width:100%;">20 %</progress><p>Use the `role="progressbar" to style it more easily:</p>
<div style="border:1px solid black">
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" class="pattern-dots" style="width:20%; text-align:center;">20 %</div>
</div>Other kinda useful semantic elements2021-11-12T16:47:36+01:00other-kinda-useful-semantic-elements<h1 id="other-kinda-useful-semantic-elements" >Other kinda useful semantic elements<a href="#other-kinda-useful-semantic-elements" aria-label="Other kinda useful semantic elements permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Below are elements often complicated to add if you use a CMS or a markup language like Markdown as they don't give syntactic shortcuts for most of them, so you have to write them by hand.</p>
<p>Favor these semantic elements when working for very specific projects where text cannot always convey all the meaning by itself. If you have a design system, incorporating them to specific components could probably increase their usage.</p>
<dl><dt><code><span><</span>abbr></code></dt><dd>Stands for abbreviation. Can be used for currencies for example.</dd><dt><code><span><</span>code></code></dt><dd>For code, obviously, often best used with <code><span><</span>pre></code>.</dd><dt><code><span><</span>time></code></dt><dd>For time values of course.</dd><dt><code><span><</span>mark></code></dt><dd>To highlight some parts of your text.</dd><dt><code><span><</span>s></code></dt><dd>Strikes the text to indicate it's no longer relevant. Don't confuse it with <code>strike</code> who just strikes the text for... design?</dd><dt><code><span><</span>del></code> & <code><span><</span>ins></code></dt><dd>If you have an edit to make to a text and want to keep trace of the change <code><span><</span>del></code> and <code><span><</span>ins></code> are a good pick!</dd></dl>
<p>Next: <a href="html-interactive-elements.html">Some interactive elements that can be useful</a></p>
Tables are not that complicated2021-11-12T16:47:36+01:00tables-are-not-that-complicated<h1 id="tables-are-not-that-complicated" >Tables are not that complicated<a href="#tables-are-not-that-complicated" aria-label="Tables are not that complicated permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>There isn't a lot about tables that is not already well known. For accessibility you might want to be careful of a few things.</p>
<p>The <code><span><</span>caption></code> element should be added to all your tables as sort of title for this table. It will inform all users what the table is about: <code><span><</span>caption>I'm a table title!<span><</span>/caption></code>. Use the <code>scope="col"</code> on your <code><span><</span>th></code> columns to explain to screen readers that the element is a the start of the column and <code>scope="row"</code> for the same <code><span><</span>th></code> elements that start rows.</p>
<p>If you need to make more complicated tables accessible, try take examples in the MDN documentation on this <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced">page</a>.</p>
<p>Next: <a href="make-your-links-clear-and-accessible.html">Make your links clear and accessible</a></p>
CSS tips2022-01-02T00:39:42+01:00css-tips<h1 id="css-tips" >CSS tips<a href="#css-tips" aria-label="CSS tips permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Performance is a hot topic as the website obesity crisis keeps going. In these pages I already explained a few things to improve performance, especially in the video and image pages. Still there are a few broader topics related to performance that we should talk about.</p>
CSS good practices2022-03-13T20:03:30+01:00css-good-practices<h1 id="css-good-practices" >CSS Good practices<a href="#css-good-practices" aria-label="CSS Good practices permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>In the past CSS had such limitations and was so badly understood by most developers that using frameworks or libraries was seen as the only way to get things working. <a href="https://getbootstrap.com/">Bootstrap</a> was the king of CSS frameworks and with it came a ton of code that was most often not used at all. The only usable alternative was probably <a href="https://get.foundation/">Foundation</a> or SASS libraries like <a href="https://www.oddbird.net/susy/">Susy</a>.</p>
<p>Fortunately today we have a lot of choice! We still have Bootstrap, but also lighter alternatives like <a href="https://bulma.io/">Bulma</a> or totally different propositions like the utility first <a href="https://tailwindcss.com/">Tailwind</a>. Also tools like <a href="https://purgecss.com/">Purge CSS</a> can help reduce the size of CSS bundles by removing the unused parts of CSS frameworks.</p>
<p>In reaction to fully equipped frameworks we've also seen class-less CSS frameworks rising in popularity for a few years and they come with the promise of a small file size that correctly styles a website with only the HTML elements. That indeed sounds like a smart idea as it forces the developer to use <a href="what-is-semantic-html.html">semantic HTML</a>.</p>
<p>But if you have to extend this kind of framework with your own design and don't want to use classes, you're going to create more troublesome code that you think.</p>
<h2 id="enters-specificity" >Enters specificity<a href="#enters-specificity" aria-label="Enters specificity permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<figure><blockquote cite="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.</blockquote><figcaption>— MDN, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">About specificity</a></figcaption></figure><p>So what are the more specific and less specific things you can meet in CSS? Here's a list from more to less specific:</p>
<ol><li>IDs</li>
<li>Classes, attributes and pseudo classes</li>
<li>Elements and pseudo elements</li></ol>
<p>Knowing this, some practices can create a lot more specificity than others. Among them, these are the worst:</p>
<ul><li>Using IDs as they are single use.</li>
<li>Nesting selectors, for example <code>.navigation .navigation-list</code> doubles the specificity of the later and prevents it from working outside the former.</li>
<li>Qualifying selectors, the action of sticking a class to a specific HTML element like <code>ul.navigation</code></li></ul>
<p>Specificity is why a lot of people hate CSS:</p>
<ul><li>It makes it hard to extend an existing code base if everything is super specific</li>
<li>It can trigger repaints of existing elements, thus creating flashes when loading the website</li>
<li>It makes the code super verbose and hard to maintain</li>
<li>It creates code segments that can't be reused in another situation</li></ul>
<p>So as you can see, it's not just a technical thing but a good practice methodology to take specificity seriously.</p>
<h2 id="chain-elements-or-use-a-class" >Chain elements or use a class?<a href="#chain-elements-or-use-a-class" aria-label="Chain elements or use a class? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>To come back to our no-class CSS topic, we find ourselves in front of a dilemma.</p>
<p>Let's say you want to add red to your links located in a list in the navigation of your website, using only HTML elements and no classes. It would look like this:</p>
<pre><code>nav ul li a {
color:red;
}
</code></pre>
<p>Since browsers read CSS from right to left, each time they meet a new element in this declaration, they have to re-compute the design. This is how the browser interprets this chain:</p>
<ol><li><em>I style links to red</em></li>
<li><em>Wait it's only links in lists that need red</em></li>
<li><em>Crap, it was only links in lists in the navigation that need red</em></li></ol>
<p>Unless you have a terribly big CSS file that takes a lot of time to be parsed and triggers a lot of refresh, of course you will not see this happening. But this is still happening under the hood.</p>
<p>Now let's compare this to a simple utility class:</p>
<pre><code>.redcolor {
color:red;
}By default text is black and background is white
<span><</span>a class="redcolor">
</code></pre>
<p>With this code, the browser only thinks <em>if I see a redcolor class, I add red</em>. And that's it, no repaint, no problem. But here's the thing: <strong>chaining HTML elements is calculated as less specific than using a class</strong>.</p>
<p>So who is right and who is wrong? The browser is right, but ultimately, the no-class CSS is worse:</p>
<ul><li>It's more verbose</li>
<li>It's harder to extend the existing code and will get even more verbose when doing so</li>
<li>It can't be reused in another context since it's tied to specific parents</li></ul>
<p>So in the end, using class is a better idea. The no-class CSS methodology is good, but only works as a starter point for global elements.</p>
<h2 id="tips-and-tricks-for-your-css" >Tips and tricks for your CSS<a href="#tips-and-tricks-for-your-css" aria-label="Tips and tricks for your CSS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>So in the end what should you do if you want to maintain small CSS file size and low specificity? Here are some rules that you can apply to almost every project:</p>
<ul><li>Style HTML elements for broader usage. The moment you start chaining them means you need a class</li>
<li>Never nest or qualify classes and instead, use a simple yet effective naming methodology like <a href="http://getbem.com/introduction/">BEM, Block Element Modifier</a></li>
<li>Try to organize your CSS file with less specific elements at the top and ery specific elements at the bottom, which is often referred to the <a href="https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/">Inverted Triangle</a> methodology</li>
<li>Using a methodology like BEM might help you think about your CSS classes as objects than can be reused and extended, a good practice called <a href="https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/">Object Oriented CSS</a></li></ul>
<p>You can check your specificity using this <a href="https://specificity.keegan.st/">specificity calculator</a> and check if your file has his specific code in order (from less to more) using this specificity <a href="https://jonassebastianohlsson.com/specificity-graph/">graph generator</a>.</p>
<p>By doing this your code will be lighter, easier to maintain, reusable and extendable like objects, and won't trigger repaints.</p>
CSS methodologies2022-03-13T20:07:40+01:00css-methodologies<h1 id="a-short-history-of-css-methodologies" >A short history of CSS methodologies<a href="#a-short-history-of-css-methodologies" aria-label="A short history of CSS methodologies permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>What's interesting about CSS is how much people tend to love it or despise it.</p>
<p>Most often than not, it has to do with the cascade and the way to either use it or not use it. As a CSS file is read from top to bottom, the actual placement of the code inside the file is important. But the most terrible thing for <em>classic</em> developers is that CSS is global and declarations are not variables and won't trigger an error if you reuse them.</p>
<p>This simple thing has been the source of discussion about how to better write CSS. In this article, we'll see how various people took different approaches to organize their code bases.</p>
<p>But first, let's explain quickly what is the cascade.</p>
<h2 id="the-cascade" >The cascade<a href="#the-cascade" aria-label="The cascade permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<figure><blockquote >The cascade is an algorithm that defines how to combine property values originating from different</blockquote><figcaption>MDN Docs</figcaption></figure><p>What happens if we declare the same thing two times, but with different properties?</p>
<p>Here's a button:</p>
<pre><code>.button {
border:1px solid red;
}
/.../
.button {
border:1px solid blue;
}
</code></pre>
<p>In this example, the border's button will be blue, as the latest declaration overwrites the previous one. But it's not the name of the declaration that's getting overwritten, it's the properties located inside.</p>
<p>Or, more precisely, if the cascade finds declarations with the same name, it will regroup its the properties together. And if two properties are the same, then the last one wins.</p>
<pre><code>.button {
width: 30px;
border:1px solid red;
}
/.../
.button {
border:1px solid blue;
color:red;
}
</code></pre>
<p>In this case, the <code>border</code>, <code>width</code> and <code>color</code> properties will be grouped together in a single <code>.button</code> class. It will have a blue border.</p>
<h2 id="separation-of-concerns-and-semantics" >Separation of concerns and semantics<a href="#separation-of-concerns-and-semantics" aria-label="Separation of concerns and semantics permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Of course CSS is nothing without HTML.</p>
<p>For years the rule about organizing them was to respect the <em>separation of concern</em>. HTML is for structure and CSS is for styles.</p>
<p>For example using an <code><span><</span>h3></code> tag instead of an <code><span><</span>h1></code> just because the <code><span><</span>h3></code> is smaller is bad practice. Using CSS to style the <code><span><</span>h1></code> to the size needed is good practice. This way, even if the <code><span><</span>h3></code> is replaced with a proper <code><span><</span>h1></code>, the style won't change.</p>
<p>If an existing website needs a redesign without touching the HTML, it's also possible. That's what the famous <a href="https://www.csszengarden.com/">CSS Zen Garden</a> website, which has several designs with the same HTML, popularized in 2003.</p>
<p>It makes sense, but how do you <em>name</em> these styles?</p>
<p>That's where the <em>semantic</em> part comes in. Classes should name based on their purpose and not on their properties. In the previous example, naming the title <code>.main-title</code> could work, but naming it <code>.title1</code> or <code>.size-30</code> won't. The first one implies that this title is the first one in the page. The second one does not tell us where this class is supposed to be used.</p>
<p>Today the separation of concern and the semantic naming are often challenged. Some projects moved to JavaScript components where each one contains both its scoped HTML and CSS in the same file. The cascade is not a problem anymore and the global styles either. But this component approach is still less used than classic templates, and has its own issues that we will discuss later.</p>
<h2 id="semantic-and-structure" >Semantic and structure<a href="#semantic-and-structure" aria-label="Semantic and structure permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Now let's say you start a menu and name it <code>.menu</code>. It has no indication of style or structure, it just says what it is: a menu. It can be used at the top, the bottom, on the side... It's reusable! Or is it?</p>
<p>Actually, it depends.</p>
<p>Let's say our menu contains a sub menu with a button inside. Our CSS might look like that:</p>
<pre><code>.menu {
color: black;
}
.menu .submenu {
border:1px solid blue;
}
.menu .submenu button {
color:red;
}
</code></pre>
<p>This code has two major problems.</p>
<p>First, even with a semantic name on the parent component, the inner elements are not semantic. Worse, they are <em>nested</em>. Which means that if we move the <code>button</code> outside of the <code>.submenu</code>, the <code>button</code> will lose its red color. <strong>If the HTML moves, the CSS breaks</strong>.</p>
<p>The other problem is related to the first one. If you need a <code>button</code> with the same style outside of this context, you are out of luck and need to create another context. And if you don't have another context, then you need to create an entirely new button.</p>
<p>Suddenly it's a mess, and that's just for a button.</p>
<h3 id="object-oriented-css" >Object Oriented CSS<a href="#object-oriented-css" aria-label="Object Oriented CSS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>So of course, nature found a way. Well, Nicole Sullivan found a way. In 2009 she presented the <a href="https://web.archive.org/web/20090729112249/https://oocss.org/">Object Oriented CSS</a> methodology.</p>
<p>Object Oriented CSS or <em>OOCSS</em> ditches the contextual approach of doing CSS (as showed in the previous example) by considering that the way HTML is structured will change and should not have any influence on the style.</p>
<p>To keep our menu example:</p>
<pre><code>.menu {
color: black;
}
.submenu {
border:1px solid blue;
}
.red-button {
color:red;
}
</code></pre>
<p>Each HTML element that needs style should have its own class. This way, no matter the context, they will always have the same style.</p>
<p>But there's still a problem: all this code lacks organization. If you happen to work on an aging website, it could happen that the CSS file grow a lot and that everything new is written at the end of it.</p>
<h2 id="smacss" >SMACSS<a href="#smacss" aria-label="SMACSS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>So in 2011 Jonathan Snook released the book <a href="https://web.archive.org/web/20201031072427/https://smacss.com/">Scalable and Modular Architecture for CSS</a>. It works by organizing the different CSS declarations by logical use in 5 categories, thus fixing the problem with the OOCSS approach.</p>
<p>The categories are:</p>
<dl><dt>Base</dt><dd>The rules that sets the default CSS properties of HTML elements like <code>a</code> or <code>button</code>.</dd><dt>Layout</dt><dd>The classes that define the layouts of pages. The containers, the grids, all those things that organize others elements. Prefixed with <code>l-</code> or <code>layout-</code>.</dd><dt>Modules</dt><dd>The reusable objects of OOCSS.</dd><dt>State</dt><dd>Utility classes dedicated to Modules, used to modify the design of an object if its state changes.</dd><dt>Themes</dt><dd>Utility classes that change the design of Layout and Modules based on the choice of the user or the context, for example dark mode.</dd></dl>
<p>SMACSS does not seem to be used that much today, but its influence is still there. It was a precursor that paved the way to other methodologies that improved its initial proposal.</p>
<p>But from there another problem emerged.</p>
<h2 id="naming-conventions" >Naming conventions<a href="#naming-conventions" aria-label="Naming conventions permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>SMACSS gave guidelines from a <em>macro</em> level perspective, but kept using HTML selectors inside it's modules. Which means that if something was moved or changed inside of them, the HTML kept breaking the CSS.</p>
<p>The solution? More classes for the children of modules of course. But how to name them? Naming in programming is always a problem as it's too often very opinionated.</p>
<p>So naming conventions were created to ease the readability and discovery of code. There were various naming conventions coming out around 2013. Among them <a href="https://suitcss.github.io/">SUITCSS</a> was one of the most popular.</p>
<p>But the one that really saw mass adoption was <a href="https://getbem.com/">BEM</a>. It was created around 2015 by Vsevolod Strukchinsky and Vladimir Starkov. In it's basic form it works this way:</p>
<dl><dt><strong>B</strong>locks</dt><dd>the base of the <em>object</em> we are working on. More often than not, the <em>context provider</em>.</dd><dt><strong>E</strong>lements</dt><dd>the elements <em>inside</em> the block. They are designated using the double underscore <code>__</code>.</dd><dt><strong>M</strong>odifiers</dt><dd>the modified versions of an existing <em>object</em>. They are designated using the double dash <code>--</code>.</dd></dl>
<pre><code>.menu {
color:black;
}
.menu__item {
height:10px;
}
.menu--open {
color:blue;
}
</code></pre>
<p>From a naming perspective the benefits are obvious. You can name several inner elements the same, they will still be understood as different and won't bother each other, for example <code>.menu__item</code> and <code>.footer__item</code>.</p>
<p>Even if the HTML is moved around the class will still work. The cascade and the context are almost irrelevant here. A developer joining a project can also quickly understand the codebase and add its own modifications without touching the existing rules.</p>
<p>By the way, BEM detractors often use the example of too much nesting to say BEM does not work. For example, if we had something like this:</p>
<pre><code><span><</span>div class="container">
<span><</span>span class="container__subtext">
<span><</span>button class="container__subtext__button container__subtext__button--blue">Nested button<span><</span>/button>
<span><</span>/span>
<span><</span>/div>
</code></pre>
<p>When something like this happens, it means the whole object is too big and should be restructured. Instead of multiplying the <em>elements</em>, multiply the <em>blocks</em> by dividing them. <strong>You should never have more than one <code>__</code> or <code>--</code> inside your class names.</strong></p>
<p>So it looks like everything is good! The macro level is handled by methodologies like SMACSS and the micro level by naming methodologies like BEM. There shouldn't be any more problems right? <em>Right?</em></p>
<h2 id="itcss-and-the-specificity-war" >ITCSS and the specificity war<a href="#itcss-and-the-specificity-war" aria-label="ITCSS and the specificity war permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Well yes, there were more problems, mostly performance problems. The beginning of the 2010 saw the arrival of responsive design, HTML5 and CSS3! And most often than not, the directives were to add the new responsive CSS at the end of existing files instead of redoing everything from scratch. So more code bloat! Bigger files! And also tons of ugly repaints of the dom as soon as the browser parsed the CSS!</p>
<p>To deal with this, Harry Roberts came up with <a href="https://www.youtube.com/watch?v=1OKZOV-iLj4">ITCSS</a> around 2014. It means <em>Inverted Triangle CSS</em>. It is, as SMACSS, a methodology based on organizing code in different categories. But where SMACSS does it purely from a logical point of view, ITCSS is focusing on reducing <a href="css-good-practices.html" title="Read about specificity in CSS" aria-label="Read about specificity in CSS">specificity</a> in order to limit repaints and ease the rendering.</p>
<p>The three elementary rules are :</p>
<ol><li>Go from global to localized (<code>*</code> should be before <code>.button</code>)</li>
<li>Go from general use the explicit use (style resets should be before classes)</li>
<li>Go from less specific to more specific (lighter specific selectors like <code>h1</code> before heavy selectors like <code>!important</code>)</li></ol>
<p>Which means the placement of CSS inside the file matters! Here's ITCSS code organization, from top to bottom of the file:</p>
<dl><dt>Settings</dt><dd>Should contain all the variables and global configurations of the project as it will affect everything.</dd><dt>Tools</dt><dd>Mixins, helpers and functions go there and can use the settings.</dd><dt>Generic</dt><dd>Low level style rules like resets or box-sizing should go there as they are the primer coat of CSS.</dd><dt>Base</dt><dd>Styles without classes for HTML elements like <code>h1</code>, <code>a</code>. The default style.</dd><dt>Objects</dt><dd>Structural non-themed elements that wrap components. Things like grids, containers, list positions.</dd><dt>Components</dt><dd>Your classic classes like <code>.button-red</code>. It's of course possible to use BEM to organize their inner code.</dd><dt>Trumps</dt><dd>Helpers as utility classes for surcharges and exceptions.</dd></dl>
<p>Most of the time these categories are in their own files that are then imported in this specific order using SASS. This way when the browser reads the compiled file, he treats the rules from the less specific to the more specific.</p>
<p>ITCSS had a huge influence on CSS makers as it's easy to adapt to each project's needs, it works for projects of all sizes and scales particularly well. The drawback is probably the requirements to understand how everything is organized and why.</p>
<p>So are we finally good? Is it finally over and CSS is ok? You bet it's not.</p>
<h2 id="the-rise-of-css-in-java-script" >The rise of CSS in JavaScript<a href="#the-rise-of-css-in-java-script" aria-label="The rise of CSS in JavaScript permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Around 2010 Google released <a href="https://angularjs.org/">AngularJS</a>, opening the door to the rise of JavaScript components frameworks. It was followed by Angular2, React, Vue and many others.</p>
<p>Many JavaScript developers who probably never understood stylesheets saw this as the opportunity to <em>fix it</em> by adding scoped HTML and CSS inside their components, thus disabling the cascade, the need for semantic naming and the global nature of CSS. Suddenly the separation of concerns was no more. The semantics were gone. You would not ship any CSS files.</p>
<p>This evolution was sudden and <em>brutal</em>. The benefits were real, but it's important to note that some ideas about how to write CSS inside JavaScript were absolutely <em>bollocks</em>. For example React inline styles still use a JavaScript object that does not accept <code>-</code>, forcing developers to write CSS in Camel Case (<em>what the hell?!</em>) and declare values as strings.</p>
<pre><code>var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all',
msTransition: 'all'
};
</code></pre>
<p>Fortunately, the field evolved very fast, allowing to import CSS files, write normal CSS inside components, choose if the style is scoped or not, and many little things that made it quite useful. But one problem started to appear.</p>
<p>Those Javascript frameworks are used in the browser and render in real time what is needed. By adding the style inside the components, the browser is forced, using JavaScript, to re-render the same things a lot of time, resulting in longer loading times.</p>
<p>It's not a problem when used in a true application. Something used in an office with good computers and unlimited battery for example. But when the JavaScript takes too much time to render its components, public websites see their SEO deteriorate. Also, how do you treat global styles?</p>
<p>So the idea of compiling the CSS in its own file came back again. It allows the browser to cache it provides better performance. But how do you keep the non-semantic, cascade free, scoped aspect of CSS in JavaScript if you write CSS into another file?</p>
<h2 id="utility-first-css" >Utility First CSS<a href="#utility-first-css" aria-label="Utility First CSS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You might see the OOCSS methodology and the CSS in JavaScript component approach and ask yourself this question: why not create classes who's only purpose is to set as single property? For example the color of the button? Or the color of the border ?</p>
<pre><code>.red {
color:red;
}
.border-blue {
border-color:blue;
}
</code></pre>
<p>The first problem of a full utility class approach is the bloat in the html. If you need 6 properties to achieve your design, you need 6 classes inside your HTML:</p>
<pre><code><span><</span>button class="red border-blue another-class another-one another-one-again omg-its-not-ending">A lot of classes<span><</span>/button>
</code></pre>
<p>The second problem is the incredible number of classes that would be needed to make it work in a truly agnostic way!</p>
<p>It's one class per property multiplied by the number of design tokens (colors, sizes, etc). It simply can't be done by hand. This is why utility classes are often used for recurring and simple manipulations to avoid using an element in BEM.</p>
<p>That's the reason why utility first approaches can't be done with just a CSS file and need JavaScript in order to create classes programmatically. Knowing this, it's not surprising that most utility first CSS frameworks gained popularity when compiling tools like Grunt, Gulp, Webpack or Parcel got more popular.</p>
<p>But even if you can programmatically create your classes, the problem persists: how do you deal with the bloat?</p>
<h2 id="tailwind-css" >Tailwind CSS<a href="#tailwind-css" aria-label="Tailwind CSS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The <a href="https://tailwindcss.com">Tailwind CSS</a> framework was created around 2017 by Adam Wathan. He decided to pursuit a utility first journey after realizing that he was using more and more utility classes instead of declaring inner elements using the BEM methodology.</p>
<p>He also felt that the semantic part was giving developers too much freedom and took too much time to refactor. He famously said that <em>“Best practices” don’t actually work</em>.</p>
<p>Tailwind's solution is to flip the BEM + Utility First formula. Write using utility classes first, then use a semantic approach when needed. It's only if the utility first declarations tend to be repeated to often, or if the HTML is bloated with classes, that an abstraction should be created.</p>
<p>Wathan gives the example of a navigation bar, an element that is only used once, rarely modified, that might not deserve its own semantic class. On the opposite side, a button often comes in several sizes and styles and would work well with a <code>.button</code> class with a neutral design and a few utility first calsses to add theming.</p>
<p>Since utility first classes are pre-generated and immutable by nature, a developer without access to the CSS file can still produce styled pages or components. but can't add CSS bloat to the project.</p>
<p>Classes are determined programmatically inside a JavaScript config file and created when compiled. Templates and components are scanned and unused classes are removed from the final CSS file, therefor shipping a smaller file.</p>
<p>This approach can actually work with both traditional template files or component based projects, which explains why Tailwind has been getting more popular this past years.</p>
<p>And <em>of course</em> it's a controversial approach. Not everyone that already knows CSS is ready to learn a CSS API to get a design done. Doing Tailwind when design tokens like colors, fonts or sizes are well defined is easy, but going with the flow means either using the default config file (nice for prototyping) or going back and forth between the HTML and the config file to add design tokens. As Tailwind uses NPM and several other tools such as PostCSS and PurgeCSS, it also means more configuration, more maintenance and a brittle configuration.</p>
<p>In order to <em>fix</em> the naming, cascade and global <em>problems</em> of CSS, Tailwind choose to displace the organizational complexity of CSS inside configuration files and APIs. It's a way of thinking that is very different from traditionnal CSS development.</p>
<p>But what if trying to <em>fix</em> the cascade with more classes, more utilities was actually a dead end?</p>
<h2 id="cube-css" >Cube CSS<a href="#cube-css" aria-label="Cube CSS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The <em>Composition, Utility, Block, Exception</em> or <a href="https://cube.fyi/">CUBE CSS</a> methodology was created in 2019 by Andy Bell. It's a different approach than the previous methodologies as it's trying to see CSS more on a macro level than a micro level.</p>
<p>Most importantly, it tries to reunite with the cascade instead of trying to make it disappear. Overall the goal is to write CSS that makes the right choices by itself instead of micro-coding every aspect of it. This is called <a href="https://www.zeldman.com/2018/05/02/transcript-intrinsic-web-design-with-jen-simmons-the-big-web-show/">intrisic webdesign</a>, a term invented by Jen Simmons in 2018.</p>
<p>If you remember correctly at the start of the article we talked about how OOCSS tried to part ways with the parent class and its HTML child elements, as moving them could break CSS. More classes were added in a top to bottom approach to organize the code and make CSS detached from HTML. But an approach like BEM makes you think about objects in <em>isolation</em>.</p>
<p>The multiplication of viewports and contexts in which CSS has to work leave developers with two choices: either going more deep inside the objects to micro-manage things like responsive design, or take a step back to try to establish a set of rules and trust the browser into making the right choice. The latest actually already exist: with things like <code>flexbox</code>, the developer establishes a set of behaviors and let the browser decide.</p>
<p>CUBE CSS tries to take this approach to a new level by making traditionnal OOCSS or BEM the last step in the development of an interface.</p>
<p>Here are the steps and details about them:</p>
<dl><dt>Composition</dt><dd>Composition classes are used to create layouts, flow and consistent rhythm to any parent of elements. They set behavior rules only and are design agnostic.</dd><dt>Utility</dt><dd>A set of utility classes that do a single thing well. They are used to apply single or near single properties. They are also used to declare design tokens like colors or sizes. Their goal is the same as the utility classes used with BEM to avoid creating elements, but they come first.</dd><dt>Blocks</dt><dd>The classic block approach inherited from OOCSS and BEM. Those classes should only add the missing CSS rules that Composition and Utility classes did not applied. It can be done with BEM, with single classes or even using HTML selectors.</dd><dt>Exception</dt><dd>A modification of existing classes to change the rules set inside Blocks. CUBE CSS uses data attributes for its exceptions. Since exceptions are events often triggered by JavaScript, it's simplier to change the data-attribute and having the CSS react immediately than inserting a class. Also it avoids creating a specific class for the exception.</dd></dl>
<p>Let's look at an example of a composition class:</p>
<pre><code>.flow > * + * {
margin-top: 10px;
}
</code></pre>
<p>This <code>.flow</code> class has a single purpose. It detects <em>any</em> child element right under the parent and add a top margin of 10px only between two elements.</p>
<p>A more traditionnal OOCSS with BEM approach would be:</p>
<pre><code>.flow {
\...\
}
.flow__item {
margin-top:10px;
}
.flow__item:first-child() {
margin-top:0;
}
</code></pre>
<p>But those two approaches are not exclusive, <strong>because of the cascade</strong>. It's perfectly possible to manage the flow outside of the blocks or components while adding customization to them, thus the <em>Block</em> of CUBE CSS.</p>
<p>As to how organize the code, Andy Bell suggest this order:</p>
<ol><li>Config files</li>
<li>Design tokens classes</li>
<li>Resets</li>
<li>Global styles for HTML elements</li>
<li>Utility classes for Composition and Utility</li>
<li>Block classes</li></ol>
<p>This organization is also good for specificity. The more specific and nested code is located inside the Block classes, that are served at the end of the file. It will avoid creating repaints.</p>
<p>Andy Bell also suggests <a href="https://cube.fyi/grouping/">regrouping classes in HTML</a> using separators that the browser ignores like <code>[</code> or <code>|</code>.</p>
<pre><code>// Using [ ]
<span><</span>div
class="[ card ] [ section box ] [ bg-base color-primary ]"
data-state="reversed">
<span><</span>/div>
// Using |
<span><</span>div
class="card | section box | bg-base color-primary"
data-state="reversed">
<span><</span>/div>
</code></pre>
<p>The order he designed follows this pattern:</p>
<ol><li>The elements’s primary block class (here it's <code>card</code>)</li>
<li>Any subsequent block classes (<code>section</code> and <code>box</code>)</li>
<li>Standard utility classes (<code>bg-base</code>)</li>
<li>Design token utility classes (<code>color-primary</code>)</li></ol>
<p>This way it's easier to know how the code is organized.</p>
<h2 id="conclusion" >Conclusion<a href="#conclusion" aria-label="Conclusion permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>That's all!</p>
<p>This short history wasn't short in the end. I hope you found it useful. Feel free to contact me if you find any error or mistake or simply want to discuss this topic.</p>
Basic forms styling2022-04-17T00:23:30+02:00basic-forms-styling<h1 id="basic-forms-styling-in-50-lines-of-css" >Basic forms styling in 50 lines of CSS<a href="#basic-forms-styling-in-50-lines-of-css" aria-label="Basic forms styling in 50 lines of CSS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Styling forms can be cumbersome and can take a lot of time. Of course each person will have its preferences about how it should look and how it should behave. But what if we could have a common base in a few lines of code? One that would allow use to make forms usable even without design? This is what this page is about.</p>
<p>Please note: the code excerpts and visual demos in this page may have different code than what is written.</p>
<h2 id="basics-of-forms" >Basics of forms<a href="#basics-of-forms" aria-label="Basics of forms permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>I've detailed in my <a href="doing-forms-correctly.html">doing forms</a> HTML page what elements are required when doing forms. If you haven't I suggest you read it before pursuing.</p>
<p>To put it quickly:</p>
<ol><li>Everything must be inside a <code><span><</span>form></code></li>
<li>You can group your inputs in <code><span><</span>fieldset></code> and name those groups with <code><span><</span>legend></code></li>
<li>Each input must have a <code><span><</span>label></code> referencing its <code>input</code> with an <code>id</code></li>
<li>Error or information texts for each input can be placed where you want, but must have an ID and be referenced with the <code>aria-describedby</code> attribute.</li>
<li>If an input is invalid, the input must have an <code>aria-invalid</code> attribute.</li>
<li>Validate forms by using a <code><span><</span>button></code>, even if you use JavaScript validation.</li></ol>
<p>So a correct form code should look like this. I position the information text below the label, and the error message below the input as it provides a good user experience for most people.</p>
<pre><code><span><</span>form>
<span><</span>fieldset>
<span><</span>legend>My group<span><</span>/legend>
<span><</span>label for="input1">Text label<span><</span>/label>
<span><</span>span id="input1desc">Description text<span><</span>/span>
<span><</span>input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span><</span>span id="input1err">Error text<span><</span>/span>
<span><</span>label for="input2">Text label<span><</span>/label>
<span><</span>span id="input2desc">Description text<span><</span>/span>
<span><</span>input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span><</span>span id="input2err">Error text<span><</span>/span>
<span><</span>/fieldset>
<span><</span>button>Validate form<span><</span>/button>
<span><</span>/form>
</code></pre>
<p>And it should visually look like this without any styling:</p>
<div class="form-demo" aria-label="This is a demo only for visual purposes. The other ones in this page are hidden.">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>And the result will be:</p>
<div class="form-demo form-demo-block form-demo-spacing form-demo-reduced form-demo-text form-demo-err form-demo-err-block" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input data-size="30" id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input data-size="10" id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><h2 id="the-code" >The code<a href="#the-code" aria-label="The code permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Below is the full code for styling forms the lazy way while respecting the markup specified above. See below for a full explanation of what does what.</p>
<pre><code>form * {
display: block;
}
form > * + *,
fieldset > * + * {
margin-top: 1em;
}
label ~ span,
label ~ input,
label ~ select {
margin-top: 0.25em;
}
label ~ span {
color: #555;
font-style: italic;
}
input + span,
select + span {
color: red;
display: none;
}
[aria-invalid] + span {
display: block;
}
[data-size] {
width: 100%;
}
[data-size="30"] {
max-width: 30ch;
}
[data-size="10"] {
max-width: 10ch;
}
[type="checkbox"],
[type="radio"],
[type="checkbox"] ~ label,
[type="radio"] ~ label {
display: inline;
}
button,
[type="button"],
[type="submit"],
[type="reset"] {
all: unset;
font-size: 1em;
border: 1px solid currentColor;
padding: 10px;
}
</code></pre>
<h3 id="code-explanation" >Code explanation<a href="#code-explanation" aria-label="Code explanation permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>The first problem to fix is the vertical flow. You want each combination of label, input, information text and error message to be visually distinct from each others. To do this most people group everything into a <code><span><</span>div></code> but you can actually do it in a leaner way by using styling from the parent.</p>
<p>First we transform all children elements of the form into block elements so they stack upon each other. It has been studied that stacking form elements provides a better user experience. It also makes less work for us.</p>
<pre><code>form * {
display: block;
}
</code></pre>
<div class="form-demo form-demo-block" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>Next we need to give spacings to our form elements and more importantly, we want to give them the same spacing independently of what they are or how they are organized. To do this, we use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator">adjacent sibling combinator</a> to detect if any element (<code>*</code>) as any adjacent sibling an if it has one, we add a margin top (you may have heard about this as the <a href="https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/">lobotomized owl</a> technique).</p>
<pre><code>form > * + *,
fieldset > * + * {
margin-top: 1em;
}
</code></pre>
<div class="form-demo form-demo-block form-demo-spacing" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>Now we want to group some elements together by reducing the margins of some of our elements appearing after the <code>label</code>. But there's a catch: since we can have several combinations of elements (label then input, label then text then input, etc...) and we don't want to write specific combinations, we need a new combinator.</p>
<p>So this time we use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator">general sibling combinator</a> to detect any <code>span, </code>input<code> or </code>select<code> than comes after a </code>label` inside the current parent. In the code below, if there's a succession of those two elements, then the second one has a reduced margin top.</p>
<pre><code>label ~ span,
label ~ input,
label ~ select {
margin-top: 0.25em;
}
</code></pre>
<div class="form-demo form-demo-block form-demo-spacing form-demo-reduced" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>We don't want users to struggle identifying which text is the label and which text is informative as they currently have the same style and color. So we stylize the <code>span</code> element adjacent to the <code>label</code>.</p>
<pre><code>label ~ span {
color: #555;
font-style: italic;
}
</code></pre>
<div class="form-demo form-demo-block form-demo-spacing form-demo-reduced form-demo-text" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>We want to do the same for the error message. But we also want to hide it by default and only make it appear when there's an error. So for now, it's gone.</p>
<pre><code>input + span,
select + span {
color: red;
display: none;
}
</code></pre>
<div class="form-demo form-demo-block form-demo-spacing form-demo-reduced form-demo-text form-demo-err" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>When a form has an incorrect value, it's standard practice to add the <code>aria-invalid</code> attribute to the <code>input</code> or <code>select</code> that triggered it. Since we know this attribute is going to appear, we can then trigger the display of the error message using the adjacent sibling selector again.</p>
<pre><code>[aria-invalid] + span {
display: block;
}
</code></pre>
<div class="form-demo form-demo-block form-demo-spacing form-demo-reduced form-demo-text form-demo-err form-demo-err-block" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>Right now all inputs have the same default size. We want to be able to change it according to our needs. Instead of using pixels, we can use the <code>ch</code> unit, that stands for character. <code>1ch</code> means one time the larger of <code>0</code> in the current font.</p>
<p>We can use data attributes to create alternate versions.</p>
<pre><code>[data-size] {
width: 100%;
}
[data-size="30"] {
max-width: 30ch;
}
[data-size="10"] {
max-width: 10ch;
}
</code></pre>
<div class="form-demo form-demo-block form-demo-spacing form-demo-reduced form-demo-text form-demo-err form-demo-err-block" aria-hidden="true">
<form>
<fieldset>
<legend>My group</legend>
<label for="input1">Text label</label>
<span id="input1desc">Description text</span>
<input data-size="30" id="input1" type="text" aria-describedby="input1desc input1err" aria-invalid>
<span id="input1err">Error text</span>
<label for="input2">Text label</label>
<span id="input2desc">Description text</span>
<input data-size="10" id="input2" type="text" aria-describedby="input2desc input2err" aria-invalid>
<span id="input2err">Error text</span>
</fieldset>
<button>Validate form</button>
</form>
</div><p>Now comes the problem of checkbox and radio inputs. They usually come first with their label following. So we need to <em>de-stack</em> them by turning them into inline elements.</p>
<p>We could have used the <code>:not()</code> pseudo-class in our first code block above to exclude the checkbox and radio inputs from the <code>display:block;</code> rule. But doing so increases specificity and makes the code less readable, so it's better to let the cascade do its own thing.</p>
<pre><code><span><</span>form>
<span><</span>fieldset>
<span><</span>legend>My checkbox group<span><</span>/legend>
<span><</span>input id="checkbox1" type="checkbox">
<span><</span>label for="checkbox1">My input<span><</span>/label>
<span><</span>input id="checkbox2" type="checkbox">
<span><</span>label for="checkbox2">My input<span><</span>/label>
<span><</span>/fieldset>
<span><</span>button>Validate form<span><</span>/button>
<span><</span>/form>
</code></pre>
<pre><code>[type="checkbox"],
[type="radio"],
[type="checkbox"] ~ label,
[type="radio"] ~ label {
display: inline;
}
</code></pre>
<div class="form-demo form-demo-block form-demo-spacing form-demo-reduced form-demo-text form-demo-err form-demo-err-block form-demo-checkbox" aria-hidden="true">
<form>
<fieldset>
<legend>My checkbox group</legend>
<input id="checkbox1" type="checkbox">
<label for="checkbox1">My input</label>
<input id="checkbox2" type="checkbox">
<label for="checkbox2">My input</label>
</fieldset>
<button>Validate form</button>
</form>
</div><p>Finally, when you are styling your buttons, don't forget to also style the special input types that can be used as buttons.</p>
<pre><code><span><</span>input type="button" value="Input Button">
<span><</span>input type="submit" value="Input Submit">
<span><</span>button type="submit" >Submit<span><</span>/button>
<span><</span>input type="reset" value="Input Reset">
<span><</span>button type="reset">Reset<span><</span>/button>
<span><</span>button disabled="">Cancel<span><</span>/button>
</code></pre>
<pre><code>button,
[type="button"],
[type="submit"],
[type="reset"] {
all: unset;
font-size: 1em;
border: 1px solid currentColor;
padding: 10px;
}
</code></pre>
<div class="form demo form-demo-block form-demo-button" aria-hidden="true">
<button type="button" >Button</button>
<input type="button" value="Input Button">
<input type="submit" value="Input Submit">
<button type="submit" >Submit</button>
<input type="reset" value="Input Reset">
<button type="reset">Reset</button>
<button disabled="">Cancel</button>
</div>JavaScript tips2022-07-03T21:57:23+02:00javascript-tips<h1 id="java-script-tips" >JavaScript tips<a href="#java-script-tips" aria-label="JavaScript tips permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>JavaScript and its most famous frameworks React, Vue and Angular are everywhere in web development. Their use creates non-stop complexity and normalized technical stacks, often for misplaced reasons. Understanding what it implies to developers, as well as making informed choices about JavaScript is now primordial.</p>
List of JavaScript frameworks2022-09-26T16:14:09+02:00list-of-javascript-frameworks<h1 id="a-list-of-java-script-frameworks" >A list of JavaScript frameworks<a href="#a-list-of-java-script-frameworks" aria-label="A list of JavaScript frameworks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>The way the web was initially envisioned was through separation of concerns: HTML is for structure, CSS for styles and JavaScript for interactivity. For a long time the server was sending HTML to the browser/client through templates populated with data from the server. Then the page downloaded CSS and JavaScript. Those two then "attached" themselves to the structure and acted on it through HTML attributes, and could then change its looks, call for more data, create interactivity. Each time a visitor clicked a link, this whole process would start again, downloading the new page and its dependencies and rendering it in the browser.</p>
<details><summary>Last updates and information about this list</summary> This list was created by <a href="https://twitter.com/bastianallgeier" aria-label="Link to Bastian twitter account">Bastian</a> from the Kirby Team on the Kirby <a href="https://discord.gg/r5AjvspYmY">Discord</a>. For conservation purposes, I reproduced it here. It was then consolidated using Tom Mac Wright article about <a href="https://macwright.com/2020/10/28/if-not-spas.html">Single Page Apps</a> replacements. Last updated September 25 2022. </details><h2 id="js-based-page-transitions" >JS-based page transitions<a href="#js-based-page-transitions" aria-label="JS-based page transitions permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Using the history API and Ajax requests to fetch HTML of the next page and replace the current body with it. Basically emulating the look and feel of single page applications in multi-pages applications.</p>
<ul><li><a href="https://github.com/MoOx/pjax">PJAX</a></li>
<li><a href="https://barba.js.org/">Barba</a></li>
<li><a href="https://swup.js.org/">Swup</a></li>
<li><a href="https://highway.js.org/">Highway</a></li></ul>
<h2 id="java-script-enhanced-html" >JavaScript enhanced HTML<a href="#java-script-enhanced-html" aria-label="JavaScript enhanced HTML permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Event handling/reactivity/dom manipulation via HTML attributes. Development happens client side, without writing JavaScript.</p>
<ul><li><a href="https://github.com/alpinejs/alpine/">Alpine</a></li>
<li><a href="https://stimulusjs.org/">Stimulus JS</a></li>
<li><a href="https://htmx.org/">HTMX</a></li>
<li><a href="https://github.com/vuejs/petite-vue">Petite vue</a></li></ul>
<h2 id="inline-replacement-of-components" >Inline replacement of components<a href="#inline-replacement-of-components" aria-label="Inline replacement of components permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Static HTML gets updated via web sockets or Ajax calls on the fly with small snippets rendered on the server. Development happens server side, without writing JavaScript. Most of the time a plugin or feature of an existing server side framework.</p>
<ul><li><a href="https://laravel-livewire.com/">Livewire</a> (PHP)</li>
<li><a href="https://docs.stimulusreflex.com/">Stimulus Reflex</a> (Ruby)</li>
<li><a href="https://www.phoenixframework.org/blog/build-a-real-time-twitter-clone-in-15-minutes-with-live-view-and-phoenix-1-5">Phoenix Liveview</a> (Elixir)</li>
<li><a href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">Blazor</a> (C#)</li>
<li><a href="https://www.django-unicorn.com/">Unicorn</a> (Python)</li></ul>
<h2 id="single-page-application-spa" >Single Page Application (SPA)<a href="#single-page-application-spa" aria-label="Single Page Application (SPA) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A client-side, JavaScript component-based (mixing HTML, CSS and JavaScript in a single file) framework or library gets data through API calls (REST or GraphQL) and generates HTML blocks on the fly directly in the browser. Long initial load time, then fast page transitions, but a lot of features normally managed by the browser or the server needs to be re-implemented.</p>
<p>The framework or library is loaded alongside the SPA code:</p>
<ul><li><a href="https://vuejs.org/">Vue</a></li>
<li><a href="https://fr.reactjs.org/">React</a></li>
<li><a href="https://preactjs.com/">Preact</a></li>
<li><a href="https://angularjs.org/">Angular</a></li></ul>
<p>The framework or library compiles to the SPA and disappears:</p>
<ul><li><a href="https://svelte.dev/">Svelte</a></li>
<li><a href="https://www.solidjs.com/">Solid</a></li>
<li><a href="https://angularjs.org/">Angular</a> with <a href="https://angular.io/guide/aot-compiler">AOT</a></li></ul>
<h2 id="meta-frontend-frameworks" >"Meta" frontend frameworks<a href="#meta-frontend-frameworks" aria-label=""Meta" frontend frameworks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A single page application library gets extended to render or generate static "dry" pages as HTML on the server to avoid the initial long loading time, detrimental to SEO. Often comes with opinionated choices like routing, file structure, compilation improvements.</p>
<p>After the initial page load, the single page application code is loaded and attaches itself to the whole page to make it interactive, effectively downloading and rendering the website twice ("hydration"):</p>
<ul><li><a href="https://nextjs.org/">Next</a> (React)</li>
<li><a href="https://nuxtjs.org/fr/">Nuxt</a> (Vue)</li>
<li><a href="https://kit.svelte.dev/">Sveltekit</a> (Svelte)</li></ul>
<p>After the initial page load, the single page application code is loaded and attaches itself only on certain elements that needs interactivity, partially avoiding the double download and rendering ("partial hydration", "islands architecture"):</p>
<ul><li><a href="https://astro.build/">Astro</a> (React, Vue, Svelte, Solid, etc.)</li>
<li><a href="https://github.com/solidjs/solid-start">Solid Start</a> (Solid)</li></ul>
<h2 id="non-hydration-frontend-frameworks" >Non-hydration frontend frameworks<a href="#non-hydration-frontend-frameworks" aria-label="Non-hydration frontend frameworks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A server-side component-based framework or library gets data through API calls (REST or GraphQL) and serves HTML that gets its interactivity without hydration, for example by loading the interactive code needed as an interaction happens.</p>
<ul><li><a href="https://markojs.com/">Marko</a></li>
<li><a href="https://qwik.builder.io/">Qwik</a></li></ul>
<h2 id="opinionated-full-stack-java-script-frameworks" >Opinionated full-stack JavaScript frameworks<a href="#opinionated-full-stack-java-script-frameworks" aria-label="Opinionated full-stack JavaScript frameworks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Using existing frontend and backend stacks in an opinionated way to offer a fullstack solution in full JavaScript</p>
<ul><li><a href="https://redwoodjs.com/">Redwood JS</a></li>
<li><a href="https://blitzjs.com/">Blitz JS</a></li>
<li><a href="https://remix.run/">Remix</a></li></ul>
<h2 id="server-injected-spa" >Server-injected SPA<a href="#server-injected-spa" aria-label="Server-injected SPA permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A client-side, component based application (Vue, React, etc) gets its state from pre-rendered JSON</p>
<ul><li><a href="https://inertiajs.com/">Inertia</a></li></ul>
Cross platform web app solutions2021-11-12T16:47:36+01:00cross-platform-web-app-solutions<h1 id="cross-platform-web-app-solutions" >Cross platform web app solutions<a href="#cross-platform-web-app-solutions" aria-label="Cross platform web app solutions permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>A discovery list of technical solutions to produce a desktop and/or mobile app using web technologies.</p>
<p>Apparently (all this is quite new to me) most solutions embed NodeJS inside them, making executing JavaScript the easiest part of the problem.</p>
<p>Real trouble comes when talking about the UI, since each OS has different ways of rendering UI. Several solutions exist to make the programs multiplateform.</p>
<h2 id="node-and-webkit-solutions" >Node and Webkit solutions<a href="#node-and-webkit-solutions" aria-label="Node and Webkit solutions permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Those solutions package webkot (chromium) and nodejs inside the app and make it work as a fake app on the desktop. Works well but comes with a lot of bloat and heavy ram consumption.</p>
<ul><li><a href="https://www.electronjs.org">Electron</a> is made by Github</li>
<li><a href="https://nwjs.io/">NW.js</a> is made by Intel</li></ul>
<p>Overall both are in the same family but they are <a href="https://www.electronjs.org/docs/development/electron-vs-nwjs">differences between NW.js and Electron</a>.</p>
<h2 id="node-and-existing-ui-frameworks" >Node and existing UI frameworks<a href="#node-and-existing-ui-frameworks" aria-label="Node and existing UI frameworks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Since bringing chromium makes the program very big, there are solutions to bridge between web apps and existing, lighter UI frameworks. Most of the time then, the framework is used to create a bridge between HTML/CSS and the existing frameworks components, modules or UI API.</p>
<ul><li><a href="https://docs.nodegui.org/">NodeGui</a> provides a bridge between HTML/CSS and QT.</li></ul>
<h2 id="node-and-webviews" >Node and webviews<a href="#node-and-webviews" aria-label="Node and webviews permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Since all OSes can render webview, it's possible to ask for one at the OS level by providing a bridge. The problem with this solution might be that if the OS has an outdated webview engine, all modern HTML/CSS/JS solutions might not work?</p>
<ul><li><a href="https://tauri.studio/">Tauri</a></li>
<li><a href="https://neutralino.js.org/">Neutralino</a></li>
<li><a href="https://github.com/webview/webview_deno">Deno webview</a></li></ul>
<p>Except for neutralino, most projects of this type tends to use <a href="https://github.com/webview/webview">webview</a>, a C/C++/Go library. Several bindings library for other languages already exist.</p>
<h2 id="others" >Others<a href="#others" aria-label="Others permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<ul><li><a href="https://sciter.com/">Sciter</a> is a binary that can be used to create web apps. But under the hood it's using a superset of JavaScript called <a href="https://www.codeproject.com/articles/33662/tiscript-language-a-gentle-extension-of-javascript">TIScript</a></li>
<li><a href="https://github.com/c-smile/sciter-js-sdk">Sciter JS</a> seems to be Sciter but with common JavaScript, using the <a href="https://bellard.org/quickjs/">quick JS</a> engine.</li></ul>
Freelancing notes2022-03-13T20:03:30+01:00freelancing-notes<h1 id="freelancing-notes" >Freelancing notes<a href="#freelancing-notes" aria-label="Freelancing notes permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This page is about freelance work related to web projects (design, user experience, development, counseling).</p>
<h2 id="the-types-of-freelancers" >The types of freelancers<a href="#the-types-of-freelancers" aria-label="The types of freelancers permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>There are two types of freelancers that I know about in this field:</p>
<dl><dt>Mercenaries</dt><dd>They execute the work, do it fast and for various clients. Since they are just implementing and not leading the project, their rates is lower than experts.</dd><dt>Experts</dt><dd>They lead a project and sometimes implement it at the same time. They have less clients, for a longer period and a higher rate.</dd></dl>
<p>Both types are legitimate and needed in the field. Both have pros and cons:</p>
<ul><li>Mercenaries can't catch a break and need to operate on a tight schedule, but their rate, diversified skills and type of work make it more unlikely for them to be out of missions.</li>
<li>Experts are less pressured into finding work all the time, but their expertise might not be needed all the time. They have a higher rate to compensate when they don't have any client.</li></ul>
<p>What is sure is that both types need to build a network of clients.</p>
<h2 id="build-a-network" >Build a network<a href="#build-a-network" aria-label="Build a network permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>It's always better to search for clients when you are not in need right away. One of the best ways of doing it is sending spontaneous applications to agencies you would want to work with. If they refuse your candidacy or don't answer it's not a problem, they may remember you when they have a specific need.</p>
<p>Freelancing platforms can also be a good way of finding clients but there is a lot of competition that may pull rates down. Sometimes it may be better to have no deal than a bad one.</p>
<p>It's important to have a commercial relationships with clients. Sending emails to contacts to let them know you are available and trigger word of mouth is key. Making people remember you by sending them some news (for example a happy new year card) or thanking them when they refer you to another person is probably a good idea.</p>
<h2 id="cash-management" >Cash management<a href="#cash-management" aria-label="Cash management permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>It's extremely important to have six months to one year of cash flow. And to build it, it's important to get paid in time and at a correct price. Most clients pay in the following sixty days after receiving the bill. But some can take months (agencies) to years (government or public missions) before paying. There are even cases where companies don't pay in the hope that the freelancer go bankrupt so the debt is cancelled.</p>
<p>Depending on the country, clients may want to negotiate the price (it's always the case in France where I live, way less common in the United States for example). It can be hard to maintain you value and increase it afterward so try to not lower your prices to get a deal.</p>
<p>When deciding of your daily rate, it's important to take these arguments into consideration:</p>
<ul><li>If you take 5 weeks of vacation each year it's 17 days of non-payed work.</li>
<li>If you have an accident and can't work for a long time, you need an insurance for both medical fees and a substitue wage.</li>
<li>A part of the rate needs to go to the cash flow that will help you live when there are no clients (6 months to 1 year of cash flow is necessary).</li>
<li>As a freelancer you probably don't contribute to public retirement, so you need to finance it yourself through complementary systems (life insurance, real estate)</li>
<li>Depending on the country where you are located, taxes can take a substantial amount of your rate.</li>
<li>Depending of the type of company you have, you may need to pay an accountant each year.</li></ul>
<p>Taking all these factors into consideration substantially lowers the money you earn as a freelancer. <strong>Overall, only around 50% of the price payed by the client is the real salary</strong>.</p>
<p>As a freelancer you can only count on yourself and thus you need to create your own insurances. They are some period in the year (like summer, Christmas) where freelancers are not needed and even if it frees time to find new clients, it means you have to pay your bills with your cash flow.</p>
<h2 id="pricing" >Pricing<a href="#pricing" aria-label="Pricing permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>About pricing:</p>
<ul><li>Hour rate pricing is rare.</li>
<li>Daily rates are more common.</li>
<li>Package pricing is common in the web.</li></ul>
<p>If you are a developer <strong>never do a package pricing</strong> and favor daily or monthly rates, except if you are super sure about the scope of the project and protected by the quote. In other type of works (design, user experience) package pricing is often the norm and requires to be very careful when writing quotes.</p>
<h2 id="quotes" >Quotes<a href="#quotes" aria-label="Quotes permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Good quotes are the ultimate protection for freelancers and can help building a more professional relationship with the client. Quotes should always list what is in the scope of the project and what is not in. This way you can refuse a sudden change or propose a new quote for a project change.</p>
<p>Here's a list of basic things to think about when making a quote.</p>
<h3 id="design" >Design<a href="#design" aria-label="Design permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Indicate a fixed number of initial design concepts that will be given to the client to help him decide the direction of the design.</li>
<li>List the number of pages, templates, or components that will be created once the direction is chosen.</li></ul>
<h3 id="text" >Text<a href="#text" aria-label="Text permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Be clear that you are not creating the text content for the client, nor inputting text or creating his pages into his content management system.</li>
<li>If the client wants you to do all this, add into the quote a maximum length and price for each text, the time required to input the text, and the list of pages required, and get payed.</li></ul>
<h3 id="graphics-and-photographs" >Graphics and photographs<a href="#graphics-and-photographs" aria-label="Graphics and photographs permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Be clear that the client has to provide graphic files (logos, icons for example) and the file format you are expecting. If the client doesn't want to do it by himself, list what is needed and add it to the quote as extra work.</li>
<li>Be clear that the client has to provide the photographs for the website. Propose a list of stock photograph websites where he can choose what he wants. If the client doesn't want to do it itself, prepare a separate bill with the images you will buy for the project.</li></ul>
<h3 id="development" >Development:<a href="#development" aria-label="Development: permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Detail the goal of the project and the specific parts you are working on and what is required by the client for you to do your work.</li>
<li>If the project has an intricate codebase or list of features, detail what you will work on and what you will not work on.</li>
<li>List the languages, technologies, libraries, frameworks required.</li></ul>
<h3 id="browser-testing" >Browser testing<a href="#browser-testing" aria-label="Browser testing permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Be clear that browser testing is about allowing a similar experience on all browsers, not a pixel perfect render as it's impossible.</li>
<li>List the browsers used for the tests, and which one won't be tested.</li>
<li>If the client needs to support an old browser (ex: IE11) then the development rate should be higher and it should be clear on the quote (some clients abandon this idea once they see it's more expensive).</li></ul>
<h3 id="tech-support" >Tech support<a href="#tech-support" aria-label="Tech support permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>If you don't provide website hosting be clear about it. If the client want you to open an account for hosting their project and put it online, add it to the quote. Be clear that outside installing the website, you are not the tech support for upcoming updates or problems.</li>
<li>If you do provide hosting, list what is required by the client (domain name, type of hosting, mails) and what is not.</li></ul>
<h3 id="seo" >SEO<a href="#seo" aria-label="SEO permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<ul><li>Be clear that even you can't guarantee increases in search engine rankings, even if you work in the SEO business.</li></ul>
<h2 id="contract" >Contract<a href="#contract" aria-label="Contract permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When the quote is accepted, provide a contract to the client. It's the last moment you can set rules with him about how things are going to work out.</p>
<p>Be sure the client knows that:</p>
<ul><li>The project can only progress if he is involved and that any lack of feedback required for the continuation of the project may halt it.</li>
<li>The freelancer can't be responsible for any delay due to the lack of feedback from the client.</li>
<li>He can change its mind but that an additional quote will be made.</li>
<li>If he is not satisfied he can terminate the contract but will have to pay the time already spent working on the project.</li>
<li>Any legal stuff that you think is important (liability, payment schedule, intellectual property rights, work display)</li></ul>
<h2 id="working-with-clients" >Working with clients<a href="#working-with-clients" aria-label="Working with clients permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When clients hire a freelancer they basically want a facilitator, so everything should be done to keep the client reassured.</p>
<p>To avoid problems and facilitate the work:</p>
<ul><li>Get as much scope as you can.</li>
<li>Communicate to get all the steps of the projects.</li>
<li>Find at which step of the project you have to intervene.</li>
<li>Provide a ready-made benefit.</li>
<li>If you have to work with a team, choose the people you want to work with.</li>
<li>Never put yourself in a position where you can be faulted.</li></ul>
<p>Transparency and communication are keys to a good working relationship.</p>
<ul><li>Give daily feedback and/or deliveries.</li>
<li>No need to write a novel each day, just a short notice is enough.</li>
<li>Ask the client if everything is OK on his side.</li>
<li>If you need feedback and mails are not working, make a voice call.</li>
<li>Never apologize of being communicative.</li>
<li>If you are working remotely, never apologize for working remotely.</li></ul>
<p>When something is going bad, for example budget is exploding or demands are increasing, impose your way of working by saying <em>no</em> but provide <em>options</em>. Never come with empty hands as the goal is to simplify the process and save time.</p>
<h2 id="type-of-company" >Type of company<a href="#type-of-company" aria-label="Type of company permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Each country has its own rules about freelancing. However european freelancers can have a company in Estonia with an e-residency certificate. It costs around 100 euros a month and provides services for everything like invoices and payment. You may still have to pay your residency country charges.</p>
Raspberry Pi Distros2021-11-12T16:47:36+01:00raspberry-pi-distros<h1 id="raspberry-pi-distributions" >Raspberry Pi distributions<a href="#raspberry-pi-distributions" aria-label="Raspberry Pi distributions permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Despite the hype around the fourth version of the Pi, most desktop distributions run very slowly on it and provide poor user experience. I've tried all the distros listed below and gave them ratings on these topics:</p>
<ul><li>User Experience</li>
<li>Responsiveness</li>
<li>Software support</li>
<li>Easy to install</li></ul>
<p>The ratings are:</p>
<ul><li>Perfect</li>
<li>Average</li>
<li>Poor</li>
<li>Terrible</li></ul>
<h2 id="raspbian-raspberry-pi-os" >Raspbian (Raspberry Pi OS)<a href="#raspbian-raspberry-pi-os" aria-label="Raspbian (Raspberry Pi OS) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt>User Experience</dt><dd><strong>Average</strong> It's ugly but coherent and easy to use</dd><dt>Responsiveness</dt><dd><strong>Average</strong> Most things are fast but some programs (mostly Electron apps) struggle</dd><dt>Software support</dt><dd><strong>Perfect</strong> It's an Ubuntu base and the official OS</dd><dt>Easy to install</dt><dd><strong>Perfect</strong> Plug and play and follow the guide</dd></dl>
<p>Raspbian excels in nothing but is not terrible in anything. It's too bad it struggles with Electron apps. Supports hardware acceleration.</p>
<h2 id="dietpi" >Dietpi<a href="#dietpi" aria-label="Dietpi permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt>User Experience</dt><dd><strong>Poor</strong> Dietpi proposes ready-made basic desktops (Mate, XFCE, LXQTm, LXDE) that are ugly and sometimes does not work (sound cursor in XFCE).</dd><dt>Responsiveness</dt><dd><strong>Perfect</strong> Everything is fast or fast enough, even Electron Apps are usable</dd><dt>Software support</dt><dd><strong>Perfect</strong> It's based on Raspbian and comes with it's own list of ready-made software</dd><dt>Easy to install</dt><dd><strong>Poor</strong> Small iso but very long install with terminal based menus, takes a lot of time and not everything is clear</dd></dl>
<p>Dietpi is probably the best in performance, but only for people with some skills at setting up their own environnement. Supports hardware acceleration.</p>
<h2 id="manjaro" >Manjaro<a href="#manjaro" aria-label="Manjaro permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt>User Experience</dt><dd><strong>Perfect</strong> It's beautiful, coherent and easy to use</dd><dt>Responsiveness</dt><dd><strong>Poor</strong> It's still usable but worse than Raspbian, no hardware acceleration support for video</dd><dt>Software support</dt><dd><strong>Average</strong> Based on Arch Linux, most things are available but most configuration tweaks are for Raspbian/Ubuntu</dd><dt>Easy to install</dt><dd><strong>Average</strong> There's a few terminal screens but it's quick and works fine</dd></dl>
<p>If Manjaro was a bit snappier and did not lack some performance tweaks available to Ubuntu based distros (like hardware acceleration) it would be my default distribution.</p>
<h2 id="ubuntu" >Ubuntu<a href="#ubuntu" aria-label="Ubuntu permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<dl><dt>User Experience</dt><dd><strong>Average</strong> The classic gnome Ubuntu</dd><dt>Responsiveness</dt><dd><strong>Terrible</strong> It's so slow for everything it's almost unusable</dd><dt>Software support</dt><dd><strong>Perfect</strong> It's Ubuntu so everything is there</dd><dt>Easy to install</dt><dd><strong>Perfect</strong> The classic Ubuntu install experience, everything is clear</dd></dl>
<p>Ubuntu is so slow I could not be bothered to use it for anything. Also it's strange because hardware acceleration is supported but I could not make it work inside chrome for video decoding.</p>
ffmpeg commands2021-11-12T16:47:36+01:00ffmpeg-commands<h1 id="ffmpeg-commands" >ffmpeg commands<a href="#ffmpeg-commands" aria-label="ffmpeg commands permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This page contains ffmpeg commands that I find useful. ffmpeg is super powerful and can sometimes be enough for quick media manipulations. For more commands check the <a href="https://ffmpeg.org/ffmpeg.html">ffmpeg documentation page</a>.</p>
<h2 id="cut-a-part-of-a-video" >Cut a part of a video :<a href="#cut-a-part-of-a-video" aria-label="Cut a part of a video : permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<code>ffmpeg -i input.mp4 -ss 00:00 -to 00:10 -c:v libx264 -crf 30 output.mp4</code>
<ul><li>use <code>ss</code> to select the starting and ending time</li>
<li>to avoid re-enconding the video, use stream copy via <code>-c</code>, define the video with <code>v</code> and the codec (<code>libx264</code> in the example)</li>
<li>use <code>-crf</code> to define quality (lesser is better)</li></ul>
<h2 id="concatenate-videos" >Concatenate videos<a href="#concatenate-videos" aria-label="Concatenate videos permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<code>ffmpeg -f concat -i input.txt -c copy output.mp4</code><p>Create a text file with the files you want to concatenate into a single video or audio file.</p>
<pre><code>file 'video1.mp4'
file 'video2.mp4'
file 'video4.mp4'
</code></pre>
<ul><li>Use <code>-c copy</code> to avoid re-enconding the videos (they need to have the same base codec)</li></ul>
<h2 id="add-audio-to-video" >Add audio to video<a href="#add-audio-to-video" aria-label="Add audio to video permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<code>ffmpeg -i input.mp4 -i input.mp3 -c copy -map 0:v:0 -map 1:a:0 output.mp4</code><ul><li>the <code>-c copy</code> avoid re-encoding the streams</li>
<li>the first <code>-map</code> defines where to start the audio in the video file</li>
<li>the second <code>-map</code> defines where to start the audio in the audio file</li></ul>
<h2 id="encode-audio-file-to-mp3" >Encode audio file to mp3<a href="#encode-audio-file-to-mp3" aria-label="Encode audio file to mp3 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<code>ffmpeg -i input.opus -ar 44100 -ac 2 -b:a 128k output.mp3</code><ul><li><code>-ar</code> defines the frequency (here it's <code>44100</code>)</li>
<li><code>-ac</code> sets the number of audio channels (here <code>2</code>)</li>
<li><code>-b:a</code> defines the bitrate of the file (here <code>128k</code>)</li></ul>
<h2 id="add-metatags-to-audio-file" >Add metatags to audio file<a href="#add-metatags-to-audio-file" aria-label="Add metatags to audio file permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<code>ffmpeg -i input.mp3 -i img.jpg -c copy -map 0 -map 1 -metadata title="title" output.mp3</code><ul><li><code>-i img.jpg</code> adds an image to the audio file</li>
<li><code>-c copy</code> to avoid re-encoding the image file</li>
<li><code>-map 0 -map 1</code> position the image</li>
<li><code>-metadata title="title"</code> defines the title of the file in the metadatas</li></ul>
Understanding memory bits bytes addresses and hexadecimal2023-03-03T17:22:26+01:00understanding-memory-bits-bytes-addresses-and-hexadecimal<h1 id="understanding-memory-bits-bytes-addresses-and-hexadecimal" >Understanding memory, bits, bytes, addresses and hexadecimal<a href="#understanding-memory-bits-bytes-addresses-and-hexadecimal" aria-label="Understanding memory, bits, bytes, addresses and hexadecimal permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Memory can be understood as a space that is composed of <strong>bits</strong>. Each time something happens in a program you write or get something out of memory by manipulating bits.</p>
<figure><picture><source type="image/webp" srcset="img/memory01-400.webp 660w, img/memory01-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A visualization of the bits that compose the memory of the fake game console Pico8." srcset="img/memory01-400.jpg 660w, img/memory01-700.jpg 1440w" src="img/memory01.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A visualization of the bits that compose the memory of the fake game console Pico8. | <small><a href="img/memory01.jpg">Full size</a></small></figcaption> </figure><p>The hardware then takes what is in memory and communicates with the machine. In most hardwares, the memory is split between different things like drawing pixels, playing sounds, changing the state of the application.</p>
<figure><picture><source type="image/webp" srcset="img/memory02-400.webp 660w, img/memory02-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="In different colors the different parts of the memory of Pico8 associated with different tasks like screen and sound." srcset="img/memory02-400.jpg 660w, img/memory02-700.jpg 1440w" src="img/memory02.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>In different colors the different parts of the memory of Pico8 associated with different tasks like screen and sound. | <small><a href="img/memory02.jpg">Full size</a></small></figcaption> </figure><p>Since manipulating <strong>bits</strong> is complicated, bits are combined together into <strong>bytes</strong>. And to ease their manipulation, bytes are identified by a number called an <strong>address</strong>.</p>
<figure><picture><source type="image/webp" srcset="img/memory03-400.webp 660w, img/memory03-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A byte made of 8 bits in orange in Pico8 as well as its address at the bottom left of the image." srcset="img/memory03-400.jpg 660w, img/memory03-700.jpg 1440w" src="img/memory03.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A byte made of 8 bits in orange in Pico8 as well as its address at the bottom left of the image. | <small><a href="img/memory03.jpg">Full size</a></small></figcaption> </figure><h2 id="what-is-binary" >What is binary<a href="#what-is-binary" aria-label="What is binary permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When you write numbers, you use the decimal system which is made from 10 numerals:</p>
<pre><code>0
1
2
3
4
5
6
7
8
9
</code></pre>
<p>But what happens when we don't have a numeral for the next number? We move the first digit and the first digit takes a new meaning.</p>
<pre><code> 0
1
2
3
.
8
9
10
11
12
</code></pre>
<p>But computers only understand <code>0</code> and <code>1</code>, so how do you <em>translate</em> binary into numbers?</p>
<p>To write other numerals from <code>2</code> to <code>9</code>, you have to compose those numerals with a set of <code>0</code> and <code>1</code>. For example, in binary, to write <code>2</code>, you write <code>10</code>:</p>
<pre><code>Numeral - Binary
0 - 0
1 - 1
2 - 10
3 - 11
</code></pre>
<p>But we are now out of digits to create <code>3</code>. So just like with numerals, we add a new digit:</p>
<pre><code>Numeral - Binary
0 - 0
1 - 1
2 - 10
3 - 11
4 - 100
5 - 101
6 - 110
7 - 111
</code></pre>
<p>And it continues for <code>8</code>:</p>
<pre><code>Numeral - Binary
0 - 0
1 - 1
2 - 10
3 - 11
4 - 100
5 - 101
6 - 110
7 - 111
8 - 1000
</code></pre>
<p>The next set of numerals will be at <code>16</code> (<code>8 + 8</code>) and then at 32 (<code>16 + 16</code>) and so on.</p>
<p>That means that in a <strong>byte</strong>, which is made of <strong>8 bits</strong> who are themselves <strong>binaries</strong> (0 and 1), the maximum number you can write is <code>255</code>, composed by writing <code>11111111</code>.</p>
<p>Therefore, a byte contains only 256 numerals.</p>
<figure><picture><source type="image/webp" srcset="img/memory05-400.webp 660w, img/memory05-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A visualization of the bytes of Pico8 with the second column showing the calculated number generated by the bits of the last column." srcset="img/memory05-400.jpg 660w, img/memory05-700.jpg 1440w" src="img/memory05.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A visualization of the bytes of Pico8 with the second column showing the calculated number generated by the bits of the last column. | <small><a href="img/memory05.jpg">Full size</a></small></figcaption> </figure><h2 id="hexadecimal" >Hexadecimal<a href="#hexadecimal" aria-label="Hexadecimal permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Hexadecimal is another type of numerals used in programming. Instead of going from <code>0</code> to <code>9</code>, hexadecimal goes from <code>0</code> to <code>15</code> without adding a <code>1</code> numeral to count over <code>9</code>.</p>
<p>Instead, hexadecimal uses letters, from <code>A</code> to <code>F</code> as new digits.</p>
<pre><code>Numeral - Binary - Hexadecimal
0 - 0 - 1
1 - 1 - 2
2 - 10 - 3
3 - 11 - 3
4 - 100 - 4
5 - 101 - 5
6 - 110 - 6
7 - 111 - 7
8 - 1000 - 8
9 - - 9
10 - - A
11 - - B
12 - - C
13 - - D
14 - - E
15 - - F
</code></pre>
<p>When hexadecimal goes beyond 15, it uses binaries again.</p>
<pre><code>Numeral - Binary - Hexadecimal
0 - 0 - 1
1 - 1 - 2
2 - 10 - 3
3 - 11 - 3
4 - 100 - 4
5 - 101 - 5
6 - 110 - 6
7 - 111 - 7
8 - 1000 - 8
9 - - 9
10 - - A
11 - - B
12 - - C
13 - - D
14 - - E
15 - - F
16 - - 10
17 - - 11
18 - - 12
</code></pre>
<p>The idea between hexadecimal is to be able to translate big numbers using only two digits. For example, <code>FF</code> in hexadecimal means <code>255</code> digits.</p>
<figure><picture><source type="image/webp" srcset="img/memory07-400.webp 660w, img/memory07-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="On the third column the FF hexadecimal can be seen." srcset="img/memory07-400.jpg 660w, img/memory07-700.jpg 1440w" src="img/memory07.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>On the third column the FF hexadecimal can be seen. | <small><a href="img/memory07.jpg">Full size</a></small></figcaption> </figure><p>Addresses can also be written in hexadecimal.</p>
<h2 id="credits" >Credits<a href="#credits" aria-label="Credits permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This page is a partial transcript of this <a href="https://www.youtube.com/watch?v=e3nUPbK3Jrw">video</a> by Lazy Devs Academy. The captures are also made from the video.</p>
Sublime Text Configuration2021-11-20T23:07:58+01:00sublime-text-configuration<h1 id="sublime-text-configuration" >Sublime Text Configuration<a href="#sublime-text-configuration" aria-label="Sublime Text Configuration permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Sublime Text is a <a href="https://www.sublimetext.com/">commercial source code editor</a>. It natively supports many programming languages and markup languages. Users can expand its functionality with plugins, typically community-built and maintained under free-software licenses. To facilitate plugins, Sublime Text features a Python API.</p>
<p>Sublime Text had a lot of success with web developpers from around 2010 to 2016-2017. In 2015 Microsoft released Visual Studio Code, which quickly replaced Sublime Text as the editor of choice for the web developer crowd (including myself) due to its mix of text editor and IDE features.</p>
<p>Still after years of Visual Studio Code I recently came back to Sublime Text with the release of the fourth version in 2021. The main reasons are speed, quality of text rendering, aesthetics and workflow.</p>
<h2 id="my-preferences" >My preferences<a href="#my-preferences" aria-label="My preferences permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<pre><code>{
"find_selected_text": true,
"highlight_line": true,
"hot_exit": false,
"mini_diff": true,
"show_git_status": true,
"show_definitions": false,
"trim_trailing_white_space_on_save": "all",
"trim_only_modified_white_space": false,
"word_wrap": true,
"theme": "Adaptive.sublime-theme",
"ignored_packages": [
"Markdown",
"Vintage",
],
"color_scheme": "Mariana.sublime-color-scheme",
"font_face": "Ibm Plex Mono",
"font_size": 10.0,
"line_padding_bottom": 1,
"line_padding_top": 1,
"auto_hide_menu": true,
"dark_color_scheme": "Mariana.sublime-color-scheme",
"light_color_scheme": "Celeste.sublime-color-scheme",
}
</code></pre>
<h2 id="my-plugins" >My plugins<a href="#my-plugins" aria-label="My plugins permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Sublime Text uses a plugin named <em>Package Control</em> to install other plugins.</p>
<ol><li>Open the Tools menu</li>
<li>Select Install Package Control…</li></ol>
<p>Once it's install, use <code>ctrl + shift + p</code> and search for <code>Package Control: Install Package</code>. The packages I use:</p>
<dl><dt><a href="https://github.com/sh4nks/sublime-text-plugin-autoclose">Auto Close HTML Tags</a></dt><dd>Closes HTML tags after a <code>></code>.</dd><dt><a href="https://github.com/liamcain/AutoFileName">AutoFileName</a></dt><dd>Autocompletes filenames.</dd><dt><a href="https://facelessuser.github.io/BracketHighlighter/">BracketHilighter</a></dt><dd>Hilights the corresponding brackets both in text and in the vertical line numbers column.</dd><dt><a href="https://github.com/leonid-shevtsov/ClickableUrls_SublimeText">Clickable URL</a></dt><dd>Makes URLs in files clickable.</dd><dt><a href="https://packagecontrol.io/packages/Color%20Highlighter">Color Highlighter</a></dt><dd>Shows colors inside the editor.</dd><dt><a href="https://bitbucket.org/dougty/sublime-compare-side-by-side/src/master/">Compare Side by Side</a></dt><dd>Allows to compare two files and automatically find the differences</dd><dt><a href="https://github.com/spadgos/sublime-jsdocs">DocBlockr</a></dt><dd>Helps with writing documentation and code comments</dd><dt><a href="https://emmet.io/">Emmet</a></dt><dd>Helps creating snippets of HTML</dd><dt><a href="https://github.com/jisaacks/GitGutter">GitGutter</a></dt><dd>Show information about the current Git Repository and last modifications</dd><dt><a href="https://github.com/victorporof/Sublime-HTMLPrettify">HTML/CSS/JS Prettify</a></dt><dd>Code formater for HTML, CSS, JS and a few JS frameworks</dd><dt><a href="https://sublimetext-markdown.github.io/MarkdownEditing/">Markdown Editing</a></dt><dd>Syntax for markdown</dd><dt><a href="https://github.com/tssajo/Minify">Minify</a></dt><dd>Minifies CSS, HTML, JavaScript, JSON or SVG files</dd><dt><a href="https://packagecontrol.io/packages/Sass">Sass</a></dt><dd>Sass and SCSS support</dd><dt><a href="https://github.com/benweier/Schemr">Schemr</a></dt><dd>Changes color and themes quickly</dd><dt><a href="https://github.com/titoBouzout/SideBarEnhancements">SideBarEnhancements</a></dt><dd>Adds a lot of features to the sidebar when right clicking</dd><dt><a href="https://sublimegit.readthedocs.io/en/latest/">SublimeGit</a></dt><dd>Adds support for most Git actions</dd><dt><a href="http://www.sublimelinter.com/en/stable/">SublimeLinter</a></dt><dd>Adds linting to Sublime Text. Can then be combined with specific language linters like <a href="https://github.com/SublimeLinter/SublimeLinter-csslint">csslint</a> or <a href="https://github.com/SublimeLinter/SublimeLinter-jshint">jshint</a></dd><dt><a href="https://www.mfuentesg.dev/SyncSettings/">SyncSettings</a></dt><dd>Allows to save Sublime Text settings and plugin list inside a Github Gist</dd><dt><a href="https://packagecontrol.io/packages/Terminal">Terminal</a></dt><dd>Opens a terminal inside the current folder</dd></dl>
Algorithms and data structures2022-10-13T12:58:02+02:00algorithms-and-data-structures<h1 id="algorithms-and-data-structures" >Algorithms and data structures<a href="#algorithms-and-data-structures" aria-label="Algorithms and data structures permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>These are my notes for the <a href="https://frontendmasters.com/courses/algorithms/">algorithm course of frontend masters</a>. This first page contains the introduction for the course, and the subsequent sections are listed below.</p>
<aside><p>Side note</p>All examples in these pages are in TypeScript.</aside><h2 id="big-o" >Big O<a href="#big-o" aria-label="Big O permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Big O is a generalized way to be able to understand how an algorithm will react as the input grows. It helps take decisions on which data structures and algorithms to use and how the programs will perform.</p>
<p>Basically: as your input grows, how fast does computation or memory grows?</p>
<p>Important concepts:</p>
<ol><li>Growth is with respect to the input</li>
<li>Constants are dropped</li>
<li>Worst case is usually the way we measure</li></ol>
<h3 id="growth-is-with-respect-to-the-input" >Growth is with respect to the input<a href="#growth-is-with-respect-to-the-input" aria-label="Growth is with respect to the input permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Example:</p>
<pre><code>function sum_char_codes(n: string): number {
let sum = 0;
for (let i = 0; i <span><</span> n.length; ++i) {
sum += n.charCodeAt(i);
}
return sum;
}
</code></pre>
<p>To tell how the program grows, the easiest way is to look for loops. This code counts the sum of characters in a string. For each new character added, a new loop has to be done. It means that it grows linearly. If there's 50% more characters, it will take 50% more time. It's called <code>O(N)</code>.</p>
<h3 id="constants-are-dropped" >Constants are dropped<a href="#constants-are-dropped" aria-label="Constants are dropped permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>So what happens when we add a new loop?</p>
<p>Example:</p>
<pre><code>function sum_char_codes(n: string): number {
let sum = 0;
for (let i = 0; i <span><</span> n.length; ++i) {
sum += n.charCodeAt(i);
}
for (let i = 0; i <span><</span> n.length; ++i) {
sum += n.charCodeAt(i);
}
return sum;
}
</code></pre>
<p>In this example the loop happens twice, so the reflex would be to think it takes twice the time or <code>O(2N)</code>. But it's not correct: the goal is to describe <strong>the growth</strong> of the algorithm, not how much time exactly it takes or how much CPU it will use. The number of times it is executed does not change it's growth.</p>
<p>So in this case, the correct notation would be <code>O(2^N)</code>. This is why <strong>constants are dropped</strong> in Big O notation.</p>
<p>Example of why constants are not a good indicator, with N as the input:</p>
<pre><code>N = 1, O(10N) = 10, O(N^2) = 1
N = 5, O(10N) = 50, O(N^2) = 25
N = 100, O(10N) = 1,000, O(N^2) = 10,000 // 10x bigger
N = 1000, O(10N) = 10,000, O(N^2) = 1,000,000 // 100x bigger
N = 10000, O(10N) = 100,000, O(N^2) = 100,000,000 // 1000x bigger
</code></pre>
<h3 id="consider-the-worst-case" >Consider the worst case<a href="#consider-the-worst-case" aria-label="Consider the worst case permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Example:</p>
<pre><code>function sum_char_codes(n: string): number {
let sum = 0;
for (let i = 0; i <span><</span> n.length; ++i) {
const charCode = n.charCodeAt(i);
// Capital E
if (charCode === 69) {
return sum;
}
sum += charCode;
}
return sum;
}
</code></pre>
<p>In this example, the <code>sum</code> is returned when <code>E</code> is encountered, so logically the growth could be <code>O(n - x)</code> where x is the number of characters skipped after <code>E</code>.</p>
<p>But since we don't know where <code>E</code> is located (it could be at the end, the start, the middle), we consider the worst case scenario, and it means that this growth is <code>O(n)</code>, as if <code>E</code> was the last character of the string.</p>
<h3 id="complexity" >Complexity<a href="#complexity" aria-label="Complexity permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Some algorithms are notoriously heavy in operations and are therefore not recommended, and their Big O notation helps to identify them, as per the graph below (<a href="https://www.bigocheatsheet.com/">source</a>).</p>
<svg width="800" height="400" viewBox="0 0 800 500" style="max-width:60ch; width:100%; font-size:1rem;">
<path d="M50 0 L 50 450 L 800 450" fill="transparent" stroke="black" stroke-width="2"></path>
<path d="M50 448 L 800 448" fill="transparent" stroke="black" stroke-width="2"></path>
<text x="700" y="438" fill="black">O(log n), O(1)</text>
<path d="M50 450 L 800 400" fill="transparent" stroke="black" stroke-width="2"></path>
<text x="760" y="390" fill="black">O(n)</text>
<path d="M50 450 Q 400 350, 800 150" fill="transparent" stroke="black" stroke-width="2"></path>
<text x="630" y="190" fill="black">O(n log n)</text>
<path d="M50 450 Q 180 380, 250 0" fill="transparent" stroke="black" stroke-width="2"></path>
<text x="260" y="30" fill="black">O(n^2)</text>
<path d="M50 450 C 100 430, 120 350, 120 0" fill="transparent" stroke="black" stroke-width="2"></path>
<text x="125" y="20" fill="black">O(2^n)</text>
<path d="M50 450 C 80 450, 80 350, 80 0" fill="transparent" stroke="black" stroke-width="2"></path>
<text x="80" y="20" fill="black">O(n!)</text>
<text x="0" y="0" transform="translate(30 230) rotate(-90)" style="dominant-baseline: middle; text-anchor: middle; font-size:20px; color: #555; font-size:20px; color: #555; font-style: italic;" fill="black">Operations</text>
<text x="0" y="0" transform="translate(420 470)" style="dominant-baseline: middle; text-anchor: middle; font-size:20px; color: #555; font-style: italic;" fill="black">Elements</text>
</svg><p>We already saw the <code>O(2^N)</code> before, here's the <code>O(N^2)</code>:</p>
<pre><code>function sum_char_codes(n: string): number {
let sum = 0;
for (let i = 0; i <span><</span> n.length; ++i) {
for (let j = 0; j <span><</span> n.length; ++j) {
sum += charCode;
}
}
return sum;
}
</code></pre>
<p>Same with <code>O(N^3)</code>:</p>
<pre><code>function sum_char_codes(n: string): number {
let sum = 0;
for (let i = 0; i <span><</span> n.length; ++i) {
for (let j = 0; j <span><</span> n.length; ++j) {
for (let k = 0; k <span><</span> n.length; ++k) {
sum += charCode;
}
}
}
return sum;
}
</code></pre>
Data structures2022-10-17T18:06:44+02:00data-structures<h1 id="data-structures" >Data structures<a href="#data-structures" aria-label="Data structures permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p>All code examples are in Typescript</aside><h2 id="array" >Array<a href="#array" aria-label="Array permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>An array is a contiguous (non-breaking) memory space which contains a certain amount of <strong>bytes</strong>. How the memory is interpreted depends on how the compiler is configured.</p>
<aside><p>Side note</p>A <strong>byte</strong> is a combination of <strong>two characters</strong> to represent <strong>8 bits</strong>, which are themselves made of <strong>0</strong> and <strong>1</strong>. For a refresh on how memory works see <a href="understanding-memory-bits-bytes-addresses-and-hexadecimal.html">Understanding memory, bits, bytes, addresses and hexadecimal</a></aside><p>Example: an array with 3 entries interpreted differently.</p>
<pre><code>// Schematic view of a 8 bits / 1 byte array.
[00, 00, 00]
-- -- --
0 1 2
</code></pre>
<pre><code>// Schematic view of a 16 bits / 2 bytes array.
[00 00, 00 00, 00 00]
----- ----- -----
0 1 2
</code></pre>
<pre><code>// Schematic view of a 32 bits / 4 bytes array.
[00 00 00 00, 00 00 00 00, 00 00 00 00]
----------- ----------- -----------
0 1 2
</code></pre>
<p>Taking all this into account, it means an array has absolutely no functions like <code>push</code> or <code>pop</code> or <code>shift</code> available in modern languages, where arrays are therefore, <em>more than arrays</em>.</p>
<p>Knowing this, how do you manipulate data?</p>
<dl><dt>Get</dt><dd>To access a value, you need to move along the contiguous data. Add the offset multiplied by how big the type is. Ex: Moving to the third entry in a 8 bits array: <code>2×8 = 16</code>. Skip 16 bits / 2 bytes.</dd><dt>Insert</dt><dd>You cannot grow an array size, which means an insertion will overwrite the existing data.</dd><dt>Delete</dt><dd>You cannot reduce an array size, which means a deletion will replace the existing data with something interpreted as nothing. In some way, a deletion is an insertion.</dd></dl>
<h2 id="linked-list" >Linked list<a href="#linked-list" aria-label="Linked list permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A linked list can be seen as a series of nodes where each node contains a value and points to another node.</p>
<p>There are two versions:</p>
<ol><li>A <strong>singly</strong> linked list can only go forward. The nodes don't have a reference of what came before them.</li>
<li>A <strong>doubly</strong> linked list can go forward or backward. The nodes have a reference to what came before them.</li></ol>
<p>For example:</p>
<pre><code>A singly linked list
-------------
A → B → C → D
</code></pre>
<pre><code>A doubly linked list
-------------
A ↔ B ↔ C ↔ D
</code></pre>
<p>Inserting, reordering or deleting data means changing the references of the different nodes.</p>
<p>Insert F between <code>A</code> and <code>B</code>:</p>
<pre><code>A → F
F → B
F ← B
A ← F
</code></pre>
<p>Logically, linked lists are not contiguous, don't have an index, and can be stored anywhere (which is sometimes referred as <em>heap allocation</em>).</p>
<p>This type of structure has strengths and weaknesses:</p>
<ul><li>Operations performed at the head or tail of the list are extremely fast (get, insert, delete, etc.)</li>
<li>Operations performed in the middle of the list require traversing it using a loop since there is no index. It can be slow if the list is big.</li></ul>
<p>Since none of the size of the input or the existing size of the list matters, linked lists have a notation of O(1).</p>
Search algorithms2022-10-13T18:43:56+02:00search-algorithms<h1 id="search-algorithms" >Search algorithms<a href="#search-algorithms" aria-label="Search algorithms permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p>All code examples are in Typescript</aside><h2 id="linear-search" >Linear Search<a href="#linear-search" aria-label="Linear Search permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>In an non-ordered array, we go from start to finish and ask at each index position if the value we want is present.</p>
<pre><code>export default function linear_search(haystack: number[], needle: number): boolean {
for (let i = 0; i <span><</span> haystack.length; i++) {
if(haystack[i] === needle) {
return true
}
}
return false
}
</code></pre>
<p>The Big O of linear search is <code>O(N)</code>.</p>
<h2 id="binary-search" >Binary Search<a href="#binary-search" aria-label="Binary Search permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The <em>binary</em> in binary search refers to the <code>0</code> or <code>1</code> aspect of binary, and does not mean working with actual binary values.</p>
<p>In an ordered array, we go to its middle, check if the value is equal to the one we are looking for. If it's not, we check if it's greater/smaller than the value we are looking for, exclude the half part that does not contain it, and repeat this process on the half we kept, until there is only one value left: either the one we are looking for, or another one, which means our value is not inside the array.</p>
<pre><code>export default function bs_list(haystack: number[], needle: number): boolean {
let lo = 0
let hi = haystack.length
do {
let m = Math.floor(lo - (hi - lo) / 2)
let v = haystack[m]
if(v === needle) {
return true
} else if (v > needle) {
hi = m // Exclude the right part of the array
} else {
lo = m + 1 // Exclude the left side of the array + the m value
}
} while (lo <span><</span> hi)
return false
}
</code></pre>
<p>The Big O of Binary Search is <code>O(log n)</code>.</p>
<aside><p>Side note</p> In this Big O notation, <code>log</code> refers to <em>logarithm</em>. A logarithm is a math formula to find how many times a base number needs to be multiplied by itself to make another number. Since a binary has only tw possibles values, our base is <code>2</code>.</aside>
<h2 id="exercise-the-two-crystal-balls" >Exercise: The two crystal balls<a href="#exercise-the-two-crystal-balls" aria-label="Exercise: The two crystal balls permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<figure><blockquote >Given only two crystal balls dropped one after the other from a building floor, determine at which high they will break, in the most optimized way.</blockquote></figure><p>In this exercise, the building is an array, and the value of breaks is either <code>false</code> (did not break) or <code>true</code> (did break).</p>
<p>In this case, both the Linear Search and the Binary Search can work but won't be optimal:</p>
<ol><li>The Linear Search will only use one crystal ball and will be very slow, testing every floor one after the other.</li>
<li>The Binary Search, with its base number of 2, would only be able to approximate the height, as it only get two tries.</li></ol>
<p>A better solution would be:</p>
<ol><li>Jump every <code>x</code> in the array and check if the first ball breaks</li>
<li>When the ball breaks, walk backwards to the amount of <code>x</code></li>
<li>Walk forward linearly until the second ball breaks</li></ol>
<p>Since we don't want to use a constant to determine <code>x</code> as it would not be proportional to the array size, we change its unit type, and use the square root of the array.</p>
<pre><code>export default function two_crystal_balls(breaks: boolean[]): number {
const jmpAmount = Math.floor(Math.sqrt(breaks.length))
let i = jmpAmount
for (; i <span><</span> breaks.length; i += jmpAmount) {
if(breaks[i]) {
break // Stop jumping if first ball breaks
}
}
i -= jmpAmount // Walk back the distance of the jump
for (let j = 0; j <span><</span> jmpAmount && i <span><</span> breaks.length; ++j, ++i) {
if(breaks[i]) {
return i // Return when second ball breaks
}
}
return -1
}
</code></pre>
<p>The Big O for this algorithm is <code>O(√n)</code>.</p>
Sorting algorithms2022-11-10T16:43:48+01:00sorting-algorithms<h1 id="sorting-algorithms" >Sorting algorithms<a href="#sorting-algorithms" aria-label="Sorting algorithms permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p>All code examples are in Typescript</aside>
<h2 id="bubble-sort" >Bubble sort<a href="#bubble-sort" aria-label="Bubble sort permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>In an unordered array, starting from the beginning, if the current value is greater than the next value, we swap them, and then move to the next value and repeat the process. After each iteration, the biggest value is always at the end, and we can start over without including the last <code>n</code> values.</p>
<pre><code>export default function bubble_sort(arr: number[]): void {
for (let i = 0; i <span><</span> arr.length ; i++) {
for (let j = 0; j <span><</span> arr.length - 1 - i; j++) {
if(arr[j] > arr[j + 1]) {
const tmp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = tmp
}
}
}
}
</code></pre>
<p>In this example:</p>
<ul><li><code>-1</code> is used to avoid comparing the last value of the array with nothing (out of bounds error).</li>
<li><code>- i</code> is used to avoid comparing values already compared, as the last value of each pass is the biggest.</li></ul>
<p>This Big O for this algorithm is O(n²).</p>
<h2 id="queue" >Queue<a href="#queue" aria-label="Queue permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A queue is a specific implementation of a <a href="data-structures.html#linked-list">linked list</a>.</p>
<p>A queue is <em>FIFO</em> structure, for <em>First I, First Out</em>. It's like a real life queue or line, where a new entrant gets in the queue through its end. And if we want to remove an entry, we remove the first in the queue.</p>
<p>There are usually three operations associated with a queue:</p>
<dl><dt>Enqueue</dt><dd>Adding to the queue through its tail</dd><dt>Deque</dt><dd>Removing from the queue through its head</dd><dt>Peek</dt><dd>Seeing what is the first element of the queue</dd></dl>
<p>Example:</p>
<pre><code>type Node<span><</span>T> = {
value: T,
next?: Node<span><</span>T>,
}
export default class Queue<span><</span>T> {
public length: number;
private head?: Node<span><</span>T>
private tail?: Node<span><</span>T>
constructor() {
this.head = this.tail = undefined
this.length = 0
}
enqueue(item: T): void {
const node = {value:item} as Node<span><</span>T>
this.length++
if(!this.tail) {
this.tail = this.head = node
return
}
this.tail.next = node
this.tail = node
}
deque(): T | undefined {
if(!this.head) {
return undefined
}
this.length--
const head = this.head
this.head = this.head.next
return head.value
}
peek(): T | undefined {
return this.head?.value
}
}
</code></pre>
<h2 id="stack" >Stack<a href="#stack" aria-label="Stack permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A stack is a specific implementation of a <a href="data-structures.html#linked-list">linked list</a>.</p>
<p>A queue is <em>LIFO</em> structure, for <em>Last I, First Out</em>. It's like a real life stack of plates, where a new entrant gets in the stack through its head. And if we want to remove an entry, we remove the last in the queue.</p>
<p>There are usually three operations associated with a queue:</p>
<dl><dt>Push</dt><dd>Adding to the stack through its head</dd><dt>Pop</dt><dd>Removing from the stack through its tail</dd><dt>Peek</dt><dd>Seeing what is the first element of the stack</dd></dl>
<p>Example:</p>
<pre><code>type Node<span><</span>T> = {
value: T,
prev?: Node<span><</span>T>
}
export default class Stack<span><</span>T> {
public length: number;
private head?: Node<span><</span>T>
constructor() {
this.head = undefined
this.length = 0
}
push(item: T): void {
const node = { value: item } as Node<span><</span>T>
this.length++
if (!this.head) {
this.head = node
return
}
node.prev = this.head
this.head = node
}
pop(): T | undefined {
this.length = Math.max(0, this.length - 1)
if (this.length === 0) {
const head = this.head
this.head = undefined
return head?.value
}
const head = this.head as Node<span><</span>T>
this.head = head.prev
return head.value
}
peek(): T | undefined {
return this.head?.value
}
}
</code></pre>
Arrays algorithms2023-03-22T18:27:28+01:00arrays-algorithms<h1 id="arrays-algorithms" >Arrays algorithms<a href="#arrays-algorithms" aria-label="Arrays algorithms permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p>All code examples are in Typescript</aside>
<h2 id="array-list" >ArrayList<a href="#array-list" aria-label="ArrayList permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>An ArrayList uses an array as a fundamental data type instead, and then practice linked lists operations. Its purpose is to be as traversible as an array, with the ability to grow like a Linked List.</p>
<p>For this we need two datas:</p>
<dl><dt>Length</dt><dd>The length is the amount of entries inside the array.</dd><dt>Capacity</dt><dd>The capacity is the number of possible entries of the array.</dd></dl>
<p>For example, an array with a capacity of 6 and a length of 3:</p>
<pre><code>[1, 2, 3, , , ]
| |
Length |
|
Capacity
</code></pre>
<p>ArrayLists are very good with <a href="sorting-algorithms.html#stack">Stack like operations</a>:</p>
<dl><dt>Push</dt><dd>Go to the lenght, add the new value at lenght <code>+1</code>.</dd><dt>Pop</dt><dd>Goto the length, remove the value and decrement the length.</dd></dl>
<p>If the length is the same as the capacity, and a Push happens, then a new array with a larger capacity is created, and the data from the initial array is copied inside the new one. The goal with ArrayList is to balance between using the last amount of memory, and do the least amount of growing operations.</p>
<p>This is why ArrayLists aren't as good with <a href="sorting-algorithms.html#queue">Queue like operations</a>:</p>
<dl><dt>Enqueue</dt><dd>If the array has the capacity, all entries starting from the last one need to be moved by <code>+1</code>, one by one, to make space for the new entry at the head of the array.</dd><dt>Deque</dt><dd>All entries starting from this first one need to be moved by <code>-1</code>, one by one, to free make space at the end of the end of the array.</dd></dl>
<p>The same issues happen when inserting in the middle of the ArrayList.</p>
<h2 id="array-buffer-ring-buffer" >ArrayBuffer - Ring Buffer<a href="#array-buffer-ring-buffer" aria-label="ArrayBuffer - Ring Buffer permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>An ArrayBuffer is an over-capacity array that does not use <code>0</code> as the head and length as the tail. Instead, the head and the tail have an index, with free space before the head and after the head.</p>
<pre><code>[....[----------->]......]
0 | | n
Head Tail
</code></pre>
<p>The ArrayBuffer eases some operations:</p>
<dl><dt>Deque</dt><dd>Clean the entry then add <code>1</code> to the head, without the need to move the remaining entries by <code>-1</code>.</dd><dt>Push</dt><dd>Add the new entry at length, then add <code>1</code> to the tail.</dd></dl>
<p>If the push reaches the maximum capacity of the array, it can <em>circle back</em> to the start of they array plus the modulo of the length, and set its tail there (hence the name <em>Ring</em> Buffers).</p>
<pre><code>[->]....[---------------]
0 | | n
Tail Head
</code></pre>
<p>The moment the is as the same position than the head, and a push happens, the array needs to be resized. To maintain order, the copy needs to start at the head, go to the length, and write into a larger ArrayBuffer.</p>
Recursion2022-11-14T18:37:16+01:00recursion<h1 id="recursion" >Recursion<a href="#recursion" aria-label="Recursion permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p>All code examples are in Typescript</aside><p>The simplest way of thinking about recursion is a function that calls itself until the problem is solved. This usually involves what is refereed as a <em>base case</em>. The <em>base cave</em> is the point at which the problem is solved and recursion stops.</p>
<p>For example, this function <code>foo()</code> takes a <code>n</code> argument, and each time it calls itself, it add <code>n-1</code>, until <code>n</code> is <code>1</code>.</p>
<pre><code>function foo(n: number): number {
// Base case
if (n === 1) {
return 1
}
// Recursion happens
return n + foo(n - 1)
}
const total = foo(5) // Result is 15
</code></pre>
<p>There are three values that can help visualize this a little more easily:</p>
<dl><dt>rA</dt><dd>return Address. When a function finishes its work, it needs to go back to the place where it was called, and return a value.</dd><dt>rV</dt><dd>return Value. The value that is actually returned when the function is over needs a space in memory.</dd><dt>A</dt><dd>Arguments. To pass values inside the function, some memory is allocated.</dd></dl>
<p>Now what happens when the previous function <code>foo</code> is called with <code>5</code> as an argument is called:</p>
<ol><li>The return address is whatever called <code>foo(5)</code>.</li>
<li>The return value is unknown, but it can be assumed it is at least <code>5</code> or more.</li>
<li>The argument is <code>5</code>.</li></ol>
<pre><code>whatever called foo(5)
\
\ rA | rV | A |
|-------|\----|-----|---|
|foo(5) | | 5+ | 5 |
</code></pre>
<p>As the argument is not equal to <code>1</code>, the function will call itself again after decreasing the value of the argument by <code>1</code>:</p>
<ol><li>The return address is now <code>foo(5)</code>, since it called <code>foo(4)</code>.</li>
<li>The return value is unknown, but it can be assumed it is at least <code>4</code> or more.</li>
<li>The argument is <code>4</code>.</li></ol>
<p>The cycle continues to repeat itself until the argument is 1:</p>
<pre><code>whatever called foo(5)
\
\ rA | rV | A |
|-------|\-------|------|---|
|foo(5) | | 5+ | 5 |
|foo(4) | foo(5) | 4+ | 4 |
|foo(3) | foo(4) | 3+ | 3 |
|foo(2) | foo(3) | 2+ | 2 |
|foo(1) | foo(2) | 1 | 1 |
</code></pre>
<p>Now that the argument is equal to 1 and returns 1, the addition of <code>return n + foo(n - 1)</code> can actually happen, from the bottom to the top of the stack of <code>foo()</code> executions:</p>
<pre><code>whatever called foo(5)
\
\ rA | rV | A |
|-------|\-------|------|---|
|foo(5) | | 5+10 | 5 |
|foo(4) | foo(5) | 4+6 | 4 |
|foo(3) | foo(4) | 3+3 | 3 |
|foo(2) | foo(3) | 2+1 | 2 |
|foo(1) | foo(2) | 1 | 1 |
</code></pre>
<p>Knowing all this, a recursive function can be broken into 3 steps:</p>
<dl><dt>1. <code>pre</code></dt><dd>doing something <strong>before</strong> the recursion. In the example before: <code>n +</code>.</dd><dt>2. <code>recurse</code></dt><dd>calling the function. In the example before: <code>foo(n - 1)</code></dd><dt>3. <code>post</code></dt><dd>doing something <strong>after</strong> the recursion. Not in the example.</dd></dl>
<p>Example: doing something before returning the value of the recursion.</p>
<pre><code>function foo(n: number): number {
if (n === 1) {
return 1
}
const out = n + foo(n - 1) // pre + recursion
console.log(n) // post
return out
}
const total = foo(5) // Result is 15
</code></pre>
<h2 id="exercise-maze-solver" >Exercise: Maze Solver<a href="#exercise-maze-solver" aria-label="Exercise: Maze Solver permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<figure><blockquote >Using recursion, find the exit in a maze made with a two-dimensional array and return the path used.</blockquote></figure><h3 id="theoretical-approach" >Theoretical approach<a href="#theoretical-approach" aria-label="Theoretical approach permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>The maze is a square, with an entry and an exit:</p>
<pre><code> ↑
xxxxxxxxxx x
x x x
x x x
x xxxxxxxx x
x x
x xxxxxxxxxx
↑
</code></pre>
<p>We can move in four directions: up, right, down, left.</p>
<pre><code> ↑
← ♜ →
↓
</code></pre>
<p>But these movement options can create issues:</p>
<ul><li>Going off the map</li>
<li>Hitting a wall</li>
<li>Finding the exit</li>
<li>Retracing one's steps</li></ul>
<p>Those issues need to be used as the <strong>base cases</strong>. If the program detects them, it should not try to move in the incoming direction, and try another direction.</p>
<h2 id="code-implementation" >Code implementation<a href="#code-implementation" aria-label="Code implementation permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The main function takes four arguments that serve to describe our maze and its working conditions:</p>
<dl><dt><code>maze</code></dt><dd>the actual two-dimensional array representing the maze</dd><dt><code>wall</code></dt><dd>the character that designates a wall (ex: <code>*</code>)</dd><dt><code>start</code></dt><dd>the starting position as <code>x</code> and <code>y</code> coordinates</dd><dt><code>end</code></dt><dd>the exit as <code>x</code> and <code>y</code> coordinates</dd></dl>
<p>And looks like this:</p>
<pre><code>export default function solve(
maze: string[],
wall: string,
start: Point,
end: Point): Point[] {}
</code></pre>
<h3 id="avoid-errors-for-base-cases" >Avoid errors for base cases<a href="#avoid-errors-for-base-cases" aria-label="Avoid errors for base cases permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>A <code>walk()</code> function is created, which returns a boolean and uses those arguments:</p>
<dl><dt><code>maze</code></dt><dd>the same two-dimensional array representing the maze</dd><dt><code>wall</code></dt><dd>the same character that designates a wall (ex: <code>*</code>)</dd><dt><code>curr</code></dt><dd>the current moving position of the function as <code>x</code> and <code>y</code> coordinates</dd><dt><code>end</code></dt><dd>the exit as <code>x</code> and <code>y</code> coordinates</dd><dt><code>seen</code></dt><dd>a two-dimensional array of booleans informing if the position was already visited</dd></dl>
<p>The base cases are added before handling recursion:</p>
<pre><code>function walk(maze: string[], wall: string, curr: Point, end: Point, seen: boolean[][]): boolean {
// Off the map
if (curr.x <span><</span> 0 || curr.x >= maze[0].length || curr.y <span><</span> 0 || curr.y >= maze.length) {
return false
}
// Hit a wall
if (maze[curr.y][curr.x] === wall) {
return false
}
// Found the exit
if (curr.x === end.x && curr.y === end.y) {
return true
}
// Avoid retracing one's steps
if (seen[curr.y][curr.x]) {
return false
}
}
</code></pre>
<h3 id="build-the-path-with-recursion" >Build the path with recursion<a href="#build-the-path-with-recursion" aria-label="Build the path with recursion permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>A new argument is added:</p>
<dl><dt><code>path</code></dt><dd>an array of <code>x</code> and <code>y</code> coordinates that retraces all successful movements and allows to retracce the path</dd></dl>
<p>First, add the current position inside the path before recursion, and remove the last item of the path if the recursion finishes, as it means the path employed was not the right one.</p>
<pre><code>function walk(maze: string[], wall: string, curr: Point, end: Point, seen: boolean[][], path: Point[]): boolean {
// ... previous base cases
// Pre
seen[curr.y][curr.x] = true
path.push(curr)
// Recurse
// Post
path.pop()
return false
}
</code></pre>
<p>Then, create an array of directions (left, right, down, up) that will be used to move inside the maze:</p>
<pre><code>const dir = [
[-1, 0],
[1, 0],
[0, -1]
[0, 1]
]
</code></pre>
<p>Then, loop over each direction to test if it's allowed to move, and if <code>walk()</code> returns true, it means the exit has been found:</p>
<pre><code>// Recurse
for (let i = 0; i <span><</span> dir.length; i++) {
const [x, y] = dir[i]
if (walk(maze, wall, { x: curr.x + x, y: curr.y + y }, end, seen, path)) {
return true
}
}
</code></pre>
<p>The base case for finding the exit returns true, which means the recursion with the last position is not registered inside the path. To add it:</p>
<pre><code>// Finding the exit
if (curr.x === end.x && curr.y === end.y) {
.push(end)
return true
}
</code></pre>
<p>Finally, create the seen as the maze with values of <code>false</code>, then use the <code>walk()</code> function, in the main function:</p>
<pre><code>export default function solve(maze: string[], wall: string, start: Point, end: Point): Point[] {
const seen: boolean[][] = []
const path: Point[] = []
for (let i = 0; i <span><</span> maze.length; i++) {
seen.push(new Array(maze[0].length).fill(false))
}
walk(maze, wall, start, end, seen, path)
return path
}
</code></pre>
<p>The completed exercise:</p>
<pre><code>const dir = [
[-1, 0],
[1, 0],
[0, -1],
[0, 1]
]
function walk(maze: string[], wall: string, curr: Point, end: Point, seen: boolean[][], path: Point[]): boolean {
// 1. Base cases
// Off the map
if (curr.x <span><</span> 0 || curr.x >= maze[0].length || curr.y <span><</span> 0 || curr.y >= maze.length) {
return false
}
// Hit a wall
if (maze[curr.y][curr.x] === wall) {
return false
}
// Finding the exit
if (curr.x === end.x && curr.y === end.y) {
path.push(end)
return true
}
// Avoid retracing one's steps
if (seen[curr.y][curr.x]) {
return false
}
// 2. Recursion
// Pre
seen[curr.y][curr.x] = true
path.push(curr)
// Recurse
for (let i = 0; i <span><</span> dir.length; i++) {
const [x, y] = dir[i]
if (walk(maze, wall, { x: curr.x + x, y: curr.y + y }, end, seen, path)) {
return true
}
}
// Post
path.pop()
return false
}
export default function solve(maze: string[], wall: string, start: Point, end: Point): Point[] {
const seen: boolean[][] = []
const path: Point[] = []
for (let i = 0; i <span><</span> maze.length; i++) {
seen.push(new Array(maze[0].length).fill(false))
}
walk(maze, wall, start, end, seen, path)
return path
}
</code></pre>
Quicksort2023-03-22T18:27:28+01:00quicksort<h1 id="quicksort" >Quicksort<a href="#quicksort" aria-label="Quicksort permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Quicksort is a sorting algorithm using recursion. It works by selecting a value in the array (in the following examples it's the last one) and using it as a pivot, against which all others values are sorted compared and then moved to its left or right depending if they are smaller or bigger.</p>
<p>Once this <em>weak sort</em> has been executed, the two parts before and after the pivot are copied to new arrays, and the process of selecting a pivot, comparing and copying starts again, until eventually each array has only one value, which means it is sorted.</p>
<p>After that, all values are retrieved, and the array is completely sorted.</p>
<p>Example with an array of 16 values:</p>
<pre><code> [0-15]
--------------8--------------
| |
[1-7] [9-15]
-------4------- -------12--------
| | | |
[1-3] [5-7] [9-11] [13-15]
---2--- ---6--- ---2---- ----14---
| | | | | | | |
[1-1] [3-3] [5-5] [7-7] [9-9] [11-11] [13-13] [15-15]
</code></pre>
<p>The big O of Quicksort is <code>O(log n)</code>, where <code>log</code> is the number of times a new split is made using the pivot.</p>
<p>But there's a catch: Quicksort doesn't always sort quickly. There are some specific cases that can make the algorithm have terrible for performance.</p>
<p>Among them, it can happen in a reversed sorted array, as it means the last item is the smallest, and that all reversed values will be placed at its right, resulting in a new array for all the remaining values at each iteration.</p>
<pre><code>[6,5,4,3,2,1]
1---------
|
[2,6,5,4,3]
2-------
|
[3,6,5,4,3]
3-----
|
// etc...
</code></pre>
<p>The solution to avoid this is to always pick the middle element of the array as the pivot.</p>
<ul><li>If it's sorted, zero swaps will happen.</li>
<li>If it's reverse sorted, the array will be perfectly split in the middle.</li>
<li>If it's randomly sorted, then the algorithm has a random chance of being near the middle value.</li></ul>
<p>Knowing this, Quicksort big O is then somewhere between <code>O(log n)</code> best case and <code>O(n²)</code> worst case.</p>
<p>Example:</p>
<pre><code>// Does the weak sort and returns the pivot
function partition(arr: number[], lo: number, hi:number): number {
const pivot = arr[hi]; // Taking the last item as the pivot
let idx = lo - 1; // Setting the index outside the array
for(let i = lo; i <span><</span> hi; ++i) {
if (arr[hi] <span><</span>= pivot) {
// Set index position, then swap the values
idx++;
const tmp = arr[i];
arr[i] = arr[idx];
arr[idx] = tmp;
}
}
idx++; // Increment the index
// Move the pivot to the index
arr[hi] = arr[idx];
arr[idx] = pivot;
return idx;
}
function qs(arr: number[], lo: number, hi:number): void {
if (lo >= hi) {
return;
}
const pivotIdx = partition(arr, lo, hi);
qs(arr, lo, pivotIdx -1);
as(arr, pivotIdx + 1, hi);
}
export default function quick_sort(arr: number[]): void {
qs(arr, 0, arr.length -1);
}
</code></pre>
Trees2023-03-22T18:27:28+01:00trees<h1 id="trees" >Trees<a href="#trees" aria-label="Trees permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>A tree is a linked list of nodes with a single, root parent. Trees data structures are everywhere in software. The operating systems use them for files. Browsers use them for the HTML Dom.</p>
<pre><code> root
|
-------------
| |
child child
|
-----------
| | |
child child child
</code></pre>
<p>There's a common terminology around trees to help defined the different parts:</p>
<dl><dt>Root</dt><dd>The most parent node.</dd><dt>Height</dt><dd>The longest path from the root to the most child node.</dd><dt>Binary tree</dt><dd>A tree in which has at most 2 children, at least 0 children.</dd><dt>General tree</dt><dd>A tree with 0 or more children.</dd><dt>Binary search tree</dt><dd>A tree in which has a specific ordering to the nodes and at most 2 children.</dd><dt>Leaves</dt><dd>A node without children.</dd><dt>Balanced</dt><dd>A tree is perfectly balanced when any node's left and right children have the same height.</dd><dt>Branching factor</dt><dd>The amount of children a tree has.</dd></dl>
Tree Search Algorithms2023-03-22T18:27:28+01:00tree-search-algorithms<h1 id="tree-search-algorithms" >Tree Search Algorithms<a href="#tree-search-algorithms" aria-label="Tree Search Algorithms permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>When working in trees, moving inside the structure is often called <em>traversal</em>. The algorithms described below could there be considered traversal algorithms.</p>
<h2 id="depth-first-search" >Depth First Search<a href="#depth-first-search" aria-label="Depth First Search permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Below are examples of traversals of what is called Depth First Search (DFS), because the traversal happens vertically or <em>depth first</em>.</p>
<h3 id="pre-order-traversal" >Pre-order traversal<a href="#pre-order-traversal" aria-label="Pre-order traversal permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>A pre-order traversal in a binary tree consists of:</p>
<ol><li>A visit to the node</li>
<li>Getting the value</li>
<li>A recursion to the left children, if it exists</li>
<li>A recursion to the right children, if it exists</li></ol>
<pre><code> 7
|
------------
23 3
| |
------ ------
| | | |
5 4 18 21
</code></pre>
<p>The order of recursion will be 7, 23, 5, 4, 3, 18, 21. In a pre-order transversal, the root is at the beginning.</p>
<p>Example:</p>
<pre><code>export default function pre_order_search(head: BinaryNode<span><</span>number>): number[] {
return walk(head, path);
}
function walk(curr: BinaryNode<span><</span>number> | null, path:number[]): void {
if (!curr) {
return path;
}
path.push(curr.value);
walk(curr.left, path);
walk(curr.right, path);
return path;
}
</code></pre>
<h3 id="in-order-traversal" >In-order traversal<a href="#in-order-traversal" aria-label="In-order traversal permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>An in-order traversal in a binary tree consists of:</p>
<ol><li>A visit to the node</li>
<li>A recursion to the left children, if it exists</li>
<li>Getting the value</li>
<li>A recursion to the right children, if it exists</li></ol>
<pre><code> 7
|
------------
23 3
| |
------ ------
| | | |
5 4 18 21
</code></pre>
<p>The order of recursion will be 5, 23, 4, 7, 18, 3, 21. In a in-order transversal, the root is in the middle.</p>
<p>Example:</p>
<pre><code>export default function in_order_search(head: BinaryNode<span><</span>number>): number[] {
return walk(head, path);
}
function walk(curr: BinaryNode<span><</span>number> | null, path:number[]): void {
if (!curr) {
return path;
}
walk(curr.left, path);
path.push(curr.value);
walk(curr.right, path);
return path;
}
</code></pre>
<h3 id="post-order-traversal" >Post-order traversal<a href="#post-order-traversal" aria-label="Post-order traversal permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>A post-order traversal in a binary tree consists of:</p>
<ol><li>A visit to the node</li>
<li>A recursion to the left children, if it exists</li>
<li>A recursion to the right children, if it exists</li>
<li>Getting the value</li></ol>
<pre><code> 7
|
------------
23 3
| |
------ ------
| | | |
5 4 18 21
</code></pre>
<p>The order of recursion will be 5, 4, 23, 18, 21, 3, 7. In an post-order transversal, the root is at the end.</p>
<p>Example:</p>
<pre><code>export default function post_order_search(head: BinaryNode<span><</span>number>): number[] {
return walk(head, path);
}
function walk(curr: BinaryNode<span><</span>number> | null, path:number[]): void {
if (!curr) {
return path;
}
walk(curr.left, path);
walk(curr.right, path);
path.push(curr.value);
return path;
}
</code></pre>
Writing tips2022-03-13T20:03:30+01:00writing-tips<h1 id="writing-tips" >Writing tips<a href="#writing-tips" aria-label="Writing tips permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>These writing tips are based on personal experience and might not work for you, so be careful when trying to use them.</p>
<p>Please note that <strong>I'm talking about writing for others</strong>. As a professional writer I need the reader to keep reading. In the case of a long article, keeping the reader focused is often complicated, and that's the reason why I use these tips an tricks. A lot of them were taught to me by Thomas Cusseau, the former chief editor of <a href="https://gamekult.com">Gamekult</a> and by my old friend <a href="https://foxmonsieur.com/">Franck Extanasié</a>.</p>
<p>Also don't forget that as with everything, the more you write, the better you write.</p>
<h2 id="is-the-subject-worth-it" >Is the subject worth it?<a href="#is-the-subject-worth-it" aria-label="Is the subject worth it? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>First of all, anyone can write about any subject and potentially, any subject can be interesting.</p>
<p>But that doesn't mean <em>every</em> subject is interesting. Some of them don't deserve your time and. If they are still written they can be informative, but are they really interesting to read? Was that time well spent?</p>
<p>The quality of the subject (and thus the pleasure you as a reader will get from reading it) is determined by the <em>context</em> surrounding it. The subject is just the trigger, the context is the story and that's the main thing we want to retrieve as a writer.</p>
<p>Here's the most easy way I determine if a subject is interesting: if, after getting a hint about a it, I find myself asking questions about it and I need more context to get answers, then it might be worth writing about it.</p>
<p>This very page follows the same process. I was hinted that my process of writing and its result are interesting to others. So I ask myself <em>questions</em> about my own practices, I stepped back to get <em>context</em> and tried to find <em>answers</em>.</p>
<p>All this combined helps me build what Thomas Cusseau called <em>the angle</em> of the article.</p>
<h2 id="the-angle" >The angle<a href="#the-angle" aria-label="The angle permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Just like in the cinematographic sense with camera angles, the way you <em>position</em> yourself as the writer to emphasize the context around the subject will change the perception and feelings of the reader. It will also tell him a story, even if there's no dialog. It means that even if the subject, context and answers are interesting, you now have to determine how to write about them to create feelings. Joy, excitement, curiosity.</p>
<p>Now this is where my methods can differ from other's. Each cinematographer as its own ways of filming and that's the same for writers. Of course the subject and the target audience will influence how the writing will be done. If I'm writing a fiction centered around a single character and it's emotions, I might go with a first person point of view and not care about being totally understandable. If I'm writing a more informative article for a larger audience, I will probably try to make it as accessible as possible ; disappear and let the context that I organize in a logical way do all the work. It's all about the writer and the desired outcome.</p>
<p>With experience, writing habits tend to emerge and will make the process of assembling the angle (subject, context, answers, form) more easy. Still, it's often good to re-evaluate our habits to avoid being to complacent.</p>
<h2 id="my-process" >My process<a href="#my-process" aria-label="My process permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>My most used process, that I apply mostly in non-fiction writings, work as follow.</p>
<ol><li>I openly ask a question about the subject.</li>
<li>I invite the reader to look at the subject from a new perspective that I provide.</li>
<li>I raise the reader's understanding of the subject by delivering context in a logical chain of ideas.</li>
<li>I deliver a conclusion that answers the question.</li></ol>
<h3 id="the-question" >The question<a href="#the-question" aria-label="The question permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>The question is not actually a question!</p>
<p>It's more of a problematic that you want to answer and openly share with your reader. It has to strike a nice balance to make the reader curious without being overly dramatic or click-bait. It has to be super short (around 150 characters), be the first text after the title, directed at the target audience, provide the initial context we are in and why we are questioning this context.</p>
<p>The hint for my <a href="2020.html">2020 review</a> was:</p>
<figure><blockquote >2020 was one of the best years I experienced in recent memory.</blockquote></figure><p>Let's analyze this for a bit:</p>
<ul><li><em>2020</em> is the main context. Everyone knows 2020 was as bad year. You might think <em>Ugh, here we go with 2020 again, so depressing</em>.</li>
<li><em>Best years in recent memory</em> when combined with <em>2020</em> creates the problematic. I want to create a <em>Whaaaaaaaaaat</em> moment!</li>
<li><em>I experienced</em> is a hint that I am the perspective. This page is a personal journal that will guide you through my journey.</li></ul>
<p>This phrase will be my main guideline while I am writing the rest of the text. You can think of the question as a pitch. Or as the phrase you wrote at the beginning of your philosophy dissertation in high school! The click-bait titles you see everywhere on the internet are just this, but with rock-bottom effort in subtlety, because of a lack of time and context.</p>
<p>But <strong>please respect yourself</strong>. Never use a question mark inside a title or your problematic. They are obnoxious, too easy and often drives the reader away.</p>
<h3 id="the-perspective" >The perspective<a href="#the-perspective" aria-label="The perspective permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Right after the question, I try to give hints about <em>why</em> I wrote it. This is often the introduction part of the article, where I state facts that help the reader understand why this text was written in the first place.</p>
<p>The goal is to embark him into my own journey, making him revive my cycle of <em>question, context, answer</em> by shifting his perspective with mine. The only difference between us are:</p>
<ul><li>I already know the <em>answer</em>, he does not.</li>
<li>I have the full <em>context</em>, he does not.</li></ul>
<p>So my goal now is to deliver him the full context so he can understand my conclusion.</p>
<h3 id="the-context-delivery" >The context delivery<a href="#the-context-delivery" aria-label="The context delivery permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>From this moment I am in the core of the article. This is often the most difficult part to write.</p>
<p>My goal is to split the context that makes the subject interesting into smaller parts, in order to deliver them in a logical way. You can think about it as a bullet list where each element leads to the next. Each one needs to have its own inner-subject, context explanation, logical conclusion, and transition to the next part.</p>
<p>This is especially hard to write while making it interesting and not being excessively verbose. Summarizing things is hard. Going to the core of an information is harder. It's where there is a good chance that the article goes into a tangent. Since I am giving context and that one things calls for the another, it's super easy to derivate into <em>the context of the context</em>, thus leading to something that is <em>related but not related</em> to the subject of the article.</p>
<p>Using metaphors when dealing with technical aspects can be useful but if they are not quick, clear and obvious, they can lose the reader. Images and quotes are useful to create breaks. It allows you to make a logical connection from one context to the other in the same part. It also allows the reader to breathe.</p>
<p>Even more difficult are the transitions. Each parts needs to end with a hint about what the next one will be about.</p>
<h4 id="plan-or-go-with-the-flow" >Plan or go with the flow?<a href="#plan-or-go-with-the-flow" aria-label="Plan or go with the flow? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h4>
<p>There are two schools about writing this context delivery part. One advises to plan everything before writing the different parts. This way you know where to start and where to end each one. The other method is to simply go with the flow and detect when to stop and transition to another part.</p>
<p>Of course both methods have positives and negatives.</p>
<p>Planning everything is good but sometimes, one part can be too long and needs to be cut in smaller ones, breaking the plan. Sometimes when writing, the realization that the plan is not good happens. Or the question changes or get refined, thus breaking the plan. But plans are useful when dealing with very intricate articles. I personally use them more for technical writings. When I am not 100% sure about my understanding of the context, having a plan is also a good way to stay focused.</p>
<p>Going with the flow obviously makes it easy to change the question and flow of the article, at the risk of going into tangents and irregular sized parts. Going with the flow often leads to more deletes of entire paragraphs. I even had cases where I deleted everything and started fresh, as the existing text was not good and trying to format it to another plan was a nightmare.</p>
<p>My advice would be: the more you know your subject, the more you can go with the flow. The less certain you are, the more you should plan. To create a plan more easily, write all you context elements on small pieces of paper and regroup them by inner-subject.</p>
<h3 id="the-conclusion" >The conclusion<a href="#the-conclusion" aria-label="The conclusion permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>The conclusion is also part of the context delivery phase, but it doesn't conclude it's own part, it concludes the whole article. If I wrote well enough, the reader has all the contextual keys to understand why I brought the subject in the first place.</p>
<p>If the article is long, it might be a good idea to rewrite the question. With the context the reader gathered, he should be able to get to the conclusion by itself at this moment. Still, write the answer to the question or the problematic. More often than not, it's good to finish with a catchphrase that either closes the topic once and for all, or opens it so the reader can continue to think about it.</p>
<p>It always feel good to have a <em>AH, I GET IT</em> moment, and that's what I aim for my conclusions.</p>
<h2 id="various-tips-and-tricks" >Various tips and tricks<a href="#various-tips-and-tricks" aria-label="Various tips and tricks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<ul><li>The main rule all writers know is that after finishing an article, you remove 50% of it. Because you wrote too much. You went into tangents. You overdid it. Don't hesitate. Delete. Rephrase.</li>
<li>After long periods of writing, everything seems to be blurry and hard to read. That because you almost memorized your text and you aren't actually reading it anymore, you are thinking about the purpose of each phrase. That's how you miss typos, long phrases that could be shortened, etc...</li>
<li>When it's too hard, let it rest for a few days before continuing. The blur will disappear and you'll be fresh.</li>
<li>When it's done, let it rest for a few days before publishing. The blur will disappear and you'll be able to see the monstrosities you wrote.</li>
<li>When doing interviews, the most interesting things are often the tangents. They provide off-script context that would normally not be part of the subject. Write hints or subjects mentioned and go back to them later. When doing interviews with people in a marketing campaign, always ask a generic question first so they can do their own job and spit their marketing bullshit, then do your thing.</li></ul>
Everything you need to know to choose an office chair2023-03-03T17:22:26+01:00everything-you-need-to-know-to-choose-an-office-chair<h1 id="everything-you-need-to-know-to-choose-an-office-chair" >Everything you need to know to choose an office chair<a href="#everything-you-need-to-know-to-choose-an-office-chair" aria-label="Everything you need to know to choose an office chair permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>It's 2021 and we're still destroying our backs and vertebras with <em>gameeerz</em> chairs. I talked with an expert to learn how to chose an office chair that respects our bodies.</p>
<p>My partner has two herniated discs and when her company decided that office work would not be mandatory, even after the pandemic, we went to a profesionnal office chair seller in our local town. We had a very great experience with Catherine and Yvan Couloigner, the owners of <a href="https://www.laboutiquedudos.com/content/12-la-boutique-du-dos-brest-29200">La boutique du dos à Brest</a>, to the point where I went back to see them to write an article about chairs, that was initially published in French on <a href="https://www.geekzone.fr/2021/04/13/fauteuil-de-bureau-ce-quil-faut-savoir-avant-dacheter/">Geekzone.fr</a>.</p>
<p>This page is a condensed version of the article. All prices are indicated in Euros. No brand sponsored the initial article or this version.</p>
<h2 id="why-office-chairs-hurt-you" >Why office chairs hurt you<a href="#why-office-chairs-hurt-you" aria-label="Why office chairs hurt you permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If you already spent 50 to 300 euros for a chair and it hurts, it's probably because you bought it inside a generalist furniture store like IKEA. Those stores don't want to have expensive prices and will logically only sell you basic models.</p>
<p>If you consider an office chair for what it is, an accessory attached to your health (just like a mattres), buying cheap is hurting yourself. The Markus from IKEA is the primer example: if you have the right morphology and your desk has the right height, you're a lucky person and will feel good for just under 200 euros. If not, you'll suffer.</p>
<p>The truth is, the lowest price for an entry-level office chair with a range of adjustment that fits most people and can be used for a full day's work is around 450 to 600 euros. If you spend more than 5 hours at your desk, you need adjustable depth, adjustable armrests and adjustable backrest height.</p>
<p>Fixed armrests impede movement and do not allow getting close to the desk. They force people to work on the front of their chair, or push the keyboard away and use the front of the desk as the armrests. Doing this will make you curl up at the chest level and will cause muscular constraints.</p>
<p>Basically, the chair has to adapt to the body, not the opposite.</p>
<h2 id="the-sitting-position" >The sitting position<a href="#the-sitting-position" aria-label="The sitting position permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>But <em>how should you actually sit?</em> What's the good position between being stuck inside your chair or sitting at the tip? Unfortunately, there's no made up answers: the right position is the one you can keep for hours.</p>
<p>From a purely theorical standpoint, the <em>good office chair position</em> that you see in schematics is good. The back is well supported, the knees are very slightly below the hips, with an opening of about 92 to 95 degrees.</p>
<p>But staying this way for hours will hurt too. Sitting on a giant inflated ball, that are often seen as replacement of office chairs as they are cheaper and recommended by physical therapists, will also hurt in the long run as they are not ergonomic and provide literally zero adjustement options.</p>
<h2 id="how-to-feel-comfortable" >How to feel comfortable<a href="#how-to-feel-comfortable" aria-label="How to feel comfortable permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>It's a bit contradictory but <strong>movement is key</strong>. When you are sitting still, your venous flow does not happen naturally. When you walk, you give an impulse for the blood to go back to the heart, which does not happen when you are static. So you have to alternate different positions inside your chair to provide better blood circulation.</p>
<p>If that doesn't feel logical (after all, chairs are rigid things), it's probably because your chair doesn't allow it. There isn't a lot of ways to sit on a kitchen chair until fatigue prevails and you take a painful position (laptops don't help, we'll talk about them later).</p>
<p>Ergonomic chairs on the other hand, are designed to alternate positions. The tilted backrest, for example, allows you to stretch your body lengthwise, and also offers a second, more relaxed working position than the upright one.</p>
<p>To be enjoyable, the rocker resistance must be adjustable, as people with different weights will have different rocking points. Effort must be minimal in order to be able to tip from one position to the other. Sitting at the tip of your chair for is also good, as long as it doesn't last too long. Once again, a chair that allows to change position without forcing is key.</p>
<p>As for the foam and cushions, it all depends on personal preferences. People with pain around the coccyx or sacrum will need more foam (or a hole in the sit cushion_, while others won't. A cocooning effect can also be important to feel relaxed for more anxious people.</p>
<h2 id="ask-yourself-the-right-questions" >Ask yourself the right questions<a href="#ask-yourself-the-right-questions" aria-label="Ask yourself the right questions permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>A lot of people project on others their own experience with their chair. But what counts is <strong>YOU</strong>. Ask yourself those questions: is the chair adapted to my height, my weight, my morphology? Do I have long legs? Short torso? Long neck? All those parameters matter as well as your working conditions.</p>
<p>Depending on them, the chair model will differ. If you are a cashier, you'll move your arms and twist your back a lot, which means you need freedom of movement and a strong lumbar support.</p>
<p>If you do a lot of videoconferences on a laptop, you'll need to raise your computer with a support and use a chair that support the upper body to avoid neck pain and musculoskeletal disorders. You'll need to alternate positions to avoid getting stiff.</p>
<p>Some people only spend one hour and half at their desk. If that's the case, a kneeling seat can also work as it's cheaper and takes less space.</p>
<h2 id="standing-desks-a-good-or-bad-idea" >Standing desks, a good or bad idea?<a href="#standing-desks-a-good-or-bad-idea" aria-label="Standing desks, a good or bad idea? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Standing desks are more and more criticized, often for good reasons. As we already said, moving is important, but too many people understood it as standing. But you won't be able to move and walk as your desk can't come with you. So what's the point of having one?</p>
<p>The goal isn't burning calories or making baby steps, but prevent potentiel issues by alterning positions. Working in a standing position relieves pressure on the back and reduces circulatory problems in the legs. Sitting down amplifies these issues, especially for women who are more prone to venous flow problems. It can also prevents digestive problems, as standing even for a short period of time relieves pressure on the intestines and stomach.</p>
<p>In order to achieve this, what you need isn't a standing desk. It's a sit-and-standing desk. A desk that allows to go from one position to the other. Once again, movement and choice are keys. You won't stand up for a whole day anyway, as you discs will be under pressure and your lumbar vertebae will take the hits.</p>
<p>If you take a sit-and-standing desk, be coherent and take an electrical model with a memory of your positions. Cheaper models with cranks exist, but from experience, Yvan told me most people adjust them for the sitting position and never touch them again. If changin position is seen as a chore, nobody will do it.</p>
<p>Also, <em>of course</em>, it's useless to have a sit-and-standing desk if you have a crappy chair.</p>
<h2 id="ask-for-advice-from-profesionnals" >Ask for advice from profesionnals<a href="#ask-for-advice-from-profesionnals" aria-label="Ask for advice from profesionnals permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If all this sounds complicated, thats's because it is. If you are unsure about what to buy and what is better for your, look for stores specialized in office furniture for disabled people. Employees working in these stores are not medical staff, but they have met thousands of people with broken backs and necks. They've seen all type of morphologies going from the 2 meter, 120 kilograms guy to the 1 meter and half 40 kilograms lady.</p>
<p>They also know how to adjust chairs to your body while you try them, and it makes a big difference when someone else is tweaking the chair while you seat instead going back and forth to the cranks in order to adjust them. It's the polar opposite of the 20 seconds try of a mattress.</p>
<p>Of course some sellers can be bad. If you are in a very business oriented part of a city, shops might want to sell you very expensive "president like" chairs that look super good (ex: an Aeron Miller), while omitting that for half the price, you can have the same comfort minus the style.</p>
<p>Do your research and take care of yourself!</p>
<h2 id="more-important-informations" >More important informations<a href="#more-important-informations" aria-label="More important informations permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Here's a bunch of important informations about chair adjusting, special types of chairs and prices.</p>
<h3 id="how-to-adjust-your-chair" >How to adjust your chair?<a href="#how-to-adjust-your-chair" aria-label="How to adjust your chair? permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>You need to go from the top to the bottom, not the opposite!</p>
<ol><li>Start by adjusting the height of the armrests so that they are just below your elbows. The armrests should not be too high or too low. Your shoulders should not sag, but they should not rise either.</li>
<li>Adjust the height of your chair so that the armrests are in line with your desk, even if your feet are no longer flat on the floor.</li>
<li>Remember to adjust the height of the backrest so that the lumbar support is in the right place, as well as the headrest to support your neck.</li>
<li>Adjust the depth of the seat so that there is enough space between the back of your knees and the beginning of the seat.</li>
<li>If after all these adjustments, your feet are not flat on the ground, get a footrest! Conversely, if your knees are too high, it means that your desk is probably too low for you.</li></ol>
<h3 id="the-off-center-rocking-mechanism" >The off-center rocking mechanism<a href="#the-off-center-rocking-mechanism" aria-label="The off-center rocking mechanism permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>On most chairs, the back presses on the backrest to trigger the tilt. But if you have lumbar problems, using your back could cause you pain. In this case, look into off-center rocking mechanics, where the impetus will come from your legs.</p>
<p>The seat tilts as if you were in a shell, in one piece. It is much more natural and respects the human anatomy. But of course these mechanisms are more expensive.</p>
<h3 id="standing-chairs" >Standing chairs<a href="#standing-chairs" aria-label="Standing chairs permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Standing chairs are a strange compromise that allows a relatively comfortable seat while remaining at a higher height than a normal chair. Some companies adopt them in meeting rooms under the pretext of <em>energizing</em> the people who use them.</p>
<p>But standing chairs should only be used by people who can't stand or sit for long periods of time. Those people have to work in different positions throughout the day (sitting or standing), and the standing chair gives them a third option.</p>
<p>Standing chairs can also be found in medical fields, like in dentists or physiotherapists cabinets, who want to work sitting, but need to get some height. So unless you have a specific need, avoid them.</p>
<h3 id="prices" >Prices<a href="#prices" aria-label="Prices permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>It's hard to find your way through the jungle of chair models and prices. Here are different price ranges to make your life easier. Note that they correspond to a purchase from a French retailer and include VAT.</p>
<p>The lowest price for an entry-level office chair with a range of adjustments that can be adapted to most people, and that can be used for a full day of work is between 450 and 600 euros.</p>
<p>What about the often recommended Aeron Miller? They can be found around 1600 euros in their latest version, and often cheaper second hand (between 300 and 600 euros, depending on the condition, the model and the options). Be careful, they exist in three sizes, but we often find only the B, the "standard" size. They are a bit of a luxury item with a "mesh" fabric that has no equivalent on the market. Unfortunately, the lack of a headrest (and the poor quality of the add-ons made by other brands) make them unadapted to people with neck injuries.</p>
<p>In the case of a kneeling chair, it will be between 150 and 300 euros depending on the model.</p>
<p>As for the more common armchairs like the Markus from IKEA, they cost around 250 euros. As alrady mentionned this is a very reasonable price, but it's not recommended as they do not offer any adjustment, especially for the armrests.</p>
<p>As for giant inflated balloons, you can find them from 30 to 180 euros (for a more stylish model), but most people should avoid them as they are not ergonomic. Note that it's possible to add an air cushion on any chair to obtain the same effect as a balloon, for a much smaller space. Count around 30 euros for a brand like Sissel Pro SITFIT or DISC'O'SIT.</p>
<h3 id="keyboards-mouses-monitors-and-laptops" >Keyboards, mouses, monitors and laptops<a href="#keyboards-mouses-monitors-and-laptops" aria-label="Keyboards, mouses, monitors and laptops permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>More and more ergonomists are recommending the use of narrower keyboards than the traditional model with numeric keypad, as it creates less travel and twisting when switching from keyboard to mouse, and the arm that uses the mouse stays in line more easily. And yes, the TKL (without numeric keypad) or 60% models are also more ergonomic than full sized ones.</p>
<p>Finally, your screen should not be too high or too low. If the stand doesn't allow you to go high enough, invest in an articulated arm or an adjustable stand. Or stick a book underneath! When you're comfortable, your eyes should look straight to the center of the screen.</p>
<p>That also means not working on a laptop sitting on the desk. A stand for the machine and an extra keyboard and mouse are the minimum you should demand from your employer if you spend hours on it.</p>
<em>A huge thank you to Catherine and Yvan Couloigner from <a href="https://www.laboutiquedudos.com/content/12-la-boutique-du-dos-brest-29200">La boutique du dos à Brest</a> for their welcome and their explanations! Catherine and Yvan have been selling chairs adapted to all types of people and pathologies for 14 years and have a great expertise in their field. If you are in Brittany, don't hesitate to contact them and come to the store, located at 16 rue de la Villeneuve, to benefit from their expertise.</em>Spinal Disc Herniation2023-03-03T17:22:26+01:00spinal-disc-herniation<h1 id="spinal-disc-herniation" >Spinal disc herniation<a href="#spinal-disc-herniation" aria-label="Spinal disc herniation permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This page contains practical tips and observation from carrying for my partner, who suffered from spinal disc herniation in 2013 (ironically, my father also had spinal disc herniation). This is not medical advice, go see your doctor if you have backpain.</p>
<p>So what is spinal disc herniation?</p>
<figure><blockquote cite="https://en.wikipedia.org/wiki/Spinal_disc_herniation">Spinal disc herniation is an injury to the cushioning and connective tissue between vertebrae, usually caused by excessive strain or trauma to the spine. It may result in back pain, pain or sensation in different parts of the body, and physical disability.</blockquote><figcaption><a href="https://en.wikipedia.org/wiki/Spinal_disc_herniation">Wikipedia</a></figcaption></figure><p>To make it even more clear: your spine is like an extremely tidy sandwich. Each vertebrae is a slice of bread, and in-between them, there's a soft thick slice of cheese that has the perfect size and allows the slices of bread to move when you bite, and it's so well done that the cheese never falls of.</p>
<p>Except for the day where you bend down one too many times, and the slice of cheese comes out, and now the bread pinches it. You cannot put the cheese back into place. Oh and the cheese is actually connected to your nerves.</p>
<p>Welcome to hell.</p>
<p>You suffer an unimaginable pain. Each movement sends high voltage bolts in your whole body. You can't sleep, you can't barely do anything anymore, and with that comes several after effects like losing your autonomy, social circle, etc.</p>
<figure><picture><source type="image/webp" srcset="img/herniated-disc-400.webp 660w, img/herniated-disc-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A radiography showing an herniated disc" srcset="img/herniated-disc-400.png 660w, img/herniated-disc-700.png 1440w" src="img/herniated-disc.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>That bloody cheese leaking out of the sandwich. | <small><a href="img/herniated-disc.png">Full size</a></small></figcaption> </figure><p>There are several ways of curing spinal disc herniation. My father got an operation to remove the herniated disc. He spend a few months without moving, laying on a bed after that. With time, his two vertebrates, now touching each other, kind of fused, which means he's not suffering anymore but has lost flexibility.</p>
<p>But what if you can't get an operation?</p>
<h2 id="dealing-with-pain" >Dealing with pain<a href="#dealing-with-pain" aria-label="Dealing with pain permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>You have to learn how to live with pain, and find ways of reducing it.</p>
<h3 id="painkillers" >Painkillers<a href="#painkillers" aria-label="Painkillers permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>For a time it's done with medicine. Painkillers that could calm a horse are administrated, and if they work for most people, they have several drawbacks.</p>
<ul><li>They often have life annoying side effects, like making you sleepy or dizzy</li>
<li>They create stomach burns and nausea</li>
<li>In some instances, you can create allergic reactions like dermatitis</li>
<li>They can create addiction</li></ul>
<p>And if that's not enough, they can mess with your brain. By administrating painkillers regularly for a long period of time (because spinal disc herniation will last years), the brain may loose it's capability to understand when there's pain, which can result in <a href="https://en.wikipedia.org/wiki/Fibromyalgia">Fibromyalgia</a>.</p>
<p>So painkillers work and are necessary at the beginning, but should be avoided when it's possible.</p>
<h3 id="kinesiotherapy" >Kinesiotherapy<a href="#kinesiotherapy" aria-label="Kinesiotherapy permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Better get used to it, kinesiotherapy is going to be a staple of life after spinal disc herniation. My partner goes every week to have massages to relieve pain.</p>
<p>More than a year after her spinal disc herniation, I learned about the <a href="https://en.wikipedia.org/wiki/McKenzie_method">McKenzie method</a>, which is a bit controversial.</p>
<p>My partner tried it out, as classic kinesiotherapy was not working, and surprisingly, the benefits where very real. She regained mobility and it helped her, reducing the pain she felt while moving.</p>
<p>So, it might not be a silver bullet, but you have a testimony that it works, at least for her. Maybe try it and see if it fits your needs?</p>
<h3 id="neurostimulation" >Neurostimulation<a href="#neurostimulation" aria-label="Neurostimulation permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>In France (where I live), rheumatologists are not knowledgeable about pain and their answer is always painkillers. The terrible thing about spinal disc herniation pain is how it self-sustains itself. You are in pain, so your whole body tenses up, resulting in more pain like <a href="https://en.wikipedia.org/wiki/Sciatica">Sciatica</a> crisis.</p>
<p>It took years for my partner to learn that, yes, pain specialists exist and that, at least in France, each major city has a center that is specialized in pain. However, it is very long to have an appointment (3 to 6 months) and your doctor needs to send a demand of registration to the center first.If you have a pain department or center near to your location, get to your doctor as soon as possible.</p>
<p>One of the major discoveries we made was the existence of neurostimulation as a way to reduce pain. It's an extremely simple system: a neurostimulator sends short electric bursts that alters the perception of pain by blurring it. It can be done with an operation, but can also be trans-cutaneous, by using electrodes. You often see this in hospitals.</p>
<p>Now the good news is: they exist in very small form factor.</p>
<figure><picture><source type="image/webp" srcset="img/tens-400.webp 660w, img/tens-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A picture showing a neurostimulator with electrodes" srcset="img/tens-400.jpg 660w, img/tens-700.jpg 1440w" src="img/tens.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>An example of using a portable neurostimulator to reduce pain. | <small><a href="img/tens.jpg">Full size</a></small></figcaption> </figure><p>My partner borrowed the same model as the one in the picture above, and the results were extremely positive. Suddenly she could take long walks again, relax before going to sleep, even do chores that were impossible to her before (like using a vacuum cleaner). After a few weeks, she had a prescription and bought one herself.</p>
<p>She's been using it for years now, and it allowed her to live a mostly normal life again. She sometimes use it one hour a day, sometimes several hours. When traveling by car, plane or train, she keeps it for the whole duration.</p>
<p>Now this tool is great, but it has flaws:</p>
<ul><li>Of course you have the cables. You get used to it, but they are sometimes cumbersome.</li>
<li>The battery lasts, but not a full day. Try to favor models without useless crap like touch screens.</li>
<li>The charging cable is not standard like USB-C, the connecting cables have a proprietary socket and they break/stop to work way too often and are expensive.</li>
<li>The electrodes can be used for a few weeks, but needs to be changed when the gel that glues them to the skin doesn't work anymore, resulting in more cost and waste.</li>
<li>The gel and type of wires that are used can trigger irritations or small burns when used for long period of time. They are different types you can try. My partner uses a model with silver wires.</li></ul>
<p>It looks like a lot of trouble, but it's actually nothing compared to the benefit of being able to live a normal life again.</p>
<h3 id="furniture-for-everyday-life" >Furniture for everyday life<a href="#furniture-for-everyday-life" aria-label="Furniture for everyday life permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>If you work at a desk all day, you need a dedicated chair. I already <a href="everything-you-need-to-know-to-choose-an-office-chair.html">wrote about this</a> so I won't redo it here. Go see a specialist, not a classic office furniture shop. And prepare some money, it's expensive. Consider it like a mattress you will keep 15 years and pay the price if you can afford it.</p>
<p>About mattresses, you will probably have to change yours. You need something that is firm enough to have your spinal chord in the right position, but soft enough that it won't compress your muscles. Finding this balance is extremely complicated and took us years. The way we achieved this is by taking a memory foam firm mattress and its bed frame, and adding a two centimeters memory foam mattress topper to gain more smoothness.</p>
<p>Buy all this online and profit of the free 30 to 60 night tryout return policy. We tried several time to buy in shops, but the feeling you have when trying it on site versus actually sleeping in it is totally different. Also don't hesitate to mix the brands of mattresses and mattresses toppers. Finally, if you travel by car, bring your mattress topper with you. When you don't know the quality of beds you are going to sleep in, it's good to an insurance policy.</p>
<p>If you drive, there are several things that can relieve the pain. First, prefer high habitat cars, like family breaks, and avoid low cars. You want to go up in the car, not to go down when entering. The straighter you sit the better, and the best way to do it is by adding memory foam cushion to avoid a narrow angle between your back and your legs. You can find models that have a hole where the sacrum is located, to reduce spinal cord compression. Favor them.</p>
<p>The clutch pedal in manual car is probably the main problem. Since it requires strength to be pressed and hold, as well as having a leg in suspension, my partner was not able to drive again. Unfortunately, changing cars for an automatic is not possible for everyone (including us), but if you were in the process of changing cars, think about it. Electric cars are particularly good, as they don't produce as much vibrations that are transmitted to your back (that can be reduced with a foam backrest).</p>
<h3 id="disability-recognition" >Disability recognition<a href="#disability-recognition" aria-label="Disability recognition permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>If your country has a disability recognition system, apply for it. You probably won't get money from it as spinal disc herniation is not considered grave enough, but you can probably get a disability card that can ease several parts of your life.</p>
<p>Among them:</p>
<ul><li>Not waiting in lines. This is super important, as it standing still can quickly create a lot of pain. Ruining the rest of your day because you wanted to buy stamps at the post office is not worth it.</li>
<li>Job opportunities. At least in France, employers are required by law to employ a percent of disabled people after they reach a certain size. They also get tax cuts by hiring disabled people, which always help when trying to convince you can work as well as others, and cost less.</li>
<li>Working time arrangements. You may not be able to work full time anymore due to the exhaustion your injury creates. When you are recognized as disabled, discussions around this topic are way easier, even if it depends on the country and its worker protection laws.</li>
<li>Getting recognition from society. Too many people diminish disabilities and say disabled persons just have to power through it. It's exhausting to hear, and being recognized helps to alleviate these situations.</li></ul>
<h2 id="your-injury-is-now-your-job" >Your injury is now your job<a href="#your-injury-is-now-your-job" aria-label="Your injury is now your job permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If all this sounds like a lot of work, it's because it is. The hardest part of this kind of injury (and disabilities in general) is to understand there's no going back to how things were before. You will have to input this handicap in every aspect of your life for at least the next five years.</p>
<p>You need to take your injury as your second job. And just like at your existing job, you will do what is required to make this thing work.</p>
<p>The mental charge is real and added to your existing ones like house keeping, work, kids. Furniture and tools require lots of money, which means only the richest people will have a faster recovery. If you have a partner, a lot of things will change and will need to be re-balanced. You might not be able to work for a while and financial dependency from your partner might happen, which always complicates things.</p>
<p>There's a new normal that needs to be acknowledged. One where there's always a cushion in the car ; where sleeping at the hotel or an host's room requires inquiry about the bed quality ; where you re-distribute chores in the house depending if it hurts or not to do them ; where you cannot help during renovation ; where you cannot lift your kid in your arms.</p>
<p>It's depressing, it's always going go be there, and it's nobody's fault. There's no one to blame, no one to be angry at, no one to shout at. Seeing a therapist is probably a good idea to get in terms with the situation. If you have a partner, they should probably see a therapist, as they will also feel this injustice, and cannot direct it at you. Once again, it's nobody's fault.</p>
<p>Take care and feel free to ask me question if you have any by using the links below.</p>
Drawing notes2022-06-05T15:55:38+02:00drawing-notes<h1 id="drawing-notes" >Drawing notes<a href="#drawing-notes" aria-label="Drawing notes permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This page aims to collect notes from various ressources I encountered while re-learning to draw.</p>
<figure><blockquote cite="/drawing.html">Drawing, like most craftsmanship, is about figuring out a process you find interesting and feel like doing thousands of times without getting bored.</blockquote><figcaption>— Me, <a href="/drawing.html">About drawing</a></figcaption></figure><p>As all craftsmanships, drawing is a complex mix of theorical and practical things to learn, remember and apply. Those pages aim to help me doing just that.</p>
<p>Those notes are public but heavily opinionated and are not to be taken as face value. Think abou them as cards you pick when you have to remember a specific thing.</p>
<p>I want to point out that a lot of these notes are inspired by the talented artist and teacher <a href="https://www.devinkorwin.com/">Devin Korwin</a>, whom books gave me the confidence to start drawing again. If you can spare the money, stop reading this and <a href="https://devinkorwin.gumroad.com/">buy his books</a>.</p>
Composition2023-03-03T17:22:26+01:00composition<h1 id="composition" >Composition<a href="#composition" aria-label="Composition permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Composition is an abstract language that can be manipulated to achieve artistic goals. Put in more plain language, it's the act of thinking from above in abstract shapes that will, even before anything is drawn, express the idea the artist is trying to communicate.</p>
<p>Triangles are a very good abstract shape to work with, as the brain focus more on the angles as focal points than the center of its shape like when using a square. It makes the eyes move into the frame and can convery different feelings.</p>
<figure><picture><source type="image/webp" srcset="img/composition-stable-400.webp 660w, img/composition-stable-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A painting by Dean Cornwell. Three explorers stand in front of a globe as if they were ready to sail around it." srcset="img/composition-stable-400.jpg 660w, img/composition-stable-700.jpg 1440w" src="img/composition-stable.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>An upright stable triangle gives a feeling of power and stability. Painting by Dean Cornwell. <a href="https://twitter.com/devinkorwin/status/1378389617259450378">Source</a> | <small><a href="img/composition-stable.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/composition-unstable-400.webp 660w, img/composition-unstable-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A painting by Dean Cornwell showing a woman being interrogated by what seems to be two officers." srcset="img/composition-unstable-400.jpg 660w, img/composition-unstable-700.jpg 1440w" src="img/composition-unstable.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>An inverted triangle creates an uneasy feeling that can help translate a tense situation. Painting by Dean Cornwell. <a href="https://twitter.com/devinkorwin/status/1378389607579066372">Source</a> | <small><a href="img/composition-unstable.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/composition-dynamic-400.webp 660w, img/composition-dynamic-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A painting by Dean Cornwell showing a woman with a knife defending herself against a man." srcset="img/composition-dynamic-400.jpg 660w, img/composition-dynamic-700.jpg 1440w" src="img/composition-dynamic.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>An asymmetrical triangle creates more dynamism, which is good for chaotic situations. Painting by Dean Cornwell. <a href="https://twitter.com/devinkorwin/status/1378389629485867009">Source</a> | <small><a href="img/composition-dynamic.jpg">Full size</a></small></figcaption> </figure><p>Outside of triangles, composition can use squares, rectangles and parallelepiped. Depending on their regularity and placement they can express opposite feelings.</p>
<figure><picture><source type="image/webp" srcset="img/composition-scaffolding-400.webp 660w, img/composition-scaffolding-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A painting by Dean Cornwell showing kids on a balcony." srcset="img/composition-scaffolding-400.jpg 660w, img/composition-scaffolding-700.jpg 1440w" src="img/composition-scaffolding.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Repeated angles creates a stable scaffolding that directs the eyes and help understand the situation. Painting by Dean Cornwell. <a href="https://twitter.com/devinkorwin/status/1378389652638461952">Source</a> | <small><a href="img/composition-scaffolding.jpg">Full size</a></small></figcaption> </figure><figure><picture><source type="image/webp" srcset="img/composition-unconsistent-400.webp 660w, img/composition-unconsistent-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A painting by Dean Cornwell showing two people in an uncertain situation on the sea." srcset="img/composition-unconsistent-400.jpg 660w, img/composition-unconsistent-700.jpg 1440w" src="img/composition-unconsistent.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Unstable angles in this scaffolding composition creates more uncertainty. Painting by Dean Cornwell. <a href="https://twitter.com/devinkorwin/status/1378389652638461952">Source</a> | <small><a href="img/composition-unconsistent.jpg">Full size</a></small></figcaption> </figure><p>Composition can be used in a macro-sense to give a broader intention, but also in a micro-sense, like in architecture or for shapes of an object. But the point is not to put golden ratios everywhere or calculate things.</p>
<p>Points to remember:</p>
<ol><li>Don't start drawing or painting right away</li>
<li>Think about the intention of the drawing/painting</li>
<li>Use abstract shapes to support the intention</li>
<li>Don't overdo it</li></ol>
Contrasts in drawing2023-03-03T17:22:26+01:00contrasts-in-drawing<h1 id="contrasts-in-drawing" >Contrasts in drawing<a href="#contrasts-in-drawing" aria-label="Contrasts in drawing permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Contrast is instinctively understood as the balance between dark and light values. But while drawing it can take several other forms, that will help maximizing the effect of the <a href="composition.html">composition</a>.</p>
<figure><blockquote cite="https://www.ageofempires.com/news/interview-with-craig-mullins-an-age-of-empires-illustrator/">I would define drawing [...], really as organization and expression of relationships.</blockquote><figcaption>— Craig Mullins, <a href="https://www.ageofempires.com/news/interview-with-craig-mullins-an-age-of-empires-illustrator/">Interview</a></figcaption></figure><p>There are many ways of creating contrasts, among them:</p>
<ul><li>Curves are opposed to straight lines</li>
<li>Larger strokes are opposed to thin strokes</li>
<li>Hard edges are opposed to soft edges or even lost edges</li>
<li>Light values are opposed to dark values</li>
<li>Etc.</li></ul>
<figure><picture><source type="image/webp" srcset="img/contrast-400.webp 660w, img/contrast-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Valentin Serov - Portrait of Princess Olga Orlova, sketch and final painting." srcset="img/contrast-400.jpg 660w, img/contrast-700.jpg 1440w" src="img/contrast.jpg" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>Valentin Serov - Portrait of Princess Olga Orlova. On the left side, several contrasts help identify how the painting will turn out. The hat is darker than the fur, which is darker than the dress. The Princess is mostly curvy lines, while the background is made of straight lines. Clothing creates hard edges, while the face has soft edges. | <small><a href="img/contrast.jpg">Full size</a></small></figcaption> </figure><p>Painters use drawing sketches as roadmaps, where relationships inform both the artistic intention, but also the practical way of achieving this intention, in the final painting.</p>
<p>Points to remember:</p>
<ol><li>Contrasts exist to reinforce the composition by creating relationships between elements.</li>
<li>Contrasts is not just the difference between dark and light values, but several other things that depend on the medium used to draw or paint.</li>
<li>Thinking in relationships is good to translate artistic intention, but also has practical benefits, like indirectly creating a roadmap for a more fleshed out piece done later.</li></ol>
Notes on BDSM2023-04-26T23:37:33+02:00notes-on-bdsm<h1 id="notes-on-bdsm" >Notes on BDSM<a href="#notes-on-bdsm" aria-label="Notes on BDSM permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p> This page contains my notes from the podcast <a href="https://soundcloud.com/voidjumper/ep5-nicole">Voidjumper & Nicole; on BDSM</a>. It's edited to make most of the informations I found interesting readable and condensed. Due to the sensitive nature of the topic, I tried to be as clear and safe as possible, but if you find any mistake or wrongness, please contact me so I can fix them. Thanks! </aside><p>BDSM, or more precisely <em>BDDSSM</em>, stands for <em>Bondage and Discipline, Domination and Submission, Sadism and Masochism</em>. <strong>BDSM is about creating a safe environment using frameworks, where people can safely play with those things</strong>.</p>
<p>People practicing BDSM can do, <strong>in context</strong>, things they would normally never do in their daily lives. If they strike their partner, or say things that could considered as objectifying, humiliating, or emotionally painful ; most people would not find such behavior acceptable and would warn their relatives to step out of these relationships.</p>
<h2 id="play-and-magic-circles" >Play and magic circles<a href="#play-and-magic-circles" aria-label="Play and magic circles permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Since BDSM is about playing together, it's inherently a game, and since it does it in a specific context it creates for the game, it can be seen as a <a href="https://en.wikipedia.org/wiki/Magic_circle_%28virtual_worlds%29">magic circle</a>, a space where normal rules of the world are suspended and replaced by new ones.</p>
<p>The term magic circle was initially coined by the Dutch historian/sociologist <a href="https://en.wikipedia.org/wiki/Johan_Huizinga">Johan Huizinga</a> in his <a href="https://en.wikipedia.org/wiki/Homo_Ludens">Homo Ludens</a> book, where he also listed what are the base characteristics of play.</p>
<p>Those characteristics are:</p>
<ol><li>Play is free, is in fact freedom, and is chosen.</li>
<li>Play is not real life, it's separated from our daily lives.</li>
<li>Play always has a duration and a location.</li>
<li>Play is order, which means rules are supreme, absolute and not negotiable.</li>
<li>Play is not tied to financial or material gain.</li></ol>
<aside><p>Side note</p> About rule 5: when gain is involved, rule 1 is broken. Because outside forces will intervene in the play to benefit from it, a player is not free of doing what they want. </aside><p>In addition to these characteristics, that can easily be interpreted as rules, BDSM tries to provide <em>frameworks</em> that enable play. Among them are <strong>SSC</strong> and <strong>RACK</strong>.</p>
<h2 id="ssc-rack-and-their-differences" >SSC, RACK, and their differences<a href="#ssc-rack-and-their-differences" aria-label="SSC, RACK, and their differences permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When using the SSC framework, everyone involved in the circle has to play in a <strong>Safe, Sane and Consensual</strong> manner.</p>
<p>Safe means preventing accidents and being equipped for emergencies. For example not choking someone without knowing how to do it properly. Not tying up a human being without having safety scissors nearby. Sane means not being intoxicated (alcohol, drugs), not doing stupid things (playing with fire and burning a house down). Think things in a sane manner. Consensual means asking if everyone on board is aware of what's going on. Is everyone in agreement, not intoxicated, not forced into this situation (see rule 5 mentioned previously).</p>
<p>RACK, or <strong>Risk Aware Consensual Kink</strong>, was made in reaction to SSC, following the idea that nobody can be 100% safe or sane 100% of the time. People can slip up, safety nets cannot prevent everything, and not everyone has the same notion of what is safe. So what happens if one person goes further than the other anticipated? It means risks are taken. So RACK is about everyone consenting to take risks.</p>
<p>Outside of the rules of SSC and RACK, the duration of play must be defined, details must be discussed about what each participant feels comfortable to do or not.</p>
<h2 id="talking-about-kinks" >Talking about kinks<a href="#talking-about-kinks" aria-label="Talking about kinks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>As it can be culturally complicated to talk about sex and kinks in many societies, participants trying to create a sexual or kinky relationship can feel awkward when talking about their desires, and can find themselves unable to explicitly say things.</p>
<p>BDSM encourages to make the conversation explicit and safe in a fun way: by making the conversation about kinks a game (and thus a magic circle) in itself. Establishing simple rules of talk that all participants agree to follow, like an order of passage, or a signal to notify others that the current kink discussed is not safe, can make the experience easier.</p>
<p>This type of conversation also allows participants to think about details or events that may happen. For example, if a person decides to act as an animal, are their play partner OK with them peeing or pooping during the act? What happens if they fall from stairs?</p>
<p>One of the most common rules is the definition of a safe word (the most common being "red", probably as a reference to traffic lights) that can be used when someone wants to stop. When used, the magic circle is immediately dissolved (as the rules are absolute) and everyone checks on each other.</p>
<h2 id="aftercare" >Aftercare<a href="#aftercare" aria-label="Aftercare permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>As explained before, BDSM allows its participants to play with dangerous things, and act in ways that are normally non-tolerated.</p>
<p>Which is why, when the game is over and the magic circle is broken, <strong>aftercare must happen to help participants get back in the real world and their normal relationships</strong>.</p>
<p>Eating chocolate together, drinking ice-cold water, cuddling, but also enforcing positivity and reminding everyone of their normal relationship, are ways of reinforcing that the game is over.</p>
<p>It's also important to debrief it, for example the next day, to know what everyone liked or dislike. It's, again, important to make everything explicit.</p>
<h2 id="usage-outside-of-bdsm" >Usage outside of BDSM<a href="#usage-outside-of-bdsm" aria-label="Usage outside of BDSM permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>If the BDSM can seem intimidating, its play/magic circle aspect and frameworks for consent can actually be used by non-BDSM practitioners.</p>
<p>The <em>make it explicit in a fun way</em> method when talking about kinks can also be used to get or give consent in situations where the participants might suddenly need it. Flirt, for example, has become a complicated topic due to the difficulty of balancing seduction and consent. Going directly for a kiss without consent can be felt as weird or aggressive.</p>
<p>But asking for consent in a fun and explicit way can help everyone out. Asking for consent with something like <em>"I've been looking at your lips for a while, and I really want to kiss them. Can I?"</em> allows the participants to stay both safe and in the mood. The person on the receiving hand can also choose to play, for example by using banter, and answer something in the style of <em>"In the future you don't have to ask"</em>.</p>
<p>Also, as terminologies like <em>daddy</em> or <em>spanking</em> have become cultural norm and shorthand terms, some people who are already intimate and practicing some kinky games involving power might think it's unnecessary to discuss them. But the reality is that nobody that didn't ask for it wants to get spanked.</p>
<p>Asking for consent is also a way of slowing things down, and giving everyone the time to eliminate the rush, but also profit from the situation, which can make it even more enjoyable.</p>
<h2 id="in-conclusion" >In conclusion<a href="#in-conclusion" aria-label="In conclusion permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When people talk about BDSM they immediately think about dominatrix women in leather, with long boots and whips ; stern men hitting women with their belts while being called "daddy".</p>
<p>It is a part of the community, but it's not what BDSM is. It can be playful, joyous or celebratory too. <strong>BDSM is this magical moment that exists separated from everything else</strong>.</p>
Chemical love combo2023-05-02T21:29:45+02:00chemical-love-combo<h1 id="the-chemical-love-combo" >The chemical love combo<a href="#the-chemical-love-combo" aria-label="The chemical love combo permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>Chemical Love is one of the a signature moves of I-no, a character from the fighting game series Guilty Gear. The Chemical Love combos are one of the most complex things I ever had to master in a fighting game, and the biggest knowledge check I ever encountered just to be able to properly use a character. It took me days of trial and error to make it work for the first time. It's a great testimony about how older fighting games used to be humbling bottomless pits.</p>
<h2 id="the-basics" >The basics<a href="#the-basics" aria-label="The basics permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Chemical Love is a powerful move: when doing it, I-no flips herself into the air, does a front split, and launches a sound wave what goes almost full screen and knocks the opponent down (a very powerful thing in Guilty Gear as recovery timings are fixed and give plenty of time to prepare your next attack). It's counterpart is that his execution is demanding: a half circle backward then forward motion + Kick button (or →↘↓↙← → Kick.)</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/chemical.mp4" type="video/mp4"></video><figcaption>The Chemical Love. We can see the input motion is happening as the character crouches before the move happens.</figcaption></figure><p>But this move isn't just a standalone attack you throw out of nowhere, it's also a core part of I-no's combos. And that's where it becomes both complicated and amazing.</p>
<p>Guilty Gear XX provides a move cancelling technique called <em>Roman Cancel</em>. By pressing 3 buttons, it frees the character from what is it currently doing, while leaving its existing projectiles active. The basic version creates a red halo around the character.</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/roman-cancel.mp4" type="video/mp4"></video><figcaption>A classic Roman Cancel.</figcaption></figure><p>Some of those cancels, when done during a specific time window that usually last 2 to 4 frames (32 to 64 milliseconds) and only exists on specific moves, are called <em>Force Roman Cancel</em> (or FRC) and show a blue halo instead of red. The Chemical Love has an FRC point, meaning it can be used during combo.</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/chemical-frc.mp4" type="video/mp4"></video><figcaption>The Chemical Love can only be cancelled at a specific timing, creating a blue Force Roman Cancel.</figcaption></figure><p>But as I-no lifts herself in the air at the first frame of the move, cancelling it makes her fall to the ground before she can continue and attack. And as I-no does not have a traditional running motion, she cannot catch the opponent she just hit with the sound wave.</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/no-combo.mp4" type="video/mp4"></video><figcaption>Chemical Love is cancelled, I-no falls on the ground, then dashes forward but is too late to continue.</figcaption></figure><p>Guilty Gear XX allows character to dash in the air, and I-no can do it too. Since we are canceling the Chemical Love, a move that lifts I-no in the air, she should be able to just air dash without having to go on the ground first, right?</p>
<h2 id="the-air-the-ground-and-the-tiger" >The air, the ground, and the tiger<a href="#the-air-the-ground-and-the-tiger" aria-label="The air, the ground, and the tiger permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Well no. Because if the moves gives some <em>properties</em> akin to being in the air (like invincibility on the legs), I-no is considered <em>on the ground</em>, thus she cannot air dash. She has to jump first, then do the Chemical Love in the air, then cancel it with the FRC, then air dash.</p>
<p>Jumping and then inputing the complicated motion of the Chemical Love is near to impossible to do in such a short amount of time, which is why a <em>tiger knee</em> motion has to be used. A Tiger Knee motion means inputing the move motion, then an extra upward direction, then the button that triggers the move. By doing so, the game input buffer is tricked: it has the move motion in memory, but only triggers it when the button is pressed, which happens after the jump.</p>
<p>For I-no, it means doing a half-circle backward that ends with a up-backward direction that acts as a jump, then forward, then the button (or →↘↓↙←↖ → Kick.). By doing so, I-no does the Chemical Love close to the ground, but is considered in the air.</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/tiger-knee.mp4" type="video/mp4"></video><figcaption>A Chemical Love done on the ground, then then done in the air using the Tiger Knee technique. The trail of dust indicates I-no jumped before doing the move.</figcaption></figure><p>Once the character is properly considered in the air and the cancel can happen and I-no can technically air dash, the player has to input a double tap forward extremely fast before I-no falls. It's almost impossible to do when close to the ground, so once again the game buffer must be abused. Instead of doing Chemical Love > 3 buttons > Forward, Forward, it's necessary to input Chemical Love > Forward > 3 Buttons > Forward.</p>
<p>This way, the I-no doesn't have the time to fall back on the ground and instantly air dashes outside of the cancel, allowing the combo to continue.</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/chemical-combo.mp4" type="video/mp4"></video><figcaption>The final combo: Chemical Love done with a Tiger Knee motion, followed by Forward, then 3 buttons to cancel during the Force Roman Cancel Window, then Forward again, triggering the air dash, and then a few hits.</figcaption></figure><p>And that's it, that's all the basics needed to do a proper combo with I-no! But it's not over. Depending on the starter before the Chemical Love, the distance, and other factors, like the weight of the character, the remaining of the combo changes.</p>
<h2 id="but-wait-there-s-more" >But wait, there's more!<a href="#but-wait-there-s-more" aria-label="But wait, there's more! permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>There's actually another way of doing this combo! In Guilty Gear XX, there's a technique called <em>Jump Install</em>, which consists of making the game believe the character is both on the ground and in the air, allowing them to <em>store</em> a jump or an air dash until they go back to their idle stance.</p>
<p>The way it works is by using normal moves that are <em>jump-cancellable</em>, which means their recovery animations can be cancelled by the character jumping. But the animation of the jump can also be cancelled by another move before the jump starts, yet the jump still registers. Which means the character does an attack, cancels its animation to jump, then cancels the jump animation with another attack. Nothing on the screen indicates a Jump Install happened, it can only be seen after the fact, when a character uses the air dash or the additional jump, in a situation where it's normally not possible.</p>
<p>Which is perfect for I-no! If she can make the game believe she is in the air while she is on the ground, when she cancels the Chemical Love with the FRC, she can air dash without doing the additional Tiger Knee motion.</p>
<figure><video autoplay playsinline loop mute preload="metadata" src="img/ino-final-combo.mp4" type="video/mp4"></video><figcaption>The Chemical Love combo using the Jump Install technique. Notice there's no dust trail, which means I-no did the move without the Tiger Knee.</figcaption></figure><h2 id="that-s-all-folks" >That's all folks<a href="#that-s-all-folks" aria-label="That's all folks permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>This combo is an incredible knowledge check even by fighting games standards of the period. It requires not only to know how I-no works, but also to know some Guilty Gear specific techniques that are not explained in the game manual, as well as others, more generic fighting games techniques. Before the internet allowed knowledge to be shared more easily, it was near to impossible to learn this by yourself.</p>
<p>Today, most fighting games don't try put essential stuff like this behind a knowledge or execution barrier. For business reasons, they prefer to tone down the strength of the moves and reduce the complexity of motions, which makes the game more accessible, less punitive, and overall, more successful. Still, it feels <em>good</em> to do this combo in a real match. It's the same feeling as beating a hard boss in any other game. I miss this kind of feeling in more recent games.</p>
Third Strike Defensive and Offensive Mechanics2023-10-06T17:29:21+02:00third-strike-defensive-and-offensive-mechanics<h1 id="third-strike-defensive-and-offensive-mechanics" >Third Strike Defensive and Offensive Mechanics<a href="#third-strike-defensive-and-offensive-mechanics" aria-label="Third Strike Defensive and Offensive Mechanics permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>This page is a summary of the <a href="https://www.youtube.com/watch?v=SeKeLTNFqNM">3s After School Episode 2</a> and contains strategies to manage defense in Third Strike.</p>
<h2 id="the-80-20-rule" >The 80/20 rule<a href="#the-80-20-rule" aria-label="The 80/20 rule permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Spend 80% of your time playing reactively and 20% playing proactively. Playing reactively means watching the opponent and reacting to its actions, while proactive play is forcing your agenda on your opponent.</p>
<p>Reactive play should happen on the ground or by jumping vertically, as jumping forward/backward removes control and options, while giving away the landing position to the opponent, as most characters cannot change it.</p>
<p>In order to be able to play reactively in a proper way, it's important to study matchups and find good answers and punishes for each characters strong buttons.</p>
<h2 id="wake-up-mechanics" >Wake up mechanics<a href="#wake-up-mechanics" aria-label="Wake up mechanics permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The charts below explain how offense and defense works in Third Strike, based on frame data and character options.</p>
<h3 id="how-it-works" >How it works<a href="#how-it-works" aria-label="How it works permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<figure><picture><source type="image/webp" srcset="img/wakeup-mechanics-1-400.webp 660w, img/wakeup-mechanics-1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A table chart showing attack and defensive options in Third Strike" srcset="img/wakeup-mechanics-1-400.png 660w, img/wakeup-mechanics-1-700.png 1440w" src="img/wakeup-mechanics-1.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A chart of attack and defensive options in Third Strike. | <small><a href="img/wakeup-mechanics-1.png">Full size</a></small></figcaption> </figure><ul><li>Throws come out in 3 frames. The character doing the throw is vulnerable during this period. It's possible to tech a throw before it comes out during frame 4 and 5, and then after it came out, from frame 7 to frame 11 (5 frames total).</li>
<li>From frame 1 to frame 6 after waking up, characters are invincible to throws. It means the attacker has to delay its throw and that a meaty throw is active on frame 7.</li>
<li>When the parry window is open (by taping forward or down) it's impossible to tech throws until the window closes (10 frames on the ground, 7 frames in the air). Therefore when an opponent can die from chip damage and they have no choice but to parry, throw is very strong.</li></ul>
<h3 id="summary-of-options" >Summary of options<a href="#summary-of-options" aria-label="Summary of options permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<figure><picture><source type="image/webp" srcset="img/wakeup-mechanics-2-400.webp 660w, img/wakeup-mechanics-2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="A table chart showing attack and defensive options in Third Strike" srcset="img/wakeup-mechanics-2-400.png 660w, img/wakeup-mechanics-2-700.png 1440w" src="img/wakeup-mechanics-2.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A chart of attack and defensive options in Third Strike. | <small><a href="img/wakeup-mechanics-2.png">Full size</a></small></figcaption> </figure><ol><li>Delayed tech while blocking is the strongest option as it only loses to delayed meaty. It can be enhanced by inputing an 1 frame airborne move or an invincible dragon punch.</li>
<li>Reversal jump (if cornered) is the second better option as it only loses to meaty attack</li>
<li>1 frame airborne move (if the character has one) it third as it creates a reset.</li>
<li>Reversal throws and reversal attacks are less effective than delayed tech.</li>
<li>Reversal parry is the worst of all, and should only used against chip damage (but against it loses to throws) and in situation where it's guaranted.</li></ol>
<h2 id="option-selects" >Option selects<a href="#option-selects" aria-label="Option selects permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>An option select is inputing several commands and letting the game choose the best one.</p>
<h3 id="buffering-os" >Buffering OS<a href="#buffering-os" aria-label="Buffering OS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>DED is an offensive option select that automatically cancels a normal move with a special if the normal lands.</p>
<ol><li>Input a cancellable normal, then a special</li>
<li>If the normal lands on hit or block, the special comes out.</li>
<li>If the normal doesn't land, the special does not come out.</li></ol>
<h3 id="ded" >DED<a href="#ded" aria-label="DED permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>DED is an offensive option select that automatically choses between doing a super or not doing a super after a move, based on the available meter.</p>
<ol><li>Input amove, then a super while the super bar is near completion.</li>
<li>If the move hits, the super bar is filled and the super comes out.</li>
<li>If the move does not hit, the super bar is not filled and th esuper does not come out.</li></ol>
<h3 id="crouch-tech-os" >Crouch Tech OS<a href="#crouch-tech-os" aria-label="Crouch Tech OS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Crouch Tech OS is a defensive option select that automatically choses between a crouching ligth punch and a throw tech.</p>
<ol><li>Input down + LP + LK.</li>
<li>If no opponent throw, LP comes out due to the input priority system.</li>
<li>If the opponent throws, a throw tech happens.</li></ol>
<h3 id="normal-tech-os" >Normal + Tech OS<a href="#normal-tech-os" aria-label="Normal + Tech OS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Crouch Tech OS is a defensive option select that automatically choses between any normal and a throw tech.</p>
<ol><li>Input a normal move, then a throw.</li>
<li>If the opponent throws, a tech throw happens.</li>
<li>If the opponent doesn't throw, the normal comes out.</li></ol>
<h3 id="parry-buffering-os" >Parry buffering OS<a href="#parry-buffering-os" aria-label="Parry buffering OS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>Crouch Tech OS is a defensive option select that automatically choses between a parry and an attack.</p>
<ol><li>Input parry, then a normal move.</li>
<li>If the opponent attacks, the move is parried, then the attack comes out.</li>
<li>If the opponent does not attack, the attack comes out normally.</li></ol>
<h3 id="sggk" >SGGK<a href="#sggk" aria-label="SGGK permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>SGGK is a defensive option select that automatically choses between a trow, a tech throw or a hit after inputing a parry.</p>
<p>Here's how it works:</p>
<ol><li>Input a parry (tap forward or low)</li>
<li>Do a kara-throw (character specific, cancelling the first frame of a move by a throw)</li></ol>
<p>Situations:</p>
<ol><li>Opponent does nothing -> the game kara-throws.</li>
<li>Opponent throws -> the game techs the opponent throw.</li>
<li>Opponent attacks -> the game parries, then the attack used in the kara-throw comes out.</li></ol>
<h3 id="jump-tech-os" >Jump tech OS<a href="#jump-tech-os" aria-label="Jump tech OS permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h3>
<p>SGGK is a defensive option select that automatically choses between a jump and a throw tech.</p>
<ol><li>Press jump and throw at the same time.</li>
<li>If the opponent throws, a tech throw happens.</li>
<li>If the opponent doesn't throw, jump happens.</li></ol>
Third Strike Ryu Matchups Notes2023-10-06T17:29:21+02:00third-strike-ryu-matchups-notes<h1 id="third-strike-ryu-matchups-notes" >Third Strike Ryu Matchups Notes<a href="#third-strike-ryu-matchups-notes" aria-label="Third Strike Ryu Matchups Notes permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<aside><p>Side note</p> Due to a bug, Ryu has +2 frames of additional block stun when crouched. In this page, if a frame data has two values separated by <em>/</em>, it means ob block standing / on block crouching. Frame data is expressed from the point of view of the attacker. </aside>
<p>Definitions:</p>
<dl><dt>Joudan</dt><dd>Ryu "donkey kick" 41236 + kick</dd><dt>P2HPJ</dt><dd>Parry > 2HP > Joudan Kick EX</dd></dl>
<h2 id="vs-dudley" >Vs Dudley<a href="#vs-dudley" aria-label="Vs Dudley permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<aside><p>Side note</p> Almost all Dudley target combos are either slightly positive or negative on hit (from -1 to +3) and all of them are safe or slightly positive on block (from -1 to +2) and give Dudley enough space to be safe. It's better to not challenge them after hit and block. </aside><p>Dudley standing normals:</p>
<dl><dt>LP</dt><dd>+3 on block, target with MP is +1.</dd><dt>6 + LP</dt><dd>+1/+3 on block, better range than LP but 1 frame slower on startup.</dd><dt>MP</dt><dd>-1/+1 on block, 3f startup, don't challenge if spammed.</dd><dt>6 + MP</dt><dd>-1/+1 on block.</dd><dt>HP</dt><dd>-1/+1 on block, can be whiff punished by far MK easily if out of range, HK also work. 2MK is dangerous. P2HPJ Works.</dd><dt>HP (charged)</dt><dd>-1/-3 on block, can be whiff punished by 2HK during startup, otherwise it trades. P2HPJ works.</dd><dt>LK</dt><dd>+2/+4 on block.</dd><dt>MK</dt><dd>0/+2 on block.</dd><dt>6 + MK</dt><dd>+2/+4 on block.</dd><dt>HK</dt><dd><strong>+4/+6 on block</strong>, can be whiff punished by MK, 2MK or 2HK.</dd><dt>6 + HK</dt><dd>-2 on block, overhead.</dd></dl>
<p>Dudley Crouching normals:</p>
<p>All normals are either 0 or positive on block except for 2MK.</p>
<dl><dt>2 + MK</dt><dd> -10 on block but put Dudley out of range of everything fast enough except for 2HK.</dd><dt>2 + HK</dt><dd><strong>+3 on block</strong>, don't challenge after.</dd></dl>
<p>Dudley specials:</p>
<dl><dt>Machine Gun Blow (41236 + P)</dt><dd>-3/-1, -9/-7, -12/-15 and -15/-13 (EX) on block. Pushes Dudley back on block. Light version cannot be punished, medium and strong can be punished with 2MK > Tatsumaki, EX can be punish with raw Ex Joudan.</dd><dt>Ducking Straight (41236 + K > P)</dt><dd>-7 on block (standing, does not hit low). Punishable on block with HP Shoryuken if Dudley is not at max range.</dd><dt>Ducking Uppercut (41236 + K > P)</dt><dd>-12/-14 on block. Punishable on block with 2MK > Medium Tatsumaki, but needs to be done fast.</dd><dt>Short Swing Blow (63214 + K)</dt><dd>0/+2 on block. Resets situation.</dd></dl>
<p>Dudley Super Arts:</p>
<dl><dt>Rocket Uppercut</dt><dd>Startup is 0, easy to punish with HP > Joudan EX when Dudley falls down.</dd><dt>Rolling Thunder</dt><dd>Startup is 1, -9/-11 on block. Can be punished with DP.</dd><dt>Corkscrew Blow</dt><dd>Startup is 0, -10/-12 on block. Can be punished with 2MK > Tatsumaki if guarded standing and if Dudley is not too far. Beware of frame traps Corkscrew Blow > Corkscrew Blow.</dd></dl>
Rethinking the engineering and processes of interface creation at Arkea2023-10-05T19:31:31+02:00rethinking-the-engineering-and-processes-of-interface-creation-at-arkea<h1 id="rethinking-the-engineering-and-processes-of-interface-creation-at-arkea" >Rethinking the engineering and processes of interface creation at Arkea<a href="#rethinking-the-engineering-and-processes-of-interface-creation-at-arkea" aria-label="Rethinking the engineering and processes of interface creation at Arkea permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<p>From 2018 to 2020 I joined the Arkea banking group as a UI engineer to help modernize the technical stack and processes. We moved from several intricate <abbr title="An extension of the CSS language">SASS</abbr> codebases to a single library of components, flexible enough to support several designs and 100% <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> compliant.</p>
<p>As this technical change restricted a very freeform design culture, I volunteered to participate in design meetings to help the designers, marketers and product owners understand how to work with a design system.</p>
<p>This team effort resulted in a sharp decline of interface, accessibility and responsive bugs. It reduced drastically the cost of making, delivering and testing user interfaces.</p>
<figure><picture><source type="image/webp" srcset="img/cmb1-400.webp 660w, img/cmb1-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Crédit Mutuel Arkea website screen capture" srcset="img/cmb1-400.png 660w, img/cmb1-700.png 1440w" src="img/cmb1.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>A work in progress screen capture of the CMB website. At the time of screening, the goal was to recreate the most common features like bank transfers, credit card management, etc. | <small><a href="img/cmb1.png">Full size</a></small></figcaption> </figure>
<figure><picture><source type="image/webp" srcset="img/cmb2-400.webp 660w, img/cmb2-700.webp 1440w" sizes="(max-width: 630px) 400px, 700px" /><img loading="lazy" alt="Crédit Mutuel Arkea storybook screen capture" srcset="img/cmb2-400.png 660w, img/cmb2-700.png 1440w" src="img/cmb2.png" sizes="(max-width: 630px) 400px, 700px"></picture><figcaption>All components, as well as documentation and demos were stored inside a Storybook to facilitate development. | <small><a href="img/cmb2.png">Full size</a></small></figcaption> </figure><h2 id="the-client-s" >The client(s)<a href="#the-client-s" aria-label="The client(s) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>The Arkea group is a local banking behemot here in Brittany, employing around 5000 persons. The Credit Mutuel de Bretagne (shortened as <em>CMB</em>) is the oldest business of the group, with agencies in almost all cities in the region.</p>
<p>The CMB has a technical banking solution used internally by multiple subsidiaries that all have their specific needs. It also sells its banking solution to external companies, resulting in a very large codebase.</p>
<p>I joined a 6 persons team in charge of developing user interfaces for all subsidiaries and clients and delivering them to other teams in the same service (around 100 people).</p>
<h2 id="the-problem-s" >The problem(s)<a href="#the-problem-s" aria-label="The problem(s) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Quite surprisingly, the whole service didn't have a dedicated design team. All product owners were grouped together in a single service, not in the same building, where they wrote specifications and designed their own interfaces by copy pasting and assembling bits of existing interfaces with Microsoft Paint. A single product owner with design tools experience would then translate those specifications into usable interfaces and deliver them to our team.</p>
<p>User interfaces were initially developed in isolation as mockups, using HTML, SASS and native presentational JavaScript. Each subsidiaries or client had its own static "gallery" of mockup templates. Once developed, the code was delivered to teams of Java + JavaScript developers that implemented them into AngularJS applications and "splitted" the CSS code in smaller chunks using a Gulp task (affectionately named <em>Merger3000</em>).</p>
<p>Of course this freeform way of working resulted in a lot of problems during implementation. Bits of existing interfaces would be merged into others. Product owners with no relevant UX or UI experience would sometimes create extremely complex user experiences, or try to differentiate their projects from others by asking for specific design changes like extra colors or font-sizes.</p>
<p>There was no graphical chart or design system. An existing SASS codebase developed by an external company years before acted as a basis. To allow design transgressions, each project parent <code><span><</span>div></code> had a class acting as a namespace. Inside those namespace, the CSS of existing elements was copied then modified for the specific design changes, resulting in an incredible amount of duplicated code for just tiny details.</p>
<p>For the main website, the uncompressed main CSS file weighted around 7 mega bytes.</p>
<p>Duplicate this process by dozens of projects for a dozen subsidiaries and clients, and you realize the amount of code our team was in charge of. This situation made every project extremely expensive and long to deliver. The AngularJS Teams, bothered by the process, would sometimes fix the CSS problems themselves, resulting in a delta between our CSS and theirs. And if we delivered once again our CSS, it would erase theirs, resulting into regression only visible in production.</p>
<p>The put it simply: the design process, the technical stack and the delivery methods needed to change.</p>
<h2 id="the-solution-s" >The solution(s)<a href="#the-solution-s" aria-label="The solution(s) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>In 2019 our team was asked to reduce its time to market and reduce accessibility issues. Jérémie Le Scoezec, a member of our team, had already identified solutions and proposed the creation of a design system made of Web Components. As they are native to browsers, Web Components can be used in any situation. We could use just one of them in our existing pages, or use them in future stacks (at the time the successor of AngularJS wasn't yet decided between React, Angular and VueJS).</p>
<p>Jérémie and Marc Foletto, another member of the team, joined a task force for several months and started the implementation of our future design system. I took the role of technical adviser of our team, resulting in more contact and dialog with product owners. We decided together to deliver HTML/CSS mockups more close to the final product, so product owners could experience them and give us feedback before the AngularJS Teams took over.</p>
<p>When our design system library started to take shape, I decided we should use it in small projects and see what happens. With the help of Jonathan Perchoc, a senior AngularJS developer from the AngularJS Team, we created a entire insurance subscription course that made it to production, validating the proof of concept.</p>
<p>This new approach created by Jérémie and Marc made our team work incredibly more easy. Accessibility problems could be fixed in a single file and then propagated to all clients. The AngularJS Team didn't have to touch any CSS, resulting in an easier identification of graphical bugs. The delivery tasks using Jenkins took seconds, instead of the 40 minutes needed for our old mockups. If the cost per components was higher than basic HTML and CSS, their reuse progressively reduced the time needed to assemble user interfaces.</p>
<p>After a year the library was mature and the team fully operational and involved in the project, thanks to JavaScript training sessions and meetings. We decided to deprecate our old mockups and only deliver user interfaces made with the library.</p>
<p>However, this technical change was not very appreciated by product owners. They feared this new process, not yet tested at scale, would cost more and delay delivery dates. They also felt disempowered on the design side. The library in itself was not a full design system with constraints, since there was no graphical chart. But it acted as a single source of truth for design elements, it enforced accessibility and good practices, resulting in less freedom.</p>
<p>The design habits that clashed with accessibility and good practices were numerous. First, most pages had a lot of text, some of which were for good reasons (legal, accessibility), and most often for bad reasons (repetition of existing information). Secondly, to avoid surcharging pages, a lot of these texts were either hidden inside modals, or sprinkled in the page. This resulted in strange situations, like paragraphs in the middle of forms, which is not compatible with screen readers ; or text about the usability of a form being located after the form.</p>
<p>Moving all those texts before the forms resulted in extremely verbose pages which made the marketing team unhappy. I volunteered to participate in weekly design meetings with them, to answer questions and find solutions. Most of the time, my role during these meetings was to help question the importance of each element. Do we need to repeat this information so many times? What texts could be read the first time the user visits the page and can be hidden in an accordion on a second visit?</p>
<p>My involvement allowed me to know almost all components in the library and avoid duplicates or propose existing solutions to problems. Working together helped reduce the anxiety and fears of product owners and marketers and streamlined the design, development and delivery process.</p>
<h2 id="lesson-s-learned" >Lesson(s) learned<a href="#lesson-s-learned" aria-label="Lesson(s) learned permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<ul><li>An old codebase becomes technical debt when collaborating, testing, debugging and delivering become painfull.</li>
<li>Major technical stacks changes opportunities happen during small windows of time and should not be missed.</li>
<li>Making big changes is not just about code but also about people, communication and training are as important as clean code.</li>
<li>Web components are hard, and accessibility is even harder.</li></ul>
Printed letters smart emails and modern blog stacks at Compte CO22021-11-12T16:47:35+01:00printed-letters-smart-emails-and-modern-blog-stacks-at-compte-co2<h1 id="printed-letters-smart-emails-and-modern-blog-stacks-at-compte-c-o-2" >Printed letters, smart emails and modern blog stacks at Compte CO2<a href="#printed-letters-smart-emails-and-modern-blog-stacks-at-compte-c-o-2" aria-label="Printed letters, smart emails and modern blog stacks at Compte CO2 permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h1>
<ul><li><a href="#in-short">In short</a></li>
<li><a href="#the-client-s">The client(s</a>)</li>
<li><a href="#the-problem-s">The problem(s</a>)</li>
<li><a href="#the-solution-s">The solution(s</a>)</li>
<li><a href="#lesson-s-learned">Lesson(s</a> learned)</li></ul>
<h2 id="in-short" >In short<a href="#in-short" aria-label="In short permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When I arrived at Compte CO2, the company was launching new products and needed a total revamp of all its frontend styles. With the help of a graphic designer we started a six month marathon, redoing everything from the main website to the blog, but also email templates and print styles for printed bank documents.</p>
<p>This short mission was a massive step forward in my career, as I was able to learn a lot about moderm JavaScript tooling and frameworks. I self-studied React and NodeJS before starting, and developed my first official component library for a client.</p>
<p>All those efforts resulted in a more cohesive vision for the company and a greater understanding of modern web development practices for me.</p>
<h2 id="the-client-s" >The client(s)<a href="#the-client-s" aria-label="The client(s) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>Compte CO2 is a banking startup dedicated to fighting climate change. To do so, it has its own money, the CO2, who's value is indexed on the official CO2 gaz price. Clients opening a bank account can either pay in Euros or in CO2.</p>
<p>Compte CO2 had a fairly recent custom made banking API entirely in NodeJS. Its website was made with Wordpress, and its mobile apps were created using React Native. React was well liked at the company and the CTO's wish was to invest more into it for all parts of the organization.</p>
<p>The company headcount was small with only 6 people.</p>
<h2 id="the-problem-s" >The problem(s)<a href="#the-problem-s" aria-label="The problem(s) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>When I joined in February 2018, the company was just issuing its first credit cards and had just launched its app on iOS and Android devices.</p>
<p>Both came with a new design that hadn't been applied to the web. The two main enginers were busy working on banking features and updates for the apps, with no time for the redesign of the frontends, thus the reason I was hired.</p>
<p>With a deadline set to September 2018, there was very little time and a lot to do.</p>
<h2 id="the-solution-s" >The solution(s)<a href="#the-solution-s" aria-label="The solution(s) permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<p>As many other companies that grew fast, Compte CO2 didn't have design guidelines or a graphical chart. My first mission was, obviously, to contact the freelance graphic designer responsible for the new design, organize his work as reusable assets, and try to create design tokens. What are the main colors, the fonts, their sizes? Do we have a bank of images? Packshots of our credit card? Screen captures of our smartphone apps?</p>
<p>Once it was done, I noticed that two of my colleagues were losing a ton of time manually editing documents in word. Those letters were super important: we glued the credit card on them before sending them to the client. This is when I realized we didn't have an automated way of generating print documents directly from our API. That was the second mission I took upon myself.</p>
<p>Once I had access to our clients API, I created a new NodeJS app that used Puppeteer, a library which provides a high-level API to control headless Chrome. Using this headless Chrome, I generated virtual pages using custom made HTML/CSS templates and our clients data, then saved them as a PDF file using the browser print API. I also programmed an automated deletion after some time, to avoid stocking too many files.</p>
<p>Of course it meant developing templates made uniquely for print, which is not the most... exciting stuff? But it proved very useful a few days later, when I learned we also didn't have printable account statements too, a feature that was very often requested by clients. I spent a few more days on this before giving it back to our main backend enginer who implemented it in our mobile applications.</p>
<hr><p>I was then supposed to start working on the website, but it turned out the design was not finished. To avoid wasting time, I tackled a new challenge: emails. The company had a lot of templates for things like real time payments, money transfers, and general communication.</p>
<p>Our system was built on Mailjet's API, and so no massive rework was to be expected on the backend. But on the frontend, the new graphical chart, with its use of SVG, gradients and custom fonts was extremely tricky to put into email templates. It is not well known outside of frontend development but most mail providers, even famous ones like Gmail, restrict the HTML and CSS rules that can be used on their platform.</p>
<p>Sometimes it's impossible to use a gradient, sometimes it's a background image, or a custom font. It becomes a puzzle when you have to provide readable email to clients. That's when I learned about progressive enhancement and degradation in frontend development. It's a way of coding in HTML and CSS that allows the design to look perfect on most modern platforms, and degrade in a controlled way for others.</p>
<p>Mailjet has an amazing feature which allows to simulate an email with the HTML and CSS constraints of most mainstream mail providers, apps and operating systems. Using this, I was able to create new and shinny templates that were still enjoyable and practical for people with outdated software and hardware.</p>
<hr><p>And finally the website! As we were running out of time, the webdesigner could only deliver classic, desktop templates. Our CTO wanted to part ways with Wordpress, at least for the frontend, and asked me to work on staticaly generated website. At the time the new cool kid in town was Gatsby, a static site generator built upon React and GraphQL.</p>
<p>While the CTO was busy turning our Wordpress into a headless CMS and connecting it to Gatsby, I started coding as the deadline was approaching. I soon realized I was going too fast and shooting myself in the foot, duplicating too much code. I took a step back to analyze the designs that were delivered, trying to detect patterns, identify common components, their variations, and organize them in categories.</p>
<p>Once I was more confident, I restarted developing the React components, and it was a net positive for reusability and performance. It allowed the creation of a very interactive homepage, full of amusing widgets, converters and galeries. Performances were way better than the original Wordpress website with things like lazy loading and preload rules, rising our SEO scores even higher. When the homepage was done, I worked on the blog, a very important source of trafic for us because of its quality content.</p>
<p>It was going smooth on the React side, but we faced difficulties with Gatsby. The framework was in version 1 at the time, and things like static queries were not yet implemented, resulting in a lot of props for things like basic images. Connecting our frontend to Wordpress with Graphql took a lot of time, as data from Wordpress was not always available and needed to be reworked. Weeks of works were lost due to these constraints, which resulted in more stress and pressure.</p>
<p>In the end I wasn't able to see the website completely finished by the time my mission ended in August 2018. I left the company after delivering all the components necessary to build the expected pages, but it took several more weeks for our CTO to finish it.</p>
<h2 id="lesson-s-learned" >Lesson(s) learned<a href="#lesson-s-learned" aria-label="Lesson(s) learned permalink" style="position:relative; z-index:-1; opacity:30%; display: inline-block;width: 1ch;height: 2ch;margin-left: 1ch;"><svg fill="var(--text)" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg></a></h2>
<ul><li>Knowledge in languages such as HTML and CSS is extremely usefull in situation you are not used too, like old software or hardware.</li>
<li>Progressive enhancement and degradation is an often forgotten part of accessibility.</li>
<li>Modern development techniques are useful and often tempting, but sometimes projects are just too young and result in way too much time lost.</li>
<li>Components are definitely the future of building interfaces for well structued projects.</li></ul>