Ce tutoriel explique comment intégrer CrowdSec, une solution open source de cybersécurité, avec le reverse proxy Traefik pour détecter et bloquer les attaques web. Il détaille les étapes pour configurer Traefik afin de générer des logs d'accès, installer CrowdSec via Docker, et intégrer le bouncer CrowdSec à Traefik. Le guide aborde également la protection de l'hôte Docker et l'utilisation du module AppSec de CrowdSec comme WAF. Une ressource utile pour renforcer la sécurité des applications web.

L'article explique comment utiliser la nouvelle API Invoker Commands pour contrôler les éléments interactifs comme les popovers et les boîtes de dialogue modales sans écrire de JavaScript. Cette API introduit les attributs command et commandfor pour les éléments <button>, permettant d'effectuer des actions comme show-modal, close, request-close pour les dialogues, et show-popover, hide-popover, toggle-popover pour les popovers. L'article détaille également les différences entre les dialogues et les popovers, ainsi que les avantages de cette API pour simplifier le développement web.

L'article explore une approche proactive pour intégrer la performance web dès le début du développement, évitant ainsi le cycle de dégradation des performances. Odell, ingénieur chez Canva, propose d'impliquer toute l'équipe et de rendre la performance visible tôt, plutôt que de la traiter comme un problème à résoudre a posteriori. Il explique comment les problèmes de performance s'accumulent silencieusement et pourquoi les corrections tardives sont souvent inefficaces. La solution proposée est de créer des systèmes et des processus qui favorisent naturellement les décisions rapides et performantes.

Andy Clarke explore l'importance de "la mesure" en typographie, qui désigne la longueur d'une ligne de texte. Il explique comment cette notion, issue de l'imprimerie traditionnelle, peut influencer la mise en page web. En définissant la mesure comme une propriété CSS personnalisée (--measure: 60ch), il montre comment elle peut guider la conception de mises en page, de grilles et même de requêtes de conteneur, pour améliorer la lisibilité et l'adaptabilité des sites web. Des exemples pratiques sont disponibles dans son laboratoire.

Cet article explique le parcours d'un paquet de données dans le noyau Linux, depuis l'appel à la fonction write() jusqu'à la réception par l'application destinataire. Il décrit les étapes clés du processus, notamment la segmentation des données par TCP, la détermination de la route par IP, la résolution de l'adresse MAC via ARP, la mise en file d'attente par le qdisc, et l'envoi via le pilote de la carte réseau. Le texte est illustré par des exemples pratiques et des explications simplifiées des concepts clés comme les sockets, la poignée de main TCP et le routage politique. Une partie du processus de réception est également abordée.

Un "someday shelf" est un espace dédié (physique, numérique ou mental) pour stocker des projets, idées et objectifs importants mais non urgents, libérant ainsi l'esprit de l'obligation d'agir immédiatement. Il se distingue d'une liste "maybe" (idées incertaines) et fonctionne avec une liste "someday" (projets futurs souhaités). Ce système, appelé procrastination productive, permet une meilleure gestion des priorités sans culpabilité ni épuisement. L'article met en garde contre cinq erreurs courantes : mélanger tâches urgentes et idées futures, ne jamais revoir la liste, confondre les deux listes, inclure des idées futures dans la to-do list quotidienne, et utiliser le "someday shelf" comme excuse pour ne jamais agir.

Il s'agit du site référençant toutes les fuites de données connues... ça fait peur :

Scott H Young partage ses stratégies pour apprendre efficacement avec l'IA, tout en évitant les pièges courants. Il souligne que l'IA peut recommander des livres pertinents, mais ne remplace pas la lecture complète pour une compréhension approfondie. L'IA excelle dans la suggestion d'alternatives et d'idées extérieures à votre domaine d'expertise, mais il est crucial de vérifier les informations critiques et de faire preuve de pensée critique. L'auteur met en garde contre la dépendance excessive à l'IA, qui peut réduire les compétences cognitives, tout en encourageant une utilisation judicieuse pour accélérer l'apprentissage.

Using the Ancient Evils for Debugging présente l’usage du tag HTML obsolète <plaintext> comme outil ponctuel de débogage. L’article du calendrier HTMHell explique comment ce mécanisme, qui force l’affichage du reste du document en texte brut, peut aider à analyser rapidement la sortie d’un script serveur ou à comprendre un comportement inattendu dans une page. Une lecture concise qui revient sur un héritage méconnu du HTML tout en montrant une approche simple – bien que non destinée à la production – pour faciliter certaines étapes de diagnostic.

L'article explore les problèmes de superposition des éléments en CSS et les solutions modernes comme les popovers et les dialogs. Il explique comment les contextes de superposition (stacking contexts) peuvent compliquer l'utilisation de z-index et comment les éléments comme les popovers et les dialogs peuvent accéder à la "top layer" pour résoudre ces problèmes. Cependant, l'article met en lumière un conflit potentiel entre les popovers et les dialogs, notamment en matière d'accessibilité, où un utilisateur au clavier peut rencontrer des difficultés pour interagir avec un popover (comme une notification toast) lorsqu'un dialog est ouvert. L'auteur illustre ce problème avec un exemple concret et un CodePen démonstratif.

L'article met en garde contre la sur-ingénierie et l'utilisation excessive de motifs de conception complexes dans des projets qui ne le nécessitent pas. L'auteur illustre son propos avec un exemple extrême où une simple concaténation de chaînes de caractères est transformée en une architecture complexe impliquant des interfaces, des usines et des modules. Il identifie plusieurs drapeaux rouges, comme la "future-proofing" fallacieuse, les interfaces avec une seule implémentation, et les abstractions prématurées. L'auteur propose une checklist pour évaluer la nécessité d'une abstraction et encourage à supprimer les mauvaises abstractions. Il conclut en rappelant que le code "scalable" ne doit pas être surestimé et que la simplicité est souvent la clé.

Cet article explique comment résoudre un problème de démarrage lié à LVM sur un système avec une table de partition GPT. L'auteur décrit la création d'une VM Debian 12 avec UEFI, le partitionnement manuel incluant une partition EFI et la configuration de LVM avec un Volume Group et des Logical Volumes. Il détaille ensuite les étapes pour ajouter un deuxième disque et manipuler LVM, comme supprimer un Volume Group et recréer une table de partition DOS, tout en documentant les commandes et les états des disques à chaque étape.

L'article explore comment réduire la charge de travail de JavaScript en utilisant des fonctionnalités modernes de HTML et CSS. Il propose de remplacer certains patterns JavaScript par des méthodes natives, comme les éléments <details> et <summary> pour les accordéons, ou une ligne de CSS pour ajuster la taille des champs de formulaire. L'objectif est de diminuer la quantité de JavaScript nécessaire, améliorant ainsi les performances et l'expérience utilisateur. L'auteur promet également une bibliothèque de composants avec ces nouvelles approches.

L'article souligne l'importance cruciale de l'attribut lang dans la balise <html> pour l'accessibilité web. Cet attribut indique la langue du contenu aux navigateurs et lecteurs d'écran, évitant ainsi des erreurs de prononciation et améliorant l'expérience utilisateur pour les personnes malvoyantes ou dyslexiques. Malgré son importance, l'omission de cet attribut reste un problème récurrent, comme le montre le rapport WebAIM Million. L'auteur insiste sur la nécessité d'une meilleure éducation en accessibilité pour les développeurs.

L'article "Referencing HTML elements inside Shadow DOM" de HTMHell aborde les défis liés à l'accessibilité des composants Web utilisant le Shadow DOM. Il explique comment référencer des éléments HTML encapsulés dans le Shadow DOM, en particulier pour les composants comme les cases à cocher. Le problème principal est que les éléments à l'intérieur du Shadow DOM ne peuvent pas être directement référencés, ce qui pose des problèmes d'accessibilité. L'auteur propose une solution en deux phases, avec la Phase 1 déjà disponible dans Chrome Canary. Cette phase introduit l'attribut shadowRootReferenceTarget pour permettre aux éléments comme les étiquettes (<label>) de référencer correctement les éléments internes du Shadow DOM, améliorant ainsi l'accessibilité et la fonctionnalité des composants Web.

Cet article explique comment rédiger un bon fichier CLAUDE.md pour optimiser l'utilisation de l'IA Claude dans un projet de code. Il souligne que les modèles de langage (LLMs) sont sans état et ne connaissent rien du codebase au début de chaque session, d'où l'importance de CLAUDE.md pour les informer. Le fichier doit couvrir le "quoi", le "pourquoi" et le "comment" du projet, mais sans surcharger d'informations non pertinentes, car Claude pourrait les ignorer. Des conseils pratiques sont donnés pour créer un fichier efficace, en suivant les bonnes pratiques d'ingénierie de contexte.

rqlite est une base de données relationnelle distribuée, légère et tolérante aux pannes, construite sur SQLite. Elle offre une disponibilité élevée avec un effort minimal, supportant le SQL complet, les extensions SQLite et les requêtes atomiques. Facile à déployer et à utiliser, elle permet des sauvegardes automatiques et une clustering dynamique. Idéale pour stocker des données critiques avec une disponibilité constante. Plus d'infos et guide de démarrage rapide sur le dépôt GitHub.

L'article explique avec clarté comment fonctionne réellement une gomme : les gommes souples retirent le graphite du papier en l’absorbant, tandis que les gommes bleues, plus abrasives, arrachent une fine couche du support grâce à des grains minéraux. L’article détaille aussi le cas des stylos effaçables, dont l’encre disparaît sous l’effet de la chaleur produite par la gomme — trois technologies différentes pour un même geste du quotidien.

Ce guide pratique de l'OWASP Top 10, destiné aux développeurs web, détaille dix erreurs courantes et comment les éviter. Il aborde des sujets comme le contrôle d'accès brisé (A01), les échecs cryptographiques (A02), et les injections (A03), avec des exemples concrets et des solutions pour les prévenir dès l'écriture du code. Un outil précieux pour améliorer la sécurité des applications web.

L’esthétique web éco-conçue, souvent perçue comme "moche" ou "bas de gamme" à l’instar du papier recyclé des années 2010, peine à s’imposer malgré ses avantages écologiques, car les attentes clients restent ancrées dans le "toujours plus" (animations, vidéos, designs clinquants). Pourtant, son adoption progressive — même parfois superficielle (greenwashing graphique) — pourrait accélérer sa normalisation, à condition de la rendre désirable : en mettant en avant ses atouts (vitesse, accessibilité, SEO) et en explorant des pistes créatives (typographie soignée, SVG, CSS natif, inspirations artistiques comme le style suisse ou De Stijl). L’enjeu est de dépasser la vision restrictive de la sobriété pour en faire un levier d’innovation, entre minimalisme radical et solutions techniques optimisées, tout en renforçant la collaboration entre designers et développeurs pour concilier éthique et attractivité. Une révolution culturelle autant que technique.

Dans ce 3ᵉ et dernier volet de sa série, l’auteur raconte comment il a concrètement « vibe codé » une CLI — une petite application génératrice de Cilium Network Policies — en utilisant Claude Code et Speckit. Au-delà de la phase initiale d’idéation et de conception (décrite dans les épisodes précédents), ce billet détaille comment, à travers un workflow rigoureux (spécification, clarification, planification, découpage en tâches, validation, générations de code et tests), l’auteur a transformé un besoin métier complexe en un MVP fonctionnel — livré en un seul sprint et déjà en production. Il en tire des leçons fortes : l’IA ne remplace pas le développeur, elle l’augmente, mais uniquement si on encadre l’exercice avec une méthode claire, des specs précises et une boucle de validation humaine. Pour finir, il plaide pour une évolution du rôle du développeur vers celui d’architecte / Product Owner — capable de piloter l’IA tout en garantissant la qualité, la cohérence et la maintenabilité du code.

Cet article présente Warpgate, un bastion SSH open source léger et moderne, développé en Rust par warp-tech. Il permet de sécuriser les accès à divers services (SSH, HTTP/HTTPS, MySQL, PostgreSQL) sans client propriétaire ni plan payant. L'article détaille l'installation du binaire Warpgate, ses prérequis, la configuration initiale et le premier lancement. Warpgate offre une solution pour centraliser et tracer les accès SSH, appliquer une logique Zero-Trust, et isoler les serveurs derrière un bastion "internet-facing". Il peut être configuré en mode guidé ou non-interactif, et intégré avec systemd pour une gestion simplifiée. Pour un déploiement en lab ou petite infrastructure, le binaire est recommandé, tandis que Docker ou K8s sont privilégiés pour la production.

L'article explore les défis de la gestion des images sur canvas pour éviter de bloquer le thread principal. Il compare différentes approches pour décoder des images sans bloquer l'interface utilisateur, en mettant en évidence les limitations de chaque méthode selon les navigateurs (Chrome, Firefox, Safari). L'auteur partage son expérience en tant que développeur chez Iconik, où la gestion efficace des images est cruciale pour leur plateforme de gestion d'actifs médiatiques. Il discute des solutions comme l'utilisation de decode() et OffscreenCanvas, tout en soulignant le besoin d'une solution universelle pour une expérience utilisateur fluide et réactive.

L'article explique comment associer explicitement des éléments HTML, comme les labels et les champs de formulaire, en utilisant des IDREFs. Il souligne l'importance de cette pratique pour améliorer l'accessibilité, notamment pour les technologies d'assistance. L'auteur détaille les bonnes pratiques, telles que l'unicité et l'existence des IDs, et propose des outils pour détecter les références brisées. Un exemple concret illustre l'utilisation de l'attribut for dans une balise <label> pour référencer l'ID d'un champ <input>.

Cet article explique comment utiliser mitmproxy pour intercepter et analyser les flux HTTP(s) de manière simple et efficace. L'outil, installé via une archive, permet de se placer en "Man In The Middle" pour écouter le trafic entre votre code et le monde extérieur. L'interface web mitmweb facilite l'analyse des requêtes et réponses. Le tutoriel couvre l'installation, l'exécution, et l'utilisation de mitmproxy pour le HTTP et le HTTPS, en abordant les problèmes de certificats SSL et les solutions possibles.

mise-en-place est un outil polyvalent pour la gestion des environnements de développement. Il permet de gérer les versions des outils (remplaçant asdf, nvm, etc.), de basculer entre différents ensembles de variables d'environnement (remplaçant direnv) et d'exécuter des tâches (remplaçant make ou les scripts npm). Licencié sous MIT, il est maintenu par @jdx et d'autres contributeurs.

Ethan Gardner explore dans cet article l'utilisation de l'apprentissage automatique pour modéliser le trafic web. Il se demande comment les variations des données synthétiques (lab) impactent les métriques réelles (field), comme le Largest Contentful Paint (LCP). En suivant un cours sur le machine learning, il découvre XGBoost, un outil de gradient boosting efficace pour les prédictions. Il décrit ensuite son expérience où il utilise XGBoost pour prédire la valeur du LCP p75 à partir de données synthétiques, en détaillant les étapes de collecte, de nettoyage et de préparation des données, ainsi que la mise en œuvre du modèle.

L’article présente le mind-mapping comme une méthode visuelle, flexible et profondément alignée sur le fonctionnement naturel du cerveau — au lieu d’une pensée linéaire, l’information est organisée autour d’une idée centrale, avec des branches qui révèlent liens, priorités, émotions et sous-thèmes.

L'article de Julia Evans explique comment Kubernetes peut causer des problèmes à etcd, un système de stockage de clés-valeurs utilisé pour la coordination des clusters.

Matt Zeunert explore les raisons pour lesquelles certaines pages web contiennent des documents HTML volumineux, souvent en raison de l'intégration de ressources comme des images, des CSS ou des polices de caractères en Base64. Il analyse divers cas, tels que les images intégrées via des data URLs, les CSS inline avec des sélecteurs complexes, et les polices de caractères embarquées, qui peuvent impacter les performances. L'article met en lumière les avantages et inconvénients de ces pratiques, notamment l'absence de mise en cache indépendante et la priorisation des ressources. Un outil, le DebugBear HTML Size Analyzer, a été amélioré pour gérer ces structures complexes.

L'article explore l'importance de l'accessibilité numérique des médias d'information, soulignant que 7,7 millions de personnes en France sont en situation d'illectronisme et 14,5 millions ont des limitations fonctionnelles. Il rappelle que l'accessibilité est non seulement une mission des médias mais aussi une obligation légale, encadrée par des lois depuis 2005 et renforcée par l'European Accessibility Act en 2025. L'auteure interroge la pertinence pour les médias de rester inaccessibles, alors que l'information numérique est devenue dominante.

Améliorez le temps de réponse du serveur (TTFB) et l'expérience utilisateur (UX) grâce au streaming HTTP. Cet article explique comment le streaming HTTP peut accélérer la perception de la vitesse de chargement des pages dynamiques en envoyant progressivement le contenu au navigateur, plutôt que d'attendre que toute la page soit générée. Cela est particulièrement utile pour les pages affichant de nombreuses lignes de données. L'article fournit un exemple en JavaScript/TypeScript utilisant le framework Mastro et Kysely pour la base de données, démontrant comment utiliser le streaming pour améliorer les performances.