Thomasorus

Now

2023-04-26T21:34:39Z

Now#

What I'm working on right now.

Tasks#

[@]Ongoing task !!! Put plinths on walls
[@]Ongoing task ! Finish porting my design system in the website
[ ]Opened task !! Create a website rating fighting games by their features
[ ]Opened task ! Design new furniture for the living room
[ ]Opened task ! Frame pictures in the living room

[~~] Cerca CSS~~

[] An article about how to achieve 2D look in 3D

[~~] The lore of a story I had in mind for a long time~~

[] Learning and using VIM

Definition#

[ ]: Opened task
[@]: Ongoing task
[~]: Paused or abandonned task
[x]: Completed task

Tools

2022-01-01T23:39:41Z

Tools#

A collection of tools I use or made.

Why I make my own tools#

As software developers we are all the time required to follow the next big thing and use new frameworks or libraries. 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.

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?

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.

It's a reappropriation of the means of production towards self-discovery.

Keyboards

2023-03-03T16:22:26Z

Keyboards#

I use two keyboards: the Happy Hacking Keyboard (HHKB) by PFU and a Happy Hacking Keyboard plate replica made in China.

Happy Hacking Keyboard#

The happy hacking keyboard | Full size

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 japanese keyset. As for all HHKBs, the switches are Topre.

HHKB plate replica#

My plate replica of HHKB | Full size

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.

Curriculum vitae

2021-11-12T15:47:35Z

Curriculum Vitae#

Writing in progress...

Raspberry Pi

2023-03-03T16:22:26Z

My Raspberry Pi configuration#

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.

I use a Raspberry Pi 4 with 8 gigs or ram and an aluminium heatsink.

Full size

After a lot of testing I ended using Dietpi. 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.

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).

I use the 32bit version as the 64bit has bugs.

Full size

Dietpi installation guide#

This guide is mostly for my own use but feel free to use it.

Basic setup#

If you are on Wifi, edit the dietpi and dietpi-wifi files in the boot folder before inserting the sd card, as dietpi will trigger apt update and apt upgrade on launch.
Use dietpi-config 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).
Configure the language, keyboard and locale.
Using dietpi-software from the command line launches a menu with ready to use software install. The Optimized software contains the window managers, the additional software contains things like git, openssh, vim and other tools.
If you want to use i3, install i3, i3lock, i3status and suckless-tools.
By default dietpi launches in the terminal. To launch to the window manager, use dietpi-config, go to autostart options. You'll see a list, go Desktops and press Enter on LightDM Login Mask, 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.

Other programs#

thunar as a file manager.
chromium-browser for browsing
Hardware acceleration following this tutorial
blueman to manager bluetooth devices
mps-youtube and youtube-dl to play youtube music in the terminal. The youtube-dl package is old, you have to update it using pip3: pip3 install --upgrade youtube-dl and use your own Youtube V3 Api Key. Set it inside mps-youtube with set api_key KEY.
By default dietpi has no emoji support or foreign languages like Japanese, you might want to install fonts to support them.
I use feh to randomize wallpapers (it's inside my i3 config file)

Chrome extensions#

Ublock original
Noscript
Ninja cookie
1PasswordX
h264ify

i3 config file#

My config file is available on github.

Whiteboard

2022-08-28T11:34:05Z

Whiteboard#

This page references temporary things I need to store somewhere. Consider it like my post-it wall.

Things I need to study or try:

Arcade Stick

2023-03-03T16:22:26Z

Arcade sticks#

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 Sega Astro City) and discovered how comfortable and pleasant the experience was. I decided I wanted to play on an arcade stick.

Different models of arcade sticks during one of our local fighting game sessions. | Full size

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.

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 dual-mods. 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.

A typical hackpad from the Xbox 360 era. | Full size

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.

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.

I had several models through the years.

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. | Full size

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. | Full size

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. | Full size

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. | Full size

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. | Full size

Around 2017 I re-did a Playstation 2 stick with a hackpad, using a cheap bootleg case and leftovers buttons. | Full size

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. | Full size

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. | Full size

Aesthetics

2023-03-03T16:22:26Z

Aesthetics#

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.

Software#

I like minimalist interfaces that work both in light and dark mode.

Left text editor by 100 rabbits | Full size

Ronin image editor by 100 rabbits | Full size

Color and visual language#

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:

Text
Time
Journal

Dijo habbit tracker by NerdyPepper | Full size

Orca music programming tool by 100 rabbits | Full size

Presentation#

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.

Fortunae finance tool by uonai | Full size

The i3 window manager featuring the terminal RSS reader newsboat and the terminal music player MPSYT | Full size

Fortunae finance tool by uonai | Full size

Displaying data#

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.

But I'm not really nostalgic of the aesthetic. It's just more functionnal.

Ronbun time tracking tool by me | Full size

A capture of the Uxn virtual stack machine by 100 rabbits | Full size

A map | Full size

Abstract animations#

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);

Art by lvl374

Illustration#

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.

The added bonus: it's possible to animate them when they are in SVG, making the website more alive.

Art by @jellyflavor on twitter | Full size

Art by Gaako_illust

Objects#

I like objects two ways:

Either they are minimalist and self explanoratory
Or they are are complex and don't hide their complexity

In both situation, I like that they are analogic. No touch screen for example, I prefer real buttons.

Radio by Dieter Rams | Full size

Pocket Operator music instrument | Full size

Giveaway

2023-03-03T16:22:26Z

Giveaway list#

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.).

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).

Audigy internal soundcard#

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.

Full size

Cheap DIY PS2 arcade stick#

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.

Note: if you are not interested in the case but want the part that's OK, I have some leftovers too.

Full size

Telex broadcast XLR helmet#

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.

Full size

Macbook Pro 13 inches 2013#

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.

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.

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.

Please consider people in dire need of a computer before asking for this one.

Full size

Raspberry Pi model B with cables#

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.

Full size

Ps2 adapter#

A simple Playstation 2 to USB adapter.

Full size

64 gigabytes SSD#

A small SSD from when it was super expensive.

Full size

Xbox 360 pad#

For games!

Full size

Art journey

2023-10-31T09:08:58Z

Art journey#

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.

Part 1: Initial inspirations#

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.

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.

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.

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.

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. | Full size

Pink Floyd's "Wish You Were Here" album cover created by Storm Elvin Thorgerson. | Full size

Pink Floyd's "A Momentary Lapse of Reason" album cover created by Storm Elvin Thorgerson. | Full size

Pink Floyd's "The Division Bell" album cover created by Storm Elvin Thorgerson. | Full size

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.

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. | Full size

Hugo Pratt's Corto Maltese series impressed me with its black and white renditions. | Full size

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.

A Wojtek Siudmak painting. Siudmak qualifies his style as fantastic hyper-realism. | Full size

A Wojtek Siudmak painting. Siudmak was well known in France in the eighties and nineties for his covers of the Folio SF pocket editions. | Full size

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.

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. | Full size

Katsuhiro Ōtomo's Akira, one of the most influential and visually impressive comics ever draw. The animated movie animation is also a masterpiece. | Full size

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.

Tsutomu Nihei's BLAME! manga. | Full size

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.

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.

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.

Art was always an afterthought, a dreamy escape from the annoyance of high school life in the pre-smartphone era.

That changed a year later, after I graduated from high school.

Kaku

2025-08-17T14:57:51+02:00

Kaku 書く#

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.

Purpose and mission#

Kaku was created as a replacement for Markdown in my own projects. There are two main reasons for its creation:

I don't like some syntax choices of Markdown, for example the use of of square brackets both for images and links.
Markdown does not allow using some HTML tags like <video>, <audio> or <dl>.

Syntax#

Typography#

Title 1#

# Title

Will return:

<h1>Title</h1>

Title#

Title 2#

## Title 2

Will return:

<h2>Title 2</h2>

Title 2#

Same for titles 3 to 6...

Bold#

*bold*

Will return:

<strong>bold</strong>

bold

Emphasis#

_emphasis_

Will return:

<em>emphasis</em>

emphasis

Code#

`code`

Will return:

<code>code</code>

code

Code Block#

code block

Will return:

<pre>
  <code>code block</code>
</pre>

code block

Strike through#

~strike~

Will return:

<del>strike</del>

~~strike~~

Quotes#

Quotes can take up to 4 arguments:

The quote itself
The author
The source of the quote
The url of the quote

Example:

(quote: I am the quoted text! author: Author of quote source: Source of quote link: url_of_quote)

Will return:

<figure>
    <blockquote cite="url_of_quote">
        I am the quoted text! 
    </blockquote>
    <figcaption>—Author of quote, <a href="url_of_quote"> Source of quote</a></figcaption>
</figure>

I am the quoted text!

— Author of quote, Source of quote

Links#

Links can take up to 3 arguments:

The link url
The text of the link
The text for the accessibility label (optional)
The text for the title (optional)

Example:

(link: https://thomasorus.com text: My link text label: My label title: My title)

Will return:

<a href="https://thomasorus.com" aria-label="My label" title="My title">
My link text
</a>

My link text

Images#

Images can take up to 3 arguments:

The image name or url
The image alt text for accessibility
The image caption (optionnal, will create a figure and figcaption)

Image with alt text : (image: img_url, alt: the alternate text)

Will return:

(image: sailor.jpeg alt: the alternate text)

Full size

Image with caption :

(image: sailor.jpeg alt: the alternate text figcaption: the text under the image)

Will return:

<figure>
     <img src="/sailor.jpeg alt="the alternate text">
     <figcaption>the text under the image</figcaption>
</figure>

the text under the image | Full size

Bullet lists#

- AAA
- BBB
- CCC

Will return:

<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
</ul>

Ordered lists#

+ Number 1
+ Number 1
+ Number 1

Will return:

<ol>
    <li>Number 1</li>
    <li>Number 2</li>
    <li>Number 3</li>
</ol>

Number 1
Number 1
Number 1

Descriptive lists#

? Term 1 : definition 1
? Term 2 : definition 2

Will return:

<dl>
    <dt>Term 1</dt>
    <dd>definition 1</dd>
    <dt>Term 2</dt>
    <dd>definition 2</dd>
</dl>

Term 1: definition 1
Term 2: definition 2

HR#

----

Will return:

<hr>

Videos and audios#

Videos can take up to 2 arguments:

The video name or url (mp3 only for audio)
If a video you can add a autoplay parameter to use the video as a gif

Classic video:

(video: sailor-arcade.mp4 figcaption: My figcaption)

Will return:

<video controls="" preload="metadata" src="sailor-arcade.mp4" type="video/mp4"></video>

My figcaption

Video as gif:

(video: sailor-arcade.mp4 autoplay figcaption: My figcaption)

Will return:

<video autoplay="true" playsinline="true" loop="true" mute="true" preload="metadata" src="sailor-arcade.mp4" type="video/mp4"></video>

My figcaption

Audio:

(audio: audioUrl)

Will return:

<audio controls="" preload="metadata" src="audioUrl" type="audio/mpeg"></audio>

Note: all audio and video elements come with the preload="metadata" attribute to help slower connections.

Side note#

{ Some text }

Will return:

<aside>
<p>Side note</p>
Some text
</aside>

Details / Summary#

(details: This is the main text summary: This is the summary)

Will return:

<details>
<summary>This is the summary</summary> 
This is the main text
</details>

This is the summary

This is the main text

Ronbun

2022-03-13T19:07:40Z

Ronbun 論文#

Ronbun (paper) is my static site generator. It's built with nodejs and uses Kaku as a markup language and imagemagick on the server to process images. It also process time tracking and presents itas graphics.

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 Kaku parser try as much as possible to provide light and accessible pages by using standard HTML techniques.

Ronbun was created as a self discovery project following my philosophy about personal projects.

Ronbun's repo is on github.

Next features:

Add sitemap

Global goals:

Provide more stats on the tracker
Full rewrite in a more generally available language (C, Python...)

Moyo

2025-09-01T22:04:48+02:00

# Moyō 模様

Moyō 模様 (pattern) is a collection of patterns in CSS I use for my website. Most of them were created as the months passed and I tweaked them for my time tracker tool.

Moyo comes as a single SVG file containing all the patterns. If you are not familiar with SVG, an SVG file can use a <defs> tag to store graphical objects that you will use later. Each pattern is defined inside the <pattern> tag and each one has an id attribute. Those ids can then be used inside other SVGs.

How to use#

Copy paste the content of this file inside your template and use the desired pattern.

<svg height="100" width="100">
 <rect style="fill: url(#checks);" height="100" width="100"></rect>
</svg>

Colors are automatically defined by two CSS rules: the color value of the text (aka currentColor) and the background value on the div containing them (if none, the <body>).

Two patterns (seigaiha and yinyang) default to a white background, which can be changed by using a css custom property.

#seigaiha, #yinyang {
    --background: red;
}

Demo#

#checks

#checks-diagonal

#grid

#grid-medium

#cross-dots

#vertical-lines

#horizontal-lines

#diagonal-lines-left

#diagonal-lines-right

#vertical-stripes

#horizontal-stripes

#diagonal-stripes-left

#diagonal-stripes-right

#double-diagonal-stripes

#zig-zag

#zig-zag-3d

#triangles

#quarter-circles

#seigaiha

#wave

#yinyang

#circles-small

#circles-medium

#circles-large

#stars

#squares

#paper

#cubes

Ryuko

2024-10-20T17:09:59Z

Ryūkō 流行#

Ryūkō is my design system, currently powering this website. It was created as a way to organize and reuse design elements.

Design tokens

2024-11-19T14:26:18Z

Design tokens#

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.

Fonts#

Editorial New Regular is for titles.

Inter is the default font for most texts.

IBM Plex Mono is for code blocks.

Spacings#

Spacings are used to determine space between elements. They can be used both in CSS margins and paddings.

This is a large margin/padding

This is a small margin/padding

Animations#

Animations are used either to convey information or for styling reasons.

Glitch effect

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.

Border Radius#

Two styles of rounded corners, used mainly on buttons and forms.

Radius small Radius medium

Colors#

Colors are used for specific content of pages in correlation with black and white. They are balanced using the accessible palette tool to ensure they have the consistent lightness and contrast.

Teal is for projects
Yellow is for journal
Red is for the portfolio
Blue is for knowledge
Purple and pink are for personal

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.

--black: #000000;

--white: #ffffff;

--grey: #eeeeee;

--grey-dark: #aaaaaa;

--grey-darker: #555555;

--grey-pitchblack: #222222;

--yellow: #f2d336;

--yellow-dark: #dfc130;

--yellow-darker: #98841f;

--teal: #70eba7;

--teal-dark: #5fc88f;

--teal-darker: #479e6d;

--pink: #ffadc9;

--pink-dark: #ff85ad;

--pink-darker: #d6245f;

--blue: #f37149;

--blue-dark: #dd5d36;

--blue-darker: #c93d13;

--red: #9094fe;

--red-dark: #767aef;

--red-darker: #595fd9;

Themes#

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:

--text
--background
--accent
--background-dark
--border

{ .portfolio parent class }

{ .projects parent class }

{ .journal parent class }

{ .knowledge parent class }

{ .about parent class }

Icons#

Each section of the website has its own icon illustrating its content. All icons are organized following these rules:

color is the individual
white is the unknow
black is the action

All icons consume colors defined in the themes.

Age of Trial

2020-11-23T00:00:00Z

Age of Trial#

The Age of Trial is the age kids are sent to participate into the War on Brambles. They have to serve for two cycles before going home. Depending on their social standing they are given different roles. The most fortunate are given strategist and secure positions to ensure their families won't lose them. The common people are trained to battle and a lot of them never goes back home.

Bas Gros Poing

2023-03-03T16:22:26Z

Bas Gros Poing is a website and podcast dedicated to fighting games#

Full size

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.

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.

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.

Art Eater

2023-03-03T16:22:26Z

Art Eater provides in depth discussion about visual art in contemporary culture#

Full size

Art Eater was initially the personal blog of Richmond Lee, where he published posts about animation and cultural influences in video games. He was well known for his article about the animation of Darkstalkers, or his series "Buddhist's Guide to Asura's Wrath".

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.

Art Eater was one of my favorite websites ever, so I contacted Richmond and proposed to redo the website for free, because it has to be on the internet. We dug into Richmond's archives, the Archive.org Web Machine, and managed to salvage almost everything.

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.

Visit the Art Eater website.

Tracking

2021-11-12T15:47:36Z

Tracking#

I track time 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.

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.

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.

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.

To me tracking time doesn't mean trying to be more productive, but the opposite.

2019

2021-11-12T15:47:36Z

2019 Overview#

Readings of 2019#

All the things I read in 2019.

... Means the series is still ongoing but that I started it in 2019

Novels#

The Remembrance of Earth's Past trilogy - Liu Cixin
The unfathomable depth of loneliness - Hao Jinfang
The Book of the New Sun Vol.1 - Gene Wolf
Viking Mythology - Neil Gamain

Mangas#

Beastars...
Vinland Saga...
Kingdom...
Yagate Kimi ni Naru (Bloom into You)
Shamo
Sun Ken Rock
Kusuriya no Hitorigoto...
Goblin Slayer...
Blame! (reprint)
Aposimz...
No gun's life...
At the Mountains of Madness (Lovecraft by Gou Tanabe)
In the abyss of time (Lovecraft by Gou Tanabe)
Shishunki Renaissance! David-kun
Gunnm (reprint)
Gunnm Last Order
Gunnm: Mars Chronicles...
Blue Giant
Saltiness

Comics#

Shangri La
Mécanique Céleste

Art books#

Gustave Doré (Catalogue d'exposition Gustave Doré - Musée d'Orsay)
Katsuya Terrada Real Size

Magazines#

L'étiquette 1 & 2
Atom Magazine

Notable articles#

Writings of 2019#

All the things I wrote in 2019.

Wrote#

interviewed#

Samurai Showdown: Le retour d'une franchise culte... et un nouvel âge d'or du jeu de combat?

Published#

Trickle-Down Economics in the FGC and E-Sports

Played#

Flappy Fighter
Untitled Goose Game
Mortal Kombat XI
Samurai Showdown 2019
Apex Legends
Furi
Thumper
Céleste
Hollow Knight
The Red Strings Club
Tekken 7
Disco Elysium
A Plague Tale: Innocence

Coded#

Podcast Ouvert
Claviers mécaniques - Frontend
Art Eater
A podcast player
Some concepts for UIs
My wiki engine
A ton of interfaces at work with accessibility
Web components with accessibility

Watched in 2019#

All the things I watched in 2019.

... Means the series is still ongoing but that I started it in 2019

Anime#

Carole & Tuesday
Sailor Moon S1 (original show)

Movies#

Promare

Documentaries#

10 years with Hayao Miyazaki

Series#

Mindhunter

Tv shows#

Terrace House

Notable videos#

How Mind Control Saved Oddworld: Abe's Odyssey
The Real Fake Cameras Of Toy Story 4

My ideal phone

2021-11-12T15:47:36Z

My ideal phone#

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.

Ideally the hardware would have:

A physical keyboard like the Blackberry phones
An energy efficient and readable small screen
A 4G antenna to allow sharing connections
An USB-C port for charging and data transfer
A headphone jack for music and microphone
A big storage capacity

On the software side:

Phone calls and texts of course
The ability to use contacts, calendars and notes from a third party provider instead of storing it locally
A podcast app with search on the Apple directory, download and play
A music application that can play local files but also download them from a private library
A few utility and productivity apps like calendar, calculator, notes, etc...
A few discussion apps for open source services like signal and connections

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.

The soft power of JavaScript

2022-03-13T19:07:40Z

The soft power of JavaScript#

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.

I feel it works this way:

Big Tech releases thing.js and people who worked on it promote it in conferences
Tech influencers see thing.js as a new revenue opportunity that may stick on the long run and start investing in it
They publish books, record courses, write blog posts and create a lot of noise around thing.js
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 thing.js and that it's a big tech product
thing.js 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
Rince and repeat

To me this spiral of events narrows our ability to think outside this ecosystem. It gives us the illusion of choice (React, Vue, Angular, Svelte?) and simplicity (just npm install!) and automatically makes us mold projects to the ecosystem (it's an app not a website) and increases the overall complexity.

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.

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!

— Someone, somewhere

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 old way 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.

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 thing.js but if other-thing.js is better.

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.

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.

21/10/2020

I removed the computer

2022-03-13T19:03:30Z

I removed the computer#

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.

But one day, it changed.

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 work position. It wasn't a problem when I was doing productive 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.

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.

And there's this procrastination problem. When I don't feel like doing anything, I sit at my desk, and I use it. I refresh my feeds, I launch programs, I mindlessly seek something that could free me from this anxious state I'm in. Of course it never works and I sometimes leave the desk frustrated. I had free time and did nothing, I didn't even relax is a common feeling.

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 create a setup 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.

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.

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.

15/11/2020

Renovation journal

2022-03-13T19:03:30Z

Renovation journal#

This is the journal of my apartment renovation.

November 16th 2020#

First day of renovations!

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.

I had to remove plates of polystyrene glued to the entrance and the corridor ceiling and remove the wallpaper from the entrance hall.

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.

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.

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.

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.

November 17th 2020#

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.

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.

November 19th 2020#

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 L'école du micro d'argent from IAM. The first song starts this way:

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

This song gave me a burst of motivation and confidence and I decided I wasn't going let a damn ceiling dictate my life! Eat that frog 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!

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.

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.

I managed to talk with the renovation contractor to fix a date for the walls demolition. He said to me is Saturday ok and I answered wait what this Saturday 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.

November 20th 2020#

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.

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 SORRY IT'S GONNA BE NOISY AS HELL FOR A DAY. We went home and eat soba.

November 21th 2020#

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.

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.

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!

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.

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.

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 dozens of screws! It took me hours to remove them all!

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.

And oh boy. 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.

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.

I already knew when I started this project that things don't go as planned and always cost more than you think, 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.

I went home around 6pm, showered, took the car again to get us Bò Búns. We started watching my Yamada neighbors, but I was so tired I went to bed in the middle. I fell asleep instantly.

November 22 2020#

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.

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.

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?!

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!

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.

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... EVERYTHING CAME IN A SINGLE SHEET. 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.

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.

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.

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.

Right now I feel like a builder in the Grand Design 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.

November 23 2020#

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.

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.

November 24 2020#

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.

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.

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...

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.

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.

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.

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.

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.

November 25th 2020#

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. My body is ready I thought while I was climbing to the fourth floor.

Oh jeez my body was so NOT ready! First I charged the bin with the paneling boards. Probably overly optimistic, I put a little too much 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.

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.

November 26th 2020#

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!

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.

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!

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.

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.

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.

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.

When looking inside the cupboard I finally realized how old 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.

I cleaned the kitchen and received a text message. It was my friend saying his girlfriend say NO. I'll have to move the cabinets down by myself, sigh. 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.

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... Yeah, I should remove it.

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 snowing dry paint in the kitchen I just finished cleaning.

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 Oh no out loud. So I took the broom and undertook the absolutely relaxing, not arm hurting at all task of sweeping my kitchen ceiling.

It took me around 20 minutes and time for cleaning afterwards. Once I was done I texted Coralie _How about pizza :smirk_emoji:_ and she texted back I already bought one. This woman can anticipate my needs like no one.

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 Grand Design on Youtube. In this episode a couple overspends while renovating a chapel. Wow they're crazy I thought while gluttonously eating a pizza slice.

December 2 2020#

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.

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.

On Tuesday I was supposed to go but decided not to. I was demotivated.

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!

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.

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.

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.

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.

December 4, 2020#

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.

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.

Well at least that's cleared!

December 9, 2020#

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.

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.

I spent around two and a half hours doing the entrance. It was a very enjoyable and meditative task.

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?!

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.

December 11, 2020#

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.

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.

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.

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.

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.

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.

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.

December 14, 2020#

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.

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.

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.

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.

December 15, 2020#

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.

I was feeling good, so I thought come on, why not start with a ceiling?! I connected everything and started and 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. 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.

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.

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.

December 16, 2020#

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.

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.

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 my kitchen but an Ikea kitchen inside my house. 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.

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.

December 17, 2020#

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!

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.

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.

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.

December 19, 2020#

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.

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.

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.

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.

December 20, 2020#

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.

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.

December 21, 2020#

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.

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.

I'll have to take an appointment with a seller. Maybe there are obvious solutions I'm not seeing.

December 22, 2020#

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. I'M SO SICK OF PLASTER.

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.

December 23, 2020#

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.

I decided to not remove it and just fix the small holes there and there, if that's possible of course.

December 24, 2020#

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!

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!

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.

December 26, 2020#

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 Darknet Diaries while working, an amazing podcast telling stories about hackers, penetration testing and many other things.

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.

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.

Went home to learn that a storm named Bella will hit our city tonight. Unfortunately I didn't close the shutters so I had to go back and seal everything.

December 28, 2020#

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.

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.

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.

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.

Overall a productive day, which quite surprisingly I spent without listening to any music or podcast. I also finally got 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.

December 29, 2020#

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.

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.

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.

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.

December 30, 2020

A productive day!

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 ok this is enough and each time I had to go back and buy more. So this time I was determined to buy the BIG BUCKET. So I arrived at the stored, rushed straight for it and, took the bigger bucket and... it was light.

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. WHAT IS GOING ON. I thought forget about the bigger bucket, take the usual one... But there were none left.

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 why is it so light I don't understand. 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.

I was so curious I wanted to see what it looked like so I opened the bucket and found something that looked like... Coconut foam dessert?! 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.

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).

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 my first smooth and ready to paint wall! And it's so smooooooth when you touch it.

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.

I think I spent the whole day listening to a single song 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.

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.

December 31, 2020#

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 better 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.

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.

January 1, 2021#

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 one wall. 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.

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.

January 3, 2021#

I took a few days to rest and recharge and now... I'm okay I guess.

So today I went back and started a plastering extravaganza. 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.

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.

I listened to the last episode of the very good podcast Les démons du midi which is about video game music. It was a very good choice.

January 4, 2021#

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.

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.

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!

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.

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 oh my, it's true that I bought an apartment with a black floor. I quickly realized that, since I didn't protect the floor, I had splashes of plaster everywhere. It gave me a feeling of undone that bothered my achievement sense!

So of course 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?

BUT THIS IS IT. I HAVE CLEAN WALLS. CLEAN FLOORS. CLEAN CEILINGS. I AM THE KING OF THE WORLD!

January 5, 2020#

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.

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.

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.

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!

January 6, 2020#

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.

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.

I'm thinking of asking friend to come and help put everything down and then I'll drive all this once and for all.

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.

January 8, 2020#

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.

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.

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.

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.

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 the total opposite of our tastes.

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 relaxing. 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?!

We sit there in the demo space and started talking. We realized we were in a full brutalist paradox. 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.

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.

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".

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.

January 9, 2020#

We went kitchen hunting 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.

He made us take the grand tour. He described everything. 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.

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.

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.

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.

January 14, 2020#

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.

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).

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.

January 15, 2020#

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.

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 hated doing plaster. It was like a gut hate!

January 16, 2021#

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.

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.

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.

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 old than when it took us 20 minutes to choose handles for kitchen cabinets. We also saw the oven, extractor and other things.

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.

But I liked it.

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.

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.

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 winner. Organizing a competition to save a bit of money is not my thing.

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.

So why was I trying to compromise for the kitchen?

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.

January 18, 2021#

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.

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.

When the kitchen maker was done I left.

January 26, 2021#

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!

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.

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!

January 28, 2021#

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.

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.

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.

February 4, 2021#

So, where to begin...

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!

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.

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.

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).

Disappointed, I went back to my car, grabbed my phone, texted my partner that doors are a pain 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.

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.

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. WHY ARE DOORS SO HARD TO BUY???. I went to another store, no doors left too. Finally, I went to a third store and no more luck.

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.

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 add a freaking door in my corridor and there was no door in sight. 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.

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 I NEEDED DOORS. 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.

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 I found doors. 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 before driving her.

BUT WAIT THERE'S MORE.

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 then I'll drive my partner. All this in less then two hours.

And what does my non-functioning, door-obsessed brain concludes from thi situation? This is fine.

I go to bed exhausted.

February 5, 2021#

I wake up at 1am. I think about my doors.

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.

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.

I wake up at 8:30am. I think about my doors.

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 really 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.

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.

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 NOW. The website indicates me the nearest opened IKEA. It's a two and half hour drive. Still not fully woken, I conclude that, this is fine. When I explain this to my partner, she looks at me without understanding everything except I'm planning to drive 5 hours to pick a door. So she asks, why don't you just buy a wood plank?

I look at her in disbelief for a moment then realize: she is a GENIUS. 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 two 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...

I walk in at 11:30. I find a door lying on the ground of my apartment.

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.

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.

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 those tiles actually don't look super wide. I measure them. They are 16 centimeters wide. I picked the wrong size. I resist the urge to kick my car.

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.

I tell them I ordered two doors, ended up with three doors but that I actually needed one door.

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.

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 heavy. 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.

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.

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.

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. It's okay I say. I'll find a wood plank tomorrow.

I have no door and I must scream.

February 06, 2021#

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.

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.

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.

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.

Around 5:15pm all the ruble was in my car, I left for the recycling center. On the road my phone played Don't stop believing 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.

So I blasted Nickelback.

February 8, 2021#

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.

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.

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!

While cutting the beams I also gained access to the old gaz conducts. I thought about cutting them but was unsure. What if by any chance there was some gaz left? I could blow up the apartment! And die! I was already tired and my anxiety started to peek.

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.

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 CONDEMNED DEVICE 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.

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 gaz is leaking I'm gonna die and kill everyone in the building.

Of course there was no gaz. But I was so panicked I used some hardened plaster and filled the gaz pipes, just in case. When I was done I went home and during the evening I kept wondering if I come back tomorrow and the building exploded it's gonna be my fault.

February 9, 2021#

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.

February 10, 2021#

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.

Surely you know what that means right? Yup, moving two steel bottles in a row. It was hard. 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.

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.

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.

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.

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?!

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.

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.

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.

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.

So here we go, we now have one more month to finish this. I'm both relieved and annoyed.

February 11, 2021#

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.

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!

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.

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.

February 12, 2021#

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.

February 13, 2021#

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.

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.

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.

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.

February 15, 2021#

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.

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.

After a few hours of work I glued everything in place and crossed fingers for no leaks.

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.

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 tell me what's going on!

February 16, 2021#

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.

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.

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.

February 17, 2021#

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.

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.

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.

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.

After going home I layed on the sofa for hours, half stuck and in pain. That was not how I had planned this week.

February 19, 2021#

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!

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.

We went home empty handed after being unable to find something that pleased us.

February 25, 2021#

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.

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.

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.

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.

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.

2020

2022-03-13T19:03:30Z

2020 Year review#

2020 was one of the best years I experienced in recent memory.

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.

When 2020 started my goals were:

Stop helping others with their websites
Discover leaner stacks for web development
Redo my website as a personal journal or wiki
Write articles, guides, fictions
Draw

But my ultimate goal was to get out of a productivity mindset and switch to a self-discovery mindset:

I hope next year instead of a display of work, I'll be able to do a display of creations.

— Me, Last Year

I wanted to question the value, benefits and enjoyment of everything I did, used or saw.

Time tracking as self-discovery#

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 Merveilles community 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:

//year week activity project hours
2020 1 Development Website 1

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 massive article about netcodes 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.

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 earned to do nothing. And so I did. It was the first of several similar cycles. Work on something, then rest.

And of course right after this, lock-down started in France.

Lock-down rhymes with breakdown#

Lock-down ~~was~~ is still a mess 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.

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 Art Eater 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.

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.

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.

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.

As I explained to my partner, I am sometimes feeling terrible. But I am now in a better place, because I feel things. I am now way more honest with myself.

The birth of my tools#

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.

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?

And it clicked. I was terrified and felt I was not capable of doing it, but went for it anyway.

I explored different syntaxes for a new and personal markup language. I called it Kaku 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 I love it.

My static site generator Ronbun 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 time tracker tool. In the span of a few months I created my own ecosystem of tools that fit my needs. Using them feels natural. 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.

All I want is dark nails#

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 adults as society expects us, and that it made us miserable. She has no desire to be a woman and bear the responsibilities it implies in our society. I have no desire to be a man and apply the behaviors expected of them, like control an strength. I realized that all I want is dark clothes, dark nails, a sensible life made of creative doubts and enraging blockades. 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.

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 my way. 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 prove 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.

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.

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.

All they want is JavaScript#

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 extensive guide 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!

I also continued studying JavaScript using the very good Wes Bos course. 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 soft power tacticsto make them unquestionable in web development. So I compiled a list of alternatives 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.

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 fit in the definition of frontend developer, which now seems to mean backend developer in the browser for over-complex technical stacks in JavaScript. 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.

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!

2021 Goals#

This post has been far too long already so let's wrap this up with 2021 projects and goals. Here's the list:

Work on art directed articles: 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!
A new portfolio: 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.
Write CSS guidelines: 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.
Code less: 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...
MAKE ART: 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?
WRITE FICTION: 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.
Be responsible: Being responsible at home and in life frees my partner and helps her moving forward. I want to help her.
Relax: Yeah, I love relaxing. I've already started. Never spent that much time in my sofa.

And that's all!

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.

See you next year!

Lost in the dev world

2022-03-13T19:03:30Z

Lost in the dev world#

I worked for money only 4 months in 2020.

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).

I've been waiting since July and as I explained in my 2020 restrospective, this free time allowed me to move forward on the personal side, as well as building my own tools, writing a lot" and renovating my apartment.

But on the profesionnal side, I'm in a dead end.

I don't fit in the definition of frontend developer, which now seems to mean backend developer in the browser for over-complex technical stacks in JavaScript.

— Me, Earlier this year

Then I discovered Sara Soueidan great 'hire me' page. I was relieved to see that the role I try to explain to others is called Design Engineer. People like me do exist after all!

But wait, are design engineers that needed?that needed? permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

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.

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).

You may think "What's the problem, can't you just change jobs?!" 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 graphql perverts trying to corner me into a role I didn't want to play.

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.

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?

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 FrenchTech) is not only late in technologies and development practices, it's also super late at paying bills (and very, very insistant at lowering rates).

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.

I think I don't have the mental fortitude to deal with this or build a new US based network.

It's not the code, it's the environment#

So salaried employment is my only solution!

I've had a proprosition to become a teacher for a bootcamp. Considering I wrote a massive HTML guide, CSS good practices and methodologies as well as an analysis about the JavaScript ecosystem and keeps a page about alternative frameworks, I might be a good fit.

I should probably apply. But I enjoy coding HTML, CSS and JavaScript sooooo much.

I just don't enjoy the environment 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.

What blocks from doing it (and accepting this teaching job) is an absurd feeling that it would mean giving up and I'm not desperate enough to give up yet.

So if you are not a cheap, organisational change aware, yolo agile, Javascript evangelical tech bro spirit company and need a design engineer, feel free to contact me using the links below.

I'd love to hear that you exist.

Personal systems productivity and slippers

2022-03-13T19:03:30Z

Personal systems, productivity, and slippers#

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 system 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.

Yes, we use tools to achieve the same goal, but we have very different relationships with them.

Our personal systems#

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.

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!

Now, let's compare to my own kinda yolo 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 time tracking system that uses another text file. My own markup language is used to write those text files, while my pattern library allows me to decorate things. I use a salvaged computer that runs a very specific linux distribution named Regolith, and use very few external services outside of Github and a chat programs.

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.

Features versus pleasure#

Let's take our time tracking systems.

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.

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 page, 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.

I don't know for my friend about his, but I LOVE my time tracking system. It's so me. 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 so cool. How many people can say a time tracking system is cool?

Removing annoyances#

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 Eleventy and write in Markdown.

But if Eleventy is super cool, I hate the NPM ecosystem that supports it because it's fragile and alive. 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!

It's the same for Markdown. I like inline Markdown! But I hate writing Markdown links! Using [Text of link](Link to image) for a link does not work for me. When I decide to post a link, I often already have it copied. So I need to paste this thing as fast as possible 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, procedures.

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.

Tools as slippers#

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.

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 tools page.

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.

But I'll make sure that, when I use it, it feels like I'm wearing my favorite pair of slippers.

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.🙈

One year with antidepressants

2022-03-13T19:03:30Z

Antidepressants can't change the world, but they made it tolerable for me#

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!").

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 re-sensibilization 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.

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 easy mode 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.

Overall, my symptoms were:

An inabiliby to manage unexpected problems. Even the smallest ones took gigantic proportions, made me feel overwhelmed and created panic crisis.
Fatigue. Fortunately, not a massive fatigue that made me unable to socialize. But just getting up in the morning was a chore.
The inabiliby to focus on mentally uncomfortable tasks. It made starting new things very difficult.
Physical pain in the neck, but not entirely due to work desk. My muscles were getting tense for no reasons during conversations.
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.

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.

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 myself. Turns out it wasn't just a feeling. My partner said something that really touched me, she said she felt I was more like the old me, the one when we met.

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.

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... waves at everything bad that is currently happening in the world.

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 for me, 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.

Take care.

About the no-js mindset

2022-03-13T19:03:30Z

Too much JavaScript is bad, no JavaScript isn't better#

I'm currently working on a proposal to revamp the design and user experience of the Sourcehut 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 ~~nerds~~ 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.

And sincerely, despite being a front-end web developer that likes this language, I totally get why it gets such bad press.

For the last ten years, the JavaScript powered websites methodology (as in: HTML is generated by JavaScript) was used in situations where it was stupid and unproductive. Way too many people confused applications (example: Google Maps) with interactive documents (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, uh).

Quite logically, an "anti-JS" sentiment took form, with people wanting websites without JavaScript at all, as it makes those more usable on their older hardware and software (and for some, more secure).

But despite understanding the feeling, I can't really agree with the conclusion. Despite my job title, I don't love npm install-ing gigs of code from the internet and serving you loading spinners while I rage against my package.json updates. I'm not the developer advocate of an evil corporation soft powering you into my monopolistic tribe.

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.

JavaScript is a double edged sword#

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.

Let's take a few examples.

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.
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.
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.
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.

A one size fits all JavaScripty solution like we have today excludes people economically, promotes environmental waste and capitalism. But a one size fits all non-JavaScripty solution is ableism disguised as techno resistance. You could think that the latter is better than the former, but in reality we can solve both problems by making JavaScript not be mandatory on interactive documents and using it as a user experience enhancement tool.

That's what progressive enhancement and graceful degradation are made for, and they already work very well. You should equally be able to get housing benefits by struggling one hour on your Playstation Portable 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.

Websites that find the right balance between user experience and technical capabilities are already a thing. Promoting a pro or anti 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.

JavaScript evolves towards less JavaScript#

Most of the frontend frameworks à la mode are now used in meta-frameworks (with Next being the leader) that provide server side rendering with interactions (yes, they are recreating PHP and Jquery duh), thus working on older hardware. Some of those frameworks are not even libraries anymore, but compilers (like Svelte) that outputs super tiny and efficient code, far from the bloat we currently experience.

We've seen the rise of micro-frameworks that work exactly like their fatter counterpart, but are 10 times smaller (Preact vs React) 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 Astro), even if all of them don't yet have an answer when JavaScript is disabled (but Remix does and seems impressive on this aspect).

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 (esbuild) that you can just install on your system and use the way you want.

And finally, if you truly hate 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 (HTMX, Alpine) for Ajax calls or dom interactions. They already have a lot of success in non-JS culture teams like Python, Ruby or even JAVA.

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.

So yes, please, let's use JavaScript. But responsibly.

2021

2024-01-01T16:49:15Z

2021 Year review#

2021 was both the more exhausting and relaxing year I experienced in my life.

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!

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 I was payed an almost full salary by my company without working as single hour.

Renovation conflicts and the diabolic wooden floor#

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 and the wall was moving and trembling when pressed on.

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.

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.

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.

The renovation benefactors#

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.

Another person that helped a lot was our... kitchen designer. I must admit that prior to this, kitchen hunting 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.

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.

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.

Dads truly are something#

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.

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.

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.

We never spend so much time together since I was a kid and I think we both enjoyed it a lot.

The Gautoz project#

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.

Early in the year I created Chisai for Gautoz. 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.

Chisai was originally built for him, but was then open sourced, given a name and even got a mascot that I commissioned to Chloé Stawski. 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.

While I was handling the website side of things, my good friend Yann Rieder 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).

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. Botoz, 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.

Calling it done mid-year#

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.

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!

I hired Atari 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 Ronbun a few times to implement this new design. Later on, I commissioned Saskia Freeke to create some quirky icons, that I haven't had the time to implement yet.

I also mentored someone while doing a website for a friend, and also did some writing during this period and then...

I stopped. I just stopped.

Relaxing, and finding a new job#

In late July and early August, I did nothing. Suddenly I am in my house 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.

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.

Quite logically, relaxing means doing less personal projects. It shows in my time tracker. 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.

Outside of a freelance gig I took for a few weeks (mostly because it was on the amazing Kirby CMS and I liked the client), and doing self teaching for my new job (that I got by shitposting on Twitter) I did almost nothing but having fun and relaxing until the end of the year.

And it felt so good.

Did I achieved my goals?#

Most of them, yes!

Work on art directed articles: I did not, but worked on my own design system and content, so I take it as a success.
A new portfolio: I did it and it was a waste of time since it did not convince anyone.
Write CSS guidelines: Done!
Code less: FAILED. 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.
MAKE ART: 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!
WRITE FICTION: I did some, but not much. Still, it's a start and I hope I can continue.
Be responsible: 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.
Relax: Oh yeah, don't worry, I relax.

2022 Goals#

Draw more: 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.
Write more: 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.
Engage in more unproductive activities: My book and steam backlogs are ready and waiting for me, I'm not worried.
Code less: 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.
Explore more: I want to continue growing into a more peculiar adult. Discover new things in life, dare to go out of bounds, and have fun.

See you next year!

Drawing

2023-03-03T16:22:26Z

Drawing#

(The drawings in this page were made between September 2021 and February 2022)

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.

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 Tsutomu Nihei. Even today there's nothing that looks like it.

Full size

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.

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 Pierre Soulages. 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.

Full size

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.

Not so surprisingly, the trigger came again from comics. In 2021 I started watching Manben, a series by manga artist Naoki Urasawa, 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.

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.

Full size

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.

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.

Today my favorite drawers are probably Hiroaki Samura, Takehiko Inoue, Katsuya Terada and Shin'ichi Sakamoto. Unsurprisingly, all of them are or were manga artists, all of them depict humans, animals and surroundings in expressive strokes and expressions.

I like drawing people, and the expression that shows through their bodies and faces.

Full size

Recovering from depression

2022-04-13T18:01:33Z

Recovering from depression#

Last year I wrote about how and why I started taking antidepressants 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.

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.

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.

That's when I encountered a conference talk on depression by Michael Yapko. It's called How to recover from depression and it's available on Youtube and in text format. Yapko identifies risk factors ("anything that increases the likelihood of somebody suffering a particular disease or condition") 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.

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.

Please be aware that again, this is not a medical advice and that if you need one, you should seek help form a professional.

Depression risk factors#

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.

He explains five of them:

Internal orientation
Stress generation
Rumination
Global thinking
Unrealistic expectations

Internal orientation#

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.

The internal orientation drives people inwardly. It's a narcissistic self-absorption attitude driven by the "Trust your feelings" advice (which according to Yapko is a very very bad advice). The problem is, feelings are deceiving and can make things look way worse, or way better, than what they really are.

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.

— Michael Yapko, How to recover from depression

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.

Stress generation#

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.

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.

— Michael Yapko, How to recover from depression

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.

Rumination#

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.

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 past orientation.

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.

— Michael Yapko, How to recover from depression

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.

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.

Global cognition or thinking#

Global cognition is the act of generalizing instead of problem solving. It's the unfamous "Men/Women are all the same" after a breakup.

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.

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.

— Michael Yapko, How to recover from depression

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.

Unrealistic expectations#

Having unrealistic expectations is a recipe for hurt and disappointment. The main problem is, do people know that they have unrealistic expectations?

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.

— Michael Yapko, How to recover from depression

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.

Taking a step back to reality check expectations is also a skill that can be learned.

Working against those risk factors#

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.

I'm a bit inclined to internal orientation and I ruminate a lot 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.

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.

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, shocked-pikachu.jpg, getting up and opening shutters before seeing a screen is good for humans.

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.

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.

— Michael Yapko, How to recover from depression

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.

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.

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.

Take care.

Every web stack is a product now

2023-01-06T16:18:29Z

Every web stack is a product now#

When I started web development seven years ago, I was in survival mode after years of low paying wages and unemployment. It had to work, and for it to work, I had 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.

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.

But lately, everything related to web development feels stale and toxic.

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, products.

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).

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.

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.

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.

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.

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.

2022

2024-01-01T16:49:15Z

2022#

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.

The positive#

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.

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.

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.

I went to a meetup with the European members of the Merveilles 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

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 my relationship with drawing, and how I see it. I also started taking online lessons and writing notes on the topic, but did not progress as much as I wanted.

And finally, I made some progress on personal issues. As I wrote last January 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.

The negative#

Health.

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.

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.

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.

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.

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.

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.

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.

Also:

French people almost elected fascists to power this year, the alternative being reincarnated Margaret Thatcher in a smoking.
Social services are being destroyed by our government, to the point where it's almost not functioning anymore.
The ocean was on fire, we hit temperature records, the heatwaves almost killed a family member.
I stopped caring web development.

Did I achieved my 2021 goals?#

Details for 2021 goals are written here.

Draw more: 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.
Write more: Failed! I should start writing fiction again, but I'm tired.
Engage in more unproductive activities: Mixed bag! I worked during the first six months, but played a lot of video games during the rest of the year.
Code less: Failed! Again because of freelance work, but I also started a new personal project with a friend and did some things there and there.
Explore more: Success! I've been coming into terms with a lot of things, dared to try several others, and will continue in 2023.

2023 goals#

They are basically the same, but refined:

Draw better: I need to focus on my own process this year, and work on some long term, finished pieces that require thinking.
Engage in more unproductive activities: Big focus on my pile of comics and books. So many books to read!
Code for fun: I'll continue this personal project I mentioned before, and probably work on new personal tools for habit tracking and time tracking.
Self exploration: That will be the more challenging one, but it's also very personal, so I won't go into details here.

See you next year!

From static site generator to static site processor

2023-03-06T09:28:34Z

From static site generator to static site processor#

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.

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.

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.

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.

This way, I could continue having fun by plugging new ideas into my brain machine, 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 standards. 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.

Finding a good HTML printer#

So I decided to look again at existing static site generators for Node. To please me, it had to satisfy those needs:

It needs to be a basic HTML printer, not a framework with front-end libraries.
It must be opinionated enough on its tool chain so I don't have to add config files to process assets and pages.
It mustn't be opinionated on the data source and allow pre-processing of the source files.
Easy to maintain, update and run.

And of course, I found nothing. Eleventy 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 fabulous world of the JavaScript ecosystem.

I was disappointed for a few weeks, until I saw Baldur talk about its experience with Deno. Deno is a JavaScript runtime equivalent to Node, but with several differences that instantly satisfied my laziness:

It has its own shell to run scripts which makes it environment independent.
There's no package manager, just imports using URLs, so no node_modules madness (but you can store your modules for offline use if you want).
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.
It's a full tool chain that comes with a linter, a test runner, a formater, so there's no time wasted on this.
It has a no-dependency external stdlib for more complex needs.

And it turned out that Óscar Otero, who really enjoys Eleventy, made its own version of it for Deno, called Lume. 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.

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.

Simplifying the project#

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.

Here's a list of changes for the data processing:

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.
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.
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.
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.
Redid the whole RSS feed in ATOM, as I felt its specs made more sense to me.

For the design and tooling:

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.
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.
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.
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.
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 in this research.
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.
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.
Fixed a lot of small visual annoyances and bugs, most you probably never noticed.

I'm probably forgetting a lot of stuff, and I still have many things left to do.

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.

Again, many thanks to all the people who created the tools I'm now using, especially to Óscar Otero who created lume.

Design and disappointment

2023-04-26T08:22:15Z

Design and disappointment#

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 Design Engineer role and learned quite a few things about design, systems, accessibility, etc.

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.

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.

But where I worked, design was underfunded every time, in every company no matter its size, business field, or claim of being design centric 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.

But then every time, non-designers meddled in and turned everything into a shit show.

Sales, marketers, CEOs, careerist managers ; they all had opinions 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.

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 WOW 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).

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.

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.

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 Svelte). Or do back-end web development in a new, very foreign language, like Elixir or Elm. Or completely change field and do programming outside the web.

I recently found out about Janet. It looks fun. Maybe I'll be a Janet developer.

Fighting games tournaments can still be great

2023-11-18T23:57:54Z

Fighting games tournaments can still be great#

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 few notes about the game recently, but I also wanted to write my feelings about the tournament.

The introduction of Street Fighter 3: Third Strike.

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:

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.

— Shinichiro Obata - Street Fighter 3 planner, Street Fighter 3: An oral history

Its first version (New Generation) had a very rocky development (as narrated in this article) 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.

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.

— Capcom, Gamest magazine translated by shmuplations

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!

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.

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 gameplay. Also the game is incredibly well animated, pretty, and its soundtrack is a banger.

Alex & Ken's Stage - Jazzy NYC '99

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 unfair 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 noboby will complain about it felt super great.

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 freeplay 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.

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.

But Third Strike has not satisfactory console ports, so all tournaments are held on arcade cabinets (most of the time the Sega Astro City) running the 1999 original dedicated arcade boards.

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.

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 in my entire life.

The arcade cabs are connected together in "Versus Mode", providing each player with a screen and a panel to play. | Full size

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.

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 how fun and great fighting games are. It was a feeling of enjoyment I had forgotten, as if I had finally reconnected with a lost friend.

The sudden realization that yes, fighting games tournaments can still be great, and that I missed them so much.

Preparing for a fight on the arcade cab. | Full size

Finals were played in a separated room, decorated for the occasion. | Full size

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 Pr0sk.

The family photo at the end of the tournament. | Full size

2023

2024-03-09T17:28:39Z

2023#

Yes, it's a year recap two months after the year ended. You can probably guess a two month delay means a lot of things happened.

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 (check my portfolio 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.

Bien cordialement#

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.

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.

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.

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.

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!

Such small hands#

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.

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.

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.

The moth and the flame#

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 productive way of spending my free time, because they benefited my professional carrier.

But it was so exhausting and pervasive it drained me. 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?! Be productive on your free time! BETTER YOURSELF!!

The discourse and changes emanating from the professionalization of the fighting games scene (I briefly talked about it here), as well as the debilitating productization (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.

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.

Down by the river#

A thing I totally nailed this year is drawing.

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 my art journey. 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.

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 content that should be monetized. I created an instagram account 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.

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.

All those aspects of drawing 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.

Did I achieved my 2023 goals?#

Draw better: Yes.
Engage in more unproductive activities: Yes.
Code for fun: No.
Self exploration: Yes.

2024 goals#

Take care of my loved ones.
Go on vacation both alone, and with my partner.
Continue my personal explorations.
Take action towards curing my anxiety.
Be a responsible self-employed adult.
Update myself on what I missed in web dev, but only one time in the year.
Build bridges between my drawings and my influences to refine my style.
Be more experimental in my art.
Participate in at least one zine or expo.
Be even more unproductive on my free time.

See you next year!

Where do I code from here

2024-05-07T10:50:12Z

Where do I code from here?#

It's been almost 4 years since Tom MacWright wrote his very good essay Second-guessing the modern web, which questioned the norms we had in web development at the time.

Spoiler alert: we are still into the JS frontend stack consuming micro-services JSON API backends. But the economical and societal contexts in which we work have changed. A pandemic happened, then several hype tech cycles, followed by a harsh recession with inflation, and even war in Europe.

In this context, and for many other reasons, I think frontend web development will shrink, and fall back to more reasonable and maintainable technical stacks and philosophies.

The causes of my concern#

The recession we live in might force (is probably already forcing) teams to do more with less, make hard choices on what to prioritize. In every job I had, a lack of money meant focusing on backend business features instead of design and user experience, and hiring in consequence, which means not hiring frontend developers.
I think JavaScript frontends aren't super well perceived anymore. After ten years, most orgs know about their lack of performance, cost of maintenance, reduced benefits, knowledge checks, dangerous and numerous dependencies ; and that could encourage teams to abandon them.
Point 1 and 2 could also mean stopping with the separated frontend that consumes an API, and going back to backend monolithic stacks. They often are sufficient for most projects and prevent from building premature optimizations.
A lot of backend frameworks have catched up. They have new features that swap HTML snippets or update values automatically with websockets, without writing any JavaScript (I kept a list here). Agnostic libraries that can do the same also exist, and are far easier to use than current frontend web stacks. Backend developers plebiscite them, which add to point 1, 2 and 3.
Browser have new features that reduces the need of JavaScript stacks for user experience improvements: paint holding, back and forward cache, service workers, and soon the view transition api.
Ready-made UI components libraries are often preferred to hiring a dedicated developer to build them, which is specifically my role. When I was looking for a job back in 2021/2022, at the height of the hiring craze, I got several rejections for this reason.
With the rise of video, enclosed platforms, and chatGPT spam, it feels like the web is dying, and that my role as someone building content driven websites is disappearing.

Let's be clear: frontend developers won't be out of jobs tomorrow. There are thousands of projects to build, maintain, and update ; places where separation of frontend and backend is desirable ; big companies in need design systems ; and situations where a single page applications, or server side rendering with JavaScript routing and state make sense.

But still! I feel frontend web development as we do it now with its gigantic JavaScript stacks is not sustainable, especially in small to medium teams and projects, and they are my favorite projects and places. It just costs too much for very little benefits.

So what now?#

As a result, I'm seriously considering slowly but surely steering my career to a more full-stack role. I never liked the full-stack denomination, because nobody can really be 100% competent on such a wide array of topics, a part of the stack is always neglected. But, at the start of my career, I worked with backend oriented full-stack developers, and they loved having a frontend oriented full-stack colleague.

I doubt it has changed, too many places struggle with design, usability, HTML/CSS/JS, but don't have a big enough workload on these topics to hire a specialist full time. Doing backend code in-between would fill this need.

Fortunately, I don't feel bad about this idea. Quite the opposite, it's exciting! I'm at a place today where I want to grow my fundamentals and discover new things that are not frontend related. I'm probably romanticizing it, but I want to understand how things work under the hood in a more computer science way.

I've never had the time, opportunity, or necessity to train my brain at things like abstractions, algorithms, design patterns, and I want to do it now. I also want to try new programming languages with stricter rules, to force me to think and plan ahead. I want static types, a bit of memory management, maybe functional programming, and let's be bold, why not a Lisp flavor, or totally go out of web related projects?

I just finished my first full time freelance gig and I plan to take a break for a few weeks. I'll try to devise a plan to achieve these goals during this period, and work from there. I'm probably gonna start with golang as the language of choice for my formation, but I doesn't mean I won't try other things. If you have suggestions of courses and books, feel free to send them to me!

2024

2025-08-14T23:45:59+02:00

2024#

A terribly hard year that was made tolerable thanks to creative work and wonderful encounters! I also feel it was one of those moments in life where the hardships give you a new perspective and force you to change for the better.

Hyper - Ballad#

I don't want to expose her private life, so let's just say my partner had an accident this year. Something that wasn't life threatening, but disabling enough to make everyday life very hard for both of us.

I am used to being a caregiver, but even by my standards, it was too hard. I had to take a step back and admit that taking full care of others was at the expense of my health, my happiness, and my future ; and also a guilt trap I had to exit before it was too late.

It's underway, and I already feel better! I also think it will allow me to grow in unexpected ways and shape a better future for both of us. I'm happy I could find a positive outcome from all this.

I'm still in burnout tho, but my relationship to work is getting better and I should be able to work again soon (see below). I probably have a generalized anxiety disorder and I am also addressing it. Oh and I may have ADHD, so I'll be diagnosed this year. In the meantime, I do lists on cute B7 Japanese notebooks.

Freelancing didn't work out#

I worked as a freelance web developer in April May, September and December, totalling around 8 weeks of work and 20k of revenue before taxes. Which is obviously not enough to make a living.

Despite my best efforts to get the word out (social media, emails, contacts, freelancing platforms, applying to job postings, asking for recommendations) I couldn't find new clients, and for a while I didn't understand why.

Then around November when I was starting to get really nervous, I found out about this French freelance job tracker. I learned from it that the minimum daily rate plummeted in 2024. Only 5% of missions accept full remote work and the rest requires hybrid, closing access to non-local candidates. And 50% of missions are in Paris. Also part-time is non-existent.

There are too many freelancers

In early November I was accepted in a "select" freelancing platform. I learned that the acceptation rate was only 10% and despite that, we were 20k registered users, with at least half looking for missions. I also learned that the open, smaller freelancing platforms, had around 200k users, and that the big ones like Malt had over a million. On Malt I only appeared a dozen times in searches each month despite an extensive list of experiences spanning 9 years and in various technologies, plus two recommendations from clients.

That's just my analysis, but I think companies imposed their employees return to office policies on their freelancers to prevent a disparity between workers who, at the surface level, are doing the same job. With the recession and the influx of new freelancers (both confirmed looking for better working conditions, and unemployed new grads), companies regained the upper hand in negotiations.

And so, like that, my goal of going freelance to better my work/life balance was dead. Fortunately, I was offered a new opportunity at a local company I worked for a few years ago. I'll talk about it once all papers are signed, but I have a good feeling about it!

I wrote a few things about web development this year

I kept a sane distance with the web dev hype machine, but still enjoyed updating my knowledge around CSS. I asked myself where I should go as a professional, centralized articles questioning the JS frontend paradigm, and partially re-learned React and wrote some notes about it.

Shifting to new projects#

My goal in 2024 was to slowly disengage from responsibilities and projects to have the bandwidth to start new ones that are more in line with my current motivations. I reduced my involvement in non-profit orgs, events, tutoring, social obligations, etc.

Among those, I decided to end my podcast and website about fighting games, Bas Gros Poing, that had been running for 15 years. The team and I had lost motivation, and we thought that closing it properly instead of letting it die was a better outcome, and a symbolic way of moving on. We had a final episode where we exchange stories and anecdotes. We received sweet messages from people who had been following us for years. It was a good ending. And it doesn't mean I don't like fighting games anymore, I just intend to just enjoy them casually (I just went to a tournament this weekend!)

A thing I did not stop this year is drawing. Compared to previous years, I drew a lot! I did a few big pieces that are still unfinished, finally beat Drawtober and grew a lot as an artist. I also wrote a bit more about drawing theory, participated in art gatherings, and registered to expose in a local art fare in 2025.

All year long I wanted to share galleries of my drawings. But having to transfer images to the computer, copy them in a folder, write a page to list them... It bothered me too much. As drawing and drawing adjacent topics will be my main focus in 2025, I started rebuilding my website, this time as a CMS, with Golang and SQlite (so I can learn more backend!). I have ideas to keep the simplicity of text files and avoid admin panel bloat. I'll go into details in another post once I have something to show!

Other notable things#

I loved Josh's Inktober.
I was very impressed by the projects made by Paloma for their Zine Club.
Anh redid her website homepage again and it rules, as always. Also her media recap is beautiful.
My favorite pixel artist I discovered this year was 6VCR.
My favorite software discovery of the year was lazygit.
My favorite design trend of the year was the niche comeback of monospace: The Monospace Web, The Berkeley Mono Font.
My favorite manga this year was Bakuon Retto by Tsutomu Takahashi.
Baldur took awesome photos of crows.1
I bought jewelry from soid studio, I will buy more and take more time to build my own fashion identity.
We went to the coast in the middle of the night to see aurora borealis.
France almost went full fascist this year. AGAIN. We are still very far to the right. The political landscape is terrifying.
It took 9 months but I finally got internet back after a fire destroyed it. Made me aware of how dependant we are.

Did I achieved my 2024 goals?#

Take care of my loved ones: Yes
Go on vacation both alone, and with my partner: No
Continue my personal explorations: Yes
Take action towards curing my anxiety: Yes
Be a responsible self-employed adult: Yes
Update myself on what I missed in web dev, but only one time in the year: Yes
Build bridges between my drawings and my influences to refine my style: No
Be more experimental in my art: Yes
Participate in at least one zine or expo: No
Be even more unproductive on my free time: Yes

2025 Goals#

Take equally care of myself and my loved ones
Draw more and better, make a plan about it
Participate in an art fare or expo
Participate in a fanzine
Rebuild my website to fit my needs
Go back to the gym with a proper musculation program
Read books and watch movies
Get diagnosed for ADHD, keep using notebooks
Finally finish my apartment and buy new furniture
Do another single self-update on Web Dev novelties
Be a responsible and pragmatic developer at my future job
Go on vacation both alone, and with my partner
Use my newly gained freedom to explore even more personal things

See you next year!#

Full size

Blog Questions Challenge

2025-02-02T14:31:16Z

Blog Questions Challenge#

I’ve been tagged by Gosha to answer the Blog Questions challenge! So here goes!

Why did you start blogging in the first place?#

I started writing on the web in the early 2000, mostly on skyblog and in forums. I started my first blog with a friend in the mid 2000 when Wordpress became a bit more popular. I had several websites since, but most of them are dead now.

I started writing to share my hobbies and what I find interesting. But today I mostly write to remember valuable information I know I will forget, and I happen to do it publicly so others can benefit from it. Writing on a topic helps processing it in my brain, so I also use it as a way to think. And finally, it serves as a timestamp for the writing period. I can go back to it and compare what I remember from a period to how I felt about it in the moment.

What platform are you using to manage your blog and why did you choose it?#

I write in text files which are transformed into webpages by any html printer. Those text files possess a specific syntax that I created to split pages, insert links, images, etc.

I wrote the code that parses the text files, and it return an array of pages. I can chose if I want a page to be private or public, appear in the RSS feed or not, show subpages or not. It's flexible and easy to modify (for me).

From there, I can give this array to any static site generator (currently it's Eleventy) that will do things like write the pages, process images, run a local server to preview, etc.

When I'm done I run the build script. The website is then transferred to a git repo, and I manually update the site on the live server. My hosting provider is Uberspace.

Have you blogged on other platforms before?#

I wrote on way too many things. PHPBB forums, Wordpress, Mediawiki, Kirby, just to name a few. They all served me well in their own way, but for a long time I wasn't a web developer and I did not know how to properly host, update, maintain them. I had to support and keep alive way too many projects, and I'm glad I exported most of them into static exports to get rid of it.

How do you write your posts? For example, in a local editing tool, or in a panel/dashboard that’s part of your blog?#

I write essentially in Sublime Text, a basic code editor, because it has a built-in spell checker, I can use my favorite fonts and themes. I can transfer files inside, edit the code of the website if I find a bug, etc.

When do you feel most inspired to write?#

It comes and go. It's mostly project based. If I have to write something I'll take time in the week to do it, and that's it. I don't overthink it as I have little time constraints.

Do you publish immediately after writing, or do you let it simmer a bit as a draft?#

I always let it simmer when the topic is complex or requires nuance. As a former professional writer, I can say the rule that says write, then delete 50% of it is often true.

As I've been writing less in the past years, I tend to forget how to be effective while writing. I should re-read my writing tips more often.

What are you generally interested in writing about?#

I like writing bits of knowledge I find useful or interesting but will forget eventually. I don't have great memory but I still want to pursue different hobbies and ideas.

Who are you writing for?#

Myself. And if it can serve others, the better.

What’s your favorite post on your blog?#

I like the page about the Chemical Love Combo. It's a bit of knowledge that is both nerdy, instructive, and useless. It's also my favorite combo in any fighting game.

Any future plans for your blog? Maybe a redesign, a move to another platform, or adding a new feature?#

I'll probably remove some pages first, among them my portfolio. I'll keep them private so links don't die, but they won't be visible in menus. I feel some of them are outdated and useless now, and only contribute in making noise. Then I'll move platforms.

To put it simply, I currently want to spend as little time as possible in front of my computer but still be able to share things on my website. I want to write a page in a few minutes without going through 4 build and upload steps.

So I'm building a new system that will live on a server, with a database. I want to be able to use on my phone, and be able to extend it with new features, to make it as painless as I can for me to post.

It's still early, but I'm refining ideas and hope to achieve it this year. I'll share it once it's done.

Tag ‘em.#

Nah! I enjoy participating but I don't like asking people to do things.

2025 first quarter

2025-04-07T22:15:55Z

2025 first quarter#

I've wanted to write a few posts in the last three months, but never had the opportunity. Now that March is over and I have some time and brain availability, let's do a recap for the first quarter of the year.

About art#

David Lynch died mid-January. Despite not being deep into his work I was deeply afflicted by his death. In the age of art made to fill social media, where artists need to become brands and act as influencers, Lynch felt to me like a beacon of creative sincerity.

I watched documentaries and interviews he gave, and loved every one of them. He spoke in such a positive and practical way of the joys of doing art. Write ideas before your forget them. Suffering doesn't make it better. Art requires time and space, and so it will preclude some things in our lives. Daydreaming is important.

I'm trying to remember and apply all this while time pushes me closer to late May where I will expose my work publicly for the first time. I've been randomly drafted for the "scab fair" in my city and since, I haven't done a lot of progress on the dozen of pieces I want to expose.

I'm not pressuring myself too much, but at the same time I kinda want to expose my universe and it won't happen if I don't push myself a little bit. Oh well, we'll see.

Spaces#

Mid-February I took a solo vacation, almost two weeks in a small cottage in one of the prettiest parts of France. Almost everything was closed or empty, which gave an eerie feeling, but also felt very relaxing.

I visited a few things, eat good meals, walked on forestry hills, and rested a lot. I prepared the list of pieces I want to expose in an excel file, draw a little bit, read a book, took coffees under the pale and cold winter sun.

When I came back home, I felt extremely overwhelmed and overstimulated by the number of things in my environment, and I needed space. We emptied cabinets and wardrobes, got rid of furniture, did some renovation. It felt good. It's not over yet, but will be soon.

I also went back to the gym with a strength dedicated program. It gave my whole body a physical shock (and the pain associated) that lasted for weeks. I'm feeling good now, my back and shoulders are less painful than they used to be. I'm also changing physically, which feels strange and pleasant a the same time. And for some reason, the gym as a space feels less alienating when you visit it with a clear goal.

New job, new me#

I've been working as an employee again since early March and it's going well. I went back to the first company I worked for when I started web development in 2015. They needed someone with my skills, I needed a job, both of us didn't want to do job interviews and technical tests, perfect fit.

Most of my job for the first month has been documenting, fixing and helping my colleagues on UI and UX issues. I barely wrote code, but wrote a lot of documentation and guidelines. It's been strange to go back to the same place with mostly the same people, and see how everything is mostly the same, and that I am the one who has changed.

Back then I was an enthusiastic idealist junior dev/designer who would push its unreasonable design and tech expectations to projects and people not always fit to receive them, to the point of hurting myself and others.

Now I'm the pragmatic senior dev/designer just trying to add a little bit of ergonomics and visual cohesion in projects who have budgets for it, while taking steps to avoid any misunderstanding or conflict with my colleagues, and training others in my expertise, slowly.

Yeah, I've changed quite a bit.

AI storm is coming#

I've long been against AI, even for coding. But in the last few months, even non-influencers developers I follow and respect had to bend and use it. Nolan Lawson's testimony is a prime example of the positive (productivity) and negative (it sucks out the joy) sides of the experience.

It is coming at my new job too, and I understand the argument. We're a small agency. Clients want more code for less time. Other agencies might go full AI and cut prices, leaving us behind. We have to at least try it, and we will. I'm glad I'll do it in my terms, surrounded by skilled engineers who, I hope, will be able to asses if it really helps us as a company.

Still, I can't help to be worried. Even Microsoft admitted that AI is making us dumb and we're losing skill. What about the tech dependency? Juniors training? What if prices become unreasonable? Social warfare on workers? Data security? Ethical issues? So many unknowns and yet we have to do it.

It truly feels like a race to the bottom we are all forced to run.

Other things#

Stopped my freelance shop, I won't take clients for side gigs while I am employed due to my contract, not that I particularly want to.
My partner is now recognized as disabled person, she will get a pension from the state, and thus will focus on healing.
I broke up with a lover. It was painful, messy, even ugly in the end but necessary. Learned a lot and won't do the same mistakes.
I have to use Windows 11 at work, it sucks so much. Bugs everywhere, and the feeling isn't right.
Website rewrite in Golang is progressing slowly. A bit frustrated by the pace but I want to do it properly.
I was super hyped by the game Caves of Qud after listening to a podcast about it, but my English level wasn't high enough and I had to refund it. :(

La foire aux croutes 2025

2025-06-09T20:21:00Z

I exhibited my art at La foire aux croûtes 2025#

The French word croûte can be translated to English as crust or scab. Outside of its basic meaning, it can also designate worthless, banal, failed or damaged paintings. The term could originate from painters employing so much paint on the canvas to try to make impasto that it creates a crust so thick it looks like one you would find on bread (yes, to French people everything can be compared to bread).

But from my experience, there's also a more judgemental, classicist subtext. The term can also be used to describe folk, amateur, provincial paintings. The ones you would find in small-town galleries that only local, uncultured people would buy ; in opposition to the more professional "Grand Art" found in big cities and museums that the intellectual elite enjoys.

Therefore, La foire aux croûtes or The Crust Fare, that took place from May 28 to May 30 in my city, is a celebration of small and often local artists, who will probably never be favored by museums, but who nonetheless love art and what they do, regardless of the result.

The poster for this year's edition. | Full size

It's been ran by volunteers as a non-profit for more than 30 years, and it takes place in an historically anarchist place of the city. To say it makes art political would be an understatement!

To ensure everyone has a chance, artists are chosen by lottery, and each one can invite a friend to share its space. They can expose outside or inside big tents, and usually younger, experimental and printing artists are out ; while more older folks doing classical painting on canvas, or fragile pieces, are inside. Places are attributed randomly to avoid favoriting anyone.

When the weather is good, a TON of people come to visit. They buy prints or original works, are very open to chat about art in general, very curious, and with the random mix of styles and themes from the different artists, there's something for everyone.

Small local bands perform on the big stage during the day, and more famous bands during the evenings. A lot of activities are organized for kids too. There's a bar, food stands, a lottery to win art pieces given by exhibitors, and even auctions for non-reclaimed pieces. I bought an over-painted piece of a lighthouse for 7 euros, an excellent investment if you ask me.

I spared no expense. | Full size

Going as an exhibitor#

And so, I exhibited my art! It was one of the artistic goals I wasn't able to fulfill in 2024, and wanted to achieve in 2025. I won the lottery in February and invited my friend, A Moldy Peach, to join me. We spent the three days exhibiting and selling our art and everything went well!

Look at those beautiful artists. | Full size

When I decided to participate, it was a way for me to present my own little worlds to a crowd and see what they think about it. I prepared 13 drawings, a mix of Drawtober favorites, broken androids, and a series of naked people + cats + skeletons.

My art is figurative, but not thematically very defined and thus easy to grasp. I don't see it as commonly attractive or seductive and being inspired by manga and surrealism, I don't think it clicks with most people.

Also, lots of people still see art as craftsmanship, they value unique pieces and don't like buying prints as they see it as a less valuable thing, like posters. The only exception is when the print feels like it was made by hand, like for lino-cut or cyanotype.

As proud as I am from my work, I can see it still feels amateurish in many aspects and that I have lot of progress to do. Still, I wanted to show it "as is" with all its flaws and successes. I printed 3 pieces I liked in A2 format, and the rest in A4 and A5.

The last time I printed my drawings was 15 years ago, at the time I was sick of art and thought I was done. I was feeling a bit emotional when I unpacked all this. | Full size

I could have done very small prices as my prints were not fine art but edition prints. But seeing that a lot of exhibitors were professional artists, I decided to not create unfair competition, and set A5 to 10 euros and A4 to 15 euros.

The result#

After three days, I had sold more than half of my stock, which I consider a big success! I reimbursed my investment and made a little profit. Some pieces had a lot of unexpected success, and others I thought would sell did not.

My most successful drawing was, without surprise, this broken android that I printed in A2 and hanged up on my wall:

Only one person, a true nerd, understand that the right cable was an IDE cable. | Full size

A lot of people saw it from far away and came to see what it was. My first interaction on the first day was a lady around her sixties saying to me "I don't get it! Explain to me what it means!" in a very imperative tone, which caught me a bit off-guard. Another woman looked at it and winced, then told me it hurt her to look at the android in the picture, especially the tube in the breast.

Of course once you show your art to the world, you can't know or control how people will react or what they see into it. Some asked for explanations, but after a day I went full David Lynch and decided to stop answering, out of fear it would ruin their interpretation and the fun that comes with it.

This one was my second best seller. Cats are a safe bet! | Full size

Most visitors seemed to like my art, or at least were intrigued by it, but the feedback I grabbed was that it was too dark, too strange (maybe too amateurish too?) to dare exhibit it at home. Which is fair!

I draw for myself to have fun, and I never planned my art to please an audience or sell prints. The goal with the fare was to motivate myself with a deadline, present myself un-apologetically to the world, propose something different than local marine/city landscapes, and see how it goes. Prints were just a way to reimburse the project.

One of the surprise success was this one. | Full size

I was going expecting limited success or appreciation and, compared to my friend Moldy Peach or even the other exhibitors around me, I clearly attracted less people. But the ones I attracted? They really vibed with my art. Hearing someone say "this is beautiful" while pointing at my little prints made me proud and humbled at the same time.

It was mostly the younger visitors, from teenagers to mid forties people, who engaged and bought prints. Some totally recognized my references, and for those who were interested, I gave them manga/comics recommendations, which triggered nice conversations.

What's next?#

So here it is, I finally exhibited my art to the outside world. Goal achieved! I'm left with nothing to do, no direction. Oh no!

I will do a drawing for a local fanzine, but have no other plans after that. In the next few weeks I'll probably make a plan and list things I wish to work on. Better line work? Shading? Composition? Better "world building"? Other themes? Who knows.

One thing I'm sure about is that I don't want to participate next year if I haven't made any progress or don't have enough new pieces to show.

It took me around 2 years to do all the art I exhibited this year, so it's doable. But art is just an escapism hobby I do on the side that I don't want to pollute with a productivity mindset.

We'll see how it goes, thanks for reading!

2025 second quarter

2025-08-08T22:04:24+02:00

2025 second quarter (+ 1 month)#

The second quarter of this year was mostly dominated by my preparation for the art fare I joined in late May. I wrote extensively about it here if you missed it. It was an amazing experience that I hope I'll do again next year!

Health#

Unfortunately this quarter was plagued by a few health issues. I was very active in April and had trouble getting used to my day job schedule. My sleep took a hit, leading to anxiety and a constant state of body alert.

I had several tachycardia crisis, was unable to take a deep breath, and felt like I was suffocating, as if something was pressing my stomach. In early may after a big crisis I took an emergency blood test. It came clean: no stroke, no heart failure or high blood pressure, no pulmonary embolism risk. I'll see a specialist in September to confirm the results.

With all those risks put aside, I shifted focus on the pain and pressure I felt around my stomach. I always thought I was a person who manifested stress in the stomach, and that was all there was to it. Turns out I may have an unidentified issue in my stomach, maybe an ulcer. I'm on medication until we find out what's going on, and already feeling way better.

Work#

This quarter was a roller-coaster at my day job. Things I obviously can't detail happened that made me reconsider staying at the company, so I renewed my trial period until October.

Around June I've finally got accustomed to the rhythm at work, but my importance as a designer/front of the frontend guy had already been put aside. Most clients don't care how their enterprise web apps looks like, so we assemble pages with already pre-made and pre-designed components, write a bit of logic in TypeScript with requests and types generated by the backend, and call it a day.

It's efficient, cost effective, but it sucks the joy out of me and makes me feel useless. It feels like there's no room for original design, HTML or CSS in today's job market.

This situation probably explains why I volunteered two weeks ago to temporarily replace the manager on a project that went bad. I felt that I would be more useful this way. I've done non-profit work for years and was already a tech lead before, but I always refused to be a project manager, due to my inability to leave work at work.

But somehow, since my last burnout in December 2024, I've finally learned to not care about work anymore. I've detached myself. Of course I will act professionally and to the best of my abilities. So far my colleagues are happy with how I shield them from clients and organize the work for them, so things seem good, even if I am exhausted by the takeover.

Joy and happiness#

While reading all the above one might think I had a terrible second quarter. Health issues, job issues and all. But it couldn't be so far from the truth. This quarter has been amazing on a personal level!

I've had a rich social life, full of new encounters, activities, experiences. I shared dates with sweet and fulfilling persons. I visited new places I didn't know existed. I danced in a giant crowd during a music festival despite my anxiety around crowds. Drank too many coffees with a friend. Heard my 5 years old niece yell "I LOVE YOU UNCLE!!" while I was leaving to go back home.

I discovered new music that allowed me to nail down what I actually seek and like in music. I even got dumped, overthought everything, self-pitied myself, and went over it in a week. I ate amazing food, especially shiitake raviolis. I celebrated 19 years together with my partner. We played an amazing video game together. I made progress on my CMS. I bought new clothes and jewelry that made me feel pretty. I'm evolving in ways I didn't expected.

All those things filled me with joy and this period has been one of the happiest of my life. I haven't felt this alive for years and I hope it will continue for a long time.

Other things#

I've listen Fleuves way too much, as well as Gogo Penguin and Clair Obscur Soundtrack
I bought a cheap Uni Kurutoga and it's a nice upgrade to every day's life, a bit like going from manual to electric windows in a car.
A study found out AI makes us stupid.
A study found out AI might makes us less productive.
I HATE WINDOWS 11!!!!!

HTML tips

2022-11-01T12:06:57Z

HTML simple tips and tricks for your website#

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.

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 contact me.

I need to go fast#

Then visit the TL;DR page, where a set of sensible defaults will be given to you for a basic website.

If you're not in a hurry, continue below.

About accessibility#

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.

The basics of HTML#

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.

Layouts in HTML#

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. You can save dozens of lines of HTML by using 3 lines of CSS when you are doing layout. 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.

Layout examples will be given through these pages, try to inspect them with your browser, reuse and tweak them to your needs.

Common elements inside your layouts#

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!

The inline semantic elements#

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.

The not very used interactive elements#

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.

Some interactive elements that can be useful

Page updates#

03/11/2020: Added a SVG subsection in the image page
24/08/2020: Added a section about reader modes in the accessibility section.
22/08/2020: In the interactive elements page I wrote that <details> and <summary> could not be animated. I was wrong.

Make my website accessible and look OK

2022-11-01T12:06:03Z

Make my website accessible and look OK#

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.

The basics#

Start with this and customize it to have dynamic information where needed:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unique page title - My Site</title>
  <link rel="stylesheet" href="/assets/css/styles.css">
  <meta name="description" content="Page description">
</head>
 
<body>
  <!-- Content -->
</body>
</html>

If you want a more evolved version with link embeds for social media, favicons, a color theme, etc. see Matuzo's boilerplate which details line by line what you can have in the <head>.

In your stylesheet, add a padding to the <body> and bump the font size a little bit while keeping it readable:

body {
  padding: 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
}

The header, footer, menus#

If you have a part of your website at the top that people can skip, name it <header>. If you have a part of your website at the bottom that people can skip, name it <footer>.

If you have a navigation menu to go to different parts of your website, put them inside <nav>. You can nest <nav> inside <header> or <footer> if you want.

For the links inside your navigation menus, use a list.

<header>
  <nav>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
</header>

If you have several <nav> in your page, name them using aria-label.

<header>
  <nav aria-label="Main">
   ...
  </nav>
</header>
 
...
 
<footer>
  <nav aria-label="Secondary">
   ...
  </nav>
</footer>

If you have a breadcrumb menu, name it with aria-label="breadcrumbs" and use the aria-current="page" on the link corresponding the current page.

<nav aria-label="Breadcrumb">
  <ol role="list">
    <li><a href="/">Home</a></li>
    <li><a href="/page2">Second Page</a></li>
     <li><a href="/page2/current-page" aria-current="page">Current page</a></li>
  </ol>
</nav>

And use this style to make it look like a breadcrumb:

[aria-label="Breadcrumb"] ol {
  display: flex;
  padding:0;
}
 
[aria-label="Breadcrumb"] ol * + *::before {
  content: ">";
  padding:0.5rem;
}

Structure the page#

Put the main content of the website inside <main>. Then, if you have different sections, split them. The easiest way is to use one or several <article> for the content, and <aside> for the related but not main content.

<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <article></article>
    <aside></aside>
  </main>
  <footer></footer>
</body>

Prefer using several <article> tags instead of using <section>. For example if you have a list of articles:

<main>
  <article>
    <h2>Article title</h2>
    <p>Excerpt</p>
    <a href="#">Link</a>
  </article>
 
  <article>
    <h2>Article title</h2>
    <p>Excerpt</p>
    <a href="#">Link</a>
  </article>
 
  <article>
    <h2>Article title</h2>
    <p>Excerpt</p>
    <a href="#">Link</a>
  </article>
</main>

The page content#

Add everything you want inside the <article> tag. Texts, images, videos, audios, embeds, everything will fit.

Since most of these elements are inline, you might have things being side by side, and be tempted to nest them inside a <div>. Don't do it for now, as we will fix this later.

Just don't forget to order your titles correctly! Only a single <h1>, subsequent <h2> and <h3>, and don't use them for styling. If you need a specific size for an element, style it.

Add sensible defaults#

Add Andy Bell's CSS reset to your CSS file. It will reset some styles to avoid headaches later down the road.

Then reduce the width of the text column and center it (work for anything else like the <header>, <nav>, etc.):

article,
header,
nav,
footer {
  max-width: 70ch;
  margin: auto;
}

You want a regular vertical flow between the elements inside your column of text. Avoid styling each element and instead use this:

article > * + * {
  margin-top: 1rem;
}

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.

Note that you can use this technique everywhere. In lists, on the body, it works perfectly. You can even create a set of .flow classes with different margin size inside.

That's it!#

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 here.

You can now add your own styles like fonts, colors, anything that make it more personal.

Have fun!

What is accessibility

2022-03-13T19:03:30Z

What is accessibility ?#

I will often refer to accessibility 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.

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 Comic Sans MS 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.

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...

Is accessibility all about code?#

No, not at all.

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.

Respecting accessibility in UI and UX design often leads to better designs and user experiences for all users. So when I say that something is good for accessibility it often means it's good for all your users, and following these advises will result in a better website of everyone.

Accessibility is hard#

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.

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 usable instead of perfection 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.

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.

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.

Choose the right battle and fight it until the end!

Next: Basic rules about accessibility and tools to enforce them

Accessibility rules and tools

2021-11-12T15:47:36Z

Accessibility basic rules and tools#

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.

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.

How screen readers users use them?#

Most people don't know it, but screen readers users don't only use the tab key to navigate in pages!

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 tab-index="0" HTML attribute to almost every element because otherwise, the tab key would not stop on it. But that's not how that works!

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!

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.

The basic rules#

Here are some basic but essential rules to help you get started:

Don't block the ability to zoom in or zoom out on your website.
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!
The basic 16px font size that all browsers have is often a good thing to follow.
Don't use super thin fonts. They are pretty but very hard to read!
Don't overdo it with animations, flashes and stuff that can trigger stress.
If your website is not compatible with reader mode, try providing an accessibility menu allowing the change of colors and fonts.
Take care about color contrasts, you need a ratio of 4.5:1 to be sure most people can read your texts.
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!)
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.
Don't put crucial information inside images, even if you add an alt attribute!
Ensure keyboard focus is visible and clear. Most of the time, it means not disabling the focus styles in CSS.
Provide a Skip to Content link at the top of your website.
If you have audio content, provide a transcript.
If you have video content, provide subtitles.

How to hide text destined to screen readers users#

You can use this CSS class:

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

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.

How to hide things from screen readers#

Use the aria-hidden="true" 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.

What is a skip content link?#

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 <body>.

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.

What tools can I use?#

One of the most used combinations of screen readers and browser are NVDA and Firefox. But you can also use the Chromevox 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.

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.

I've used the Axe extension in the past and enjoyed it, but there's a lot more.

How does the reader mode works?#

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.

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 article analyzing a standalone version of Firefox reader mode, an algorithm analyzes the content inside <p> elements, checks how content-y 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.

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.

Next: The basics: head, div and span

The basics of HTML

2021-11-12T15:47:36Z

The basics of HTML#

This section will give your some basic knowledge and tips about HTML, mostly what semantic tag to use in what situation.

What you need to get started#

You need this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    // Code
</body>
</html>

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.

The <meta name="viewport>" is especially important. It can be used to block the zoom or zoom out of the page. But don't do it, please never block the user from zooming in or zooming out on a website. This is the basic accessibility thing, don't deactivate it!

Of course there's a lot more that can go into the <head> 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 <body>.

Divs and spans#

HTML is all about putting...things! Inside... other things? So your first reflex is probably to grab a <div> or a <span>, the good old ones! But what's the difference between them?

If you put several <div> one after the other, you'll see they stack one above the other. That's because a <div> has the display:block; CSS property by default. display:block makes the element start on a new line and take 100% of its container width.

If you do the same with <span>, they will stack one after the other. That's because a <span> has the display:inline; 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.

So just by knowing that, you already know how to stack things vertically and horizontally. Great right?

Wait wait wait... There's CSS in my HTML?#

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!

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.

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.

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.

Speaking of being lost, <div> and <span> can sometimes get your users in trouble, unlike the amazing semantic HTML elements.

Next: What is semantic HTML?

What is semantic HTML

2021-11-12T15:47:36Z

What is semantic HTML?#

When you use int or string 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.

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.

There is a lot, a LOT of semantic HTML elements and even I who loves HTML doesn't know them all, so I will only cover the most useful.

Content sectioning#

These semantic elements have the same style properties as a <div> (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!

You at least need those:

<header>: 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.
<nav>: Put your navigation elements inside this. You can have several <nav> but you then need to use the aria-label attribute to name them for screen readers users.
<main>: 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.
<article>: 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.
<aside>: put the content indirectly related to the article content inside this one. It can be a sidebar or a side note for example.
<footer>: 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.

A basic page might look like this for example:

<body>
    <header></header>
    <nav></nav>
    <main>
        <article></article>
        <aside></aside>
    </main>
    <footer></footer>
</body>

I did not mention the section 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 <article>, but comments should be inside a section to make it clearer for screen readers users that the blog post has ended.

<main>
    <article>
        Text
        <section aria-label="Comments"></section>
    </article>
</main>

You can find the other content semantic element on this page.

Stop right there, what is this `aria` thing in the previous example?aria thing in the previous example? permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

You'll often see aria attributes inside the HTML code presented in this page. As stated by the MDN docs on this page, 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.

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.

Next: Don't use tables for layout

Never use tables for layout

2021-11-12T15:47:36Z

Never use tables for layout#

I'm gonna say it again. Never use tables for layout. I'm dead serious. Never do it.

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.

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.

Next: The display property

The display property

2021-11-12T15:47:36Z

The `display` propertydisplay property permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

Here's a primer to help you get started width display: ???, 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.

The good old ones#

First the good old ones that you apply directly on each element.

inline: Elements are stacked one after the other on the same line until there's no space so a new line is created.
block: Elements are stacks on top of each other.
inline-block: The best of both worlds as it acts like an inline element but its height and width can be changed!

Those values are still in use today but are way less common in modern layout than they used to. Before flexbox and grid, developers used a lot of inline-block 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.

Today there is absolutely no reason to not use flexbox and grid. They can even be used on Internet Explorer 11 if written correctly and compiled with a tool like Autoprefixer.

Next: Flexbox, the goat

Flexbox the goat

2022-03-13T19:03:30Z

Flexbox, the GOAT#

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 x and y axis ; and also how the elements behave between themselves!

The main difference comes from the declaration. Instead of declaring display:flex; on each element, you only declare it on the parent and it acts on the children.

<div style="display:flex;">
    <div>1</div>
    <div>2</div>
</div>

So how does that work?

Decide the direction#

First, you decide if the flow goes horizontally or vertically, and in which direction. For this, you can use the great flex-flow: ???; shortcut property. Its most common options are:

row: the children will be displayed from left to right
row-reverse: the children will be displayed from right to left
column: the children will be displayed from top to bottom
column-reverse: the children will be displayed from bottom to top

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 wrap or nowrap.

Real code examples:

flex-flow: row wrap;

flex-flow: row-reverse wrap;

flex-flow: column wrap;

column-reverse wrap

Neat right?

Align your children on the X axis!#

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?

Let's reuse this example of a row going from left to right:

<div style="display:flex; flex-flow:row wrap;">
    <div>1</div>
    <div>2</div>
</div>

We're going to use justify-content: ???; to fine tune the way child elements behave between each others on the horizontal axis:

flex-start: The default value, stack everything at the start of te flow.
flex-end: Stack everything at the end of the flow.
center: Stack all elements at the center with equal white space on the left and right.
space-between: Space elements as far as possible from each others.
space-around: Automatically gives each child element the same left and right margins.
space-evenly: Creates equal white space between all elements.

Real code examples:

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

Align your children on the Y axis!#

Now the cool thing is... The align-items: ???; CSS property takes the same values as justify-content, but for the vertical axis! Which means we have a way to align on the x and y axis in two lines of code!

It allows us to create the holy grail of alignment: center both vertically and horizontally in two lines of CSS!

justify-content: center; align-items: center;

Praise flexbox! (/≧▽≦)/

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 Flexbox Froggy. If you are not into games try this free course on youtube.

You might be thinking Yeah this is cool, but not as cool as my good old tables. Well rejoice dear reader as I'm going to make you happy.

Next: CSS Grid the almighty

CSS Grid the almighty

2022-03-13T19:03:30Z

CSS Grid the almighty#

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?

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.

Even more than Flexbox, it's a massive 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.

So you like columns?#

For this example we'll go with just 6 vertical columns. How would that work?

First we have to use display: grid; on the parent element, just like we did with flexbox. Then we can declare our grid with the grid-template-columns: ???; property.

grid-template-columns: repeat(6, 1fr);

So let's break it down, what's going on here? The repeat() shortcut is a function we use to declare the number of columns we wanted instead of writing 1fr 1fr 1fr 1fr 1fr 1fr.

The fr is a CSS unit, like pixels or percentages, that means fractional unit. In this example, 1fr repeated six times means split the space in six and give each children the same space.

So what happens if we decide that the first column should take 2 times the space of other columns? The grid readjust itself nicely:

grid-template-columns: 2fr repeat(5, 1fr);

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:

grid-template-columns: repeat(6, 1fr);

If too many children, the grid will create a new row:

grid-template-columns: repeat(6, 1fr);

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.

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!

grid-template-columns: repeat(6, 140px);

At this point, you're probably thinking that a media query is needed to make the grid go from fr units to px units when the viewport is smaller. What a chore right ?...

Well dear reader I have something incredible for you...

(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧THE INCREDIBLE
MEGA AWESOME
NO MEDIA QUERIES
RESPONSIVE GRID〜(￣▽￣〜)

grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));

Try resizing it! Great right?! So what's happening here?

First, we removed the fixed number of columns in the repeat to let the child elements decide how much columns the grid should have. Frightening? Don't worry.
Then, we added the auto-fit property to let child elements grow in size (it can be replaced with auto-fill if you don't want your columns to grow).
Finally, we added the minmax 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.

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.

Ok but how do I position stuff?#

In CSS frameworks like Bootstrap, you have utility classes to say start here and span this much columns and you can do exactly the same with CSS Grid, using the grid-column: ? / ?; shortcut property on the column of your choice.

There's actually two syntax you can use:

? / ?: Where the first ? is the starting column and the second ? is the ending column.
? / span ?: Where the first ? is the starting column and the span ? is the width of the column in fr unit.

Let's try different things with our grid:

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;

Results in:

Ok, what about the rows?#

It's basically the same as the columns, except it's for the rows. Use the grid-template-rows to declare the number of rows you need. And of course, you can decide where to place each children using grid-row, the equivalent for rows of grid-columns. It's super useful for art directed pages as you can place everything where you want.

All this is quite complicated, is there a simpler way?#

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 grid-template-area: ??; and grid-area: ??;, a very funky yet super useful combination of CSS grid.

With this syntax, you draw 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:

grid-template-areas:
"lefttop . righttop"
". center . "
"leftbottom . rightbottom";

By doing this, we created a 3 by 3 grid. The . 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 voila:

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 page.

I want MOAR!#

If you want to train your CSS grid skills, try playing the amazing Grid Garden game on this page. If you want more examples but in a sort of short video format, visit this page. For a complete free video course on CSS Grid, I recommend this one.

And that's it for modern layout in HTML and CSS!

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!

Next: Order your titles correctly

Order your titles correctly

2021-11-12T15:47:36Z

Order your titles correctly#

This one is simple, use <h1>, <h2>, h3, etc... Your page should at least have an <h1> and should not jump from <h1> to <h3> without an <h2>. 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.

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.

This website actually uses this system. You can find the JavaScript function for this in the github repo of my parser Kaku.

Next: Organize your text content

Make your links clear and accessible

2022-03-13T19:03:30Z

Make your links clear and accessible#

Links are pretty straightforward, you put an <a> with an href attribute and you're good right? Yes, but often links lack readability due to poor phrasing. Try not using texts like more or click here 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.

If you can't use a more contextualized text, then add the title 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 aria-label attribute with the same contextualized text for screen readers.

Inside those attributes, don't use the work "link". It's not explicit, it doesn't convey meaning. Also because screen readers already say link, your screen readers visitors will hear Link, Link.

Last but not least: if you use target="blank" to open to a new tab, you have to vocalize it using the same aria-label attribute. Just add (open in a new tab) at the end of your text so screen readers users know that the previous page is still open.

So the end result might look like this:

<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</a>

Knowing all this, it's often less work and trouble to just rephrase the link!

Next: When to use a button and a link

Organize your text content

2021-11-12T15:47:36Z

Organize your text content#

Remember when I talked about the box-content semantic elements, the <nav>, <main> and others? Well there's a lot 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:

Text blocks with `<p>`<p> permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

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!

Quotes with `<blockhouse>`<blockhouse> permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

The good old quote we often see in articles! It can actually comes with the <cite> element and attribute to help you sources your quotes, as well as a <footer> to indicate the end of the quote and its author. Take a look at the specifications on this page to make better quotes.

Lists with `<ul>`, `<ol>`, `<dl>`<ul>, `<ol>`, `<dl>` permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

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.

<ul> with <li> inside creates an unordered list with bullets:

Element A
Element C
Element Z

<ol> with <li> will create an ordered list with numbers for each element:

Element 1
Element 2
Element 3

<dl> 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.

Term 1: Definition 1
Term 2: Definition 2
Term 3: definition 3

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.

Pre-formatted text with `<pre>`<pre> permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

If you have to present some code, it's probably good to wrap it inside a <pre> tag to preserve its formatting. Please note that you should also use the inline semantic <code> element (we'll talk about it later in these pages).

Make breaks with `<hr>`<hr> permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

The <hr> element is to indicate a break inside your content: a kind of pause, a change of subject. You could think that the old <hr> 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!

Next: All about images

All about images

2021-11-12T15:47:36Z

All about images#

Just as links, images can feel pretty straightforward. Put an <img> tag, an src and an alt attributes and you're good right?!

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?

Load the right image size and density#

The <img> element has an srcset attribute that allows you to add several links to several versions of your image. You can do two things with srcset:

Ask the browser to change the image depending of the width of the viewport.
Ask the browser to change the image depending of the pixel density of the display.

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:

<img
    src="img-1200.jpg"
    srcset="img-300.jpg 300w, img-600.jpg 600w, img-900.jpg 900w, img-1200.jpg 1200w"
/>

And for pixel density for 1k, 2k or 4k screens:

<img
    src="img-1k.jpg"
    srcset="img-1k.jpg 1x, img-2k.jpg 2x, img-4k.jpg x4"
    alt="this is an image"
/>

But you can also combine them, for example for a favicon:

<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"
/>

This way you are sure you only load the right size or density for your readers.

Load the right image format#

You maybe saw it before and wondered what was the <picture> element good for? Well it's quite simple, it's used to contain several <source> elements and an <img> element.

The <source> 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.

Let's take an example with a jpg and a webp.

<picture>
    <source srcset="img1.webp" type="image/webp">
    <img src="img1.jpg" alt="this is an image" />
</picture>

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 <picture> element the <img> one will still work, so there is no good reason to not use them.

Lazy loading images#

Lazy loading has become native in most browsers and is quite simple to use: loading:"lazy" on your <img> 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 article.

Combine all this together!#

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.

<picture>
    <source
    type="image/webp"
    srcset="img-300.webp 300w, img-600.webp 600w, img-900.webp 900w, img-1200.webp 1200w">
    <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">
</picture>

Knowing that images are the most heavy thing loaded by websites, it's incredible that this syntax isn't more known and used!

About svg files#

The SVG format (for Scalable Vector Graphics) 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.

Here's a few tips:

During export from programs like Illustrator, Affinity Designer or Inkscape, take care of not exporting an SVG with an image inside.
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 SVGO.
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.
Most of the time you will put the inline SVG inside a <div> or a <span> that has a fixed width and height and the SVG file will overflow. To make it fit, use a simple CSS rule like width:100%; height:100%;.

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 <title> to add a tooltip and/pr an aria-label attribute to just vocalize it.

<svg role="img" aria-label="Accessible Name">
  <title>Accessible Name</title>
  <!-- child elements of the inline SVG -->
</svg>

If the SVG is used for decorative purposes (like an icon) you can simply hide it using aria-hidden="true".

<svg role="img" aria-hidden="true">
  <!-- child elements of the inline SVG -->
</svg>

Next: All about video and audio

All about video and audio

2021-11-12T15:47:36Z

All about video and audio#

The <video> and <audio> 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.

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 .mp4 for example. Codecs are the compression algorithm used.

So which video codec should you use?

The video codecs and containers supported on the web#

If you are in a hurry and can only produce one export, go with the h264 video codec and MP3 audio codec in a .mp4 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.

If you want high quality and compression you will have to export your videos two times and do this combination:

Apple machines: A .mp4 container with h265 video encoding and AAC audio encoding.
Others: A .webm container with AV1 video codec and probably Opus for audio encoding.

If you only want open source and cover a maximum of machines, the best combination is probably a .webm 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.

The audio codecs and containers supported on the web#

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.

If you are putting audio for streaming and want a good quality, the AAC codec in a .mp4 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 .ogg container.

If you don't care about quality and just want everything to work, go with .mp3.

Wait, I can pick two?#

That's the beauty of it, just like with the <picture> element, you can add multiple sources to your <video> and <audio> elements and let the browser choose.

<audio controls>
 <source src="foo.opus" type="audio/ogg; codecs=opus"/>
 <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="foo.mp3" type="audio/mpeg"/>
</audio>

Save bandwidth with these simple tricks!#

The preload="metadata" 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 preload="none". In the case of a video, the preview will be totally dark but that can be mitigated by using the poster attribute with a link to an image.

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!

The multiple configurations of the video player#

The <video> and <audio> elements comes with a set of attributes that allows you to tweak how they act. The <audio> element is often left untouched but the <video> one has several attributes that allows it to act as a video player or as a fake gif!

Make a traditional video with the control attribute:

<video controls" src="path to video" type="video/mp4"></video>

Make a fake gif from a video using those attributes. loop will restart the video, mute will remove sound and autoplay will start it automatically. Be careful as autoplay will not respect the preload attribute, making the video downloaded instantly.

<video autoplay loop mute src="link to fake gif video" type="video/mp4"></video>

Finally, please note that the playsinline 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.

Next: Doing forms correctly

Doing forms correctly

2021-11-12T15:47:36Z

Doing forms correctly#

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.

Forms require strict HTML#

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!

A form starts and ends with the <form> element even if you validate it with JavaScript. Also add an id to it.
Each <input>, no matter its type, needs and id and a <label> with the for attribute pointing to it.
If you have a multi-section form, regroup them with the <fieldset> element and add the <legend> element as the "title" of this fieldset.
End your form with a <button> when you can, use the for attribute to point on the form's id, and use an aria-label to give more context.

For accessibility reasons:

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 title attribute to the input as well as a aria-label.
Don't rely on the placeholder 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.
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 aria-describedby attribute (see example below). Using this, screen readers will first read the label, then the aria-describedby text in one go.

Wrapping it up, here's an example that you can inspect with your browser's developer tools:

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.

Information below forms#

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!

Most forms end with words like Continue or Validate and by doing so, suggest that the page is finished. A screen reader user can't know there's something else below.

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.

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 right?

Don't put text sections inside a form!#

You probably already tried to tab between inputs in a form. That's because inputs are capturing elements that you can only escape by using the tab key. And when you do, the tab key will lead you to the next native focus-able element like another input, a button or a link.

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 aria-describedby can be used to link to a descriptive text, but that's applying a bandage on a broken leg.

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.

But the reality is that a form that needs explanation texts between inputs is a bad design right from the start. 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.

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 funnel concept marketers enjoy to create.

Handling errors in forms is a pain#

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.

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.

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 .focus() function in JavaScript. This way the user can promptly fill or fix it, then go back below super fast to validate the form again.

The error message should be added the same way as the instructions, with an aria-describedby. You can actually have two id as a value for aria-describedby, so screen readers will read the label, then the description, then the error message. Finally, a aria-invalid="true" needs to be added to each invalid input.

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 error id to each input's aria-describedby so screen readers can vocalize the error message, and remove the display:none from the error message itself so non-screen readers users can see it too.

Because of all this and contrary to popular practices, it's forbidden to disable a form button, 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.

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 .focus() on the wrong input.

If the back-end returns a vague message then the front-end can't do anything outside using .focus() 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.

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.

Good luck with your forms and more than anything, test your forms with real users, disabled or not, to find out if everything is ok. On this particular subject, you can't trust yourself, your client, product owner, designer or common tester. You need real, fresh experience.

Next: Tables are not that complicated

Strong b em and i

2022-03-13T19:03:30Z

`<strong>` versus `<b>` versus `<em>` versus `<i>`<strong> versus `<b>` versus `<em>` versus `<i>` permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

Here we are, at the doors of the great war of semantic inline elements. So who's right between <strong> and <b>? Who wins between <em> and <i>?

Well, they all win.

Everyone is a winner excepts us the developers who have to implement this. Let's try to explain this strange situation.

Imagine a website for a touristic area with a cliff:

The <b> 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 wonderful cliff".
The <strong> 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 there are no ramps to prevent you from falling and the winds are strong".
The <i> 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 mh'irr'la" or the thoughts of someone thinking about the cliff: "Is the cliff really in love with me or is it just a farce? thought Jonathan".
The <em> 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 cliff, the one that is actually 2 meters tall".

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 wysiwyg editor or markup language parser of your choice decided to use. For example this page is written using Kaku who compiles to <strong> and <em> by default.

Next: Other kinda useful semantic elements

When to use a button and a link

2021-11-12T15:47:36Z

When to use a button and a link#

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.

So to make it clear:

An <a> 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.
A <button> 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.

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.

To do this, the developer has to use the .focus() 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 contact me so I can update this part.

One last thing: I don't care about your reasons, don't replace a <button> by a <div>.

Next: The mess of strong b em and i

HTML interactive elements

2023-03-03T16:22:26Z

Some cool HTML interactive elements#

You might not know these but they can be super useful. Their main default is that they are sometimes hard to style properly.

<details> and <summary>: Allows you to make a kind of accordion box in pure HTML. By default closed but the open attribute on <details> can make it open.
<datalist>: Can be used as an input with a list of options auto-suggested by what the user is typing.
<progress>: 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 role="progressbar on a div.

Click me for a code demo

SURPRISE | Full size

A datalist can be useful but requires a full form, which is quite a lot of code:

Choose a Jojo character from this list:

A progress bar using <progress> has this look:

20 %

Use the `role="progressbar" to style it more easily:

20 %

Other kinda useful semantic elements

2021-11-12T15:47:36Z

Other kinda useful semantic elements#

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.

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.

<abbr>: Stands for abbreviation. Can be used for currencies for example.
<code>: For code, obviously, often best used with <pre>.
<time>: For time values of course.
<mark>: To highlight some parts of your text.
<s>: Strikes the text to indicate it's no longer relevant. Don't confuse it with strike who just strikes the text for... design?
<del> & <ins>: If you have an edit to make to a text and want to keep trace of the change <del> and <ins> are a good pick!

Next: Some interactive elements that can be useful

Tables are not that complicated

2021-11-12T15:47:36Z

Tables are not that complicated#

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.

The <caption> 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: <caption>I'm a table title!</caption>. Use the scope="col" on your <th> columns to explain to screen readers that the element is a the start of the column and scope="row" for the same <th> elements that start rows.

If you need to make more complicated tables accessible, try take examples in the MDN documentation on this page.

Next: Make your links clear and accessible

CSS tips

2022-01-01T23:39:42Z

CSS tips#

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.

CSS good practices

2022-03-13T19:03:30Z

CSS Good practices#

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. Bootstrap 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 Foundation or SASS libraries like Susy.

Fortunately today we have a lot of choice! We still have Bootstrap, but also lighter alternatives like Bulma or totally different propositions like the utility first Tailwind. Also tools like Purge CSS can help reduce the size of CSS bundles by removing the unused parts of CSS frameworks.

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 semantic HTML.

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.

Enters 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.

— MDN, About specificity

So what are the more specific and less specific things you can meet in CSS? Here's a list from more to less specific:

IDs
Classes, attributes and pseudo classes
Elements and pseudo elements

Knowing this, some practices can create a lot more specificity than others. Among them, these are the worst:

Using IDs as they are single use.
Nesting selectors, for example .navigation .navigation-list doubles the specificity of the later and prevents it from working outside the former.
Qualifying selectors, the action of sticking a class to a specific HTML element like ul.navigation

Specificity is why a lot of people hate CSS:

It makes it hard to extend an existing code base if everything is super specific
It can trigger repaints of existing elements, thus creating flashes when loading the website
It makes the code super verbose and hard to maintain
It creates code segments that can't be reused in another situation

So as you can see, it's not just a technical thing but a good practice methodology to take specificity seriously.

Chain elements or use a class?#

To come back to our no-class CSS topic, we find ourselves in front of a dilemma.

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:

nav ul li a {
    color:red;
}

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:

I style links to red
Wait it's only links in lists that need red
Crap, it was only links in lists in the navigation that need red

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.

Now let's compare this to a simple utility class:

.redcolor {
    color:red;
}By default text is black and background is white
<a class="redcolor">

With this code, the browser only thinks if I see a redcolor class, I add red. And that's it, no repaint, no problem. But here's the thing: chaining HTML elements is calculated as less specific than using a class.

So who is right and who is wrong? The browser is right, but ultimately, the no-class CSS is worse:

It's more verbose
It's harder to extend the existing code and will get even more verbose when doing so
It can't be reused in another context since it's tied to specific parents

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.

Tips and tricks for your CSS#

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:

Style HTML elements for broader usage. The moment you start chaining them means you need a class
Never nest or qualify classes and instead, use a simple yet effective naming methodology like BEM, Block Element Modifier
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 Inverted Triangle methodology
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 Object Oriented CSS

You can check your specificity using this specificity calculator and check if your file has his specific code in order (from less to more) using this specificity graph generator.

By doing this your code will be lighter, easier to maintain, reusable and extendable like objects, and won't trigger repaints.

CSS methodologies

2022-03-13T19:07:40Z

A short history of CSS methodologies#

What's interesting about CSS is how much people tend to love it or despise it.

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 classic developers is that CSS is global and declarations are not variables and won't trigger an error if you reuse them.

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.

But first, let's explain quickly what is the cascade.

The cascade#

The cascade is an algorithm that defines how to combine property values originating from different

MDN Docs

What happens if we declare the same thing two times, but with different properties?

Here's a button:

.button {
 border:1px solid red;
}
/.../
.button {
 border:1px solid blue;
}

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.

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.

.button {
 width: 30px;
 border:1px solid red;
}
/.../
.button {
 border:1px solid blue;
 color:red;
}

In this case, the border, width and color properties will be grouped together in a single .button class. It will have a blue border.

Separation of concerns and semantics#

Of course CSS is nothing without HTML.

For years the rule about organizing them was to respect the separation of concern. HTML is for structure and CSS is for styles.

For example using an <h3> tag instead of an <h1> just because the <h3> is smaller is bad practice. Using CSS to style the <h1> to the size needed is good practice. This way, even if the <h3> is replaced with a proper <h1>, the style won't change.

If an existing website needs a redesign without touching the HTML, it's also possible. That's what the famous CSS Zen Garden website, which has several designs with the same HTML, popularized in 2003.

It makes sense, but how do you name these styles?

That's where the semantic part comes in. Classes should name based on their purpose and not on their properties. In the previous example, naming the title .main-title could work, but naming it .title1 or .size-30 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.

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.

Semantic and structure#

Now let's say you start a menu and name it .menu. 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?

Actually, it depends.

Let's say our menu contains a sub menu with a button inside. Our CSS might look like that:

.menu {
 color: black;
}
.menu .submenu {
 border:1px solid blue;
}
.menu .submenu button {
 color:red;
}

This code has two major problems.

First, even with a semantic name on the parent component, the inner elements are not semantic. Worse, they are nested. Which means that if we move the button outside of the .submenu, the button will lose its red color. If the HTML moves, the CSS breaks.

The other problem is related to the first one. If you need a button 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.

Suddenly it's a mess, and that's just for a button.

Object Oriented CSS#

So of course, nature found a way. Well, Nicole Sullivan found a way. In 2009 she presented the Object Oriented CSS methodology.

Object Oriented CSS or OOCSS 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.

To keep our menu example:

.menu {
 color: black;
}
.submenu {
 border:1px solid blue;
}
.red-button {
 color:red;
}

Each HTML element that needs style should have its own class. This way, no matter the context, they will always have the same style.

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.

SMACSS#

So in 2011 Jonathan Snook released the book Scalable and Modular Architecture for CSS. It works by organizing the different CSS declarations by logical use in 5 categories, thus fixing the problem with the OOCSS approach.

The categories are:

Base: The rules that sets the default CSS properties of HTML elements like a or button.
Layout: The classes that define the layouts of pages. The containers, the grids, all those things that organize others elements. Prefixed with l- or layout-.
Modules: The reusable objects of OOCSS.
State: Utility classes dedicated to Modules, used to modify the design of an object if its state changes.
Themes: Utility classes that change the design of Layout and Modules based on the choice of the user or the context, for example dark mode.

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.

But from there another problem emerged.

Naming conventions#

SMACSS gave guidelines from a macro 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.

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.

So naming conventions were created to ease the readability and discovery of code. There were various naming conventions coming out around 2013. Among them SUITCSS was one of the most popular.

But the one that really saw mass adoption was BEM. It was created around 2015 by Vsevolod Strukchinsky and Vladimir Starkov. In it's basic form it works this way:

Blocks: the base of the object we are working on. More often than not, the context provider.
Elements: the elements inside the block. They are designated using the double underscore __.
Modifiers: the modified versions of an existing object. They are designated using the double dash --.

.menu {
 color:black;
}
.menu__item {
 height:10px;
}
.menu--open {
 color:blue;
}

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 .menu__item and .footer__item.

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.

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:

<div class="container">
 <span class="container__subtext">
  <button class="container__subtext__button container__subtext__button--blue">Nested button</button>
 </span>
</div>

When something like this happens, it means the whole object is too big and should be restructured. Instead of multiplying the elements, multiply the blocks by dividing them. You should never have more than one __ or -- inside your class names.

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? Right?

ITCSS and the specificity war#

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!

To deal with this, Harry Roberts came up with ITCSS around 2014. It means Inverted Triangle CSS. 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 specificity in order to limit repaints and ease the rendering.

The three elementary rules are :

Go from global to localized (* should be before .button)
Go from general use the explicit use (style resets should be before classes)
Go from less specific to more specific (lighter specific selectors like h1 before heavy selectors like !important)

Which means the placement of CSS inside the file matters! Here's ITCSS code organization, from top to bottom of the file:

Settings: Should contain all the variables and global configurations of the project as it will affect everything.
Tools: Mixins, helpers and functions go there and can use the settings.
Generic: Low level style rules like resets or box-sizing should go there as they are the primer coat of CSS.
Base: Styles without classes for HTML elements like h1, a. The default style.
Objects: Structural non-themed elements that wrap components. Things like grids, containers, list positions.
Components: Your classic classes like .button-red. It's of course possible to use BEM to organize their inner code.
Trumps: Helpers as utility classes for surcharges and exceptions.

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.

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.

So are we finally good? Is it finally over and CSS is ok? You bet it's not.

The rise of CSS in JavaScript#

Around 2010 Google released AngularJS, opening the door to the rise of JavaScript components frameworks. It was followed by Angular2, React, Vue and many others.

Many JavaScript developers who probably never understood stylesheets saw this as the opportunity to fix it 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.

This evolution was sudden and brutal. The benefits were real, but it's important to note that some ideas about how to write CSS inside JavaScript were absolutely bollocks. For example React inline styles still use a JavaScript object that does not accept -, forcing developers to write CSS in Camel Case (what the hell?!) and declare values as strings.

var divStyle = {
 color: 'white',
 backgroundImage: 'url(' + imgUrl + ')',
 WebkitTransition: 'all',
 msTransition: 'all'
};

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.

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.

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?

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?

Utility First CSS#

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 ?

.red {
    color:red;
}
.border-blue {
    border-color:blue;
}

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:

<button class="red border-blue another-class another-one another-one-again omg-its-not-ending">A lot of classes</button>

The second problem is the incredible number of classes that would be needed to make it work in a truly agnostic way!

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.

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.

But even if you can programmatically create your classes, the problem persists: how do you deal with the bloat?

Tailwind CSS#

The Tailwind CSS 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.

He also felt that the semantic part was giving developers too much freedom and took too much time to refactor. He famously said that “Best practices” don’t actually work.

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.

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 .button class with a neutral design and a few utility first calsses to add theming.

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.

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.

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.

And of course 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.

In order to fix the naming, cascade and global problems 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.

But what if trying to fix the cascade with more classes, more utilities was actually a dead end?

Cube CSS#

The Composition, Utility, Block, Exception or CUBE CSS 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.

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 intrisic webdesign, a term invented by Jen Simmons in 2018.

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 isolation.

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 flexbox, the developer establishes a set of behaviors and let the browser decide.

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.

Here are the steps and details about them:

Composition: 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.
Utility: 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.
Blocks: 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.
Exception: 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.

Let's look at an example of a composition class:

.flow > * + * {
 margin-top: 10px;
}

This .flow class has a single purpose. It detects any child element right under the parent and add a top margin of 10px only between two elements.

A more traditionnal OOCSS with BEM approach would be:

.flow {
 \...\
}
.flow__item {
 margin-top:10px;
}
.flow__item:first-child() {
 margin-top:0;
}

But those two approaches are not exclusive, because of the cascade. It's perfectly possible to manage the flow outside of the blocks or components while adding customization to them, thus the Block of CUBE CSS.

As to how organize the code, Andy Bell suggest this order:

Config files
Design tokens classes
Resets
Global styles for HTML elements
Utility classes for Composition and Utility
Block classes

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.

Andy Bell also suggests regrouping classes in HTML using separators that the browser ignores like [ or |.

// Using [ ]
<div
 class="[ card ] [ section box ] [ bg-base color-primary ]"
 data-state="reversed">
</div>
// Using |
<div
 class="card | section box | bg-base color-primary"
 data-state="reversed">
</div>

The order he designed follows this pattern:

The elements’s primary block class (here it's card)
Any subsequent block classes (section and box)
Standard utility classes (bg-base)
Design token utility classes (color-primary)

This way it's easier to know how the code is organized.

Conclusion#

That's all!

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.

Basic forms styling

2022-04-16T22:23:30Z

Basic forms styling in 50 lines of CSS#

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.

Please note: the code excerpts and visual demos in this page may have different code than what is written.

Basics of forms#

I've detailed in my doing forms HTML page what elements are required when doing forms. If you haven't I suggest you read it before pursuing.

To put it quickly:

Everything must be inside a <form>
You can group your inputs in <fieldset> and name those groups with <legend>
Each input must have a <label> referencing its input with an id
Error or information texts for each input can be placed where you want, but must have an ID and be referenced with the aria-describedby attribute.
If an input is invalid, the input must have an aria-invalid attribute.
Validate forms by using a <button>, even if you use JavaScript validation.

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.

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

And it should visually look like this without any styling:

And the result will be:

The code#

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.

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 explanation#

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 <div> but you can actually do it in a leaner way by using styling from the parent.

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.

form * {
  display: block;
}

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 adjacent sibling combinator to detect if any element (*) as any adjacent sibling an if it has one, we add a margin top (you may have heard about this as the lobotomized owl technique).

form > * + *,
fieldset > * + * {
  margin-top: 1em;
}

Now we want to group some elements together by reducing the margins of some of our elements appearing after the label. 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.

So this time we use the general sibling combinator to detect any span, input or select than comes after a 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.

label ~ span,
label ~ input,
label ~ select {
  margin-top: 0.25em;
}

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 span element adjacent to the label.

label ~ span {
  color: #555;
  font-style: italic;
}

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.

input + span,
select + span {
  color: red;
  display: none;
}

When a form has an incorrect value, it's standard practice to add the aria-invalid attribute to the input or select 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.

[aria-invalid] + span {
  display: block;
}

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 ch unit, that stands for character. 1ch means one time the larger of 0 in the current font.

We can use data attributes to create alternate versions.

[data-size] {
  width: 100%;
}
 
[data-size="30"] {
  max-width: 30ch;
}
 
[data-size="10"] {
  max-width: 10ch;
}

Now comes the problem of checkbox and radio inputs. They usually come first with their label following. So we need to de-stack them by turning them into inline elements.

We could have used the :not() pseudo-class in our first code block above to exclude the checkbox and radio inputs from the display:block; rule. But doing so increases specificity and makes the code less readable, so it's better to let the cascade do its own thing.

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

[type="checkbox"],
[type="radio"],
[type="checkbox"] ~ label,
[type="radio"] ~ label {
  display: inline;
}

Finally, when you are styling your buttons, don't forget to also style the special input types that can be used as buttons.

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

button,
[type="button"],
[type="submit"],
[type="reset"] {
  all: unset;
  font-size: 1em;
  border: 1px solid currentColor;
  padding: 10px;
}

New CSS that can actually be used in 2024

2024-04-29T14:50:11Z

New CSS that can actually be used in 2024#

The amount of CSS novelty in the last two to four years has been staggering. Multiple innovations have been released and are now supported in all modern browsers, and some of them fundamentally change how to make websites.

This page is a cheat sheet for new CSS things I want to start using in 2024. Note that, to support older browsers, it's sometimes a necessity to use polyfills.

If you allow me a little rant

The amount of stuff our influencers hype on their websites and newsletters needs to slow down. I know they sincerely like CSS, that their professional life depends on staying up to date and looking relevant in CSS, but damn. When I want to update myself, I have to spend hours checking on Can I Use if the things they talked about in a blog post in 2021 actually exist in my browser ; only to find half of it stuck in technical preview purgatory. It makes me resentful towards people and I don't like that. See also: The continuing tragedy of CSS.

Logical properties#

For the longest time many css properties used physical directions to set values. For example : margin-top, padding-right, bottom, border-left. But those properties don't take into account switching to another reading direction, that can be set using direction, text orientation, and writing mode.

For example, a border placed on the left of a text would stay on the left if the text reading direction was reverted, instead of moving to the right to have a similar user experience. Logical properties avoid this issue by allowing setting properties on the X (called inline) and Y (called _block) axis.

I won't go into the whole spec (see MDN) but here are the most common use cases.

For height and width and their variants like max-width and min-width:

height: block-size
width: inline-size
max-width: max-inline-size
min-height: min-block-size

For margin, padding, border, and variants:

left and right : inline
left : inline-start
right : inline-end
top and bottom: block
top : block-start
bottom: block-end

For inset properties like top, bottom, left, right:

left and right : inset-inline
left: inset-inline-start
right: inset-inline-end
top and bottom: inset-block
top: inset-block-start
bottom: inset-block-end

Detail of browsers versions supporting this feature: Can I Use.

Side note

There is no margin or padding logical property to set 4 values, you need to use the inline and block ones. BUT a new inset property exists as a shorthand for top, right, down, left.

Container queries#

Media queries allowed to do an if/else using the browser width or height as a condition. Container size queries allow the same if/else logic, but for any container, not just the browser. You declare a piece of the dom as the container:

.card {
 container-type: size|inline-size|normal;
}

There are three values possible:

size: Allows to use the inline and block dimensions, as well as style queries.
inline-size: Same as above but only for inline dimension (this is the most useful for responsive design).
normal: Deactivate size queries, only let style queries.

And then use it as a media query:

@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

It's also possible to name containers, using the container-name property, or a shortcut width container.

.card {
  container: sidebar / inline-size;
}
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

Container size queries also have their own units:

cqw: 1% of a query container's width
cqh: 1% of a query container's height
cqi: 1% of a query container's inline size
cqb: 1% of a query container's block size
cqmin: The smaller value of either cqi or cqb
cqmax: The larger value of either cqi or cqb

Detail of browsers versions supporting this feature: Can I Use.

`:has`:has permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

To understand :has it's important to remember that CSS styling works has a cascade that goes from left to right (even if the browser reads it right to left but that's another topic). The last element on a declaration is the one being styled.

For example, take this HTML where inside main, we select all the article elements, then the strong elements.

<main>
 <article>
  <p>Some text</p>
  <strong>My strong text</strong>
  <p>Some text</p>
 </article>
</main>

main article strong {
 font-weight: 600;
}

But what happens when we want to style main at the condition that strong exists in the HTML? That's the purpose of :has, which will check for us.

main:has(strong) {
 //change main style
}

It's also possible to simulate logical operators likes && and ||. to check multiple conditions, like if main has p and has strong:

main:has(p):has(strong) {
 color:red;
}

If main has p or has strong:

main:has(p, strong) {
 color:red;
}

But that's not all. :has can be combined with CSS selectors like +, ~, > or other pseudo-selectors like nth-child or :not to open new possibilities.

Do a negative check:

main:not(:has(strong)) {
 //change main style
}

Check if strong is after p, if yes change previous p color to red.

p:has(+strong) {
  color:red;
}

Check if strong is after p, if yes change all the previous p color to red.

p:has(~ figure) {
 color:red;
}

For more interactive examples and concrete use cases, see Ahmad Shadeed's article on the topic.

Detail of browsers versions supporting this feature: Can I Use.

`:is` and `:where`:is and `:where` permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

They have the same use: select multiple things in a more concise syntax. For example, chaining of selectors or classes in menus made of lists are a classic issue of specific styling that creates a lof of specificity:

ol ol ul,
ol ul ul,
ul ol ul,
ol, ol, ol,
ul ul ul,{
  list-style-type: square;
}

Can be replaced by :

:is(ol, ul) :is(ol, ul) ul {
   // My style
}
// or
:where(ol, ul) :where(ol, ul) :where(ol, ul) {
  // My style
}

There are more good examples on the MDN page.

The difference between :is and :where is a CSS nerd thing who might, in the long run, make non-CSS specialist throw their keyboard in frustration: is: takes the specificity of the most specific thing it contains, while :where does not.

In a more concrete way, it means something styled inside an :is, if it has a bigger specificity like being a class, an id, or using !important, cannot be changed by a lower specificity rule even if this rule comes down after in the cascade.

For example this HTML:

<main>
  <p class="isClass">Text 1</p>
  <p class="whereClass">Text 2</p>
</main

With this CSS:

:is(.isClass) {
	color:red;
}
:where(.whereClass) {
	color:blue;
}

Looks the same. But what happens if we add this CSS?

main p {
	color: orange;
}

Since main p has a lower specificity than .isClass, it cannot restyle it. Meanwhile, .whereClass has a specificity of 0, and will become orange due to the incoming rule in the cascade.

Detail of browsers versions supporting :is: Can I Use.

Detail of browsers versions supporting :where: Can I Use.

Nesting#

It's quite obvious, it's the nesting from SASS, but without string concatenation (no gluing .myclass with a __children like we do in BEM). Nesting can be used with the nesting selector & or without it for simple use cases.

main {
	article {
		color:red;
	}
}
// Same as :
main {
	& article {
		color:red;
	}
}

The nesting selector is necessary for compound selectors (a combination of element + class like p.myClass) and pseudo classes (:hover, :focus`, etc).

```

main {

&.myClass {

//...

&:hover {

//...

```

Detail of browsers versions supporting this feature: Can I Use.

CSS Comparison Functions#

CSS Comparison Functions allow to compare values to the viewport (or the container if using container queries) and let the browser pick the most appropriate one. Basically a if/else that comes in three ways:

min(a, b): Takes the smallest value between a and b
max(a, b): Takes the biggest value between a and b
clamp(a, b, c): Takes the most appropriate value between smallest a, desired b, and biggest c.

But comparisons can be done with different values than pixels. %, em, rem, vw vh, among others are available. And since math expressions are baked in, it's possible to compare fixed values to live computed values based on the viewport.

For example, for a fluid font who's size will vary when between 16px and 32px, it can be done by summing the viewport width and the relative font size:

font-size: clamp(16px, 1vw + 1rem, 32px);

If you ever struggled adjusting things in media queries with a designer behind you, you understood immediately how revolutionary this is. In a world where designers only produce the mobile and desktop versions of their designs (and sometimes the tablet one), it allows to proportionally automate all the in-between for things like font sizes, margins, spacings, grid and flex gaps.

I have the feeling that this technique hasn't yet got out of the CSS specialist crowd despite being several years old. It may be due to its complexity, the use of frameworks and lack of knowledge in CSS.

If you are interested, visit utopia, which contains easy to use tools to generate the comparison functions for you. You can directly enter the values given by a designer and get the clamp() code as custom properties (aka CSS variables) to maintain your website cohesive.

Detail of browsers versions supporting this feature: Can I Use.

Cascade layers#

Cascade layers allow the creation of multiple CSS cascades and their ordering. The cascade is often the most dreaded aspect of CSS and has led to the creation of multiple methodologies to keep code ordered.

Cascade layers, like the name implies, offers to create separated cascades you can access anywhere in the files, and to layer them in the order we want.

@layer reset base; // Define the order of layers
 
// Put some code inside the reset layer
@layer reset {
 a {
  color: black;
 }
}
 
// Put some code inside the base layer
@layer base {
 a {
  color: grey;
 }
}
 
// Put more code inside the reset layer
@layer reset {
 p {
  color: red;
 }
}

But it doesn't mean that each layer is scoped (@scope exists but is not widely supported yet. In the example above, the color of a will be grey, as the base layer is after the reset layer. This is an organization tool, not a scoping mechanism.

This is especially useful in large code bases. It allows to force the code into a specific order, reduces the stress of looking where to add new code, and if it will affect the rest of the code.

For example, let's say we want to import a third party CSS stylesheet, add it to a layer, and build our own styles on top of it.

// import framework.css and define as framework layer
@import "framework.css" layer(framework);
 
// Order framework before personal
@layer framework personal;
 
@layer personal {
 // My own styles
}

But later in the project, we notice the framework has a buggy style. We can fix it in the framework layer without touching the personal layer. And even better, we don't have to go back at the start of the file:

@import "framework.css" layer(framework);
 
@layer framework personal;
 
@layer personal {
 // My own styles
}
 
 
@layer framework {
 // Small bug fix
}

Last thing: un-layered style always has the priority on layered styles. In the examples above, a style written outside a layer would have erased the previously defined ones. See this very extensive guide to better understand the layering of styles in browsers.

Detail of browsers versions supporting this feature: Can I Use.

Subgrid#

The subgrid property has been long in the waiting and is finally here, and mostly used to fix one very annoying issue. Imagine several columns of the same height, and each of them has the same number of children, but those children don't have the same height.

When looking at the whole, the children are not vertically aligned:

When only two children, this issue was fixables by declaring a flex column container and using space-between, but it wasn't ideal. | Full size

Declaring the children as a grid element and subgrid as the value of grid-template-rows allows to align the children:

This is a more solid way of doing it, as it allows for more elements having different heights. | Full size

.parent {
 display: grid;
 gap: 1rem;
 grid-template-columns: 1fr 1fr;
}
.children {
 grid-row: span 2;
 display: grid;
 grid-template-rows: subgrid;
}

There is of course more to subgrid than this. Ahmad Shadeed wrote an extensive article on the topic.

Detail of browsers versions supporting this feature: Can I Use.

Small but noticeable#

text-wrap:balance: Allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width. MDN - Can I Use Page
Dynamic viewport height or dvh: Takes into account the url bar and UI of browser, unlike vh which did not. Web.dev - Can I Use Page
accent-color: Helps coloring HTML controls that are traditionally cumbersome, like checkboxes, ranges, etc. MDN - Can I Use Page
Media Queries Range Syntax: Allows the use of mathematical comparison operators: >, <, >=, or <= in media queries. Ex: @media (width <= 1140px). Web.dev - Can I Use Page
flexbox gap: Same as grid, but now supported in flex. MDN - Can I Use Page

List of JavaScript frameworks

2025-10-20T14:10:23+02:00

A list of JavaScript frameworks#

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.

Last updates and information about this list

This list was created by Bastian from the Kirby Team on the Kirby Discord. For conservation purposes, I reproduced it here. It was then consolidated using Tom Mac Wright article about Single Page Apps replacements. Last updated September 25 2022.

JS-based page transitions#

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.

JavaScript enhanced HTML#

Event handling/reactivity/dom manipulation via HTML attributes. Development happens client side, without writing JavaScript.

Inline replacement of components#

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.

Livewire (PHP)
Stimulus Reflex (Ruby)
Phoenix Liveview (Elixir)
Blazor (C#)
Unicorn (Python)

Single Page Application (SPA)#

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.

The framework or library is loaded alongside the SPA code:

The framework or library compiles to the SPA and disappears:

"Meta" frontend frameworks#

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.

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"):

Next (React)
Nuxt (Vue)
Sveltekit (Svelte)

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"):

Astro (React, Vue, Svelte, Solid, etc.)
Solid Start (Solid)

Non-hydration frontend frameworks#

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.

Marko
Qwik

Opinionated full-stack JavaScript frameworks#

Using existing frontend and backend stacks in an opinionated way to offer a fullstack solution in full JavaScript

Server-injected SPA#

A client-side, component based application (Vue, React, etc) gets its state from pre-rendered JSON

Inertia

Questioning the JS frontend paradigm

2025-11-04T18:02:02+01:00

Questioning the JS frontend paradigm#

Links with the ⚠ sign are, in my opinion, the most important ones. If you lack time, focus on those.

2018#

The Thirty Million Line Problem: Casey Muratori explains why software has become unmaintanable due to the amount of code present in most projects. link

2020#

⚠ Second-guessing the modern web: A very influential and discussed essay by Tom MacWright where he questions the (then) emerging norm of building a React SPA with server rendering. link
The Cost of Javascript Frameworks: Tim Kadlec explores, in a data driven approach, the cost of using JavaScript frameworks. link

2021#

⚠ Hypermedia as the Engine of Application State (HATEOAS): Carson Gross, creator of IntercoolerJS and HTMX, started a series of essays and among them one focusing on the concept of Hypermedia. It questions the well founded use of JSON as a format for transferring data in web applications. link

2022#

⚠ Making the world’s fastest website, and other mistakes: Taylor Hunt narrates, in this incredible 5 parts article, how he tried to make a Fortune 20 website work on 60$ phones and terrible bandwidth, how he was successful, and why it was and will never be used. Probably the most influentiel article on this page. link
The balance has shifted away from SPAs: Nolan Lawson explains how browsers have implemented several techniques like paint holding, back-forward caching, service workers, etc. that reduces the necessity of using single page applications. link
Website Fidelity: Jim Nielsen details and adopts the idea of building websites in layers of fidelity instead of layers of technology. link
The self-fulfilling prophecy of React: Josh Collinsworth discussed how React is falling behind, and how it isn’t great at anything except being popular. link
The Demise of the Mildly Dynamic Website: Hugo Landau discusses what he calls the "dynamicity gap", basically how there's little room for mildly dynamic functionality in the modern ecosystem of static site generators and web frameworks. link
Is the madness ever going to end?: Unix Digest rants about the increasingly complex stacks used for websites and apps and how it degrades the experience of using them too. link
Weathering Software Winter: Devine from 100 Rabbits explains by example how modern digital hardware and software breaks once it gets out its very specific context, mostly the western world. video version text version

2023#

⚠ The Market for Lemons: Alex Russell explains how the JS stack merchants (especially the React team) knew about the complexity, cost and lack of performance of their tools, and how they chose to say nothing, obfuscate evidences and debates about it, by using boosterism, misdirections and toxic positivity. link
⚠ A Historical Reference of React Criticism: Following Alex Russell's article, Zach Leatherman lists all the fact-driven critics he could find about React, going as far as december 2014, showing that many issues that plague it today were already there right at the start. link
React is the New IBM: Charles Chen not only goes back to the well known React issues, but interrogates the whole philosophy of its inventors, mainly how they solve problems by escalating complexity. link
Why not React?: In this followup article of its 5 parts series, Taylor Hunt explores why using React for server side rendering can't achieve the speed of other technologies. link
Hypermedia Systems: Carson Gross (creator of HTMX), Adam Stepinski and Deniz Akşimşek published a free book about hypermedia. A more condensed and structured version of the essays mentionned above, with a more historical and practical approach. link
What's the most significant change in our industry over the last 10 years?: Steve Purcell answers in a single phrase. link
Bilithification: Glyph Lefkowitz questions the use of micro-services as the default for backends, arguing monoliths are better suited for most projects, and explains how to split them once they become too hard to maintain. link

2024#

⚠ The Website vs. Web App Dichotomy Doesn't Exist: Jake Lazaroff questions the overused paradigm that web projects are either websites or web apps, and how it influences technical choices in the wrong way. link
⚠ The Performance Inequality Gap, 2024: Alex Russell updates his yearly analysis on the performance of hardware and networks and how it's still a bottleneck when websites use a JavaScript based stack. link
JavaScript Bloat in 2024: Nikita Prokopov aka Tonsky lists popular websites and details their bloat. Staggering numbers. link
⚠ React, Electron, and LLMs have a common purpose: the labour arbitrage theory of dev tool popularity: Baldur Bjarnason details how frameworks like react and their model standardses the software developer, allowing companies to replace their expensive platform specialists with more commodified generalists. link
The quiet, pervasive devaluation of frontend: Josh Collinsworth deconstructs, in a very sensible way, the discourses and expectations put onto frontend development and how it leads to its develuation. link
The Decision to Leave Tech: Todd Libby details the reason that led him leave the tech world after years spent trying to increase awareness about web accessibility, just to burn out in the end. link
A Rant about Front-end Development: Frank M Taylor explains everything he thinks went wrong with modern Front-end development. link
Engineering for Slow Internet: brr (nickname) explains the pain of using modern software with very limited bandwidth. link
I don't have time to learn React: Keith Cirkel criticizes the time consuming aspect of learning frontend frameworks. link

Adjacent topics#

Cross platform web app solutions

2025-10-20T14:08:56+02:00

Cross platform web app solutions#

A discovery list of technical solutions to produce a desktop and/or mobile app using web technologies.

Apparently (all this is quite new to me) most solutions embed NodeJS inside them, making executing JavaScript the easiest part of the problem.

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.

Node and Webkit solutions#

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.

Electron is made by Github
NW.js is made by Intel

Overall both are in the same family but they are differences between NW.js and Electron.

Node and existing UI frameworks#

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.

NodeGui provides a bridge between HTML/CSS and QT.

Node and webviews#

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?

Except for neutralino, most projects of this type tends to use webview, a C/C++/Go library. Several bindings library for other languages already exist.

Others#

Sciter is a binary that can be used to create web apps. But under the hood it's using a superset of JavaScript called TIScript
Sciter JS seems to be Sciter but with common JavaScript, using the quick JS engine.

Freelancing notes

2022-03-13T19:03:30Z

Freelancing notes#

This page is about freelance work related to web projects (design, user experience, development, counseling).

The types of freelancers#

There are two types of freelancers that I know about in this field:

Mercenaries: 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.
Experts: They lead a project and sometimes implement it at the same time. They have less clients, for a longer period and a higher rate.

Both types are legitimate and needed in the field. Both have pros and cons:

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.
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.

What is sure is that both types need to build a network of clients.

Build a network#

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.

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.

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.

Cash management#

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.

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.

When deciding of your daily rate, it's important to take these arguments into consideration:

If you take 5 weeks of vacation each year it's 17 days of non-payed work.
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.
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).
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)
Depending on the country where you are located, taxes can take a substantial amount of your rate.
Depending of the type of company you have, you may need to pay an accountant each year.

Taking all these factors into consideration substantially lowers the money you earn as a freelancer. Overall, only around 50% of the price payed by the client is the real salary.

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.

Pricing#

About pricing:

Hour rate pricing is rare.
Daily rates are more common.
Package pricing is common in the web.

If you are a developer never do a package pricing 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.

Quotes#

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.

Here's a list of basic things to think about when making a quote.

Design#

Indicate a fixed number of initial design concepts that will be given to the client to help him decide the direction of the design.
List the number of pages, templates, or components that will be created once the direction is chosen.

Text#

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.
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.

Graphics and photographs#

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.
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.

Development:#

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.
If the project has an intricate codebase or list of features, detail what you will work on and what you will not work on.
List the languages, technologies, libraries, frameworks required.

Browser testing#

Be clear that browser testing is about allowing a similar experience on all browsers, not a pixel perfect render as it's impossible.
List the browsers used for the tests, and which one won't be tested.
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).

Tech support#

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.
If you do provide hosting, list what is required by the client (domain name, type of hosting, mails) and what is not.

SEO#

Be clear that even you can't guarantee increases in search engine rankings, even if you work in the SEO business.

Contract#

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.

Be sure the client knows that:

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.
The freelancer can't be responsible for any delay due to the lack of feedback from the client.
He can change its mind but that an additional quote will be made.
If he is not satisfied he can terminate the contract but will have to pay the time already spent working on the project.
Any legal stuff that you think is important (liability, payment schedule, intellectual property rights, work display)

Working with clients#

When clients hire a freelancer they basically want a facilitator, so everything should be done to keep the client reassured.

To avoid problems and facilitate the work:

Get as much scope as you can.
Communicate to get all the steps of the projects.
Find at which step of the project you have to intervene.
Provide a ready-made benefit.
If you have to work with a team, choose the people you want to work with.
Never put yourself in a position where you can be faulted.

Transparency and communication are keys to a good working relationship.

Give daily feedback and/or deliveries.
No need to write a novel each day, just a short notice is enough.
Ask the client if everything is OK on his side.
If you need feedback and mails are not working, make a voice call.
Never apologize of being communicative.
If you are working remotely, never apologize for working remotely.

When something is going bad, for example budget is exploding or demands are increasing, impose your way of working by saying no but provide options. Never come with empty hands as the goal is to simplify the process and save time.

Type of company#

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.

Raspberry Pi Distros

2021-11-12T15:47:36Z

Raspberry Pi distributions#

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:

User Experience
Responsiveness
Software support
Easy to install

The ratings are:

Perfect
Average
Poor
Terrible

Raspbian (Raspberry Pi OS)#

User Experience: Average It's ugly but coherent and easy to use
Responsiveness: Average Most things are fast but some programs (mostly Electron apps) struggle
Software support: Perfect It's an Ubuntu base and the official OS
Easy to install: Perfect Plug and play and follow the guide

Raspbian excels in nothing but is not terrible in anything. It's too bad it struggles with Electron apps. Supports hardware acceleration.

Dietpi#

User Experience: Poor Dietpi proposes ready-made basic desktops (Mate, XFCE, LXQTm, LXDE) that are ugly and sometimes does not work (sound cursor in XFCE).
Responsiveness: Perfect Everything is fast or fast enough, even Electron Apps are usable
Software support: Perfect It's based on Raspbian and comes with it's own list of ready-made software
Easy to install: Poor Small iso but very long install with terminal based menus, takes a lot of time and not everything is clear

Dietpi is probably the best in performance, but only for people with some skills at setting up their own environnement. Supports hardware acceleration.

Manjaro#

User Experience: Perfect It's beautiful, coherent and easy to use
Responsiveness: Poor It's still usable but worse than Raspbian, no hardware acceleration support for video
Software support: Average Based on Arch Linux, most things are available but most configuration tweaks are for Raspbian/Ubuntu
Easy to install: Average There's a few terminal screens but it's quick and works fine

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.

Ubuntu#

User Experience: Average The classic gnome Ubuntu
Responsiveness: Terrible It's so slow for everything it's almost unusable
Software support: Perfect It's Ubuntu so everything is there
Easy to install: Perfect The classic Ubuntu install experience, everything is clear

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.

ffmpeg commands

2021-11-12T15:47:36Z

ffmpeg commands#

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 ffmpeg documentation page.

Cut a part of a video :#

ffmpeg -i input.mp4 -ss 00:00 -to 00:10 -c:v libx264 -crf 30 output.mp4

use ss to select the starting and ending time
to avoid re-enconding the video, use stream copy via -c, define the video with v and the codec (libx264 in the example)
use -crf to define quality (lesser is better)

Concatenate videos#

ffmpeg -f concat -i input.txt -c copy output.mp4

Create a text file with the files you want to concatenate into a single video or audio file.

file 'video1.mp4'
file 'video2.mp4'
file 'video4.mp4'

Use -c copy to avoid re-enconding the videos (they need to have the same base codec)

Add audio to video#

ffmpeg -i input.mp4 -i input.mp3 -c copy -map 0:v:0 -map 1:a:0 output.mp4

the -c copy avoid re-encoding the streams
the first -map defines where to start the audio in the video file
the second -map defines where to start the audio in the audio file

Encode audio file to mp3#

ffmpeg -i input.opus -ar 44100 -ac 2 -b:a 128k output.mp3

-ar defines the frequency (here it's 44100)
-ac sets the number of audio channels (here 2)
-b:a defines the bitrate of the file (here 128k)

Add metatags to audio file#

ffmpeg -i input.mp3 -i img.jpg -c copy -map 0 -map 1 -metadata title="title" output.mp3

-i img.jpg adds an image to the audio file
-c copy to avoid re-encoding the image file
-map 0 -map 1 position the image
-metadata title="title" defines the title of the file in the metadatas

Understanding memory bits bytes addresses and hexadecimal

2023-03-03T16:22:26Z

Understanding memory, bits, bytes, addresses and hexadecimal#

Memory can be understood as a space that is composed of bits. Each time something happens in a program you write or get something out of memory by manipulating bits.

A visualization of the bits that compose the memory of the fake game console Pico8. | Full size

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.

In different colors the different parts of the memory of Pico8 associated with different tasks like screen and sound. | Full size

Since manipulating bits is complicated, bits are combined together into bytes. And to ease their manipulation, bytes are identified by a number called an address.

A byte made of 8 bits in orange in Pico8 as well as its address at the bottom left of the image. | Full size

What is binary#

When you write numbers, you use the decimal system which is made from 10 numerals:

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.

But computers only understand 0 and 1, so how do you translate binary into numbers?

To write other numerals from 2 to 9, you have to compose those numerals with a set of 0 and 1. For example, in binary, to write 2, you write 10:

Numeral - Binary
0       -  0
1       -  1
2       - 10
3       - 11

But we are now out of digits to create 3. So just like with numerals, we add a new digit:

Numeral - Binary
0       -   0
1       -   1
2       -  10
3       -  11
4       - 100
5       - 101
6       - 110
7       - 111

And it continues for 8:

Numeral - Binary
0       -    0
1       -    1
2       -   10
3       -   11
4       -  100
5       -  101
6       -  110
7       -  111
8       - 1000

The next set of numerals will be at 16 (8 + 8) and then at 32 (16 + 16) and so on.

That means that in a byte, which is made of 8 bits who are themselves binaries (0 and 1), the maximum number you can write is 255, composed by writing 11111111.

Therefore, a byte contains only 256 numerals.

A visualization of the bytes of Pico8 with the second column showing the calculated number generated by the bits of the last column. | Full size

Hexadecimal#

Hexadecimal is another type of numerals used in programming. Instead of going from 0 to 9, hexadecimal goes from 0 to 15 without adding a 1 numeral to count over 9.

Instead, hexadecimal uses letters, from A to F as new digits.

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

When hexadecimal goes beyond 15, it uses binaries again.

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

The idea between hexadecimal is to be able to translate big numbers using only two digits. For example, FF in hexadecimal means 255 digits.

On the third column the FF hexadecimal can be seen. | Full size

Addresses can also be written in hexadecimal.

Credits#

This page is a partial transcript of this video by Lazy Devs Academy. The captures are also made from the video.

Sublime Text Configuration

2021-11-20T22:07:58Z

Sublime Text Configuration#

Sublime Text is a commercial source code editor. 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.

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.

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.

My preferences#

{
    "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",
}

My plugins#

Sublime Text uses a plugin named Package Control to install other plugins.

Open the Tools menu
Select Install Package Control…

Once it's install, use ctrl + shift + p and search for Package Control: Install Package. The packages I use:

Auto Close HTML Tags: Closes HTML tags after a >.
AutoFileName: Autocompletes filenames.
BracketHilighter: Hilights the corresponding brackets both in text and in the vertical line numbers column.
Clickable URL: Makes URLs in files clickable.
Color Highlighter: Shows colors inside the editor.
Compare Side by Side: Allows to compare two files and automatically find the differences
DocBlockr: Helps with writing documentation and code comments
Emmet: Helps creating snippets of HTML
GitGutter: Show information about the current Git Repository and last modifications
HTML/CSS/JS Prettify: Code formater for HTML, CSS, JS and a few JS frameworks
Markdown Editing: Syntax for markdown
Minify: Minifies CSS, HTML, JavaScript, JSON or SVG files
Sass: Sass and SCSS support
Schemr: Changes color and themes quickly
SideBarEnhancements: Adds a lot of features to the sidebar when right clicking
SublimeGit: Adds support for most Git actions
SublimeLinter: Adds linting to Sublime Text. Can then be combined with specific language linters like csslint or jshint
SyncSettings: Allows to save Sublime Text settings and plugin list inside a Github Gist
Terminal: Opens a terminal inside the current folder

Algorithms and data structures

2022-10-13T10:58:02Z

Algorithms and data structures#

These are my notes for the algorithm course of frontend masters. This first page contains the introduction for the course, and the subsequent sections are listed below.

Big O#

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.

Basically: as your input grows, how fast does computation or memory grows?

Important concepts:

Growth is with respect to the input
Constants are dropped
Worst case is usually the way we measure

Growth is with respect to the input#

Example:

function sum_char_codes(n: string): number {
    let sum = 0;
    for (let i = 0; i < n.length; ++i) {
        sum += n.charCodeAt(i);
    }
    return sum;
}

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 O(N).

Constants are dropped#

So what happens when we add a new loop?

Example:

function sum_char_codes(n: string): number {
    let sum = 0;
    for (let i = 0; i < n.length; ++i) {
        sum += n.charCodeAt(i);
    }
    for (let i = 0; i < n.length; ++i) {
        sum += n.charCodeAt(i);
    }
    return sum;
}

In this example the loop happens twice, so the reflex would be to think it takes twice the time or O(2N). But it's not correct: the goal is to describe the growth 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.

So in this case, the correct notation would be O(2^N). This is why constants are dropped in Big O notation.

Example of why constants are not a good indicator, with N as the input:

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

Consider the worst case#

Example:

function sum_char_codes(n: string): number {
    let sum = 0;
    for (let i = 0; i < n.length; ++i) {
        const charCode = n.charCodeAt(i);
        // Capital E
        if (charCode === 69) {
            return sum;
        }
        sum += charCode;
    }
    return sum;
}

In this example, the sum is returned when E is encountered, so logically the growth could be O(n - x) where x is the number of characters skipped after E.

But since we don't know where E 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 O(n), as if E was the last character of the string.

Complexity#

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 (source).

We already saw the O(2^N) before, here's the O(N^2):

function sum_char_codes(n: string): number {
    let sum = 0;
    for (let i = 0; i < n.length; ++i) {
        for (let j = 0; j < n.length; ++j) {
            sum += charCode;
        }
    }
    return sum;
}

Same with O(N^3):

function sum_char_codes(n: string): number {
    let sum = 0;
    for (let i = 0; i < n.length; ++i) {
        for (let j = 0; j < n.length; ++j) {
            for (let k = 0; k < n.length; ++k) {
                sum += charCode;
            }
        }
    }
    return sum;
}

Data structures

2022-10-17T16:06:44Z

Data structures#

Array#

An array is a contiguous (non-breaking) memory space which contains a certain amount of bytes. How the memory is interpreted depends on how the compiler is configured.

Example: an array with 3 entries interpreted differently.

// Schematic view of a 8 bits / 1 byte array.
[00, 00, 00]
 --  --  --
 0   1   2

// Schematic view of a 16 bits / 2 bytes array.
[00 00, 00 00, 00 00]
 -----  -----  -----
   0      1      2

// Schematic view of a 32 bits / 4 bytes array.
[00 00 00 00, 00 00 00 00, 00 00 00 00]
 -----------  -----------  -----------
      0            1            2

Taking all this into account, it means an array has absolutely no functions like push or pop or shift available in modern languages, where arrays are therefore, more than arrays.

Knowing this, how do you manipulate data?

Get: 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: 2×8 = 16. Skip 16 bits / 2 bytes.
Insert: You cannot grow an array size, which means an insertion will overwrite the existing data.
Delete: 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.

Linked list#

A linked list can be seen as a series of nodes where each node contains a value and points to another node.

There are two versions:

A singly linked list can only go forward. The nodes don't have a reference of what came before them.
A doubly linked list can go forward or backward. The nodes have a reference to what came before them.

For example:

A singly linked list
-------------
A → B → C → D

A doubly linked list
-------------
A ↔ B ↔ C ↔ D

Inserting, reordering or deleting data means changing the references of the different nodes.

Insert F between A and B:

A → F
F → B
F ← B
A ← F

Logically, linked lists are not contiguous, don't have an index, and can be stored anywhere (which is sometimes referred as heap allocation).

This type of structure has strengths and weaknesses:

Operations performed at the head or tail of the list are extremely fast (get, insert, delete, etc.)
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.

Since none of the size of the input or the existing size of the list matters, linked lists have a notation of O(1).

Search algorithms

2022-10-13T16:43:56Z

Search algorithms#

Linear Search#

In an non-ordered array, we go from start to finish and ask at each index position if the value we want is present.

export default function linear_search(haystack: number[], needle: number): boolean {
    for (let i = 0; i < haystack.length; i++) {
        if(haystack[i] === needle) {
            return true
        }
    }
    return false
}

The Big O of linear search is O(N).

Binary Search#

The binary in binary search refers to the 0 or 1 aspect of binary, and does not mean working with actual binary values.

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.

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 < hi)
 
    return false
}

The Big O of Binary Search is O(log n).

Side note

In this Big O notation, log refers to logarithm. 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 2.

Exercise: The two crystal balls#

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.

In this exercise, the building is an array, and the value of breaks is either false (did not break) or true (did break).

In this case, both the Linear Search and the Binary Search can work but won't be optimal:

The Linear Search will only use one crystal ball and will be very slow, testing every floor one after the other.
The Binary Search, with its base number of 2, would only be able to approximate the height, as it only get two tries.

A better solution would be:

Jump every x in the array and check if the first ball breaks
When the ball breaks, walk backwards to the amount of x
Walk forward linearly until the second ball breaks

Since we don't want to use a constant to determine x as it would not be proportional to the array size, we change its unit type, and use the square root of the array.

export default function two_crystal_balls(breaks: boolean[]): number {
 
    const jmpAmount = Math.floor(Math.sqrt(breaks.length))
    let i = jmpAmount
 
    for (; i < 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 < jmpAmount && i < breaks.length; ++j, ++i) {
    if(breaks[i]) {
            return i // Return when second ball breaks
        }
    }
 
    return -1
}

The Big O for this algorithm is O(√n).

Sorting algorithms

2022-11-10T15:43:48Z

Sorting algorithms#

Bubble sort#

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 n values.

export default function bubble_sort(arr: number[]): void {
    for (let i = 0; i < arr.length ; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
            if(arr[j] > arr[j + 1]) {
                const tmp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = tmp
            }
        }
    }
}

In this example:

-1 is used to avoid comparing the last value of the array with nothing (out of bounds error).
- i is used to avoid comparing values already compared, as the last value of each pass is the biggest.

This Big O for this algorithm is O(n²).

Queue#

A queue is a specific implementation of a linked list.

A queue is FIFO structure, for First I, First Out. 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.

There are usually three operations associated with a queue:

Enqueue: Adding to the queue through its tail
Deque: Removing from the queue through its head
Peek: Seeing what is the first element of the queue

Example:

type Node<T> = {
    value: T,
    next?: Node<T>,
}
 
export default class Queue<T> {
    public length: number;
    private head?: Node<T>
    private tail?: Node<T>
 
    constructor() {
        this.head = this.tail = undefined
        this.length = 0
    }
 
    enqueue(item: T): void {
        const node = {value:item} as Node<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
    }
}

Stack#

A stack is a specific implementation of a linked list.

A queue is LIFO structure, for Last I, First Out. 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.

There are usually three operations associated with a queue:

Push: Adding to the stack through its head
Pop: Removing from the stack through its tail
Peek: Seeing what is the first element of the stack

Example:

type Node<T> = {
    value: T,
    prev?: Node<T>
}
 
export default class Stack<T> {
    public length: number;
    private head?: Node<T>
 
    constructor() {
        this.head = undefined
        this.length = 0
    }
 
    push(item: T): void {
        const node = { value: item } as Node<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<T>
        this.head = head.prev
        return head.value
    }
 
    peek(): T | undefined {
        return this.head?.value
    }
}

Arrays algorithms

2023-03-22T17:27:28Z

Arrays algorithms#

ArrayList#

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.

For this we need two datas:

Length: The length is the amount of entries inside the array.
Capacity: The capacity is the number of possible entries of the array.

For example, an array with a capacity of 6 and a length of 3:

[1, 2, 3, , , ]
       |      |
    Length    |
              |
           Capacity

ArrayLists are very good with Stack like operations:

Push: Go to the lenght, add the new value at lenght +1.
Pop: Goto the length, remove the value and decrement the length.

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.

This is why ArrayLists aren't as good with Queue like operations:

Enqueue: If the array has the capacity, all entries starting from the last one need to be moved by +1, one by one, to make space for the new entry at the head of the array.
Deque: All entries starting from this first one need to be moved by -1, one by one, to free make space at the end of the end of the array.

The same issues happen when inserting in the middle of the ArrayList.

ArrayBuffer - Ring Buffer#

An ArrayBuffer is an over-capacity array that does not use 0 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.

[....[----------->]......]
0    |            |      n
    Head        Tail

The ArrayBuffer eases some operations:

Deque: Clean the entry then add 1 to the head, without the need to move the remaining entries by -1.
Push: Add the new entry at length, then add 1 to the tail.

If the push reaches the maximum capacity of the array, it can circle back to the start of they array plus the modulo of the length, and set its tail there (hence the name Ring Buffers).

[->]....[---------------]
0  |    |               n
 Tail Head

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.

Recursion

2022-11-14T17:37:16Z

Recursion#

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 base case. The base cave is the point at which the problem is solved and recursion stops.

For example, this function foo() takes a n argument, and each time it calls itself, it add n-1, until n is 1.

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

There are three values that can help visualize this a little more easily:

rA: return Address. When a function finishes its work, it needs to go back to the place where it was called, and return a value.
rV: return Value. The value that is actually returned when the function is over needs a space in memory.
A: Arguments. To pass values inside the function, some memory is allocated.

Now what happens when the previous function foo is called with 5 as an argument is called:

The return address is whatever called foo(5).
The return value is unknown, but it can be assumed it is at least 5 or more.
The argument is 5.

whatever called foo(5)
       \
        \  rA |  rV | A |
|-------|\----|-----|---|
|foo(5) |     | 5+  | 5 |

As the argument is not equal to 1, the function will call itself again after decreasing the value of the argument by 1:

The return address is now foo(5), since it called foo(4).
The return value is unknown, but it can be assumed it is at least 4 or more.
The argument is 4.

The cycle continues to repeat itself until the argument is 1:

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 |

Now that the argument is equal to 1 and returns 1, the addition of return n + foo(n - 1) can actually happen, from the bottom to the top of the stack of foo() executions:

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 |

Knowing all this, a recursive function can be broken into 3 steps:

1. pre: doing something before the recursion. In the example before: n +.
2. recurse: calling the function. In the example before: foo(n - 1)
3. post: doing something after the recursion. Not in the example.

Example: doing something before returning the value of the recursion.

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

Exercise: Maze Solver#

Using recursion, find the exit in a maze made with a two-dimensional array and return the path used.

Theoretical approach#

The maze is a square, with an entry and an exit:

          ↑
xxxxxxxxxx x
x        x x
x        x x
x xxxxxxxx x
x          x
x xxxxxxxxxx
 ↑

We can move in four directions: up, right, down, left.

  ↑
← ♜ →
  ↓

But these movement options can create issues:

Going off the map
Hitting a wall
Finding the exit
Retracing one's steps

Those issues need to be used as the base cases. If the program detects them, it should not try to move in the incoming direction, and try another direction.

Code implementation#

The main function takes four arguments that serve to describe our maze and its working conditions:

maze: the actual two-dimensional array representing the maze
wall: the character that designates a wall (ex: *)
start: the starting position as x and y coordinates
end: the exit as x and y coordinates

And looks like this:

export default function solve(
  maze: string[],
  wall: string,
  start: Point,
  end: Point): Point[] {}

Avoid errors for base cases#

A walk() function is created, which returns a boolean and uses those arguments:

maze: the same two-dimensional array representing the maze
wall: the same character that designates a wall (ex: *)
curr: the current moving position of the function as x and y coordinates
end: the exit as x and y coordinates
seen: a two-dimensional array of booleans informing if the position was already visited

The base cases are added before handling recursion:

function walk(maze: string[], wall: string, curr: Point, end: Point, seen: boolean[][]): boolean {
 
    // Off the map
    if (curr.x < 0 || curr.x >= maze[0].length || curr.y < 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
    }
}

Build the path with recursion#

A new argument is added:

path: an array of x and y coordinates that retraces all successful movements and allows to retracce the path

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.

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
}

Then, create an array of directions (left, right, down, up) that will be used to move inside the maze:

const dir = [
    [-1, 0],
    [1, 0],
    [0, -1]
    [0, 1]
]

Then, loop over each direction to test if it's allowed to move, and if walk() returns true, it means the exit has been found:

// Recurse
for (let i = 0; i < 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
    }
}

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:

// Finding the exit
if (curr.x === end.x && curr.y === end.y) {
    .push(end)
    return true
}

Finally, create the seen as the maze with values of false, then use the walk() function, in the main function:

export default function solve(maze: string[], wall: string, start: Point, end: Point): Point[] {
    const seen: boolean[][] = []
    const path: Point[] = []
 
    for (let i = 0; i < maze.length; i++) {
    	seen.push(new Array(maze[0].length).fill(false))
    }
 
    walk(maze, wall, start, end, seen, path)
 
    return path
}

The completed exercise:

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 < 0 || curr.x >= maze[0].length || curr.y < 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 < 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 < maze.length; i++) {
        seen.push(new Array(maze[0].length).fill(false))
    }
 
    walk(maze, wall, start, end, seen, path)
 
    return path
}

Quicksort

2023-03-22T17:27:28Z

Quicksort#

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.

Once this weak sort 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.

After that, all values are retrieved, and the array is completely sorted.

Example with an array of 16 values:

                        [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]

The big O of Quicksort is O(log n), where log is the number of times a new split is made using the pivot.

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.

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.

[6,5,4,3,2,1]
      1---------
               |
          [2,6,5,4,3]
               2-------
                      |
                 [3,6,5,4,3]
                      3-----
                           |
                         // etc...

The solution to avoid this is to always pick the middle element of the array as the pivot.

If it's sorted, zero swaps will happen.
If it's reverse sorted, the array will be perfectly split in the middle.
If it's randomly sorted, then the algorithm has a random chance of being near the middle value.

Knowing this, Quicksort big O is then somewhere between O(log n) best case and O(n²) worst case.

Example:

// 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 < hi; ++i) {
        if (arr[hi] <= 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);
}

Trees

2023-03-22T17:27:28Z

Trees#

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.

              root
                |
         -------------
         |           |
       child       child
         |
    -----------
    |    |    |
 child child child

There's a common terminology around trees to help defined the different parts:

Root: The most parent node.
Height: The longest path from the root to the most child node.
Binary tree: A tree in which has at most 2 children, at least 0 children.
General tree: A tree with 0 or more children.
Binary search tree: A tree in which has a specific ordering to the nodes and at most 2 children.
Leaves: A node without children.
Balanced: A tree is perfectly balanced when any node's left and right children have the same height.
Branching factor: The amount of children a tree has.

Tree Search Algorithms

2023-03-22T17:27:28Z

Tree Search Algorithms#

When working in trees, moving inside the structure is often called traversal. The algorithms described below could there be considered traversal algorithms.

Depth First Search#

Below are examples of traversals of what is called Depth First Search (DFS), because the traversal happens vertically or depth first.

Pre-order traversal#

A pre-order traversal in a binary tree consists of:

A visit to the node
Getting the value
A recursion to the left children, if it exists
A recursion to the right children, if it exists

       7
       |
  ------------
  23         3
  |          |
------    ------
|    |    |    |
5    4    18   21

The order of recursion will be 7, 23, 5, 4, 3, 18, 21. In a pre-order transversal, the root is at the beginning.

Example:

export default function pre_order_search(head: BinaryNode<number>): number[] {
    return walk(head, path);
}
 
function walk(curr: BinaryNode<number> | null, path:number[]): void {
    if (!curr) {
        return path;
    }
    path.push(curr.value);
    walk(curr.left, path);
    walk(curr.right, path);
    return path;
}

In-order traversal#

An in-order traversal in a binary tree consists of:

A visit to the node
A recursion to the left children, if it exists
Getting the value
A recursion to the right children, if it exists

       7
       |
  ------------
  23         3
  |          |
------    ------
|    |    |    |
5    4    18   21

The order of recursion will be 5, 23, 4, 7, 18, 3, 21. In a in-order transversal, the root is in the middle.

Example:

export default function in_order_search(head: BinaryNode<number>): number[] {
    return walk(head, path);
}
 
function walk(curr: BinaryNode<number> | null, path:number[]): void {
    if (!curr) {
        return path;
    }
    walk(curr.left, path);
    path.push(curr.value);
    walk(curr.right, path);
    return path;
}

Post-order traversal#

A post-order traversal in a binary tree consists of:

A visit to the node
A recursion to the left children, if it exists
A recursion to the right children, if it exists
Getting the value

       7
       |
  ------------
  23         3
  |          |
------    ------
|    |    |    |
5    4    18   21

The order of recursion will be 5, 4, 23, 18, 21, 3, 7. In an post-order transversal, the root is at the end.

Example:

export default function post_order_search(head: BinaryNode<number>): number[] {
    return walk(head, path);
}
 
function walk(curr: BinaryNode<number> | null, path:number[]): void {
    if (!curr) {
        return path;
    }
    walk(curr.left, path);
    walk(curr.right, path);
    path.push(curr.value);
    return path;
}

Writing tips

2022-03-13T19:03:30Z

Writing tips#

These writing tips are based on personal experience and might not work for you, so be careful when trying to use them.

Please note that I'm talking about writing for others. 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 Gamekult and by my old friend Franck Extanasié.

Also don't forget that as with everything, the more you write, the better you write.

Is the subject worth it?#

First of all, anyone can write about any subject and potentially, any subject can be interesting.

But that doesn't mean every 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?

The quality of the subject (and thus the pleasure you as a reader will get from reading it) is determined by the context 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.

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.

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 questions about my own practices, I stepped back to get context and tried to find answers.

All this combined helps me build what Thomas Cusseau called the angle of the article.

The angle#

Just like in the cinematographic sense with camera angles, the way you position 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.

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.

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.

My process#

My most used process, that I apply mostly in non-fiction writings, work as follow.

I openly ask a question about the subject.
I invite the reader to look at the subject from a new perspective that I provide.
I raise the reader's understanding of the subject by delivering context in a logical chain of ideas.
I deliver a conclusion that answers the question.

The question#

The question is not actually a question!

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.

The hint for my 2020 review was:

2020 was one of the best years I experienced in recent memory.

Let's analyze this for a bit:

2020 is the main context. Everyone knows 2020 was as bad year. You might think Ugh, here we go with 2020 again, so depressing.
Best years in recent memory when combined with 2020 creates the problematic. I want to create a Whaaaaaaaaaat moment!
I experienced is a hint that I am the perspective. This page is a personal journal that will guide you through my journey.

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.

But please respect yourself. Never use a question mark inside a title or your problematic. They are obnoxious, too easy and often drives the reader away.

The perspective#

Right after the question, I try to give hints about why 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.

The goal is to embark him into my own journey, making him revive my cycle of question, context, answer by shifting his perspective with mine. The only difference between us are:

I already know the answer, he does not.
I have the full context, he does not.

So my goal now is to deliver him the full context so he can understand my conclusion.

The context delivery#

From this moment I am in the core of the article. This is often the most difficult part to write.

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.

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 the context of the context, thus leading to something that is related but not related to the subject of the article.

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.

Even more difficult are the transitions. Each parts needs to end with a hint about what the next one will be about.

Plan or go with the flow?#

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.

Of course both methods have positives and negatives.

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.

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.

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.

The conclusion#

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.

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.

It always feel good to have a AH, I GET IT moment, and that's what I aim for my conclusions.

Various tips and tricks#

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.
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...
When it's too hard, let it rest for a few days before continuing. The blur will disappear and you'll be fresh.
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.
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.

Everything you need to know to choose an office chair

2023-03-03T16:22:26Z

Everything you need to know to choose an office chair#

It's 2021 and we're still destroying our backs and vertebras with gameeerz chairs. I talked with an expert to learn how to chose an office chair that respects our bodies.

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 La boutique du dos à Brest, to the point where I went back to see them to write an article about chairs, that was initially published in French on Geekzone.fr.

This page is a condensed version of the article. All prices are indicated in Euros. No brand sponsored the initial article or this version.

Why office chairs hurt you#

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.

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.

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.

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.

Basically, the chair has to adapt to the body, not the opposite.

The sitting position#

But how should you actually sit? 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.

From a purely theorical standpoint, the good office chair position 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.

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.

How to feel comfortable#

It's a bit contradictory but movement is key. 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.

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).

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.

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.

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.

Ask yourself the right questions#

A lot of people project on others their own experience with their chair. But what counts is YOU. 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.

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.

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.

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.

Standing desks, a good or bad idea?#

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?

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.

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.

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.

Also, of course, it's useless to have a sit-and-standing desk if you have a crappy chair.

Ask for advice from profesionnals#

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.

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.

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.

Do your research and take care of yourself!

More important informations#

Here's a bunch of important informations about chair adjusting, special types of chairs and prices.

How to adjust your chair?#

You need to go from the top to the bottom, not the opposite!

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.
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.
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.
Adjust the depth of the seat so that there is enough space between the back of your knees and the beginning of the seat.
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.

The off-center rocking mechanism#

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.

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.

Standing chairs#

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 energizing the people who use them.

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.

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.

Prices#

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.

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.

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.

In the case of a kneeling chair, it will be between 150 and 300 euros depending on the model.

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.

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.

Keyboards, mouses, monitors and laptops#

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.

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.

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.

A huge thank you to Catherine and Yvan Couloigner from La boutique du dos à Brest 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.

Spinal Disc Herniation

2023-03-03T16:22:26Z

Spinal disc herniation#

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.

So what is 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.

Wikipedia

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.

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.

Welcome to hell.

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.

That bloody cheese leaking out of the sandwich. | Full size

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.

But what if you can't get an operation?

Dealing with pain#

You have to learn how to live with pain, and find ways of reducing it.

Painkillers#

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.

They often have life annoying side effects, like making you sleepy or dizzy
They create stomach burns and nausea
In some instances, you can create allergic reactions like dermatitis
They can create addiction

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 Fibromyalgia.

So painkillers work and are necessary at the beginning, but should be avoided when it's possible.

Kinesiotherapy#

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.

More than a year after her spinal disc herniation, I learned about the McKenzie method, which is a bit controversial.

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.

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?

Neurostimulation#

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 Sciatica crisis.

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.

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.

Now the good news is: they exist in very small form factor.

An example of using a portable neurostimulator to reduce pain. | Full size

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.

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.

Now this tool is great, but it has flaws:

Of course you have the cables. You get used to it, but they are sometimes cumbersome.
The battery lasts, but not a full day. Try to favor models without useless crap like touch screens.
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.
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.
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.

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.

Furniture for everyday life#

If you work at a desk all day, you need a dedicated chair. I already wrote about this 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.

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.

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.

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.

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).

Disability recognition#

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.

Among them:

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.
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.
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.
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.

Your injury is now your job#

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.

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.

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.

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.

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.

Take care and feel free to ask me question if you have any by using the links below.

Drawing notes

2024-09-11T22:17:12Z

Drawing notes#

This page aims to collect notes from various ressources I encountered while re-learning to draw.

Drawing, like most craftsmanship, is about figuring out a process you find interesting and feel like doing thousands of times without getting bored.

— Me, About drawing

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.

Those notes are public but heavily opinionated and are not to be taken as face value. Think about them as cards you pick when you have to remember a specific thing.

Shapes#

Shapes are areas created by lines, colors, and textures. They are what composes an image and allow the artist to direct the eye of the viewer, convey mood, render feelings.

In nature, shapes can come in great variety, which makes their reproduction not only difficult, but sometimes undesirable. If they are too numerous and don't serve the meaning meaning the artist needs, then it's required to merge or transform them.

Merging shapes#

Merging shapes is one of the many ways of simplifying what we see by reducing the amount of information we draw. Simplifying requires the artist to be less literal about what they see and reduce it to an essential design to convey meaning.

By merging shapes, the artist can direct the eye of the viewer to another part of the piece, convey specific moods, and make the piece more easy to grasp.

Making good shapes#

But while reducing information is good, it has to be done qualitatively. Designing a good shape requires work. Good shapes:

Are abstract
Are simple and easy to draw
Have a good design all by themselves
Are readable even from a distance

In order to create those shapes, it's good to mix different type of lines: S curves, C curves and straight lines allow the drawing of any shape. Looking at an existing shape and asking if a complex set of lines can be merged into a single one to reinforce a shape is important.

Visual language#

Visual language is a subset of theorical tools a visual artist can use to convey meaning, akin to words for a writer.

Message: Thinking about the intention of the piece before starting it.
Composition: Directing the viewer eyes to a focal point or into a specific direction to express the message (Full page on composition)
Contrast: Creating relationships (not just light versus dark) between elements to reinforce the composition (Full page on contrast)

Values#

Value refers to the gray scale between white and black and is used to express how light interacts with the elements represented in a piece. The values are added on the existing shapes by trying to now think of those as planes, a.k.a surfaces that have an orientation on the Z axis and convey a 3 dimensional form.

This is important because light comes in a straight line and will bounce on the planes, creating shadows. Shadows come into two types: cast shadows adopt the shape of what is blocking the light ; but form/flat shadows occurs when planes turn away from the light, and the only way to know by how much is by identifying the direction of the plane.

It can be difficult to add values, because there can be so many of them on the scale. But to convey realistic light, a few rules can be followed:

Start with 3 values : the specular light, the midtones, the shadows.
Like a photographer, choose if you want to expose for the light (2 values for light, 1 for shadows) or expose for the shadows (1 value for light, 2 for shadows). Don 't do both or it will look like a photo made by an HDR camera.
Consider the midtones as the whole area hit by light excluding the specular and the shadows.
There more room for information in the midtones hit by light than in the shadows.
The range of midtones should not be too large from each others on the scale, as keeping them close helps reading them as planes.
Outside of cast shadows, specular light and shadows should be kept away from each others as they create harder edges.

Lighter
|
| <- The Specular
|
| <-
| <- The midtones
| <-
|
|
|
|
| <- The shadows
|
Darker

Sources#

10 Minutes To Better Painting_ by Marco Bucci.
Creative Fundamentals by Devin Korwin.

Composition

2024-09-11T22:17:12Z

Composition#

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 by pointing to directions or giving a focal point.

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.

An upright stable triangle gives a feeling of power and stability. Painting by Dean Cornwell. Source | Full size

An inverted triangle creates an uneasy feeling that can help translate a tense situation. Painting by Dean Cornwell. Source | Full size

An asymmetrical triangle creates more dynamism, which is good for chaotic situations. Painting by Dean Cornwell. Source | Full size

Outside of triangles, composition can use squares, rectangles and parallelepiped. Depending on their regularity and placement they can express opposite feelings.

Repeated angles creates a stable scaffolding that directs the eyes and help understand the situation. Painting by Dean Cornwell. Source | Full size

Unstable angles in this scaffolding composition creates more uncertainty. Painting by Dean Cornwell. Source | Full size

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.

Points to remember:

Don't start drawing or painting right away
Think about the intention of the drawing/painting
Use abstract shapes to support the intention
Don't overdo it

Contrasts in drawing

2024-09-11T22:17:12Z

Contrasts in drawing#

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 composition.

I would define drawing [...], really as organization and expression of relationships.

— Craig Mullins, Interview

There are many ways of creating contrasts, among them:

Curves are opposed to straight lines
Larger strokes are opposed to thin strokes
Hard edges are opposed to soft edges or even lost edges
Light values are opposed to dark values
High activity/full areas are opposed to low activity/empty empty
Textured elements are opposed to non-textured elements
Etc. (directions, finished rendering vs sketchy rendering)

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. | Full size

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.

Points to remember:

Contrasts exist to reinforce the composition by creating relationships between elements.
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.
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.

Notes on BDSM

2025-10-14T15:41:08+02:00

Notes on BDSM#

BDSM, or more precisely BDDSSM, stands for Bondage and Discipline, Domination and Submission, Sadism and Masochism. BDSM is about creating a safe environment using frameworks, where people can safely play with those things.

People practicing BDSM can do, in context, 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.

Play and magic circles#

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 magic circle, a space where normal rules of the world are suspended and replaced by new ones.

The term magic circle was initially coined by the Dutch historian/sociologist Johan Huizinga in his Homo Ludens book, where he also listed what are the base characteristics of play.

Those characteristics are:

Play is free, is in fact freedom, and is chosen.
Play is not real life, it's separated from our daily lives.
Play always has a duration and a location.
Play is order, which means rules are supreme, absolute and not negotiable.
Play is not tied to financial or material gain.

In addition to these characteristics, that can easily be interpreted as rules, BDSM tries to provide frameworks that enable play. Among them are SSC and RACK.

SSC, RACK, and their differences#

When using the SSC framework, everyone involved in the circle has to play in a Safe, Sane and Consensual manner.

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).

RACK, or Risk Aware Consensual Kink, 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.

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.

Talking about kinks#

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.

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.

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?

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.

Aftercare#

As explained before, BDSM allows its participants to play with dangerous things, and act in ways that are normally non-tolerated.

Which is why, when the game is over and the magic circle is broken, aftercare must happen to help participants get back in the real world and their normal relationships.

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.

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.

Usage outside of BDSM#

If the BDSM can seem intimidating, its play/magic circle aspect and frameworks for consent can actually be used by non-BDSM practitioners.

The make it explicit in a fun way 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.

But asking for consent in a fun and explicit way can help everyone out. Asking for consent with something like "I've been looking at your lips for a while, and I really want to kiss them. Can I?" 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 "In the future you don't have to ask".

Also, as terminologies like daddy or spanking 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.

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.

In conclusion#

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".

It is a part of the community, but it's not what BDSM is. It can be playful, joyous or celebratory too. BDSM is this magical moment that exists separated from everything else.

Chemical love combo

2023-05-02T19:29:45Z

The chemical love combo#

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.

The basics#

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.)

The Chemical Love. We can see the input motion is happening as the character crouches before the move happens.

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.

Guilty Gear XX provides a move cancelling technique called Roman Cancel. 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.

A classic Roman Cancel.

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 Force Roman Cancel (or FRC) and show a blue halo instead of red. The Chemical Love has an FRC point, meaning it can be used during combo.

The Chemical Love can only be cancelled at a specific timing, creating a blue Force Roman Cancel.

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.

Chemical Love is cancelled, I-no falls on the ground, then dashes forward but is too late to continue.

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?

The air, the ground, and the tiger#

Well no. Because if the moves gives some properties akin to being in the air (like invincibility on the legs), I-no is considered on the ground, 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.

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 tiger knee 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.

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.

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.

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.

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.

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.

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.

But wait, there's more!#

There's actually another way of doing this combo! In Guilty Gear XX, there's a technique called Jump Install, which consists of making the game believe the character is both on the ground and in the air, allowing them to store a jump or an air dash until they go back to their idle stance.

The way it works is by using normal moves that are jump-cancellable, 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.

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.

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.

That's all folks#

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.

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 good 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.

Third Strike Defensive and Offensive Mechanics

2024-10-29T18:04:40Z

Third Strike Defensive and Offensive Mechanics#

This page is a summary of the 3s After School Episode 2 and contains strategies to manage defense in Third Strike.

The 80/20 rule#

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.

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.

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.

Wake up mechanics#

The charts below explain how offense and defense works in Third Strike, based on frame data and character options.

How it works#

A chart of attack and defensive options in Third Strike. | Full size

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).
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.
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.

Summary of options#

A chart of attack and defensive options in Third Strike. | Full size

Delayed tech while blocking is the strongest option as it only loses to delayed meaty. It can be enhanced by inputting an 1 frame airborne move or an invincible dragon punch.
Reversal jump (if cornered) is the second better option as it only loses to meaty attack
1 frame airborne move (if the character has one) it third as it creates a reset.
Reversal throws and reversal attacks are less effective than delayed tech.
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 guaranteed.

Option selects#

An option select is inputting several commands and letting the game choose the best one.

Buffering OS#

Buffering OS is an offensive option select that automatically cancels a normal move with a special if the normal lands.

Input a cancellable normal, then a special
If the normal lands on hit or block, the special comes out.
If the normal doesn't land, the special does not come out.

DED#

DED is an offensive option select that automatically chooses between doing a super or not doing a super after a move, based on the available meter.

Input a move, then a super while the super bar is near completion.
If the move hits, the super bar is filled and the super comes out.
If the move does not hit, the super bar is not filled and the super does not come out.

Crouch Tech OS#

Crouch Tech OS is a defensive option select that automatically chooses between a crouching light punch and a throw tech.

Input down + LP + LK.
If no opponent throw, LP comes out due to the input priority system.
If the opponent throws, a throw tech happens.

Normal + Tech OS#

Normal + Tech OS is a defensive option select that automatically chooses between any normal and a throw tech.

Input a normal move, then a throw.
If the opponent throws, a tech throw happens.
If the opponent doesn't throw, the normal comes out.

Parry buffering OS#

Parry buffering OS Tech OS is a defensive option select that automatically chooses between a parry and an attack.

Input parry, then a normal move.
If the opponent attacks, the move is parried, then the attack comes out.
If the opponent does not attack, the attack comes out normally.

SGGK#

SGGK is a defensive option select that automatically chooses between a trow, a tech throw or a hit after inputting a parry.

Here's how it works:

Input a parry (tap forward or low)
Do a kara-throw (character specific, cancelling the first frame of a move by a throw)

Situations:

Opponent does nothing -> the game kara-throws.
Opponent throws -> the game techs the opponent throw.
Opponent attacks -> the game parries, then the attack used in the kara-throw comes out.

Jump tech OS#

Jump tech OS is a defensive option select that automatically chooses between a jump and a throw tech.

Press jump and throw at the same time.
If the opponent throws, a tech throw happens.
If the opponent doesn't throw, jump happens.

Third Strike Ryu Matchups Notes

2024-10-29T18:04:40Z

Third Strike Ryu Matchups Notes#

Definitions:

Joudan: Ryu "donkey kick" 41236 + kick
P2HPJ: Parry > 2HP > Joudan Kick EX

Ryu Pressure#

Blockstrings#

2LK > Kara throw
2LP > 2LK > 2LK > 2MK > Hadoken > Denjin
Close MK (+2) > 2MP (+3) > 2MK > Hadoken > Denjin
Close MK (+2) > 6MP
Close MK (+2) -> far MK
Close MK (+2) -> 2LK (catch spam of lights) > far MK
Close MK > Delayed parry > P2HPJ
Far stand MP > Hadoken > Denjin
Far Stand MP (+4) > 2MK (startup 7f) > Delayed Hadoken
Forward throw > Opponent rolls > 2MK > ligth tatsu (almost safe distance ?)

Mixups and things#

Opponent is on the ground > 2LP (whiff) > 2LP (whiff) > P2HPJ
Opponent is on the ground > 2LP (whiff) > 2LP (whiff) > close HP (prevent jumps) > far MK > far HK (prevent jumps)
Opponent is waking up > 2MK > Shoryuken > Denjin
If Denjin is parried and opponent close> parry low

Denjin Charge#

Use PP + Diagonals to charge.

Level 2: 8 points
Level 3: 32 points
Level 4: 80 points
Level 5: 160 points

Matchups#

Vs Chun-li#

Chun-li standing normals:

LP: +2 on block, 3f startup. don't challenge if spammed.
MP: -2/0 on block.
HP: -2/0 on block, impossible to regain advantage after if spaced correctly, but P2HPJ Works.
4 + HP: -1/+1 on block, impossible to punish due to pushback.
LK: +1+3 on block, mid.
MK: close -2 (followup possible), far is -5, hard to punish due to pushback.
6 + MK: 0/+2 on block.
HK: close is -3/-1 and starts in 4 frames, far is 0/+2 on block, avoids lows, can move forward. Almost impossible to punish as Chun-li has stronger buttons.
3 + HK: +8 on block.

Chun-li crouching normals:

Due to Ryu's crouching bug, almost all moves are impossible to punish.

2 + LP: *+3/+5 on block, startup is 2 frames.
2 + MP: -2 on block.
2 + HP: -1/+1 on block.
2 + LK: +5* on block.
2 + MK: 0 on block.
2 + HK: -5 on block.

Chun-li specials:

Spinning Bird Kick: Safe (from -2 to -3) when guarded standing. Whiff when crounching, safest punish is 2MP.
Kikoken: LP is -17, MP is -10, HP is -4, EX is -7. If done close in the corner, Shoryuken EX works.
Hazan Shu: All versions are -2 on block.

Chun-li SA2 :

Startup is 2 frames.
Is -23 on block.
Goes through fireballs at some ranges.
8 hits, then 8 hits again, then 1.
Can punish 2HK when whiffed, even if a bit late, never use it when she has super.

Vs Dudley#

It's important to prevent Dudley from jumping by using stand HK, 2HP and stand LP as anti-airs. Stand HK disjointed hitbox kills a lot of Dudley normals. Be also careful to guard most of his attacks while standing to avoid Ryu's bug and make some of Dudley's moves easier to punish.

Dudley standing normals:

LP: +3 on block, target with MP is +1.
6 + LP: +1/+3 on block, better range than LP but 1 frame slower on startup.
MP: -1/+1 on block, 3f startup, don't challenge if spammed.
6 + MP: -1/+1 on block.
HP: -1/+1 on block, can be whiff punished by far MK easily if out of range, HK also work. 2MK is dangerous. P2HPJ Works.
HP (charged): -1/-3 on block, can be whiff punished by 2HK during startup, otherwise it trades. P2HPJ works.
LK: +2/+4 on block.
MK: 0/+2 on block.
6 + MK: +2/+4 on block.
HK: +4/+6 on block, can be whiff punished by MK, 2MK or 2HK.
6 + HK: -2 on block, overhead.

Dudley Crouching normals:

All normals are either 0 or positive on block except for 2MK.

2 + MK: -10 on block but put Dudley out of range of everything fast enough except for 2HK.
2 + HK: +3 on block, don't challenge after.

Dudley specials:

Machine Gun Blow (41236 + P): -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.
Ducking Straight (41236 + K > P): -7 on block (standing, does not hit low). Punishable on block with HP Shoryuken if Dudley is not at max range.
Ducking Uppercut (41236 + K > P): -12/-14 on block. Punishable on block with 2MK > Medium Tatsumaki, but needs to be done fast.
Short Swing Blow (63214 + K): 0/+2 on block. Resets situation.

Dudley Super Arts:

Rocket Uppercut: Startup is 0, easy to punish with HP > Joudan EX when Dudley falls down.
Rolling Thunder: Startup is 1, -9/-11 on block. Can be punished with DP.
Corkscrew Blow: 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.

Vs Yun#

Against Yun you want to be using moves to keep them out of the air like HK and air-to-airs, and you want to buffer parry (then immediately go back to block) to deal with their divekicks. You need to prove to the opponent that you will shut them down if they get too aggressive on you, and they'll play more cautiously. You have to make them respect you.

Yun standing normals:

All normals are either positive on block, or not enough negative to be punished even when standing, or push Yun too far when done at the right distance to prevent punition. Therefore there is not standing/blocking frame data details below.

LP: close +4 on block, far +1.
MP: *close +6 on block*, far -3.
HP: close is -2 on block, and can be used as a meaty. Far is -5 on block, can be spaced to avoid punition. Best way to shut it down is stand MP or 2HK. P2HPJ Works.
6 + HP: -7, almost impossible de punish due to pushback.
LK: +2/+4 on block, is a mid.
MK: -4 on block when standing, can whiff crouching.
6 + MK: overhard, -1 on block.
HK: -5 on block, can be spaced to avoid punition.

Yun Crouching normals:

Yun Dive Kicks:

All dive kicks have different frame datas depending of the height. But more importantly even the HK divenkick made at the worst height (like in the head) is at worst -4, with a good speacing leading up to +9 for Yun.

The only way to deal with dives is to air-to-air them, try to parry and then immmediately block. Don't challenge after guarding one.

Yun Specials:

236 + P: All versions are -11 when blocked close. But they can be spaced so only the last active frames hit, which can result, especially with the HP version, to -2 on block. Ex version is always -2.
636 + P: LP is -1, MP is -3, HP is -5, EX is -7. Due to pushback, it's almost impossible to punish.
214 + P: All versions lead to 0, so neutral.

During Genei:

All his normals have the best priority and can't be challenged, their frame data is better. It's better to just guard and try to survive. The only exception is its 6+MK overhead which becomes -4 on close range. But it's impossible to punish due to pushback.

Rethinking the engineering and processes of interface creation at Arkea

2023-10-05T17:31:31Z

Rethinking the engineering and processes of interface creation at Arkea#

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 SASS codebases to a single library of components, flexible enough to support several designs and 100% WCAG compliant.

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.

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.

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. | Full size

All components, as well as documentation and demos were stored inside a Storybook to facilitate development. | Full size

The client(s)#

The Arkea group is a local banking behemot here in Brittany, employing around 5000 persons. The Credit Mutuel de Bretagne (shortened as CMB) is the oldest business of the group, with agencies in almost all cities in the region.

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.

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).

The problem(s)#

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.

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 Merger3000).

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.

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 <div> 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.

For the main website, the uncompressed main CSS file weighted around 7 mega bytes.

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.

The put it simply: the design process, the technical stack and the delivery methods needed to change.

The solution(s)#

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).

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.

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.

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.

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.

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.

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.

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?

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.

Lesson(s) learned#

An old codebase becomes technical debt when collaborating, testing, debugging and delivering become painfull.
Major technical stacks changes opportunities happen during small windows of time and should not be missed.
Making big changes is not just about code but also about people, communication and training are as important as clean code.
Web components are hard, and accessibility is even harder.

Printed letters smart emails and modern blog stacks at Compte CO2

2021-11-12T15:47:35Z

Printed letters, smart emails and modern blog stacks at Compte CO2#

In short#

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.

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.

All those efforts resulted in a more cohesive vision for the company and a greater understanding of modern web development practices for me.

The client(s)#

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.

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.

The company headcount was small with only 6 people.

The problem(s)#

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.

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.

With a deadline set to September 2018, there was very little time and a lot to do.

The solution(s)#

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?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Lesson(s) learned#

Knowledge in languages such as HTML and CSS is extremely usefull in situation you are not used too, like old software or hardware.
Progressive enhancement and degradation is an often forgotten part of accessibility.
Modern development techniques are useful and often tempting, but sometimes projects are just too young and result in way too much time lost.
Components are definitely the future of building interfaces for well structued projects.

I built my own little CMS

2025-08-17T16:52:26+02:00

I built my own little CMS#

After years of writing the pages of this website inside my code editor, it feels strange to write this journal entry directly in the website. That's because I've moved away from my static site generator to fall back to my first love of the 2000: a CMS!

Which is curious, because I had been avoiding them! I've managed several websites in the last 20 years, most of them were made with a CMS, and I always found it too complicated. Why a database to store text? Why is this giant admin dashboard necessary? Why so many updates all the time? Why so many images? What do you mean I shouldn't have done chmod 777 / and now my database is broken?!

Side note

The chmod 777 / thing really happened.

Building my own SSG for fun#

So when came the time for me to rebuild my own website, I wanted something simple: text files! Now that's simple! That's something I understand! And there are numerous Static Site Generators (SSG) around, I should just pick one!

But inspired by my Merveilles folks, I went further and questioned everything. Do I like my content spread in dozens of files I can't remember the name? No! Do I like enclosing everything inside separate folders and navigating inside? That feels like navigating the Wordpress admin, yuck! Do I even like using Markdown? Kindaaaaaa? I like the titles, not the image markup, and it's missing so many cool HTML attributes!

So, around 2020, I built my own thing: a single giant text file I can CTRL + F inside, a single giant image folder where I drop everything, and my own markup language so I can use <video> and <dl> tags! It was made with a mix of JavaScript files for parsing and writing, and shell scripts to convert images and launch a basic developer environment. To be honest, it was a complicated and frail setup just to put some pages on the internet.

Nonetheless, I had tons of fun building it! It fitted me, and I learned a lot. After a few years, I moved the HTML printing part to a SSG engine (Lume and then Eleventy) and it made it more stable (more info here) while reducing maintenance.

But there was still too much friction. The website was spread between 4 git repositories (open source code, private text files, private images, private production build) and required to ssh to the server to pull updates. When you're fixing a typo for the fourth time, it gets really annoying.

Using the computer is a pain#

When I started drawing again in 2022, I wanted to share my progress on my own website, of course! This is when I realized static site generators are terrible for sharing images (at least mine was).

I took pictures of my drawings with my phone. I had to transfer them to my computer.
Once transferred to the computer, I had to copy them into the image folder of the website.
Then I had to create or edit a page and put my specific syntax to insert them, while remembering their file names.
Then commit everything, push, ssh to prod, pull again, etc.

Now that's friction.

This completely killed my ambition to share my drawing progress. Even outside of the laborious steps to put a few images on the internet, doing it meant I had to sit in front of the computer and engage with developer tools to do so.

The sitting in an office chair in front of a screen position was/is still deeply associated to work in my brain, and not enjoyable or relaxing at all. After I burned-out due to work in late 2023, I wanted to be even more as far as possible from anything that reminded me of it, which included my desk and computers.

And so, it was time for a change.

I'm building a team stackteam stack permalink" style="color:currentColor;opacity:0.4;font-size: 0.4em;margin-left: 1ch; text-decoration:none;" title="Link to this title">#

In 2024 I continued drawing, I went out more, and I was struggling to become a freelancer. In May, I wrote about how I felt the frontend web developer role was shrinking, and that I needed to move to a more full-stack role, which meant doing backend stuff.

And what better reason could I have to do backend than entirely redoing my own website?! Stars aligned, and I set up a loose plan with these constraints:

I should be able to publish on this website from my phone, especially upload images easily. I shouldn't struggle with markup for them!
If I publish from my computer, it shouldn't be using developer tools. If I open them, it's for adding new features or fixing bugs only!
I will store the content in a database to relearn the basics of SQL and shift my mindset from files to database. It's been years since I wrote a query, it's time!
I will use a statically typed programming language to move away from my JavaScript habits. Even better if I can use a true IDE and/or a debugger!
The programming language I will use should be easy to use, a good learning tool with good resources online, and in-demand on the job market. I would enjoy learning Gleam but gotta be realistic, doing backend is already a big change in my habits!
Everything should be easy to deploy, maintain and update. I don't want to fight dependencies and hosting issues, complicated setup, or depend on an hosting platform free tier!
I will reuse the same templates and design and bring the website back to feature parity with the existing version. I should not get distracted by frontend code!

After considering all this, I went with the Go programming language and a sqlite database. I was already attracted by Go after seeing a previous colleague work with it, it has a good STDLib, and tons of quality packages. As for sqlite, it has the benefits of just being a file, which fits me well since, you know, I like files.

But most importantly, Go has good and up to date learning resources online: Go Tour, Go By Example, 50 shades of Go, and many more. I was especially interested by Alex Edwards' Let's Go and Thorsten Ball's Writing an interpreter in Go.

Go, Go, Penguin!#

I started working on this new version in February 2025, following Alex Edwards' book, and made good progress. I modified the database and code structure to fit my needs and it went smoothly. Outside of error handling (go to hell if err != nil) and avoiding dependencies that requires external libraries or cgo, I found the language to be pleasant to work with, and didn't regret choosing it.

What bothered me a bit tho, is the good but could be better developer experience. I installed air to have live reloading on save. Despite the project being small, it still took two to four seconds to rebuild and run the code, which isn't a lot, but coming from the JavaScript world, feels slow and to be honest, a bit dated. When I see C# time compilation at my job, I really think backend development needs to invest on this aspect.

But what was the most important missing tool was a modern CSS compiler. Outside of a SASS compiler, I found nothing?! I suppose Go projects use the JS ecosystem for these tasks, but I didn't want that. I just wanted to run go run and have everything compiled. So I downloaded a binary of Lightning CSS CLI and added a build step in Air that compiled my CSS. Not perfect, but waaay better in my book than using npm.

Building the thing#

Of course I underestimated the amount of work involved. Displaying pages from the database was easy. But managing page parents, visibility, image upload, RSS feed, user signup and login, as well as security, if not hard, just took more time than I anticipated.

Among other things, making an editing experience that is good enough was important. The text is just a classic form, with the main text in an auto-sizing <textarea>. But images, my main focus, needed to be easy to upload and insert. So I did a bit of JavaScript to automatically insert the markup on upload, reposition the cursor where the alt text needs to be written, small details like that.

I also added a preview of the page directly next to the editor, keyboard shortcuts to create or edit a page, better visibility settings for pages (public / unlisted / private). A few efforts like those will smooth my user experience, and I have more ideas in the same vein I haven't started yet.

Overall it was a good reintroduction of backend web development concepts. The project itself is well organized and I can add new features easily, which I intend to do: a time tracker, a mood tracker, galleries, and more! The fact I use a database opens a lot of possibilities.

And you might be thinking, nice, I would like to try that! and poor reader, I have bad news.

I won't open source it#

Almost all my code projects have been open sourced with the The Anti-Capitalist Software License, but unfortunately this CMS won't be part of this tradition. There are three main reasons for this.

It requires refactors and planning#

This project has too many things hard coded. If that's not an issue for my personal use, open sourcing the project would require removing my design, add a table for static values, write better documentation, create builds for different operating systems, create a public repository, fork it to add back my own design, etc.

It's a lot, and as I said earlier, I intend to spend less time on the computer, not more. If people really want a CMS, there are dozens of offers out there that can probably fit their needs (use Kirby). I feel that not open sourcing my CMS will not change anything.

I don't entirely own the code#

I followed Alex Edwards' book very closely, and if I made big changes to the point it's not the same project at all in the end, all the structure, a good amount of the code, how things are named, come from the book. Basically, I cannot take ownership of the entire code base and thus, cannot share it. I tried contacting the author on this topic but got no answer.

There's AI generated code inside#

The title says it all, I don't feel like distributing a project with AI generated code inside. Even if it's only 200 lines, it feels like a moral failure from myself, a failure that won't happen again. I wrote about how and why I used an AI in this blog post if you are curious.

Now, if Alex Edwards gives me the authorization, and I find some time to clean things, and I manage to rewrite the AI code, I could open source it. But that's of lot of conditions, and again, this CMS exists to allow me to spend less time on the computer, not more.

What's next#

Lot of things! I have new features to do, I have a big cleanup of old pages going on. Many of them are outdated, or I don't want them online anymore. I also want to start publishing a few of my drawings, especially the creation steps. I have a lot of pictures of drafts, sketches, failures, and want to share the process.

Also expect more entries in the journal. They are so easy to write now, that I may allow myself to publish more often. I will also write details about the CMS and its details inside a dedicated page.

Thanks for reading, if you have remarks or suggestions, you can contact me by email or social networks. See you around!

I tried coding with AI, I became lazy and stupid

2025-08-11T19:28:48+02:00

I tried coding with AI, I became lazy and stupid#

Around April 2025, my boss at $dayjob insisted we try AI tools for coding. It wasn't toxic pressure or anything like "20% of your code needs to be AI", just a concern from him that we could miss out on something. I understand why he asked that and I don't blame him. We are in difficult economic period even for software, and we have salaries to pay. If AI can increase productivity or our margins, it should be at least put on the table of negotiations. I am not happy about this coming, but I get it.

My personal stance of AI

I have personal reasons to dislike LLMs. My partner lost their writing job due to ChatGPT convincing their manager writers were now useless. A lot of artist friends struggle because of LLMs. We recently had an intern who lost her translator role due to LLMs. And even outside my personal experience, LLMs are based on stolen content, don't respect consent, waste huge amount of electricity and water, and are overall a new weapon for the capitalists in the class warfare.

The other reason why I folded comes from a toxic relationship I built with my job when I became a developer. I detailed in a previous blog post how choosing this career came with very high stakes which triggered a shift in my brain that hasn't left me since:

When I started web development seven years ago, I was in survival mode after years of low paying wages and unemployment. It had to work, and for it to work, I had 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.

— I, In a blog post from 2022

10 years and 3 burnouts later, one can tell this mindset, even if it worked out for a while, wasn't sane or desirable. I had managed to put aside this fear of being disposable, but LLMs triggered it back big time. What if AI vendors were right? What if a future company I apply to requires you to use it? Am I going to lose my job? I'm almost 40, what will I do?

So, I tried using AI. First at my day job, because I wanted answers. But besides fixing TypeScript types errors, generating inaccessible template code, or reviewing my code for errors, I couldn't find a life changing use out of it that all AI influencers talk about. I asked my colleagues about their own experiments, and many of them came to the same conclusion: It doesn't seem to help me help our clients achieve their goals.

When July came I started building the image processing part of my new CMS that powers this website. Still stressed I couldn't get a real shot at coding with an LLM, and very tired by different personal events that fogged my brain, I decided it was the right task to try it seriously and get answers.

After setting everything up in VS Code, opening the AI panel, giving access to the codebase and detailing my needs in a prompt, the LLM produced around 200 lines of code. Mostly functions using dependencies to convert, resize, process images. It wasn't perfect but after a few changes, the task was done and it had taken around 30 minutes, far less than if I had made it by hand.

I was impressed. It really felt like I had superpowers! But then I had the idea to audit the code the LLM just produced, like I did at my $dayjob for a Vue application. Feeling that uploading files could be a source of security issues, I asked the same LLM to focus on this specific topic.

It found several critical issues: Directory traversal attacks, file size limits, system file overwrite, etc. I had no idea the initial code was this unsafe. I had reviewed the code, but without enough experience in backend development, how could I identify issues I didn't know existed? And why, if it knew about all those issues, did the LLM produce unsafe code in the first place?

When I tried to fix the security issues, I quickly realized how this whole thing was a trap. Since I didn't write it, I didn't have a good bird's eye view of the code and what it did. I couldn't make changes quickly, which started to frustrated me. The easiest route was asking the LLM to deploy the fixes for me, so I did. More code was changed and added. It worked, but again, I could not tell if it was good or not.

That's when I stopped the experiment.

I was shocked by how easily I had slipped into this slacker way of programming. The LLM had produced shitty code, made me ignorant about my own code base, but also too lazy to try to fix it myself. And at the same time, the whole experience felt smooth, frictionless, empowering. In the moment I felt smarter, more productive, in control. But it was all an illusion.

I knew about this too, as we had studies showing LLM use makes us dumb, and that self-reported productivity gains are false. But experiencing it for myself was a totally different feeling.

It gave me a whole different perspective and answered my initial question: Will I get replaced by AI soon?

The answer is no. I don't think AI will take my job anytime soon because it's smarter and more productive than I am. I also don't think AI will make me 10 times more productive. If I lose my job due to AI, it will be because I used it so much it made me lazy and stupid to the point where another human has to replace me and I become unemployable.

I shouldn't invest time in AI. I should invest more time studying new things that interest me. That's probably the only way to keep doing this job and, you know, be safe.

Mandala

2025-09-28T20:26:25+02:00

Mandala#

Final drawing. | Full size

Concept#

I had the idea while I was in a train for Paris in late November 2023. I was trying to find new ways to play with my favorite topic of the time: human, cats, skeletons.

The original sketch on an A6 piece of paper | Full size

The initial concept was « a mandala of cats » to which I added a Mary pose for the character.

I didn't have those specific images in mind when I had the idea, but was inspired by these styles. Left: William Adolphe Bouguereau, The Virgin of the Lilies, 1899. Right: A mandala I found on the internet | Full size

The second sketch was made on A2 paper.

Without thinking too much about it, I used the hair as a way to construct the image and fill the gaps between the cats | Full size

During that period I was focusing a lot on face features, especially lips. | Full size

Instead of just drawing standing cats which felt boring, I decided to make them more alive by playing with the hair strands. | Full size

I took a picture of my own hand to draw those. I added dancing skeletons instead of a skull, inspired by Fantasia's Night On Bald Mountain. | Full size

On the topic of Night on Bald Mountain, check its amazing concept art by by Bill Tytla.

The "final" initial sketch. | Full size

The sketch was then left untouched for a few months, as a lot of details felt wrong and I didn't know how to approach the inking. More than ever, I felt the gigantic hair strands were going too far from the initial idea and were too distracting.

I started iterating on the sketch using a tablet. I did several tests: removing hair from the body, removing most strands, and more.

My first test was removing the hair from the body, to regain some clarity. | Full size

This version tried to go back to the initial A5 sketch and see if it could work. It didn't. | Full size

This version tried several things, like directing the viewer's eyes using the cats sights. The left strand made me realize I could maybe add cat ears to the character and use them as the source of the air surrounding the cats. | Full size

This is when it clicked, when I decided to rework how the hair is used, from just flowing without purpose to give the cats haircuts. | Full size

I redrew three of the cats to make them less cartoony and fit better in the composition. | Full size

Finally, I reworked the face to reduce its size, mostly for the eyes. I redrew them entirely and adjusted the hair to have two proper cat ears made of hair. | Full size

Still unsatisfied with the eyes, I decided to go for a more surprised attitude and opened them more, which felt more in tune with what is happening in the drawing. Then I printed the sketch in several A4 sheets and reconstructed the drawing in its initial size. | Full size

I started the inking by doing a pencil pass, then used drawing pencils. Notice the way too detailed bangs. | Full size

I was unsure about how to ink the hair. I did several tests and if some of them were great, like the top right corner, it was very easy to fail it and having to start over. I then searched for another approach. | Full size

I finally made it work after switching to a pencil brush and doing lines that I filled after. | Full size

Once the process was discovered I managed to apply it to the rest of the drawing, and finish the inking. | Full size

The A2 paper sheet was then scanned by a professional, retouched to remove imperfections and add contrast, and a black background with a white outline.

Final drawing. It was printed in A4 for sell, and I did an A2 version for myself. | Full size

Drool

2025-09-28T19:05:36+02:00

Drool#

The finished piece. | Full size

The idea came from an inktober 2022 prompt: dream. I had this classic idea of being hunted by a beast in your sleep, which is shown in the initial sketches:

The rough sketch and ink test. | Full size

I didn't thought about it at the time, but the inspiration was probably The Nightmare by Henry Fuseli:

Wikipedia page | Full size

But after that, I thought it was too nightmarish, and decided to replace the "beast" with a cat (the inspiration was a Devon Rex). I also re-framed everything into the page.

The final sketch. | Full size

As for the inking, it was done with a chinese type brush and black ink.

The finished piece. | Full size

I had a lot of fun doing this piece, which encouraged me to continue with the same theme later.

Drawtober 2025

2025-10-11T10:15:47+02:00

Drawtober 2025#

For this year's drawtober, I will essentially draw concept arts for my own fantasy world.

Day 1#

Full size

Character concept research. Flower pendants are worn to demonstrate the affiliation to a flower lord.

Day 2#

Full size

Character concept research. Growing flowers on the skull is a secretly guarded (and thus costly) process used by the aristocracy as a status symbol and only done at botanic academies. Each flower represents a family and seeds are incredibly expensive. Hijacking this process to grow brambles, a parasite plant used by commoners, is considered an insult.

Day 3#

Full size

Creature concept research. With a height of around 3 meters, it travel in packs of hundreds and destroy everything in their way by cutting it with their « beaks » (woodpecker style) who’s made of an almost indestructible material. Nobody know where they come from or reproduce, if they eat, how they communicate. When they die, the pack destroys the corpse, making them impossible to study. If one would manage to retrieve the beak, they would be able to craft incredible things out of it.

Day 4#

Full size

Flower drawing practice. Flower harvesters are tasked by their masters with finding giant flowers that could, in a few hundred years and with the right conditions, become habitable like the existing ones. Unfortunately, most giant flowers die before reaching a decent size, mostly due to brambles suffocating them.

Day 5#

Full size

Flower drawing practice. Carnivorous plants share the nutriments they receive from their preys to their host, hence limiting the necessity of transporting food during harvest expeditions. Grafting flowers is often done for religious or political benefits. But when a plant is grafted, it allows the host to benefit from its characteristics.

Day 6#

Full size

Quick costume study. After the skull graft of their flower seeds, and until the reveal to the lord, students of the botanic school wear a mandatory headdress to hide their blooms to everybody. Removing it is only allowed during individual sun bath hours. Depending on the flower, the headdress can become quite tall.

Day 7#

Full size

Quick lore study. The dried head plants are a well hidden secret among the botanic academy. No one knows how they are made, but all have been discovered where disappearances have been reported, mainly in dense bramble areas that are rarely explored. Rumour has it that a creature vegetates humans. Head plants can be moisturized to be revived, and some of them can even speak. Unfortunately, they just mumble incoherently about imaginary worlds.

Day 8#

Full size

Quick character study. Harvesters can lose a lot of weight and muscles during their missions due to the lack of proper nutrition. When they come back to the botanical school, they usually eat and exercise a lot, leading to excessive body changes.

2025

2026-01-13T10:42:22+01:00

2025#

Despite everything happening in the world, 2025 was one of the happiest years of my recent life. I feel that a lot of my efforts paid off, making my life richer, more interesting, and allowing me to learn more about myself.

Some things stabilized#

My partner's disability was recognized by the state. She receives a temporary pension so we don't have to stress about money as much. She had surgery, recovered swiftly, and can walk again. Therefor, my role as a caregiver was reduced immensely, a relief as we enter our 20th year together!

As for my own health, it's getting better. Pain in my back, shoulders, hands and arms diminished thanks to exercise. I was able to rule-out a few concerns I had (among them tachycardia and nerve issues) thanks to exams, and others are ongoing.

Despite a lot of troubles at work, going from management issues, toxic clients, or people quitting, I'm still feeling OK. I am actually detached and it feels great. I still care enough to work at the best of my abilities but once I close my laptop, work disappears. But I am getting very bored by frontend web development tho, and asked if I could evolve into project management. I had a positive response, but we'll have to discuss it further. I won't do it if the company doesn't accept a best effort obligation. Taking up the role without having the means to do it is a trap I refuse to fall into.

And finally, my non-monogamous life stabilized. I now understand what I am looking for, I am able to explain it properly. It led to long term lover-friends relationships, with people who are all emotionally mature, caring, and are overall amazing and interesting human beings.

My brain went rogue#

A thing that didn't stabilize is my brain. I had several moments that felt not right. Among them:

The urge for something, anything, to happen, right now. I crave adventure and novelty, but also stress when outside a familiar environment.
Feeling overwhelmed and overstimulated by the number of things in my environment, mostly objects but also sounds, lights, etc.
An inability to find, use and sometimes think about things if they are not directly visible. For example, messy storage becomes just a mass of indistinct things I cannot manage and I give up.
The feeling of never doing enough while never defining what is enough. Happened especially in social and profesional settings.
An increasing difficulty to focus on tasks that aren't interesting to me, to the point of forgetting about them.

My theory, as for why it happens now and more, is that I am slowly getting rid of a performative social attitude I built years ago. For the last 20, maybe even 30 years I spent a lot of energy into pleasing others, doing things right, being a reliable friend, colleague and spouse. To the detriment of my own well being and sometimes, health.

I am unsure why I work like this. Could be anxiety, past experiences, educations, role models. Who knows? Almost everyone around me, including psychiatrists, think I have ADHD. It lead to a huge mental breakdown. I'll be seeing a neuropsychiatrist in a few weeks and try to find out what's going on.

But overall I am happy#

This year marked a radical shift: I am actually listening to my needs, wants and obsessions. Allowing myself to be... well, myself, has made me extremely happy and fulfilled this year. I regained a lot of freedom to do new things, made a lot of encounters that led to new activities, experiences and discoveries.

It can go from little things like wearing earrings, buying new clothes or doing new piercings ; to more fundamental shifts like trying out stressful social gatherings, asking others to do things for my own benefit, or abandoning moral positions that actually led me to infantilize or disrespect the individuality of others. Seeing my loved ones respond positively to these changes lifted a huge amount of stress from my shoulders.

For all these reasons, I can say 2025 was among the best years of my life. I haven't felt this alive, this myself for years, and I hope it will continue for a long time.

Other significant things#

Stopped my 15 years old podcast + website dedicated to fighting games.
Stopped my 7 years old freelance shop.
David Lynch died and it affected me more than I expected (here's an interview of him I enjoyed).
Exhibited and sol my art for the first time and had a blast full blog post.
Tried to code with AI and became stupid and lazy.
Migrated this website from a static site generator to my own CMS built in GO.
I started documenting the steps for some drawings I did. You can see the creative process behind Drool and Mandala in their respective pages.
Failed Inktober/Drawtober due to sickness. I focused on a fantasy setting I had in mind for a few years, both writing and drawing elements of this world.

Did I achieved my 2024 goals?#

Take equally care of myself and my loved ones: Yes !
Draw more and better, make a plan about it: Yes !
Participate in an art fare or expo: Yes !
Participate in a fanzine: No !
Rebuild my website to fit my needs: Yes !
Go back to the gym with a proper musculation program: Yes !
Read books and watch movies: Yes !
Get diagnosed for ADHD, keep using notebooks: No !
Finally finish my apartment and buy new furniture: Ongoing !
Do another single self-update on Web Dev novelties: No !
Be a responsible and pragmatic developer at my future job: Yes !
Go on vacation both alone, and with my partner: Yes !
Use my newly gained freedom to explore even more personal things: Yes !

2026 goals#

Keep being a little more me every day.
Learn to let go for real.
Continue to balance equally taking care of myself and others.
Nurture my relationships with others.
Participate in an art fare with a broader range of art than last year.
Write more on my website about various things.
Finish my CMS.
Go on vacation alone again, and with my partner.
Refurnish and redecorate more rooms in my apartment.
Keep exploring fashion to find my own style.

Is frontend development a dead-end career?

2026-02-24T11:34:22+01:00

Is frontend development a dead-end career?#

It's been almost a year at my current job. I was hired as a frontend developer and UI/UX coordinator, but I've been slowly shifting to a project manager role, which I enjoy a lot and where I think I contribute more. We build enterprise web apps, the kinds you will never see online, never hear about, but that power entire companies. The config application for the car assembly line, the bank counsellor website that outputs your mortgage rate, the warehouse inventory systems... That's the kind of thing we do.

For backend engineers that's a very interesting job. You get to understand how entire professional fields work, and try to reproduce them in code. But for us the frontend guys? The interest is, limited to put it simply. We're talking about pages with multi-step conditional forms, tables with lots of columns and filters, 20 nuances of inputs, modals... The real challenge isn't building an innovative UI or UX, it's maintaining a consistency in project that can last years and go into the hands of multiple developers. Hence my UI/UX coordinator role where I look at my colleagues work and sternly say "That margin should be xs, not sm" .

Because here's the thing: this type of client doesn't care if it's pretty or not and won't pay for design system work or maintenance. To them, stock Bootstrap or Material Design is amazingly beautiful compared to their current Windev application. What they want is stability and predictability, they care it works the same when they encounter the same interface. Sometimes, if a process is too complex for new hires, they will engage into talks to make it more user friendly, but that's it.

Until recently, the only generated code we used were the types for TypeScript and API calls functions generated from the backend, which saved us a lot of repetitive work. We made experiments with generative AI and found out we could generate a lot of our template code. All that's left to do is connect both, the front of the frontend and the back of the frontend, mostly click events, stores, reactivity, and so on.

People will say that's where the fun is, and sometimes yes, I agree. I've been on projects where building the state was basically building a complex state machine out of dozens of calls from vendor specific APIs. But how often do you do that? And why would you do that if you are developing the backend yourself and can pop an endpoint with all the data your frontend needs?

And so I've been wondering about the future. With frameworks, component libraries, LLMs, the recession pushing to deliver fast even if mediocre code and features, who needs someone who can write HTML, CSS, JS? Who can pay for the craft of web development? Are the common frontend developers folks, not the already installed elite freelancers building websites for prestigious clients, only destined to do assembly line of components by prompting LLMs before putting some glue between code blocks they didn't write?