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.
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.
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 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 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 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 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.
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 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>.
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.
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 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.
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.
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.
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.
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.
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.
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 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.
Il s'agit du site référençant toutes les fuites de données connues... ça fait peur :