Liens de veille technologique
Je liste sur cette page les liens qui retiennent mon attention lors de ma veille technologique, elle est donc régulièrement mise à jour. Les liens sont par défaut affichés du plus récemment ajouté au plus ancien. Il est possible de filtrer cette liste à partir des thématiques qui sont associés aux liens via le formulaire ci-dessous.
Vous remarquez un lien qui ne fonctionne plus ou une erreur dans les informations d’un lien ?
Article qui explique l’importance des indicateurs de focus pour les utilisateurs naviguant au clavier (notamment en accessibilité), et détaille les bonnes pratiques de design ainsi que les pièges courants et leurs solutions.
Article qui détaille un critère d’accessibilité WCAG qui impose que toute interaction basée sur un glisser-déposer puisse être réalisée via une action simple (clic, tap ou clavier), puis décrit une approche de test combinant automatisation, IA et tests manuels pour vérifier à la fois la présence d’alternatives et leur réelle utilisabilité pour les personnes ayant des limitations motrices.
Article qui détaille le concept de stacking context (contextes d’empilement) en CSS en expliquant pourquoi des éléments avec un z-index élevé peuvent rester cachés, puis propose des méthodes concrètes pour diagnostiquer (via DevTools) et corriger ces problèmes en restructurant le DOM, ajustant les parents ou utilisant des techniques comme les portals ou « isolation: isolate ».
Article qui explique qu’au lieu d’utiliser « :where() » sur chaque sélecteur pour réduire leur spécificité, on peut encapsuler plusieurs règles dans un « @layer » (souvent anonyme) afin de leur donner automatiquement une priorité plus faible dans la cascade, ce qui facilite leur override sans complexifier les sélecteurs, notamment dans les reset stylesheets ou les systèmes de design.
Site qui propose une collection d’outils gratuits et sans installation pour diagnostiquer différents périphériques (écran, clavier, souris, audio, manette) via des APIs web modernes, avec un fonctionnement entièrement local garantissant la confidentialité des données et un retour en temps réel sur les performances et éventuels problèmes matériels.
Bibliothèque d’icônes SVG de marques (plusieurs milliers), accessibles via une interface de recherche mais aussi via des outils développeurs (npm, CDN, API, CLI), avec différentes variantes (couleur, mono, clair/sombre, wordmark) pour faciliter leur intégration dans des projets web modernes sans dépendance lourde.
Article qui présente un nouveau bookmarklet qui met en évidence les éléments structurels d’une page (sections, landmarks, éléments personnalisés), permettant de vérifier visuellement les relations et la hiérarchie du DOM.
Article qui montre comment un favicon en SVG peut intégrer une media query « prefers-color-scheme » directement dans son code pour adapter ses couleurs au thème utilisateur (clair/sombre), simplifiant la gestion des icônes tout en restant vectoriel et performant, avec toutefois des limites de compatibilité selon les navigateurs (notamment Safari) et parfois la nécessité de recharger la page pour voir les changements.
Article qui expérimente la combinaison d’animations liées au défilement et de la propriété CSS « corner-shape() » pour produire des animations fluides de coins (arrondis, squircle, etc.) pilotées par le scroll, illustrant le potentiel des nouvelles APIs CSS pour créer des effets visuels complexes sans JavaScript.
Article qui décrit une approche de design system basée sur la séparation entre couleurs primitives (valeurs brutes comme des hex ou palettes) et couleurs sémantiques (rôles comme background, text, primary, error), permettant de créer des interfaces plus maintenables, adaptables (dark mode, rebranding) et cohérentes, en évitant l’utilisation directe de valeurs de couleur dans les composants.