Cet article explique comment interagir avec les Web Components dans vos scripts, en tenant compte de leur encapsulation via le shadow DOM. Les Web Components, de plus en plus populaires, permettent de créer des éléments réutilisables et agnostiques des frameworks. Cependant, leur isolation complique l'accès à leur contenu depuis des scripts externes. L'auteur détaille comment identifier les Web Components, accéder à leur shadow DOM (en mode open) et parcourir leur contenu pour interagir avec des éléments comme les champs de formulaire. Une approche essentielle pour les développeurs travaillant avec des bibliothèques ou frameworks utilisant ces composants.
L'article présente l'élément <dialog> en HTML, une solution moderne pour créer des modales et des boîtes de dialogue non modales. Cet article explique comment utiliser cet élément natif du navigateur pour simplifier le code et réduire les dépendances. Il couvre l'ouverture et la fermeture des dialogues, ainsi que des fonctionnalités avancées comme la fermeture légère (light dismissal) et la gestion des événements de fermeture.
Cet article met en lumière les lacunes des études de cas souvent utilisées pour démontrer l'impact de la performance web sur les revenus. Il souligne que ces études, bien que populaires, sont souvent biaisées, incomplètes ou mal contextualisées, ce qui nuit à la crédibilité de l'industrie. Il prend comme exemples l'étude d'Amazon sur la perte de revenus de 1% pour 100ms de retard (données obsolètes, manque de contexte) et l'étude de Rossignol (variables confondantes). L'auteur encourage à être critique face à ces études et à privilégier des données solides et contextuelles pour convaincre les parties prenantes.
L'article présente 10 techniques avancées en JavaScript/TypeScript. Ces techniques, testées en production, incluent l'orchestration de promesses, le cache mémoire sécurisé, la maîtrise des données binaires et l'optimisation asynchrone. Elles permettent de résoudre des problèmes de performance critiques, comme réduire les fuites de mémoire de 38%, diminuer les coûts de base de données de 60%, et accélérer le traitement des données de 3,2 fois. Des techniques comme le "Void Guard" pour éviter les promesses flottantes, l'utilisation de l'API Performance pour des mesures de temps précises, et l'utilisation de AbortController pour l'orchestration de promesses sont expliquées en détail. Ces stratégies peuvent transformer la manière dont vous construisez des applications robustes.
Cet article analyse un bout de code HTML « à l’ancienne » (balises dépréciées, structure obsolète, mode quirks, etc.), afin de montrer comment ce type de markup « vintage » peut toujours s’afficher — mais pourquoi cela reste une très mauvaise idée quand on vise accessibilité, sémantique et bonnes pratiques modernes.
L'inclusion des personnes Sourdes ne se limite pas à l'accessibilité numérique, mais passe aussi par la reconnaissance et l'utilisation de la Langue des Signes Française (LSF) comme langue à part entière. Cindy Quai, autrice de l'article, explique que la LSF n'est pas une simple traduction du français, mais une culture et une vision du monde distincte. Elle partage son expérience d'apprentissage et d'enseignement, soulignant que la véritable inclusion se fait en utilisant la LSF et en respectant les codes et la culture Sourde. L'article met en lumière l'importance de la pédagogie adaptée et de l'utilisation de la LSF pour une inclusion effective.
Zwindler a testé la migration automatique d'un site Bloggrify vers Hugo en utilisant GitHub Copilot Agent, avec une limite d'une heure. L'IA a réussi à convertir la structure, installer Hugo, mettre en place le thème Stack et automatiser le build et les captures d'écran avec Playwright. Malgré quelques ajustements nécessaires pour le menu et les catégories, l'expérience a été globalement positive, montrant les capacités de l'IA en bash, CSS et automatisation. L'article détaille les étapes et les résultats de cette migration.
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.