Quotidien Shaarli

Tous les liens d'un jour sur une page.

December 20, 2025

How Claude Code is helping me as an open source maintainer · Stan's blog

Stan partage son expérience en tant que mainteneur de projets open source (openvpn-install et wireguard-install) et explique comment Claude Code l'a aidé à gérer son backlog important. Grâce à l'IA, il a pu mettre en place des tests automatisés dans Docker, ce qui lui a permis de traiter plus efficacement les bugs et les demandes de fonctionnalités. Il décrit son workflow, les défis rencontrés et les améliorations apportées, comme la gestion des logs et l'ajout de fonctionnalités demandées depuis longtemps. Un témoignage intéressant sur l'impact des outils d'IA sur la maintenance de projets open source.

Autoriser les lecteurs RSS derrière Cloudflare

Ce billet explique comment contourner le blocage des lecteurs RSS par Cloudflare, qui les considère comme des bots. L'auteur, Nicolas Simond, détaille la création d'une règle personnalisée dans l'interface Cloudflare pour exclure les flux RSS de la protection anti-bot, permettant ainsi aux lecteurs d'accéder normalement aux flux. Il mentionne aussi une limite : les adresses IP blacklistées ne pourront pas bénéficier de ce contournement.

The many lives of the page title - HTMHell

L'article explore l'importance souvent sous-estimée du titre de page () dans l'expérience utilisateur. Au-delà de son rôle SEO, il aide les utilisateurs à identifier et naviguer entre les onglets, surtout dans des flux complexes comme les formulaires multi-étapes ou les résultats de recherche paginés. Des titres contextuels et uniques pour chaque écran améliorent significativement la navigation, comme illustré par l'exemple d'un formulaire d'assurance vélo.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> navigation </span> <span class="label label-tag"> seo </span> <span class="label label-tag"> accessibilité </span> <span class="label label-tag"> ux </span> <span class="label label-tag"> bonnes-pratiques </span> <span class="label label-tag"> title </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/9PBx3w" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://lecodeestdanslepre.fr/billets/castor-un-outil-qui-envoie-du-bois">Pourquoi j'ai remplacé mes Makefiles par Castor (et pourquoi vous devriez aussi) • Lecodeestdanslepre</a> </div> <div class="daily-entry-description"><div class="markdown"><p>Ce billet de blog explique pourquoi l'auteur a remplacé les Makefiles par Castor, un task runner développé par JoliCode, pour automatiser ses projets PHP. Castor permet d'utiliser du PHP au lieu de scripts shell fragiles, offrant une meilleure expérience développeur avec autocomplétion, documentation et refactoring. L'auteur détaille comment Castor gère le démarrage du projet, en attendant intelligemment que la base de données soit prête, et montre un exemple de code pour illustrer ses propos.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> Castor </span> <span class="label label-tag"> task-runner </span> <span class="label label-tag"> Developer-eXperience </span> <span class="label label-tag"> php </span> <span class="label label-tag"> make </span> <span class="label label-tag"> Makefile </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/CAoFXw" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://steve-yegge.medium.com/six-new-tips-for-better-coding-with-agents-d4e9c86e42a9">Six New Tips for Better Coding With Agents | by Steve Yegge | Dec, 2025 | Medium</a> </div> <div class="daily-entry-description"><div class="markdown"><p>Steve Yegge partage six nouvelles astuces pour mieux coder avec des agents, basées sur ses expériences récentes. Parmi celles-ci, il souligne que le logiciel est désormais jetable, avec une durée de vie inférieure à un an, rendant les réécritures plus faciles et intelligentes que les corrections. Cette approche remet en question les conseils traditionnels, comme ceux de Joel Spolsky, et ouvre la voie à des architectures modernes et maintenables, posant un défi aux fournisseurs de SaaS tiers.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> conseils </span> <span class="label label-tag"> programmation </span> <span class="label label-tag"> vibe-coding </span> <span class="label label-tag"> intelligence-artificielle </span> <span class="label label-tag"> bonnes-pratiques </span> </div> <div class="dailyEntryFooter clear"> </div> </div> </div> <div class="pure-u-lg-1-3 pure-u-1"> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/9kIsKg" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://f84.allfab.fr/posts/2025/20251218-proxmox-scaleway-serie-02/">Proxmox VE sur un serveur dédié Scaleway Start-2-S-SATA [E02]: Réseau, pare-feu et reverse proxy Caddy démystifiés · F84 | Blog</a> </div> <div class="daily-entry-description"><div class="markdown"><p>Ce second article de la série détaille la configuration avancée d’un nœud Proxmox VE sur un serveur dédié Scaleway avec une seule IP publique. L’auteur explique comment exposer plusieurs services (comme Garage S3 et l’interface Proxmox) de manière sécurisée via HTTPS, en utilisant <strong>Caddy</strong> comme reverse proxy avec gestion automatique des certificats SSL via Let’s Encrypt. Le guide couvre la configuration d’un réseau privé avec NAT, la création de règles de pare-feu Proxmox à trois niveaux (datacenter, nœud, VM/conteneur), et le dépannage des problèmes courants (DNS, ports, certificats, erreurs 502). Une attention particulière est portée sur l’identification des flux réseau internes et l’adaptation des IPSET pour éviter les blocages involontaires. L’objectif est de centraliser et sécuriser l’accès aux services tout en automatisant la gestion des certificats.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> proxmox </span> <span class="label label-tag"> Scaleway </span> <span class="label label-tag"> Caddy </span> <span class="label label-tag"> Garage </span> <span class="label label-tag"> reverse-proxy </span> <span class="label label-tag"> lets-encrypt </span> <span class="label label-tag"> réseau-privé </span> <span class="label label-tag"> tutoriel </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/r-mhcw" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://calendar.perfplanet.com/2025/optimizing-cls-for-infinite-scroll-and-load-more/">Optimizing CLS for Infinite Scroll and Load More - Web Performance Calendar</a> </div> <div class="daily-entry-description"><div class="markdown"><p>Andrea Verlicchi, expert en performance web, aborde dans cet article l’optimisation du <strong>Cumulative Layout Shift (CLS)</strong> pour les pages utilisant le <strong>défilement infini</strong> ou le bouton <strong>« Charger plus »</strong>. Il identifie deux causes majeures de CLS : les bannières promotionnelles retardées et le chargement dynamique de contenu (typique des sites e-commerce), qui déplace le pied de page hors de la vue et dégrade l’expérience utilisateur.</p> <p>Pour le <strong>défilement infini</strong>, la solution consiste à insérer des <strong>squelettes (placeholders)</strong> dès le début de la requête, réservant ainsi l’espace nécessaire avant l’affichage du contenu réel, évitant tout saut de mise en page. Pour le bouton <strong>« Charger plus »</strong>, bien qu’un délai de 500 ms après le clic soit toléré, il recommande aussi d’utiliser des squelettes pour garantir une stabilité visuelle, quel que soit le temps de réponse du réseau.</p> <p>La règle d’or ? <strong>Ne jamais déplacer le contenu visible pendant le défilement</strong> et toujours réserver l’espace à l’avance, sauf après une interaction utilisateur explicite (clic), en respectant la fenêtre de 500 ms. Une approche simple mais efficace pour améliorer les Core Web Vitals et l’expérience utilisateur. 🎄✨</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> CLS </span> <span class="label label-tag"> placeholder </span> <span class="label label-tag"> ux </span> <span class="label label-tag"> Core-Vitals </span> <span class="label label-tag"> tips </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/A3ngVQ" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://github.com/calebevans/cordon">calebevans/cordon: Reduce logs to their semantic anomalies</a> </div> <div class="daily-entry-description"><div class="markdown"><p>Cordon est un outil open-source qui utilise des embeddings de transformateurs et des scores de densité pour identifier des anomalies sémantiques dans de grands fichiers de logs, réduisant ainsi les logs massifs aux sections les plus anormales pour une analyse plus facile. Il filtre les motifs répétitifs et met en avant les événements inhabituels ou regroupés. Cordon supporte plusieurs backends comme sentence-transformers, llama.cpp, et des APIs distantes (OpenAI, Gemini, etc.). Il peut être installé via PyPI ou depuis la source, et offre une utilisation en ligne de commande ainsi qu'une API Python. Pour une explication détaillée de la méthodologie, un article sur Red Hat Developer est disponible.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> python </span> <span class="label label-tag"> log </span> <span class="label label-tag"> analyse </span> <span class="label label-tag"> anomalie </span> <span class="label label-tag"> tool </span> <span class="label label-tag"> intelligence-artificielle </span> </div> <div class="dailyEntryFooter clear"> </div> </div> </div> <div class="pure-u-lg-1-3 pure-u-1"> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/dRLDMg" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://f84.allfab.fr/posts/2025/20251212-proxmox-scaleway-serie-01/">Proxmox VE sur un serveur dédié Scaleway Start-2-S-SATA [E01]: Installation sur Debian 13 Trixie · F84 | Blog</a> </div> <div class="daily-entry-description"><div class="markdown"><p>L’article détaille l’installation de Proxmox VE sur un serveur dédié Scaleway (modèle Start-2-S-SATA) sous Debian 13 Trixie, motivée par la volonté de remplacer une solution de sauvegarde instable basée sur un VPS Hetzner et un stockage Samba. L’auteur explique chaque étape : choix de Debian 13 pour éviter les versions obsolètes de Proxmox proposées par Scaleway, partitionnement manuel du disque (avec ajustements post-installation pour créer des partitions dédiées à <code>/datastore</code> et <code>/data</code>), configuration réseau en NAT pour permettre à plusieurs VMs/LXC de partager une seule IP publique, et sécurisation du serveur. Le guide inclut aussi la configuration du pare-feu Proxmox, l’activation du routage IPv4, et des astuces pour le dépannage. L’objectif final est de déployer un conteneur LXC avec Garage S3 pour stocker les sauvegardes Proxmox Backup Server de manière fiable et distante. Un tutoriel technique et pratique pour administrer un hyperviseur sur un serveur dédié avec une seule IP publique.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> debian </span> <span class="label label-tag"> proxmox </span> <span class="label label-tag"> Scaleway </span> <span class="label label-tag"> tutoriel </span> <span class="label label-tag"> Proxmox-Backup-Server </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/Ztyh9A" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://rtyley.github.io/bfg-repo-cleaner/">BFG Repo-Cleaner by rtyley</a> </div> <div class="daily-entry-description"><div class="markdown"><p>Le BFG Repo-Cleaner est un outil en Scala, plus rapide et plus simple que git-filter-branch, conçu pour nettoyer les dépôts Git en supprimant les gros fichiers ou les données sensibles comme les mots de passe. Il permet de cloner un dépôt, de le nettoyer avec des commandes spécifiques, puis de pousser les modifications. Exemples d'utilisation : suppression de fichiers spécifiques, suppression de blobs volumineux, remplacement de texte sensible. Le BFG ne modifie pas le dernier commit pour éviter les problèmes de déploiement.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> git </span> <span class="label label-tag"> tool </span> <span class="label label-tag"> nettoyage </span> <span class="label label-tag"> git-filter-repo </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/USEsWQ" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://www.24joursdeweb.fr/2025/tout-le-web-depend-de-l-hebergeur-aws">Tout le Web dépend de l’hébergeur AWS ? — 24 jours de web</a> </div> <div class="daily-entry-description"><div class="markdown"><p>En octobre 2025, une panne majeure de l'hébergeur AWS a perturbé de nombreux services Internet, relançant la question de la dépendance du Web à ces géants. Bien que la panne soit localisée et logicielle, ses conséquences ont été amplifiées par la complexité et l'interconnexion des services. L'article analyse les réactions médiatiques, souvent sensationnalistes, et souligne la difficulté de gérer des infrastructures aussi vastes. Il invite à une réflexion sur les compromis entre robustesse et diversité des services offerts.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> analyse </span> <span class="label label-tag"> AWS </span> <span class="label label-tag"> dépendance </span> <span class="label label-tag"> interconnexion </span> <span class="label label-tag"> cloud </span> <span class="label label-tag"> hébergement </span> <span class="label label-tag"> panne </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/JWvH4Q" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://altcha.org/fr/">Captcha et protection contre les bots nouvelle génération, conforme au RGPD | ALTCHA</a> </div> <div class="daily-entry-description"><div class="markdown"><p>ALTCHA propose une solution de protection contre les bots et le spam, conforme au RGPD et à d'autres réglementations internationales, sans suivi, cookies ou fingerprinting. Leur système, auto-hébergé et open source, utilise une vérification basée sur le Proof-of-Work (PoW) pour une expérience utilisateur fluide, avec une option de défi par code pour les cas à haut risque. ALTCHA Sentinel offre une protection adaptative et discrète, idéale pour les entreprises et les sites web, disponible également sous forme de plugin pour WordPress.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> proof-of-work </span> <span class="label label-tag"> altcha </span> <span class="label label-tag"> captcha </span> <span class="label label-tag"> spam </span> </div> <div class="dailyEntryFooter clear"> </div> </div> <div class="daily-entry"> <div class="daily-entry-title center"> <a href="/liens/shaare/Va9Rkw" title="Permalien"> <i class="fa fa-link"></i> </a> <a href="https://www.makeuseof.com/usb-c-flip-fix-pin-lanes-explained/">My USB-C was slow until I tried this ridiculous fix</a> </div> <div class="daily-entry-description"><div class="markdown"><p>L'article explique comment l'auteur a résolu un problème de vitesse lente sur un câble USB-C en découvrant que l'orientation du câble affectait les performances. Il explore ensuite les détails techniques des connecteurs USB-C, qui possèdent 24 broches, chacune ayant une fonction spécifique. L'auteur fournit un diagramme simplifié des broches et explique que certaines broches sont interconnectées à l'intérieur du câble pour permettre la réversibilité. Il mentionne également que tous les câbles et chargeurs n'utilisent pas toutes les broches disponibles.</p></div></div> <div class="daily-entry-tags center"> <span class="label label-tag"> usb-c </span> <span class="label label-tag"> câble </span> <span class="label label-tag"> performance </span> </div> <div class="dailyEntryFooter clear"> </div> </div> </div> </div> <div class="clear"></div> <div id="plugin_zone_end_picwall" class="plugin_zone"> </div> </div> </div> </main> <div class="pure-g"> <div class="pure-u-2-24"></div> <footer id="footer" class="pure-u-20-24 footer-container" role="contentinfo"> <i class="fa fa-shaarli" aria-hidden="true"></i> <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong> · Le gestionnaire de marque-pages personnel, minimaliste, et sans base de données par la communauté Shaarli · <a href="/liens/doc/html/index.html" rel="nofollow">Documentation</a> </footer> <div class="pure-u-2-24"></div> </div> <div id="js-translations" class="hidden" aria-hidden="true"> <span id="translation-fold">Replier</span> <span id="translation-fold-all">Replier tout</span> <span id="translation-expand">Déplier</span> <span id="translation-expand-all">Déplier tout</span> <span id="translation-delete-link">Êtes-vous sûr de vouloir supprimer ce lien ?</span> <span id="translation-delete-tag">Êtes-vous sûr de vouloir supprimer ce tag ?</span> <span id="translation-shaarli-desc"> Le gestionnaire de marque-pages personnel, minimaliste, et sans base de données par la communauté Shaarli </span> </div> <input type="hidden" name="js_base_path" value="/liens" /> <input type="hidden" name="token" value="a437788012b5d55032b96125100b4ca56ccb470b" id="token" /> <input type="hidden" name="tags_separator" value=" " id="tags_separator" /> <script src="/liens/tpl/default/js/shaarli.min.js?v=8ba283f85e9a4dc050ce550fb96a14315538546b28852cf4bd5372ee6fdd7f20"></script> <script src="/liens/tpl/default/js/thumbnails.min.js?v=8ba283f85e9a4dc050ce550fb96a14315538546b28852cf4bd5372ee6fdd7f20"></script> </body> </html>