da scritch net works

Refaire dascritch.com avec Claude

Da Scritch — Wed, 09 Sep 2026 11:01:00 +0200

J'ai refais mon site corporate. Ou plutôt, j'ai laissé un stagiaire le refaire. Virtuel, le stagiaire.

J'ai remis au propre et complété mon site de compétences.

Jusqu'ici, je construisais intégralement ce site, CSS inclus, afin de faire un showcase de mes compétences. Mais il faut avouer que la mise en forme web est un peu moins une spécialité que le développement applicatif, donc j'ai fait confiance à un outil pour le revoir, j'ai donné des instructions pour qu'il corresponde mieux à mes standards habituels et je suis repassé derrière pour le finaliser.

Après tout, je l'ai toujours indiqué sur ce site&nsbp;:

Le site n'a intentionnellement aucun style. Mon métier est derrière la présentation, pas dedans.

Si vous cherchez un architecte de solutions logicielles pour votre entreprise, parlons-en !

Manifestons contre la canicule !

Da Scritch — Tue, 08 Sep 2026 14:57:00 +0200

Y'en a marre de la chaleur ! La journée internationale du parler pirate sera aussi une rencontre avec l'équipe de CPU.

Je l'annonce dans l'émission de rentrée de CPU qui sera diffusée demain, mais je ne peux résister à l'idée de vous le dire ici :

Je vous propose une rencontre pour parler de l'émission CPU, Samedi 19 Septembre 2026, à 19h, devant la Cale Sèche, rue Gambetta, Toulouse, sous le prétexte très futile de manifester contre la canicule.

Si vous nous avez écouté récemment, vous aviez peut-être noté que ce jour-là est la International Talk Like A Pirate Day.

Tout comme nous, vous avez subi la plus longue période de canicule en France depuis le début des relevés météos. Et il va falloir agir collectivement pour décélérer le réchauffement climatique, par la réduction d'émissions de CO₂, de réunions en présentiel, d'achat de nouveau matériel, de buvage de café. Si faire pipi sous la douche suffit pas quand la Chine et les États-Unis ouvrent au taquet de nouvelles centrales thermiques, alors passons à l'irrationnel !
Que vous soyez airbusien ou contre le TGV, contre la clim ou habitant d'un écoquartier avec interdiction d'en installer une fixe, vous pouvez faire quelque chose. Et vu la qualité de plus en plus faiblarde des miracles dans les religions monothéistes traditionnelles, il reste la pseudoscience. Tout le monde le sait, le changement climatique a coïncidé avec la disparition des pirates unijambistes et borgnes dans les Caraïbes.

Rendez-vous donc pour manifester contre la canicule, devant la Cale Sèche, rue Gambetta, quartier Capitole, avec patch sur l'œil en hurlant AAARRRRRHHHHHH !!! (Ça tombe bien ; c'est une rhumerie. A consommer avec modération.)

C'est à peu près aussi utile qu'une procession religieuse le 15 Août, mais ça sera nettement plus marrant.

Non ?

fail2ban sur son serveur web

Da Scritch — Tue, 25 Aug 2026 10:40:00 +0200

C'est le minimum (à faire) et il fait un maximum (en sécu). Parce que l'auto-hébergement ou l'administration d'une VM est une sacré responsabilité, que sa bonne tenue peut aussi impacter les autres VM et que les bots dorment moins que vous.

Ceux qui me connaissent le savent très bien : Lire les logs serveurs, c’est ma très grande passion.
C’est pour ça que j’ai créé la FFLSLS ( Fédération Française de lecture sportive de logs serveurs) : pour faire reconnaitre la pratique en haut-niveau comme discipline olympique.

(Il faut dire que je suis un peu trop disponible en ce moment, donc si vous cherchez quelquun pour consolider une IT, n'hésitez pas à me contacter, je suis dispo)

À lire mes logs serveurs, ces derniers mois, le trafic automatisé a explosé, et pas que pour des usages légitimes : tentatives de spam-comment, recherches forcenées de failles sécu, d’artefact d’installation, etc…

Mon serveur perso est une toute petite VM hébergée avec amour sur Toulouse par Tetaneutral, un hébergeur de services internet et FAI associatif, dont je suis membre depuis 15 ans. AS197422 pour les intimes.

J’ai la main sur ma VM, et j’ai des responsabilités par rapport aux autres membres de l’association.

Seulement je ne voulais pas complètement reprendre de zéro ma VM, changer de serveur web, etc : j’ai énormément de tâches de fond qui tourne dessus, parfois des trucs que j’ai mis en place depuis 15 ans, et qui marchent sans soucis, malgré les montées en version et petites retouches de code suivant l’état de l’art.

Pour faire le ménage, j’ai installé fail2ban sur mon serveur Apache.

Pourquoi fail2ban ?

Donc en gros, pour le moindre effort :

Parce qu’il est déjà installé, et filtre déjà les comportements abusifs sur ssh en paramétrant à la volée un outil de filtrage, en général iptable ou plus récemment nftable, un module du kernel Linux qui bloque au plus bas niveau les adresses IP qui se sont pris un carton rouge après 3 tentatives de connexions infructueuses. Pour détecter ces comportements déviants, il ne fait que regarder des logs serveurs et applique à chaque ligne des regex. Ces adresses IP sont autorisées à ré-accéder au service au boût d'un temps d'emprisonnement calculé par filtre, multiplié par le nombre de fois qu'il a été ermis en prison.

Ce n’est pas une mesure de protection contre toutes les failles, mais un ralentisseur qui réduit les probabilités d’exploitations. Son but est de violemment ralentir les tentatives d’attaques en brute-force sur les accès ssh des serveurs. Ces attaques restent possibles, mais au lieu de tomber un mot de passe en disons 6 mois en connaissant un compte utilisateur valide (encore faut que la chauve-souris connaisse mon handle dans l'immeuble), il faudra environ 2,5 éternités pour y arriver.
En moyenne.

Et comme fail2ban tourne asynchroniquement par rapport aux services qu’ils surveille, tout problème ou erreur d’exécution n’impacte pas le service surveillé lui-même. Sauf s’il lance plein de règles de filtrage et qu'il bloque tout le monde, mais on parle alors d’une autre lessive.

Par contre, il prend de la RAM et de la puissance CPU. Mais l’analyse en action sur ma VM avec mes paramètres persos montre que cet impact est négligeable : environ 30 Mo de RAM, et même pas 6% de charge CPU. Un thread PHP consomme le double de RAM, donc avoir un service fail2ban pour filtrer prend bien moins de ressources que le CMS pour répondre aux 80 requêtes par seconde en 404/403 lors d’un scan non-sollicité de vulnérabilité.

Oui, 80 requêtes attaquantes par seconde, c'est la moyenne des attaques, et j'en prends une toute les 5 minutes les soirs d'été en heures creuses. Le flood peut durer entre 20 secondes et 6 minutes. Merci pour tous les patterns d'attaques, mais j'ai rien demandé.

Et on ouvre la console

Si vous avez déjà fail2ban installé sur votre serveur, vous avez très probablement déjà des filtres Apache et NGinX disponibles dans /etc/fail2ban/filter.d, mais seul sshd est en monitoring par défaut. Oui, c'est surprenant pour du Linux, mais la distrib va pas surbloquer bêtement. On va activer ceux d'Apache car c'est le service web que j'utilise.

D’abord, j’ai créé un /etc/fail2ban/jail.local, en me basant sur une excellente documentation, en n'oubliant pas de l'adapter à votre distrib et sas particularités.


# detect potential search for exploits and php vulnerabilities
[apache-noscript]
enabled  = true
port     = http,https
filter   = apache-noscript
logpath  = /var/log/apache*/*error.log
maxretry = 6
banaction_allports = nftables[type=allports]

# detect Apache overflow attempts
[apache-overflows]
enabled  = true
port     = http,https
filter   = apache-overflows
logpath  = /var/log/apache*/*error.log
maxretry = 2
banaction_allports = nftables[type=allports]

# detect failures to find a home directory on a server
[apache-nohome]
enabled  = true
port     = http,https
filter   = apache-nohome
logpath  = /var/log/apache*/*error.log
maxretry = 2
banaction_allports = nftables[type=allports]

# detect failures to execute non-existing scripts that
# are associated with several popular web services
# e.g. webmail, phpMyAdmin, WordPress
[apache-botsearch]
enabled  = true
port     = http,https
filter   = apache-botsearch
logpath  = /var/log/apache*/*error.log
maxretry = 2
banaction_allports = nftables[type=allports]

# MODULE PERSO (c'est expliqué plus bas)
[apache-dascritch]
enabled  = true
port     = http,https
filter   = apache-dascritch
logpath  = /var/log/apache*/access.log
maxretry = 2
banaction_allports = nftables[type=allports]

N'ayez pas peur sur les multiples déclarations d'un même fichier de log, il n'est ouvert que par un seul pipe.

Les filtres proposés se déclenchent sur des événements d'erreurs, en général un répertoire non accessible ou un script inexistant. Sauf que sur les frameworks modernes, l'URL du script est cachée, et toute erreur du type 400, 403, 404, sont prises en charge par le framework utilisé par le site web au cas où dans son système d'adressage, cela corresponde à une ressource réelle. Donc impossible de mettre en cache une vue 404 qui soit servi directement par le serveur web, à moins de faire une règle lourdasse à maintenir pour indiquer tout son plan de nommage dans la partie service web. Donc cela implique à chaque ressource incorrecte, charger le framework qui était en cache, résoudre sa route, peu-être faire des requêtes SQL, chercher en cache la vue du template, etc… Le prix n'est pas nul. Et c'est justement cette gestion d'erreur par l'applicatif qui pose souci et qui fait que les multiples requêtes sans sens font exploser les consommation du serveur.

Y'a des méthodes qu'on peut appliquer, comme cantonner les adressages dynamiques du framework à partir d'un path précis, genre /cms/, et donc on peut envisager de rendre la page d'erreur en statique, mais cela implique de modifier le contenu des sites web, de créer des redirections, et cela fait perdre de la plasticité sur d'autres fichiers, puisque certains CMS génèrent, par exemple des manifest.json différents selon que vous soyez authentifiés comme éditeur ou non.

Donc, j'avais besoin d'écrire un script qui se base non plus sur les logs d'erreurs mais les logs d'accès à mon serveur web, et qui éjecte les requêtes qui ne semblent pas appropriées sur mon serveur.

J’ai écrit un premier filtre perso dans /etc/fail2ban/filter.d appelé apache-dascritch.conf, pour reprendre la convention de nommage des filtres, et vu qu'il ne semble pas avoir de convention particulière pour les contributions spécifiques hors distributions.

[Definition]
failregex = \  "POST /wp.*           ← J'ai pas WordPress, donc on triggue
            \  "GET /wp.*
            \  "GET /config               ← ben voyons
            \  "GET /\.env.*               ← y'en a qui nettoient mal leur mise en prod
            \  "GET /\.git.*
            \  "POST /graphql          ←  Apparemment très très attaquable
            \  "GET /@fs.*               ← Node.js, tentative de chargement d'une bibliothèque en direct, vous ne passerez pas
            \  "GET /cgi-bin               ← Les CGI-Bin ne sont pas utilisés, du moins pas accessibles via un répertoire public
            \  "GET //          ←  parfaitement valable, et j'ai vu sur un forum que ça permet d'esquiver les filtres de protection. Perdu !
            \  "\\x16\\x03\\x01"       ← artefact de https sur le port 80, jamais vu hors d'une attaque
            \  "CONNECT               ← verbe HTTP que je n'utilise pas sur ce serveur
            \  "SSTP_DUPLEX_POST      ← verbe HTTP inexistant, sauf chez Microsoft
            \  "GET /vpntunnel               ← recherche de VPN ouverts

ignoreregex =

(Note : je ne présente que quelques règles, il y en a un peu moins d'une vingtaine. Trop en dévoiler peut donner des informations pour réussir certaines attaques. Je ne parle pas trop aux robots : ça les instruits)

Vous l'avez compris, chaque ligne est une regex, avec un atome <HOST> qui désigne l'adresse IP (IPv4 ou IPv6) et juste après un espace, la requête HTTP à matcher. Au début de ma regex, le \ <HOST> permet de bien signifier l’espace délimiteur dans les logs traditionnels Apache. Y'a qu'un seul espace après le backslash, c'est la balise <pre> qui me fait des misères.

Je reste sur une suite de règles très très réduites afin d’en garder une maîtrise, de ne pas faire monter le CPU dans les tours et d’éviter des faux-positifs complètement abusés. La simplicité est la beauté.

À noter que je surveille les logs d'accès de TOUS les serveurs webs de la VM, donc les noms de domaines, de sous-domaines et les accès IP directs. Cela veut dire qu'il faut éviter que des outils de monitoring et de contrôles, même déjà filtrés par IP, ne soient PAS dans les regex de détection, mais défiltrés par les regex d'exceptions. Il faut aussi connaître l'histoire des noms de domaine, et si ceux-ci avaient d'anciens spiders des moteurs de recherche ! Dans le doute, cela vaut le coup de jouer ces regex sur 15 jours de logs, mais cela risque de ne pas suffire !

De votre côté, faites le tour de votre serveur, regardez quel serveur web est utilisé (Apache, NGinX, Apollo, IIS, etc…), quel langage est utilisé, quel framework est déployé et quels outils API de monitoring vous avez peut-être. On n'est pas à l'abri d'un antédiluvien PHPMyAdmin qui sert en urgence (et qui aurait dû être supprimé depuis 15 ans).
En plus de connaitre parfaitement vos plans de nommages, de routage et son historique, faites aussi attention aux simplifications hâtives ! Bloquer sur toute URL commençant par /. vous fera bloquer tout agent logiciel qui vérifie ce que vous déclarez en /.well-known, donc ce n'est pas une bonne idée.

Je pourrais aussi filtrer sur les user-agents, mais ceux-ci étant purement déclaratifs, ces règles deviennent trop vite obsolètes.

Protch le moustique

Ici, à peine 2 minutes après l’écriture de mon premier filtre, un moustique attrapé en plein vol. L’action dure moins de 1 500 millisecondes, j'ai même pas eu le temps de bailler (oui, je sais, j’ai une sortie de logs maison, notamment pour avoir un timestamp ISO-8601 unifié)

==> /var/log/apache2/access.log <==
2026-08-10 11:36:47 (dascritch.net) 136.108.66.99 "GET /backend/settings.py HTTP/2.0" 404 15928 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:47 (dascritch.net) 136.108.66.99 "GET /instance/config.py HTTP/2.0" 404 15927 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:47 (dascritch.net) 136.108.66.99 "GET /.env.development HTTP/2.0" 404 15925 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"

==> /var/log/fail2ban.log <==
2026-08-10 11:36:48,110 fail2ban.filter         [127499]: INFO    [apache-dascritch] Found 136.108.66.99 - 2026-08-10 11:36:47

==> /var/log/apache2/access.log <==
2026-08-10 11:36:47 (dascritch.net) 136.108.66.99 "GET /.env.staging HTTP/2.0" 404 15921 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"

==> /var/log/fail2ban.log <==
2026-08-10 11:36:48,124 fail2ban.filter         [127499]: INFO    [apache-dascritch] Found 136.108.66.99 - 2026-08-10 11:36:47

==> /var/log/apache2/access.log <==
2026-08-10 11:36:47 (dascritch.net) 136.108.66.99 "GET /config.py HTTP/2.0" 404 15918 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /.env.test HTTP/2.0" 404 15941 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"

==> /var/log/fail2ban.log <==
2026-08-10 11:36:48,326 fail2ban.filter         [127499]: INFO    [apache-dascritch] Found 136.108.66.99 - 2026-08-10 11:36:48

==> /var/log/apache2/access.log <==
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /dotclear/rss.php HTTP/2.0" 302 388 "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /app/.env HTTP/2.0" 404 15917 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /sendgrid.env HTTP/2.0" 404 15921 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /src/.env HTTP/2.0" 404 15917 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /config.env HTTP/2.0" 404 15919 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /frontend/.env HTTP/2.0" 404 15922 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 66.249.77.201 "GET /vrac/.blog1/2cents/701-FIBD07-Thomas-brouillard.jpg HTTP/1.1" 200 90278 "Googlebot-Image/1.0" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /server/.env HTTP/2.0" 404 15920 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"

==> /var/log/fail2ban.log <==
2026-08-10 11:36:48,726 fail2ban.actions        [127499]: NOTICE  [apache-dascritch] Ban 136.108.66.99

==> /var/log/apache2/access.log <==
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /production/.env HTTP/2.0" 404 15933 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /docker/.env HTTP/2.0" 404 15920 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"
2026-08-10 11:36:48 (dascritch.net) 136.108.66.99 "GET /dev/.env HTTP/2.0" 404 15935 "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.3; +https://openai.com/gptbot)" "-"

Pour vérifier l'efficacité du filtre qu'on a créé :

dieutoutpuissant@vmsecrete/etc/fail2ban $ sudo fail2ban-client status apache-dascritch
Status for the jail: apache-dascritch
|- Filter
|  |- Currently failed: 1
|  |- Total failed:     68
|  `- File list:        /var/log/apache2/access.log
`- Actions
   |- Currently banned: 21
   |- Total banned:     22
   `- Banned IP list:   136.108.66.99 34.60.235.212 136.70.138.98 104.23.221.112 104.23.221.113 104.23.221.28 158.158.35.55 185.177.72.100 185.177.72.53 195.178.110.31 20.104.100.201 20.251.112.238 45.148.10.15 45.148.10.246 45.148.10.62 51.103.131.31 72.146.2.52 82.158.131.223 4.204.200.143 20.203.138.185 157.245.167.36 45.154.98.108

(Attention à son langage : failed veut dire qu'il a des IP qui viennent de franchir la ligne jaune, et qui seront bannies si elles recommencent. C'est donc tout à fait normal que la valeur ne soit pas à zéro)

En 48 heures, il a été redoutable

Allégorie d'un admin-sys tentant de repousser une vague d'attaque zombies, © Paul Robertson

fail2ban évite les DoS dûs aux requêtes abusives d’une seule source, pas les DDoS concertés, tout comme il ne guérit pas des failles. Ce n’est pas non plus une solution définitive : les filtres devront évoluer au fur et à mesure, et il est probable que les scripts d’attaques visant les serveurs web se mettent à être moins prévisibles pour contourner les filtrages sur les patterns d’attaques les plus fréquents. Là encore, c’est de la décision, soit humaine à petit volume, soit délégué à une IA suivant le niveau de budget, de fiabilité et de confiance des serveurs à gérer. Pour l’instant, déléguer la lecture de ces logs à une IA est un poil overkill, et fortement interdite en compétition par la FFLSLS.

L’inconvénient de fail2ban est sa lenteur relative : il est en partie écrit en python. Langage que je connais bien, donc ça aide. Ça veut dire qu'il peut mettre une à deux secondes avant de dénoncer l'IP indélicate à iptables ou nftables.

Autre problème de fail2ban est qu’il faut complètement relancer le service quand on modifie un paramètre ou une règle, et qu’on doit rechecker derrière pour voir si le service n’est pas complètement interrompu à cause d’une typo dans une regex. Parce que la commande service fail2ban restart ne vous indiquera rien, il faut lancer fail2ban-client status --all pour s’assurer. Lire la doc, aussi, au cas où, ça peut aider.

Quand on a fait une erreur de config, on sent très vite revenir les tentatives d'attaques, à un niveau impressionnant.
Et dimanche 16 août, fail2ban a banni plus de 1300 adresses IP, un nombre assez effarant par rapport aux 60 dans les premières 24 heures. Soit y'a eu une campagne concertée sur ma petite VM (mais pourquoi ?), soit un attaquant particulier a décidé de passer par plusieurs VPN/machines compromises pour m'agresser, jetant les IP grillées. Donc soit on a des campagnes menées à un niveau industriel, soit une adaptation à un niveau industriel d'une unique attaque. Je pensais à une activité du week-end pour gagner du temps sur l'absence de surveillance dans les entreprises, mais le week-end suivant a été nettement plus calme (sachant que j'ai ajouté des règles, donc on attrape plus de tentatives).
Car c'est le risque : avoir blindé un minimum un vieux serveur qui comporte des noms de domaine vieux de plus de 20 ans signifie peut-être que la cible n'est pas anodine.
J'aimerais pas trop vite décevoir ceux d'en face.

Vous êtes ici à la moitié de mon texte. Vous vous dites que j'ai laissé une LLM gloser à ma place pour une telle loggorhée ? Ben non, même pas : mon texte est exclusivement bio. Mais continuons, on verra si quelqu'un remarquera ce paragraphe ;)

Q & R

J’en ai parlé à ma communauté habituelle, et ils ont eu des questions, forcément intéressantes.

(je dis forcément car j’ai la richesse d’avoir une commu de très bonne intelligence.)

Suite à ton message, j’ai fait un petit tour de mes logs Apache, et boudiou que c’est sale : c’est plein de vermine qui ne cherche qu’à s’introduire sur le serveur. 🔐 🏴‍☠️

Ce trafic malveillant a toujours existé depuis la fin des années 1990s, il s’est juste industrialisé, amplifié, par des serveurs web compromis pilotés par des c2c, puis des objets connectés très mal sécurisés (le mal de l’IoT genre machine à laver, caméra de surveillance ou télé connectée), par des injections de publicités avec les javascripts malveillants (dont pensez à bloquer les pubs), par des applications qui utilisent des bibliothèques logiciels aux conditions obscures (regardez vos apps avant de les installer avec Exodus privacy), voire même en utilisant des documents Word et PDF envoyés au petit bonheur la chance, par des développeurs qui téléchargent tout et n’importe quoi dans leur environnement de travail (et Docker n’est absolument pas suffisant pour sécuriser).
Et maintenant avec les agents logiciels type LLM, l’industrialisation des attaques a pris une nouvelle échelle, c'est flagrant depuis le printemps dernier.

Tu mets pas un rate-limit ?

Non, car sur ce serveur, j’ai entre autre posté une page technique avec près de 2 000 images individuelles. Nous avons aussi le site de CPU, l'émission Carré Petit Utile, qui a beaucoup de petits fichiers. Par exemple le mode de distribution média DASH/HLS qui fractionne le sonore d'’émission d’une heure en une centaine de petits fichiers, afin de rendre très rapide les saut de chapitre sur les smartphones. On a aussi le flux podcast. ~~iTunes~~ Apple Podcast s’amuse parfois à en télécharger les 250 illustrations dans les 5 secondes.
Le nombre de faux positifs serait désastreux, malgré la mise en place de HTTP/2 et HTTP/3.

Tiens, il faudrait que je parle des effets de publication d’une nouvelle émission sur Mastodon : Flood immédiat. Des opérateurs de site web de presse m’ont confirmé que c’était parfois un frein objectif à la présence sur le fédiverse.

Pourquoi rester sur Apache ?

Ça n'est pas le sujet mais Apache répond à ce dont j'ai besoin, est toujours maintenu et reçoit des mises à jour de sécurité, et j'avais pas envie de me coltiner la conversion de plein de règles .htaccess. Je sais que c'est pas le mieux en optimisation, mais ça répond sans soucis. Les règles que je donne s'appliquent avec un minimum d'adaptation aussi sur NGinX.

Tu penses qu'on pourrait l'appliquer sur un serveur tiers, genre un Zabbix qui monitore une flotte de serveurs ?

Sûrement, très sûrement, mais cela demande beaucoup d'adaptions et de scripting. Genre surveiller le /var/log/fail2ban.log de chaque serveur, isoler des messages Ban et Unban, réinjecter dans un log à surveiller dans le fail2ban. Par contre, j'ai pas cherché à regarder si des règles s'appliquent aussi pour débannir immédiatement des IP.

Ça serait con que toute une entreprise se retrouve bannie de tout son cloud à cause d'un dev qui a lancé sans prévenir un outil de scans de vulnérabilités depuis le réseau interne.
Oui, j'ai déjà vu, j'ai ri sous cape.

Pourquoi pas Anubis ?

Anubis résout un autre problème, celui du trafic de robots d’IA qui viennent repomper du contenu à revendre en tant que perroquets scolastiques, tout en en créant tout plein d’autres problèmes.

Vis à vis des logiciels clients de podcasts ou clouds persos qui récupèrent les flux, c’est extrêmement compliqué à paramétrer : soit je bloque, soit je laisse les IA pomper 150 Go de sonores.

De toutes façons, les moteurs d'IA commencent à s'embarquer dans les navigateurs web en webextension pour justement se faire passer pour un utilisateur humain, et Anubis commence à se faire contourner, hélas.

Regarde pour migrer sous reaction (de ppom, lire son article) au lieu de fail2ban ? C’est quand même une plaie à maintenir, ce vieux bousin…

Tout à fait. Mais je me suis mis comme objectif d’installer le minimum de programme supplémentaire. fail2ban est déjà là pour filtrer les connexions ssh, l’étendre pouvait être fait en moins d’une heure,

Regarde crowdsec

J’adore l’idée d’une liste crowd-sourcée, un peu comme Akismet, un filtre antispam collaboratif par WordPress. Je reste sur ma problématique de ne toucher qu’au minimum à la distribution de base et installer peu de choses, mais clairement, je vais regarder pour d’autres projets que je soutiens.

À noter que dans l'installation par défaut, fail2ban peut participer et utiliser les listes partagées sur badips.com via leur API, mais à l'heure où j'écris, le serveur badips.com semble down, peut-être depuis des années. Le service semble depuis voir été remplacé par ipthreat.net, lui aussi intégré dans les options de fail2ban.

Peut-être aussi que des questions se sont posées, genre waterhole-poisonning par reporting abusif, attaques en DDoS créant des DoS locaux, et j'en passe.

Pourquoi pas Cloudflare ?

C’est une très bonne question.

j’ai pas les sous, ou plutôt, je ne veux pas y mettre un budget, ni un compte gratuit ;
je ne connais pas les comportements, surtout vis à vis des softs de podcasts, puisque j’héberge 150 Go de sonores ;
je souhaite que mon système soit en autonomie avec la dépendance externe la plus minimale possible ;
je viens à peine de me dégafamiser sur le dernier point (le proxy podcast qui était chez Feedburner), c’est pas pour retourner sur un SPOF externe sous la juridication d'une puissance militaire hostile puissament équipée. Don't feed your ennemies.

Et puis, je préfère valoriser mes skills de Président Fondateur du FFLSLS

Qui te dit que, contrairement aux attaques par ssh, tu n’es pas en train de bloquer des proxies, des VPN voire des points de sorties de Tor ?

C’est effectivement un risque, car des bots passent par ce type de service, ou des VPN gris (des VPN professionnels proposant des adresses résidentielles de la ville et du FAI de votre choix, c'est facile en ayant zombifié des millions de télés connectées), mais ce n'est pas la très grande majorité. D’où la durée limitée des bans et pas permanents. Sans compter que j'ai plusieurs fois vu des publicités servies par de grands sites, qui comportaient une charge javascript permettant d'attaquer d'autres serveurs, d'où l'intérêt des CSP/CORS dans les navigateurs web pour tenter de limiter cet… usage indirect des ressources.
À priori, si un point de sorti est grillé, les clients de VPN, les spectacteurs malheureux d'une pub-malwarisée, ou les utilisateurs de Tor peuvent demander un autre circuit pour ressortir. Ceux derrière un proxy d’entreprise peuvent toujours prendre leur smartphone personnel.

Quelle durée pour les bans ? 2 ans ?

Non, seulement 6 mois après 3 tentatives. Ne soyons pas vaches.

il existe aussi des mod security [sur Apache] qui filtre ça avec des règles connu et maintenu (qui est static), ça te fait une sorte de WAF home made.

Exact. Mais la beauté de fail2ban est qu’il est asynchrone par rapport aux process Apache, donc il ne l’impacte pas en termes de performances, et il bannit aussi les IP qui tentent les attaques sur des ports comme ssh, mysql, pgsql, mongodb, postfix, gitlab, roundcube, traefik, counter-strike et j’en passe. Une tentative d'attaque d'une IP sur un port indique déjà des intentions pas très pacifiques.
Je tiens à préciser que les adresses bannies pour attaques web sont toujours différentes de attaques ssh, ce qui peut s'expliquer par le nombre de serveurs de relais disponibles ré-utilisables directement comme reverse-proxies.
Coucou les caméras de sécurités mal sécurisées !

La consommation de CPU pour gérer les règles c’est infernal. Suis très fier de valoriser du vieux matos. Mais là franchement fail2ban j’en ai touché les limites avec cette histoire.

Pour l'instant, je touche du bois, mes indicateurs m'ont montré un gain très net en RAM et CPU, donc j'en suis très satisfait. J’en changerai sûrement, le but est de faire le moindre effort possible, le moindre impact possible sur le serveur, le moindre ajout possible de logiciel.

Pourquoi ne pas utiliser l’IA ?

Parce que c’est un moteur statistique, donc techniquement c’est de l’IA.

Je rappelle que je voulais modifier le moins possible mon serveur. Ajouter du logiciel, c'est augmenter fatalement la surface d'attaque.

Après, utiliser l'IA pour découvrir et isoler par exemple de nouveaux patterns d'attaque, et pouvoir proposer des mises à jour des règles de bannissement dans un repo git, avec un traçage d'historique et des tests automatisés de non-surblocage, ça ferait un beau projet.

Pas mal, ça gère les attaques de petit-gris ?

Je suppose que l'on peut faire de la regex unicode dans les paramètres de filtrage de fail2ban, mais n'ayant pas encore vu de tentatives, difficile d'évaluer sans test reproductible.

La discussion continuera sûrement ↓ dans les commentaires ↓ donc n'hésitez pas.

Bilan

Utiliser l'existant et le déjà installé
Pouvoir l'étendre et ajouter des paramètres par rapport à mon cas d'usage
Déployer un minlmum d'effort
Filtrer efficacement les nuisances
Réduire les charges CPU, RAM et réseaux de la VM
Documenter mon expérience
Soulager mes nerfs envers ces démonstration de scanners de vulnérabilités non-sollicitées

Personnellement, c'est un easy-win et ça va me resservir pour des serveurs d'associations.

Et maintenant ?

Parmi les autres possibilités parues pendant la rédaction du billet, cet article de SebSauvage

Il me reste à protéger le serveur minitel de la radio, trop librement accessible par le port 3615.

Tea party d'été

Da Scritch — Fri, 14 Aug 2026 07:47:00 +0200

Hydratez-vous bien

Dinah et Alice prennent le thé

Après c'est des champis, du LSD, Chat de Cheshire, lièvre à la bourre sur la cuisson, etc...

Cette photo a été prise au début de la seconde vague de la canicule. Depuis, Dinah a perdu facile 1,5 kg en deux mois.

Occultation maximale

Da Scritch — Wed, 12 Aug 2026 08:39:00 +0200

Une éclipse solaire, c'est beau sur la ville…

Nous avions été invités à un roof top, littéralement un des plus beaux points de vue sur la ville, en haut du cimetière de la Gloire, d'un immeuble plus haut que les mâts émetteurs de Radio Occitanie et TowerCast juste à côté. D'ailleurs, nous étions à 3 mètres du nodal mesh du réseau hertzien de Tetaneutral.

Si l'immeuble accuse son âge, et ses poutres en bétons dangereusement basses pour moi, l'ambiance est étonnante, avec un soupçon de vent sous la toiture. Outre celui qui a invité le Tetalab à s'y délocaliser pour la soirée, les habitants légitimes montent et une joyeuse ambiance pointe spontanément. Les discussions vont et viennent avec les amis trop peu vus. Le matériel est mis en place, s'échange des tips, des lunettes et des boissons fraîches, tandis que chacun tente de reconnaître les immeubles remarquables de la ville, heureusement pas encore lardée d'une Tour Occitanie, la fameuse Tour Moudenckiki (CENT CINQUANTE MÈTRES EN ÉRECTION) dont personne n'en voit l'utilité sinon soigner un ego sensible qui ne souffre pas d'être ombragé.

Entre qui a amené un chouette stock de lunettes protectrices d'excellentes qualités, qui des filtres pour smartphones et objectifs photos, qui une camera obscura maison (une boite à chaussure pour moi, un petit trou d'épingle, et hop), qui un appareil argentique, qui d'autres amis.

Quels souvenirs a-t-on de la dernière éclipse totale, celle de 1999 ? Je serais bien incapable de m'en souvenir, tiens, et je ne suis pas le seul. Parait qu'il y fit bien plus frais et qu'elle fut totale, normal pour un gouvernement de cohabitation républicaine.

La lumière baisse, les oiseaux volent de plus en plus bas, on ré-explique pour la 8^ème fois à la voisine que non, il vaut mieux qu'elle utilise nos lunettes protectrices que son empilement de 4 paires lunettes de soleils (! et elle insistait pourtant !). Perso, je montre à une des occupantes de l'immeuble comment utiliser le filtre solaire avec son téléphone en débloquant tous les réglages en manuel, devant un collègue du Tetalab dégoûté de n'avoir ces modes avancés.

Devant nous s'étale quasi toute l'agglomération toulousaine dans son majestueux entrelacs de bâtiments en briques oranges, d'immeubles modernes, d'une roue incongrue sur la rive gauche et de bélugas qui se posent majestueusement pour se nicher à Blagnac. Devant nous, le ciel est orange apocalyptique, digne de « Blade Runner » avec la chape d'humidité et sa pollution. Tandis que derrière nous, la vue sur Balma est d'un bleu transparent jusqu'au Tarn.

Tout le monde met ses lunettes comme pour un blockbuster en 3D, ouvrant pop-corns et (avantage sur les multiplexes) bières légères.

C'est durant ce moment où les oiseaux sont tous sur le tarmac, où même les scooters arrêtent de vrombir tellement qu'ils sont impressionnés par le spectacle et où tout le monde retient son souffle devant la stupéfiante beauté du spectacle cosmique que le poète prévoyant alerte les badauds au cas où.

Mais la foule est ingrate.

La prochaine éclipse solaire visible sur le territoire métropolitain sera une occultation partielle moins impressionnante et comme par hasard le 2 août 2027, jour de mon anniversaire. JDÇJDR.

Quand t'as pas compris les emoji

Da Scritch — Mon, 10 Aug 2026 14:16:00 +0200

Oui, parce que si les emoji existent comme ça, c'est qu'il y a plein de raisons.

Cela fait trop longtemps que je n'ai pas écrit sur ce blog. Le manque de temps, le fait que pour parler technique, je privilégie mon émission radio CPU, le manque parfois d'envie.

Alors réveillons-le comme une sorte de brouillons pour mes futurs sujets, pour des à-côtés, ou simplement comme ça, dire que je suis toujours là.

Certains le savent, je manipule les emoji depuis 1999. Oui, depuis aussi longtemps, et les traces sont sur ce site web. Cela a été l'objet d'une de mes premières conférences techniques en 2012, adaptation d'une série de billets persos Des emoji dans l'Unicode. D'une manière assez amusante, on m'a cité une fois en entretien d'embauche mon propre sujet en ignorant que j'en étais le rédacteur. J'ai eu aussi des informations précieuses de première main, parfois très drôles, et j'ai toujours envie de raconter cette épopée des emoji dans l'Unicode et les implications techniques.

Mais ça ferait peut-être hautain.

Donc je me baladais sur LinkedIn en quête de ma prochaine quête quand je tombe sur ce post d'une ESN française

The emojis we got vs. the emojis we deserve 💭
The world is evolving faster than ever. New technologies, smarter engineering, cleaner energy and more connected industries are just some of the advances impacting our everyday lives.
However, most of the emojis available don’t represent these innovations… So we decided to take the matter into our own hands and create the versions that would best fit the ALTEN approach!
Take a look at our refreshed emojis. 👇🏻

Suivi d'une collection d'images opposant des emoji de la fonte Google Noto (donc Android ?) à leur réinterprétation par IA générative. Par exemple, une personne derrière un laptop revu dans un environnement holographique, ou une paire de lunettes revue en dispositif de Réalité Augmentée

Pour une boite spécialisée dans l'ingénierie informatique, ne pas avoir compris pourquoi et comment les emoji existent, les contraintes optiques, les usages directs, le besoin d'abstraction, tout cela pour s'exprimer graphiquement par des images générées par IA,…

Qu'en 3 petits prompts pour générer ton post sur LinkedIn pour faire plus joli plus rapide sans en comprendre contraintes et complexité, cela laisse rêveur.

C'est encore plus drôle quand ce post arrive une semaine après que, dans un spectaculaire retour en arrière, LinkedIn supprime ses outils d'amélioration par Copilot des contenus et propose maintenant de filtrer et modérer fortement tout contenu post généré par IA, constatant que c'était devenu infernal.

Allez, à la prochaine bafouille

N2HDF 2026 Toulouse

Da Scritch — Sun, 07 Jun 2026 19:20:00 +0200

Comment s'est passée la N2HDF 2026 édition Toulouse au sein du Tetalab ? Retrouvez les supports et enregistrements.

Le Samedi 30 Mai 2026 avait lieu l'édition toulousaine de la N2HDF 2026.

Nothing 2 Hide est une association dont le but est de protéger l’information par la fourniture d'outils face aux menaces et la surveillance numarique, la lutte contre la censure, des formations et l'éducaiton au médias.

Suite à différents événements publics qu'ils ont organisés, ils ont eu l'idée de proposer à de multiples associations disséminées sur la France d'organiser le même week-end des ateliers, conférences, tables rondes, etc… sous le nom N2HDF (Decentralized Festival)

Le Tetalab eu l'honneur d'avoir à organiser l'événement sur Toulouse, qui s'estdéroulé au Topic le samedi 30 dans l'après-midi.

Voici le programme, les supports et enregistremets

Conférence « Le Bluetooth a-t-il définitivement remplacé la prise casque de votre smartphone ? »
Et si oui, pourquoi ? Analysons une suite de décision qui n'est pas toujours en faveur de votre vie privée et de votre porte-monnaie. Et pourquoi ça serait bien de militer auprès de certaines marques pour qu'il remettent la prise casque.

Support de la présentation (utilisez la flèche → ou swiper sur écran tactile pour avancer)

Conférence « Readeck, un logiciel libre d'archivage de contenu en ligne. »
Rien n'est éternel et un marque-page sur navigateur suit la même logique: un beau jour, vous allez cliquer pour revisiter un site ou article intéressant et là c'est le drame. Le domaine a été vendu, l'auteur n'avait plus envie de le maintenir, 404 Not Found, le contenu a changé été censuré...

conférence « Bien se servir des VPN ».
Pourquoi un VPN, c'est très pratique, surtout si vous êtes youtubeur professionnel. Pourquoi les VPN ont été créés, quelle est leur utilité réelle, quelles sont leurs limites techniques, pourquoi l'usage des VPN commerciaux par des particuliers n'est pas franchement utile, en quoi mentent les opérateurs de VPN grand-public, et quelles sont les meilleures alternatives.

Support au format PDF

conférence « Vraiment rien à cacher ? ».
Nous avons tous entendu cet argument stupide, C'est pas grave, moi, je n'ai rien à cacher. Partons du principe que c'est le cas et déconstruisons point par point tout ce qui pose un problème dans cette affirmation.

Support au format .odp, lisible avec Libre Office

Table ronde : Échanges autour des pratiques et des enjeux de l'autodéfense numérique par les intervenants de la journée.

À noter que les enregistrements ont été édités afin de préserver l'anonymat des membres du public.

Organisation : Nothing2Hide, Tetalab. Moyens techniques public access : 5 Minutes. Captation et Mixage : CPU

Cinquantenaire

Da Scritch — Fri, 02 Aug 2024 08:00:00 +0200

Ça devait finalement m'arriver...

Voilà, j'ai 50 ans.

Je suis censé être plus mûr, sûrement moins frais, plus sage mais plus aigri. Mais j'essaie de rester passionné même si j'ai délaissé dernièrement (provisoirement) mes engagements associatifs, mon émission de radio et ce blog.

Je remercie tous mes amies et amis qui ont pu venir à notre soirée, et bien évidemment, j'en veux nullement à ceux qui n'ont pu venir ou se sont annulés à la dernière minute.

PS 1 : Cette soirée n'aurait pu être possible sans Enflammée, bien sûr.

PS 2 : Ce billet a été volontairement antidaté.

PS 3 : Crédit photo NoCoGabriel.

Bye bye, GPDis !

Da Scritch — Fri, 11 Feb 2022 06:55:00 +0100

Aujourd'hui est mon dernier jour à Eurocentre. Je quitte mon emploi de développeur chez GPDis, un important acteur dans la vente d'électroménager. Mais pas que.

Depuis 2007 je n'étais pas resté aussi longtemps dans une entreprise. Aujourd'hui, je quitte GPDis à quelques jours des 5 années de mon arrivée.
GPDis qui a intégré entre-temps MDA Group, c'est des centaines de points de vente direct, des enseignes comme Pulsat, Villatech, Dimipro, Phox,et maintenant MDA, plusieurs plateformes d'e-commerce en B2C et B2B, une logistique avec plusieurs entrepôts sur l'hexagone, un service IT dédiée à ses points de vente et aux commerciaux et tous les services supports sur la multitude de canaux retail qui en couvre le spectre commercial.

Avant d'entrer dans cette très grosse PME, j'avais développé plusieurs solutions d'e-commerce, dont une avec le regretté Xylpho, mais je dois dire que chez GPDis j'ai appris de multiples choses sur la logistique, sur les particularismes, sur les veilles de prix et politiques tarifaires. Un groupe protéiforme avec de multiples canaux de ventes, un vaste panorama de clientèle B2B et B2C, j'avais vraiment beaucoup à y découvrir.

Ayant eu en charge un outil métier qui semble simple mais dont l'historique git remonte à 2011, il m'a déjà raconté bien des choses sur la vie d'une entreprise.
Le genre d'outil custom costaud, l'ouvrage séculaire qui en impose, où l'on passe la lourde porte en bois pour entrer dans une immense cathédrale, où chaque pas sur le code de pierre résonnent dans l'immense nef de la Production au point qu'on n'ose marcher que sur la pointe des pieds afin de ne pas trop attirer l'attention (un peu comme dans le stock attenant après la période des soldes). Un progiciel avec lequel je discutais avec d'autres service internes et externes, où je me devais d'être carré. J'étais intimidé… mais le copain qui m'a mis là et l'équipe autour a su me mettre en confiance.

J'ai eu à le stabiliser, le fiabiliser, l'accélérer et enfin l'étendre encore plus. Et autour de moi, un groupe aussi évoluait à toute vitesse.

J'y ai beaucoup appris. J'avais une expérience sur le e-commerce, mais je n'avais pas l'expérience à cette échelle-là et sur autant de prestations. Si je connaissais déjà la différence entre un SKU et un GTIN, j'ai eu aussi la surprise de découvrir qu'un même modèle d'un même fabricant pouvoir ne pas avoir le même GTIN selon les fournisseurs. J'ai aussi (honte à moi) ri quand un prestataire e-commerce qui roulait des mécaniques tenait absolument à utiliser sa version des frais de port en fonction du poids, et qu'il a enfin compris que non, on ne vend pas comme des maillots de foot des frigos américains et des télés, la gestion des transports est nettement plus touchy que ça. J'ai aussi fait au grand plaisir de Loick Daures une démonstration de chanbara, quand un ingénieur commercial d'un grand opérateur réseau a crû m'expliquer le RGPD et s'est retrouver à sauter précipitamment les pages de son PowerPoint par dizaines devant ses collègues commerciaux en sueur alors qu'en devisant des citations latines, je sortais mon katana. Et j'ai appris encore tant d'autres choses, rien que la formation SST d'utilité publique que j'aurais dû avoir fait depuis une dizaine d'années, ou encore cette des applicatifs javascript avec Christophe Porteneuve qui a été un grand moment dans l'équipe.

J'ai mis ma patte aussi : essayer de faire en sorte que le même vocabulaire soit utilisé d'un service à l'autre, qu'il y ai une gestion documentaire normalisée sur le logiciel dont j'avais la charge et enfin découpler du métier ce qui tient de l'OS (notamment les transferts de fichiers) et normaliser les scripts bash, dont j'ai résumé la philosophie de mes scripts sur le verrou non-concurrentiel et les options d'appel.

Je remercie ceux qui m'ont précédé à ce poste : Nicolas Dubois, Antoine Cézar, Camille Alram et David Talagrand, ce dernier m'a co-opté pour prendre la suite (d'ailleurs, en 25 années, je n'ai été que co-opté pour mes postes). Par hasard, il se trouve que ce sont tous des amis. Je remercie infiniment David Lefoye pour sa bienveillance et sa connaissance à 360° du secteur, Rémi Soubranne pour son amitié (un P.O. commercial dans la vente d'électroménager qui vous écrit parfaitement des tickets sur Github, c'est du bonheur !), tous ceux qui ont été mes collègues à l'IT et ceux qui y sont encore. Je salue aussi Daniel Broche qui avant de travailler pour des concurrents, avant manqué de me prendre chez GPDis du temps de Discounteo. Lui aussi est resté un ami et j'occupe son ancien bureau.

Alors évidemment, il y a les regrets des chantiers jamais commencés, des occasions prises pas assez tôt. Il y eu aussi la surprise pour certains que le télétravail fonctionne, alors qu'en étant déjà divisés entre 4 régions, nous appliquions déjà de fait tout ce qu'il fallait. Et puis les lancements qui furent de bonnes surprises malgré mes sombres prédictions.

J'ai eu plaisir à travailler avec des professionnels sérieux, aux parcours et spécialisations variés, de la bonne humeur au café, les raids de choco-blast (que j'ai commué en paniers de fruits), la paella en salle de réunion, les tournois de baby-foot, des BBQ dehors et des soirées afterworks. Ce plaisir, j'espère qu'il fut partagé.

Mes nouvelles aventures s'annoncent tout aussi palpitantes.

Note : photo datant de 2019 d'où l'absence du port de protection faciale.

Radio FMR, mais elle dure depuis 40 ans

Da Scritch — Mon, 22 Nov 2021 07:07:00 +0100

Et elle a encore tant à vous dire

Pour ses 40 ans, Radio <FMR> organise quelques soirées live, et cela a commencé dès Vendredi dernier, avec une prog qui allait du rockabilly au punk. Je poste les photos au fin fond du billet (exprès), et sinon une très grosse soirée aura lieue ce Samedi au Bikini avec un plateau de qualité

Et là, vous allez me dire

« FMR ? Ça existe encore ? »

Eh ben oui ! Depuis 1981, elle vit encore grâce à la bonne volonté de bénévoles comme moi. Oui, une radio associative, c'est incongru à l'époque où l'on peut théoriquement se faire du pognon sur Youtube et Twitch, mais dans les faits, c'est justement une bonne garantie de ne pas avoir de publicités outrancières pour des pilules soit disant amaigrissantes par des évadés fiscaux au Qatar. Et ça change tout.

(En fait, je l'ai finalement mieux dit au micro, mais vous pouvez continuer à lire ce billet)

Avoir un média qui ne vous traque pas dès que vous tentez d'y accéder, avoir un média qui ne soit pas derrière un logwall ou un paywall (coucou Instagram, coucou Webedia), avoir un média dont l'accès gratuit est garanti et son ancrage local aussi sans publicité, y'en a pas brézef.

Mais un média qui ne cherche pas forcément l'audience et donc a sur son antenne des émissions aux sujets vraiment pointus, comme CPU, c'est encore plus rare ! Ni mon émission, ni d'autres qui sont sur FMR auraient eu la moindre chance sur un autre média à place limité. C'est ce qui en fait la complémentarité du secteur associatif de la radio. On a l'inconfort des moyens mais la liberté de ne pas être tributaire de l'audience et donc de la publicité, et sans être sous la coupe d'un pouvoir politique. Le CSA est seul juge sur notre existence.

Alors le manque de moyens, les conditions des fois acrobatiques pour assurer un sujet, voire le snobisme de certaines boites quand on leur demande une interview, c'est pour moi la preuve que nous avons encore plus que jamais le mérite de continuer d'émettre.

Et de ça, j'en reparlerais ce Jeudi à la radio sur pourquoi FMR est un putain de miracle encore actuellement.

Photos de Vendredi dernier

Mille mercis aux groupes, aux volontaires de la radio et à l'équipe de l'Usine à Musique, qui nous a fait un accueil vraiment super !

…sans Frank

Da Scritch — Wed, 06 Oct 2021 13:22:00 +0200

J'ai pas le courage d'une conf web dans l'immédiat sans lui.

Cela fait un mois que Frank Taillandier nous a brusquement quitté. Un individu attachant que j'ai vraiment découvert aux apéro-web. Un gars qui était un excellent teambuilder : enthousiasmant, énergique, cultivé, passionné. Et il m'a poussé à présenter une conf alors que je déprimais, c'était à mon premier Sud Web. Plus tard, tu as dit que c'était des conférences pour réfléchir sur nos métiers.

Je suis très loin d'être le seul que tu as pris par la main, pour nous hisser vers un autre niveau de responsabilités.

Et là, quand il est parti, j'ai découvert combien il était impliqué dans plein de projets. Comme plein d'autres, j'ai découvert qu'il animait le repo Jekyll. Frank, tu es encore plein de surprises. Pour nous, pour tes collègues, pour tes amis, pour ta famille. Tu as même réussi à t'auto-chocoblaster quand tu es parti (et heureusement).

Oui, personne qui ne l'a connu n'a manqué de louanges pour Frank. C'est plus que mérité.
Pourtant, je l'ai aussi connu énervé, d'un agacement communicatif quand quelqu'un fait mal son boulot, ne veut pas apprendre, n'en n'a rien à faire des autres. Il m'a aussi appris (un peu tard) à savoir lâcher prise, quand ça veut pas, ça veut pas. Je l'ai aussi vu faire craquer des gens qui ne méritaient pas tes colères. Mais tu nous a tellement amené d'objectifs positif dans nos vies…

Demain commence un Paris Web.
Ce genre de manifestations nous manque, mais là, j'ai un peu de mal un mois après, je ne me suis pas inscrit, alors que leur programme est formidable. Parce que Frank, entres autres, m'a fait rentrer dans cette communauté des 1% des web-devs riches de leurs passions. Et que j'ai encore besoin de digérer un peu cette perte.

Voilà. Ça fait beaucoup de copains proches morts jeunes ces derniers temps, alors qu'on pouvait pas se voir de visu. J'ai le blues, j'ai mis un mois à publier ce billet, et je garderais cette formidable photo de toi en super-héros.
Ton départ brusque est une lourde perte, et c'est à nous de créer de nouvelles communautés avec ton héritage moral.

cpu-audio.js enfin en 7.0

Da Scritch — Wed, 28 Apr 2021 06:51:00 +0200

Ouais, j'avais d'autres billets techniques sur le même sujet, mais là, j'ai avancé sur le code plutôt que l'explication de texte ;)

Commençons par un exemple avec une émission sur le son :

(S'il n'a pas encore démarré, un peu de patience, sinon le lecteur reste utilisable, c'est de la dégradation élégante)

Cela faisait un peu de temps que je n'avais pas donné de nouvelles de mon lecteur audio. Alors que pourtant j'avais écrit toute une série de billets à son sujet :

cpu-audio.js vient de passer en version 7.0. Le player audio de l'émission CPU en WebComponent a été revu en profondeur, avec moult corrections et notamment l'arrivée des thèmes graphiques en plus du système simple de configuration

L'idée d'origine de cette bibliothèque était de pouvoir donner une URL qui puisse pointer à un instant précis d'un audio dans une page web. Car le standard existe mais n'est pas implémenté par les principaux navigateurs. Or il est bien utile pour les émissions de 5h30. Et quitte à le faire, le faire avec un minimum de dépendances et un maximum de souplesse.

Par la suite, les principales API sont arrivées pour enfin stabiliser les Web-components, ce qi m'a permis d'enfin réaliser une bibliothèque javascript isolée, transportable, agnostique, petite (sous les 50ko) et toujours en vanilla.

J'ai donc déjà longuement raconté sur ce blog les démarches de conception qui m'ont permis d'y arriver et de le faire dans la licence GPL.

J'avais besoin de refondre complètement la bibliothèque pour la rendre plus maintenable, plus facile aussi pour que n'importe quel dev ou intégrateur front s'en empare. Il est ainsi possible de créer des thèmes graphiques sans toucher au code JS, ce dernier ayant même une tolérance d'implémentation.

Il reste toujours les idées qu'on avait jeté au début, que je ne réaliserai jamais seul mais que j'espère donner une base saine pour construire :

des thèmes plus aboutis et jolis
une WebExtension pour lire n'importe quel audio tranquillement
créer des playlist décentralisées pour montrer que le web est beau car remixable
créer des commentaires à la SoundCloud/MixCloud mais décentralisés
des outils encore plus poussés que l'éditeur de chapitre
ajouter un spectrogramme via add-on
Étendre pour l'utiliser aussi sur de la vidéo

Et n'hésitez pas à me contacter si vous avez besoin d'aide.

J'ai encore beaucoup de choses à dire, mais surtout beaucoup à remercier ; d'abord toute l'équipe de l'émission et ceux de la radio qui font qu'on reste très impertinents depuis 1981. Avec une pensée spéciale pour le Tetalab et Mixart Myrys où nous avions enregistré de nombreuses émissions et dans une panade noire.

Ensuite ceux qui m'ont aidé spécialement sur ce projet de code :

Thomas Parisot pour le standard Media Fragment, qui permet à ce player de créer des liens hypertextes temporels ;
Loïc Gerbaud pour des corrections ;
Guillaume Lemoine qui m'a bien aidé avec du prêt de matos au début ;
Benoît Salles et Michel Poulain pour les tests, Gabi Boyer pour m'avoir passé un iPhone SE, téléphone qui est certes toujours mis à jour, mais Apple n'arrive vraiment pas à tenir Safari aux standards.
@mariejulien pour m'avoir donné envie de ré-écrire un CONTRIBUTING.md plus accessible
Christophe Porteneuve de Delicious Insights, un ami et un formateur JS qui m'a donné un magistral coup de pied au cul. Ses formations JS sont de sérieux cadeaux pour les devs webs.
scombat qui a écrit une intégration minimale de cpu-audio.js dans React
Éric Daspet pour ses précieuses remarques sur la documentation

N'hésitez pas à le faire connaitre, si vous avez un projet audio dans le web qui nécessite un lecteur.

Adieu Xylpho

Da Scritch — Sun, 25 Oct 2020 10:11:00 +0100

Nicolas Guilhou, vers une vie meilleure.

Ensemble, on en a fait des conneries au lycée, on a défriché les CSS, Ajax et les WebForms avant qu'ils deviennent HTML5, on a fait de la com' d'événementiels, on a voulu monter un service SaaS (dAgence), on a aussi tenté d'écrire des scénarii d'animation,… Et honnêtement, il y a beaucoup de projets dans lesquels je ne me serais pas lancé si tu n'étais pas partant toi aussi.

Tu as toujours voulu être le copain rigolard. Au lycée, quand tu étais graphiste indépendant, quand tu es devenu web-designer, puis indépendant à nouveau.

C'était la façade que tu as toujours voulu montrer, quitte à oublier tes années de galère, tes histoires sombres, ton cafard. À toi, à moi, à tes amis… Même à cette fille dont tu as assuré l'éducation.

J'ai appris que tu n'as plus supporté tes tristesses. Et tu as préféré partir brusquement.

J'en suis malheureux, car on correspondait encore, mais tu ne me l'as jamais écrit. J'aurais tu te voir plus souvent.

CD de nuits

Da Scritch — Sun, 21 Jun 2020 17:12:00 +0200

Ré-écoutez Radio FMR telle qu'elle était les nuits entre 1998 et 2001

Pour cette année, la Fête de la Musique est un peu exceptionnelle puisque plutôt calme, Covid-19 oblige. Mais nous avons une belle surprise pour vous : nous avons ouvert une capsule temporelle, rouvrant le son de la bande FM de Toulouse de la fin des années 1990s.

Nous sommes en train de publier sur podcloud les bandes de nuit de Radio <FMR> d'il y a 20 ans. Vous pouvez retrouver nos mixes classiques ici.

Vous pouvez à nouveau entendre les fameux CD de nuit de Radio <FMR>

Tech, bricolages et programmes nocturnes

Quand je suis devenu salarié de Radio <FMR>, les moments hors programmes en directs étaient remplis par une platine double-k7 auto-reverse. Ce qui faisait 3 heures de mix musical pré-enregistré qui bouclait, qu'on appelait les bandes de nuit. On y retrouvait une sélection musicale qui a été programmée, mixée, enregistrée par des animateurs de la radio, en complément de leur émission. Les cassettes posaient plusieurs soucis : leur usure par temps chaud, et qu'il faille les changer tous les jours pour ne pas lasser les auditeurs.

Avec la démocratisation des graveurs de CD, on a pu tenter de mettre en place un carrousel de CD, un lecteur Sony qui pouvait enchaîner 200 CD aléatoirement. Mais ce carrousel avait un bug : pour éviter toute consommation électrique inutile, il s'éteignait au bout de 24 heures de lecture, donc nous avions mis un minuteur pour le relancer, hélas en mode aléatoire, il arrivait une fois par mois qu'au redémarrage, l'appareil aie encore un CD dans le bras sur le carrousel, qui tentait de faire tourner pour lire les positions occupées. Et ayant souvent à le réparer, on avait une centaine de CD brisés.

Heureusement, Sylvain qui se chargeait de la gravure des CD, avait les copies master qu'il redupliquait.

Puis, quelques années plus tard, nous sommes passés à un robot logiciel sur PC, avec une programmation musicale aléatoire (il y a en fait plusieurs niveaux de rotations, plus des règles pour passer jingles et annonces). Mais ce système nous a fait perdre cette chaleur de programmation, le fait qu'un enchainement aie été calculé et effectué par un humain, même si Dusport nous fait une programmation éclectique fabuleuse.

Archivons

Cela faisait quelques années que je me disais que c'était le moment ou jamais de numériser et publier ces programmes sur internet. La raison est évidente : les disques gravés sont encore moins éternels que les CD. Sylvain m'a donc fait l'honneur de m'amener ces archives inestimables, et la plupart semblent parfaitement numérisables avec un PC, d'autres demanderont de passer par une platine et une carte son. Ce qui tient du miracle, même si nous achetions des CD-R de qualité, ceux-ci n'étaient pas donnés pour durer plus de 5 ans.

Pour ceux qui ont connu Radio <FMR> à cette époque, ils retrouveront avec plaisir les mixes de feu Raskal qui assaisonnait ses sélections d'extraits de films, de Rave Age et leur son club, de Clark Nova très pop, de Brian Brillant très easy-listening, des Sanguinaires et leurs faits divers, et les programmations de Dusport, Bernard Amade, etc…

J'ai vraiment un plaisir à les redécouvrir, et un bonheur à pouvoir leur donner une nouvelle vie, notamment les insérer dans un créneau horaire nocturne sur <FMR> à partir de cet été. Abonnez-vous au flux podcast, je vais essayer d'en mettre 5 en ligne par semaine. Et ces numérisations me permettent de compléter une expérience pour une future émission de CPU.

Accessoirement, Radio <FMR> organise le Virus Fest pour soutenir la scène musicale locale et actuelle.

Le mouton tondu

Da Scritch — Mon, 15 Jun 2020 13:53:00 +0200

(ok, ces images ont pratiquement un mois)

Le déconfinement, c'est la joie d'avoir quelques kilos de cheveux en moins. Une expérience globale de l'importance de son coiffeur de quartier

Une belle tête déconfi-te.
Je sors ça un mois après, pour pas que mon +1 s'aperçoive depuis combien de temps j'ai pu passer à la coupe.

La vie d'après

Da Scritch — Tue, 02 Jun 2020 12:58:00 +0200

commence en sortant

Ce printemps étrange

Da Scritch — Sat, 16 May 2020 10:29:00 +0200

Le télétravail qui te fait réapprendre le chemin du travail qui passe par le salon…

Oui, un étrange printemps. Où la rue devant s'est quasi vidée pendant 3 semaines. Où tout le monde s'évite. Où les magasins on tiré leurs rideaux d'aciers. Où l'angoisse transpirait sur toutes les chaînes d'infos à l'ecœurement. Où Internet menaçait de s'effondrer à cause des méchants GAFAM. Où ces satanés salariés allaient lâchement profiter de l'entreprise pour ne rien faire.

J'ai pas eu le temps d'écrire pendant ce moment-là, cette époque inédite, ni vraiment eu l'envie de documenter ma petite vie.
Pourtant, j'ai ce stress, cette peur de contaminer la personne qui vit avec moi. Et qui dans cette réouverture à petits pas, est toujours là. J'ai pas mal d'amis qui sont malheureusement tombés malades du COVID-19, et qui en ont souffert.

Pourtant, je suis un immonde privilégié : J'ai gardé mon travail, j'en avais d'ailleurs tellement à faire que je n'avais quasiment que ça à songer toute la journée, on a une petite cour ensoleillée, dans laquelle gambade un chat qui nous adore, et il y a donc celle qui vit avec moi, qui peut enfin en profiter pour qu'on mange ensemble à midi.

J'ai télétravaillé pendant des années. En fait j'étais indépendant, et j'ai travaillé 6 ans dans le bureau de mon appartement. Et À l'époque, j'étais stressé pour d'autres raisons, plus financières. Car fallait vraiment pas être doué dans les affaires pour se lancer en indépendant dans un métier au moment où se déclenchait une crise financière.
On a vu des couples d'amis s'entre-déchirer à cette époque, eux aussi en indépendants, travaillant de chez eux, ou tournant en rond dans leur salon quand rien ne sort.

Mais maintenant, je gère mieux ce stress, et ça se passe mieux avec ma copine de l'époque.
J'ai moins de soucis à gérer, on est plus sereins, et nous nous connaissons bien mieux. Et puis surtout, tu m'as encore plus appris la patience, c'est une chance.

À toi, mon amour, je te souhaite un heureux anniversaire.

Merci pour tout, mon cœur, toi qui prend soin de moi.

Battle of da Year 2K

Da Scritch — Mon, 23 Dec 2019 12:21:00 +0100

Un flyer mythique pour une nuit redoutée : celle du passage à l'An 2000.

Été 1999, j'étais salarié de Radio <FMR>.

Si je commençais à 10h en tant que coordinateur d'antenne, je ne décrochais pas à 19h, m'étant impliqué dans l'organisation de nombreuses soirées principalement drum'n'bass et électro expérimentales. J'étais avec une bande de copains, la radio avait sur son antenne un groupe de DJs assez généreux, et des noms qui étaient aussi bien connus par le public festif (Le Lutin, DJ Kush, Youthman) que par le public exigeant (Doctor Livingstone, Circlips). J'avais souvent du Ninja Tune, du Warp, du Vendôme Records et du Moving Shadow dans ma besace pour mes émissions persos.
À 27 ans, on est foufou, et l'énergie créative autour de la radio donnait une sérieuse envie de secouer la scène artistique.

DJ Kush avait monté le Dragon Krew, un noyau dur d'organisation de soirées avec MC Youthman, Brooks, DJ Peyo, il y avait aussi le groupe Kapsaïcine qui faisait les soirées Kitty style, ou encore le collectif Massage auditif (Doc Livingstone, Peyo, Aurel, Sam Lawry), et moi j'oscillais autour en roadie.
Yep, moi, le toubab de bonne famille, je m'encanaillais en allant bricoler chez Le Lutin, qui des fois se lançait dans des sets sans prévenir, avant d'aller redécorer la cave d'un bar rue des Filatiers.

Et pour le passage à l'An 2000, on savait qu'on pouvait proposer une soirée au Bikini, la boite de nuit rock de Toulouse, à l'époque au 54 chemin des Étroits, route de Lacroix-Falgarde juste en face de l'usine AZF. Ce n'était pas la première fois qu'on y faisait des opérations étranges et folles : entre le concert d'Amon Tobin avec du gazon déroulé sur le dancefloor ou la finale de la coupe du monde 1998 animée par Sportaz de Radio Campus, ou les soirées d'Halloween (qui correspondaient avec l'anniversaire de Kush, je ne vous dis pas le frisson de faire chanter joyeux anniversaire à 1000 personnes). Plus le studio antenne de Radio <FMR> logé dessous nous permettait d'y faire des transmissions live. Alors plutôt que faire sa soirée avec loto à filet garnis, suivie de DJ Fabrice (Sansonnetto) aux platines, et la soupe à l'oignon à 10h, on a fait une proposition au maître des lieux : 4 platines en back-to-back (une disposition plutôt rare à ce moment-là), 22 DJ soit du très festif drum'n'bass, soit de techno expérimentale, 2 MCs, et un prix raisonnable car tout le monde voulait faire la fête.

Le line-up a été monté très vite, venant de toute la France et au-delà : beaucoup connaissaient la scène de Toulouse et son public enthousiaste. Avoir Future Cut et Marcus Intalex montrait sa reconnaissance à l'international.

Un flyer hors-normes

Et là, je ne sais plus quand tout a dérapé…

Kush a fait tirer un flyer en papier cartonné, recto-verso, format A4. Je crois que le tirage était de 1000 exemplaires, et forcément, devenu très vite mythique, collector. Il n'y a pas que son support qui détonnait : Son dessin par Alphabet City sous Illustrator (à l'époque, les flyers se faisaient plutôt avec Photoshop ou Quark X Press), son design lean inspiré des The Designers Republic. Et rédigé en Anglais, car l'objet promotionnel était aussi destiné à des partenaires internationaux. Son format faisait qu'on arrivait même pas à le mettre dans les porte-cartes des magasins ou les tablettes trop étroites, et on hésitait à le scotcher au mur pour pas que l'impression soit déchirée en retirant le scotch. On n'a fait que le mettre dans quelques magasins, et on l'a annoncé en radio.
À l'époque, le web balbutiait, pas de Facebook, ni même encore de MySpace, le flyer était le principal moyen de communication, avec les émissions radios et les gratuits culturels locaux comme IntraMuros. Et parfois les mentions sur la télé locale, TLT avait une grosse tranche culture le Vendredi.

Donc je ne sais pas si vous voyez le niveau de bêtise : tirer un flyer très cher, et annoncer à la radio pour dire qu'il existe mais que dans certains magasins. Pour une soirée unique. Où l'on ferait soirée blanche, je crois même que l'orga a perdu des sous.

LA bête

L'événement lui-même fut hors-norme

Gare Matabiau, le 31 à 14h. Il pleut littéralement à verse et j'attendais l'arrivée de Rykkk's. Kush m'avait prévenu, il a du style : costume impeccable, fly-cases élégants… On embarque dans ma Panda sous une pluie battante depuis la gare pour rejoindre la salle de concert. Rykkk's sur le chemin me dit Oh ! Arrête-toi à cette boulangerie, j'ai la dalle, je me prends un sandwich. Il y restera 15 minutes, en sortira hilare avec 4 gros cartons : C'était une pâtisserie, il venait de dévaliser ce qui n'était pas encore vendu, de superbes gâteaux pour le backstage. Rien que la perspective d'un Lutin à la coupe rasta se faire une religieuse au chocolat faisait marrer.

On avait monté un décor avec tout ce qu'on avait trouvé de fou à y mettre, j'avais sorti mon Amiga avec un animation pour le passage à minuit (hélas, le cable vidéo était trop court pour atteindre le vidéo projecteur). Je me souviens encore d'Hervé qui arrive alors que j'étais à 8m de haut : Putain qu'elle coutent chers, ces conneries. Une dizaine de kilos de confettis professionnels. On en a mis partout. Des décorations partout. Il nous a bien fallut 3 heures pour toutes les installer.
J'ai hélas aucune photo.

Sur l'orga non-artistique, on se relayait entre tenir l'entrée, les vestiaires, calmer ceux qui ne savent pas faire la fête et souffler derrière la scène, ou plutôt dessous. Les petits plats, les gâteaux, et le champagne fourni par le patron, mais forcément avec modération car on avait du taf. Je crois me souvenir que le lendemain midi, on était tous crevés, mais heureux.

La gueule de bois

Les soirées ont très vite périclité par les coups de buttoir de la Mairie de Toulouse qui voulait calmer des comités de voisinage souvent noyautés par le Front National et de la Préfecture trop impatiente de passer les heures de fermeture de bars de 2h à 23h. Les fantastiques muraux des Hanky Panky Girls ont été recouverts d'une couleur rose-orange flashy, plus conforme aux incompréhensibles prescriptions des Monuments de France. Et y'a eu en moins de 10 jours les attentats du 9/11 et l'explosion d'AZF. Voilà qui a tué l'esprit de la fête. La modeste movida de Toulouse (d'oùla radio Le Mouv tirera son nom) s'est réduite en peau de chagrin et fêtes industrialisées. J'ai vieilli aussi, et il fallait laisser sa place aux générations d'après. Un jour, Nostalgie aura un créneau horaire pour les mix technos.

Je me suis impliqué dans des événements moins festifs, et des combats politiques.
Car 20 ans après... Le futur riant que promettait l'An 2000 tourne à la dystopie de Talsorian's Cyberpunk 2020.

Reste ce flyer, superbe. Je croyais n'en n'avoir plus qu'un abimé. Je suis retombé sur mes archives de l'époque, miraculeusement préservées.

Fallait que je vous le scanne.

Deux couleurs bizarres en CSS

Da Scritch — Wed, 13 Nov 2019 13:41:00 +0100

Une bête combinaison qui ne me permettent pas de faire un chouette aspect dans un cas très précis. Et vous allez même pouvoir vous amuser avec pour comprendre les limites de certaines propriétés CSS magiques

Cet article est dans la série consacrée au développement de la bibliothèque cpu-audio.js et documente les affres de sa version 6.

Mettre de l'audio dans le web n'a pas été simple
Reconstruire son lecteur audio pour le web (sur la version 5)
Retravailler un lecteur web audio dans les petites largeurs
Le blues du Web Share (english version)
Deux couleurs bizarres en CSS
cpu-audio.js enfin en 7.0
Tout-terrain WebVTT pour de l'audio
Dichotomie entre podcast et web sur l'audience

Je vous remets le player, dans la dernière version de dev. Sinon, ⇓ sautez ⇓ directement ⇓ au chapitre suivant ⇓

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas.

Comment replacer un sujet tiers rien à voir avec le billet sous prétexte d'illustration d'exemple…

La Couleur tombée du DOM

Je vais parler non pas de couleurs interdites (quel nom de film d'horreur génial !) comme le Rouge Surbrillant, le Jaune Bleuté, ou l'Orange Hyperbolique, mais de deux définitions volontairement manquantes dans les CSS. Or, comme mon player a un aspect totalement paramétrable par les utilisateurs via la CSS, lesdits utilisateurs pourraient tenter de faire un effet qui sera systématiquement en échec.

Allez, cadeau ! trois couleurs interdites (impossibles, ou plutôt chimériques).
Observez le point de gauche, votre regard fixé sur le × sans bouger pendant trente secondes,
puis sautez au carré du milieu et restez sur sa ×.
Auteur : Zowie CC-BY-SA pour Wikipédia.

D'autres parlent bien mieux que moi des couleurs en CSS, donc je ne ferais pas l'affront d'en faire un résumé imparfait, mais je sauterais direct au nœud du problème : J'ai deux manques dans la norme, mais qui sont totalement justifiés. Et des effets de bords qui pourraient surprendre des intégrateurs non prévenus.

transparent

Cette couleur existe principalement en valeur de la propriété background : transparent. On a trouve aussi pour border-color ou encore dans l'attribut fill="transparent" d'une balise SVG.

En fait, transparent n'est pas un alias vers une couleur pleine, mais d'une couleur quelconque rendue avec une opacité de 0%.

Sauf qu'il y a une méprise : il n'est pas possible de s'en servir pour la propriété css color dans l'idée d'avoir le rendu derrière le fond du tag courant. Une couleur transparente fera que le texte est virtuellement non affiché mais présent par ses dimensions.

Et c'est normal, car cela voudrait dire que le navigateur devrait être capable d'utiliser la forme des lettres pour découper le fond de l'élément support. C'est pas impossible, mais totalement tordu en terme de pensée, alors que vous pouvez preeeesque facilement le faire en SVG. Bon, dans les faits, je ne vous le conseille absolument pas ! Et ceci pour des raisons de performances de rendu, votre site va commencer à ramer sévère si vous vous lâchez.

currentColor

Cette magnifique couleur définie en CSS3 n'existe qu'en couleur de pinceau : currentColor

currentColor est immensément pratique, car elle fait référence à la couleur de pinceau héritée. Et si cette couleur héritée renvoie par exemple à une variable css au nom à coucher dehors (hello var(--cpu-playing-color)) , sur de nombreux rappels, on gagne de très nombreux octets... Exemple :

main {
    color : var(--cpu-color);
}
main.act-playing {
    color : var(--cpu-playing-color);
}
a, button (je vous la fait courte) {
     color : currentColor;
}
svg {
     fill : currentColor;
}

Bien plus pratique que color : inherit, car pouvant s'appliquer sur d'autres propriétés.
À chaque coup, je gagne.

currentColor est une Valeur Magique en css. Magique dans le sens Noble du terme, au sens que justement, ce n'est pas une constante arbitraire (par rapport au sens commun en informatique, et qui tient de l'insulte) mais qu'elle fait référence à son contexte et elle permet de gagner un temps fou.

Sauf que, hélas, et je ne suis pas seul à m'en plaindre, on n'a pas de currentBackground…

Et c'est tout à fait normal : background a été discuté jusqu'ici dans ce billet en tant qu'écriture raccourcie de la propriété background-color. La propriété background est en fait composite, très complexe : On peut créer des arc-en-ciels, étirer une image, mettre des motifs svg embarqués. Retenez que background-color est la dernière composante définissant le fond d'un élément à être interprétée, lequel fond est défini par le standard comme ayant de multiples couches de rendus.

Alors quel est le problème ?

Et ben tout simplement, je ne peux pas inverser la couleur et le fond hérités.

Ainsi

button:hover {
    background : currentColor;
    color : currentBackground;
}

ça marche pas, puisque la propriété n'existe pas.

button:hover {
    color : var(--cpu-background);
    background : var(--cpu-color);
}
.act-playing button:hover {
    color : var(--cpu-playing-background);
    background : var(--cpu-playing-color);
}

Si vous aviez voulu mettre une des variables de couleur de fond à transparent... ça marchera pas non plus, vous vous retrouverez avec des boutons avec du texte totalement transparent qui ne se distinguera pas du fond. blanc, noir, rose, bleu schtroumpf, qu'importe la valeur que vous avez choisi ça sera illisible !

Et si la couleur de texte est transparente et que la couleur de fond est fixée sur la couleur courante pour le même bloc, vous aurez une superbe disparition !
(pourtour ajouté pour voir le bloc)

Essayez vous-même !

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas et donc vous ne pouvez expérimenter avec l'édition interactive.

Le bloc de code CSS ci-dessous est éditable, et il impacte directement le lecteur au-dessus. Sur le détail des variables CSS du lecteur, je vous renvoie à la doc.

Évidemment, y'en a qui vont me dire ça marche pas sur mon appli de news, donc voici une capture d'écran de ce que vous devriez voir :

Le rendu du player en attente à gauche, lors d'un survol souris ou d'un clic sur le bouton de lecture à droite,
lequel devient malencontreusement invisible.

Où tu rêves d'une licorne rose invisible

Alors il y aurait une bonne astuce : au lieu d'utiliser transparent, spécifier une couleur de fond avec une transparence totale genre #ff777700 (le fameux rose invisible de la légendaire licorne, qui est même enseignée en Zététique), et pouvoir mettre la transparence à opacité totale quand je tente d'utiliser cette couleur en guise de couleur de police/remplissage.

La fameuse licorne dans une représentation improbable de sa couleur impossible.
CC-BY Bingo Pajama Bee via Wikipedia, loués soient-ils

Mais là, il me manque (au choix) :

soit une propriété css background-opacity (et son pendant color-opacity),
soit un transformateur standard de valeur css que s'appelerio plain-color() qui me rabote une couleur avec opacité en couleur sans opacité,
soit des billes car ça existe peut-être déjà (j'ai pas dit que je connaissais à fond les CSS).

Tentative 1 : CSS pure, `rgba()` et deux variables

J'ai bien trouvé une solution amusante avec la fonction css rgba() sous la forme
background : rgba(var(--background-color), var(--background-opacity))
mais comme cette astuce joue sur le fait que var() ne fait que restituer une chaine de caractère sans l'avoir interprété, elle induit :

que toutes les couleurs (encre et fond) paramétrées par l'intégrateur soient totalement opaques,
que je doive introduire une propriété de plus à part pour la gestion d'opacité du fond,
que la syntaxe de couleur suive strictement la syntaxe rrr, ggg, bbb, ce qui multiplie les risques d'erreurs,
que l'intégrateur/utilisateur ne peut donc pas utiliser la syntaxe hsl()/hsla() que nombre de graphistes et intégrateurs trouvent extrêmement pratique,
ni les couleurs nommées prédéfinies comme rebecca purple (version audio du billet),
et seraient aussi bloqués ceux qui auraient voulu mettre un motif plutôt qu'une couleur unie.

Pour toutes ces raisons, ce hack me semble limite pour l'Inspecteur Hacky, donc pour l'instant ⇒ c'est non.

Tentative 2 : Polyfill javascript pour déduire une couleur totalement opaque

Certains m'ont suggéré d'utiliser/créer un polyfill en javascript pour extraite la couleur opaque en surveillant les modifications sur la variable d'environnement, et en définissant une autre variable d'environnement à la volée avec le canal alpha complètement opaque. L'idée semblait être une bonne idée, puisque les variables CSS peuvent changer suivant les contextes (position de l'élément dans le DOM, taille de la fenêtre, :hover , :focus, etc...). Les innocents…

Évidemment, il faut convertir la couleur CSS qui peut être retournée en n'importe quelle notation valide vers un format RGBA ou HLSA (peu importe, tant qu'on peut avoir la valeur alpha à part). J'ai vérifié avec la méthode window.getComputedStyle() en l'appliquant sur un élément de référence, seul moyen de résoudre les contextes comme currentColor. Outre que créer un élément de référence uniquement dans ce but est une méthode qui pue un peu, la fonction que j'appelle retourne à peu près le format qu'elle veut, selon l'envie du navigateur, l'historique de la propriété et le système derrière. Ainsi, on peut tout à fait imaginer qu'un écran passif travaille en HLS, ou qu'une évolution prochaine du standard passe d'un rendu de 8 à 16 bits par canal couleur. De petites fonctions pèteront le webcomponent à la gueule des utilisateurs sans que vous ne voyiez rien venir.

Donc il nous faut une regex convertisseur magique qui n'existe pas en standard en pariant très fort que les navigateurs ne retournent que du rgb() ou du rgba().
Là aussi, j'ai tenté, j'ai abandonné : beaucoup trop de taf pour un résultat incertain et un usage marginal.

Si néanmoins vous vous le sentez, tentez de le faire : j'aurais toute une liste de cas d'usages à vous faire tester, vous allez en suer et vous finirez par écrire un billet technique sur le côté complexe et vain de cet exercice. Une bien maigre compensation, mais qui vous permettra de proposer une conf à un devfest.

J'ai même réfléchi à faire un filter : invert(100%); plutôt qu'inverser les variables de couleurs, mais le rendu n'était pas plaisant dans nombre de cas.

Et là, tu peux plus voir cette exception en peinture

Mais tu sais que c'est normal et tu dois l'accepter. Je dois être un genre de fou à la Van Gogh. LIBÉREZ LA PALETTE CHROMATIQUE !

Alors évidemment, il y aura toujours des personnes qui vous diront « Ahlalalala ! Mais il suffisait simplement de passer par un pré-processeur CSS pour obtenir cet effet ». Sauf que

Ces personnes n'ont pas lu l'ensemble de cet article ;
Ni le chapitre d'un article précédant expliquant les contraintes d'écriture d'un web-component réutilisable ;
Que je veux que ma bibliothèque javascript soit utilisable directement en insérant le script et en ajoutant la balise <cpu-audio>,
Qu'elle soit configurable même par des gens qui n'ont qu'un minimum de bagage HTML avec une bête page statique,
Qu'elle utilise en priorité les standards du web et en évitant les rustines,
Et sans avoir à installer une suite d'intégration complexe, genre NPM.js je-te-télécharge-internet-pour-changer-une-couleur.

Donc nous sommes dans un cas limite qui est actuellement bloqué, et qu'on ne tentera pas de palier dans l'immédiat car elle n'impacte qu'un cas de paramétrage d'aspect très marginal, et qui est compensable.

Désolé Larcenet*, on s'est parfois engueulés ensemble, mais j'ai pas pu m'empêcher de citer dans mon billet technique le dos de la couverture du deuxième tome de tes fabuleuses « Aventure rocambolesque », celui avec Vincent Van Gogh. C'est chez Dargaud. Achetez-le !

Eh mais, du coup, je peux clore ce ticket #29 : Some css vars settings won't be useful, non ?

Non :

La couleur tombée du Ciel

J'ai écrit cet article en Avril 2019.
Entretemps, un nouveau groupe d'API natifs commence à arriver dans les navigateurs : CSS Houdini.

Et ce groupe est tellement stupéfiant qu'on dirait une nouvelle de Lovecraft adaptée part Richard Stanley (Personal message : If you read me, I salute you, by the way. You're welcome for a craft beer.).

L'idée est d'étendre les variables CSS pour leur faire porter une partie d'attributs, via l'API accessible en javscript : CSS.registerProperty.
Ce qui permet d'étendre les possibilités des propriété css background.

L'idée est géniale, audacieuse, mais je ne la mettrais pas dans ma bibliothèque, car elle relève plus de la coquetterie de chaque site que de réellement la responsabilité de mon web-component. De plu, il est probable que les performances de rendu navigateur impactent l'expérience utilisateur si vous êtes trop gourmands.
Néanmoins, l'usage des variables CSS dans mon code en laisse la possibilité à tout intégrateur aventureux.

La prochaine fois, on va s'amuser avec des objets DOM incongrus, des méthodes javascripts et des fichiers de sous-titrage. Et croyez-moi, c'est à la fois instructif et éclairant quand une norme a des limites pour rester dans son intention.

5 ans après Supplément Week-End

Da Scritch — Wed, 30 Oct 2019 11:05:00 +0100

Je tue les flux rss encore existant. Ce billet est uniquement technique, ne plus tenir compte

Ce billet sert juste à invalider les derniers pointeurs sur l'émission Supplément Week-End, qui a été terminée en 2014. Il sera supprimé après une opération technique côté podcloud

Le « Supplément Week-End » est devenu par la suite « Cross/Over » avec une nouvelle équipe menée par Dusport et Ultimatom.

DaScritch a créé l'émission « CPU (Carré Petit Utile) » sur des sujets numériques.

Merci de votre compréhension.

Retrouvez Supplément Week-End (émissions) sur podCloud
Retrouvez da scritch net works sur podCloud