L'événement scrollend est une nouvelle API standardisée pour détecter la fin du défilement dans une page web, simplifiant ainsi la gestion des actions post-défilement. Contrairement aux méthodes précédentes utilisant des timers et des debounce, scrollend offre une détection fiable et immédiate, compatible avec tous les types de défilement (souris, clavier, tactile, programmé). Il est supporté par tous les navigateurs majeurs et permet des applications comme le lazy-loading optimisé, le suivi de la position de lecture, et le tracking précis. (Source : Alsacreations)
Cet article explore la tendance croissante des frameworks HTML-first, comme htmx, qui révolutionnent le développement web en revenant à une approche plus simple et performante, centrée sur le HTML et le serveur, plutôt que sur des applications monopages (SPA) complexes. Il met en lumière les problèmes de surcharge JavaScript, les avantages en termes de performance, de simplicité et de maintenance, ainsi que les cas d'utilisation idéaux pour cette approche. L'auteur souligne également les bénéfices pour le SEO, l'accessibilité et l'expérience utilisateur, tout en discutant des situations où une approche différente pourrait être plus appropriée.
L'article aborde les défis de la qualité du code frontend en JavaScript, qui échoue silencieusement et rend le débogage difficile. Il propose des solutions comme TypeScript pour la vérification des types, ESLint pour le linting du code, et Storybook pour la documentation des composants. TypeScript, en mode strict, force à définir explicitement les types, évitant ainsi des erreurs courantes. ESLint, basé sur le guide de style Airbnb, capture les erreurs de formatage et les mauvaises pratiques. Storybook permet de tester et documenter tous les états possibles des composants. Ces outils visent à améliorer la qualité du code avant même d'exécuter les tests, réduisant ainsi les bugs en production.
L'API Web Share simplifie le partage de contenu en ligne en utilisant les fonctionnalités natives du système d'exploitation, évitant ainsi l'utilisation de scripts tiers pour chaque réseau social. Elle permet une intégration facile et améliore l'expérience utilisateur en réduisant le chargement de JavaScript et en offrant une interface de partage cohérente. Compatible principalement sur mobile, elle nécessite un contexte sécurisé (HTTPS) et une action utilisateur pour fonctionner. En cas de non-support, une solution de repli (fallback) peut être mise en place. L'API permet de partager des titres, du texte, des URLs et des fichiers, avec des contraintes spécifiques pour chaque type de données.
Biome est une nouvelle toolchain écrite en Rust qui promet de remplacer ESLint, un outil de linting pour JavaScript, en offrant des performances bien supérieures. Contrairement à ESLint qui tourne sur Node.js, un langage interprété et single-threaded, Biome est un binaire natif, compilé et optimisé, utilisant une architecture parallèle. Il intègre également un formatter et un organiseur d'imports, réduisant ainsi la fragmentation des outils actuels. De plus, Biome peut être intégré dans des projets PHP via Composer, sans nécessiter Node.js. L'adoption de Biome est justifiée par son efficacité, faisant le même travail 100 fois plus vite et consommant 10 fois moins de mémoire.
Lea Verou aborde dans cet article les problèmes de gestion des dépendances sur le web, soulignant que contrairement à d'autres écosystèmes comme NodeJS ou Python, le web a externalisé cette fonctionnalité fondamentale à des outils tiers comme les bundlers (Webpack, rollup, etc.). Elle explique que la gestion des dépendances devrait être une fonctionnalité native de la plateforme, simple et intuitive, plutôt qu'une tâche complexe nécessitant des outils avancés. Verou discute des solutions potentielles, comme les import maps, et plaide pour une amélioration de l'architecture web afin de rendre les dépendances aussi faciles à gérer que dans d'autres environnements de développement.
L'article présente une approche rigoureuse pour améliorer la qualité du code PHP en utilisant quatre outils : PHPStan pour l'analyse statique, Rector pour la modernisation automatique du code, PHP-CS-Fixer pour le respect des normes de style, et Biome pour le linting et le formatage du JavaScript. L'auteur partage ses configurations et son workflow, intégrant ces outils dans un processus automatisé via Castor, un task runner. L'objectif est de déléguer la rigueur à des machines pour éviter les erreurs humaines et maintenir un code propre et performant.
L'article propose des alternatives à l'utilisation excessive de console.log pour améliorer le développement. Il suggère des méthodes comme console.dir() pour les listes hiérarchiques, console.table() pour les tableaux, console.group() pour organiser les logs, console.time() pour mesurer le temps d'exécution, et console.clear() pour nettoyer la console. L'auteur recommande également JSON.stringify() pour un affichage plus lisible dans les terminaux. Des commentaires soulignent d'autres méthodes utiles comme console.trace() et console.info(), ainsi que l'utilisation d'emojis pour différencier les messages de log.
L'auteur explique dans cet article comment utiliser la validation des entrées HTML côté client comme une amélioration progressive pour l'expérience utilisateur, en complément de la validation côté serveur. Il montre comment utiliser les attributs natifs HTML comme pattern, minlength, maxlength, et title pour valider et styliser les entrées, tout en soulignant les limites d'accessibilité de ces méthodes. L'article propose ensuite d'améliorer l'accessibilité en utilisant l'API de validation des contraintes JavaScript pour personnaliser l'affichage des erreurs. Un exemple interactif est disponible sur CodePen.
L'article explore comment remplacer certaines fonctionnalités JavaScript par des solutions natives HTML et CSS. Il met en avant des exemples concrets comme les accordéons avec les éléments <details> et <summary>, les champs de saisie avec suggestions filtrées via <datalist>, et d'autres composants web. L'objectif est de réduire la dépendance au JavaScript pour des tâches simples, améliorant ainsi les performances et l'expérience utilisateur. L'article inclut des exemples de code et des ressources pour approfondir.
Cet article explore le potentiel du streaming HTML pour améliorer les performances des sites web modernes. Sébastien Mischler, développeur chez Infomaniak, revisite cette technique inspirée d'un article de Chris Coyier, en s'appuyant sur un projet expérimental appelé HTMS. L'article souligne que les problèmes de performance actuels proviennent souvent du rendu retardé par l'hydration côté client et les pipelines JavaScript lourds, plutôt que de la vitesse du réseau. Le streaming HTML permet de rendre le contenu progressivement dès son arrivée, améliorant ainsi les métriques clés comme le First Contentful Paint et l'expérience utilisateur. Bien que les solutions comme le SSR (Server-Side Rendering) et le SSG (Static Site Generation) existent, elles présentent des limites, notamment avec les données dynamiques. Le streaming HTML offre une alternative prometteuse pour concilier SEO, accessibilité et performances.
Cet article met en lumière l'utilisation excessive de JavaScript pour résoudre des problèmes qui pourraient être mieux gérés par CSS. L'auteur, Chizaram Ken, souligne que les lacunes de connaissances poussent souvent les développeurs à sur-ingénieriser des solutions, ce qui impacte négativement les performances. Par exemple, des fonctionnalités CSS comme content-visibility: auto et les unités de vue modernes (dvh, svh, lvh) offrent des solutions efficaces sans JavaScript, mais les développeurs continuent de privilégier des solutions JavaScript par habitude. L'article explore des problèmes spécifiques comme la virtualisation dans React, les requêtes de conteneur et les animations de défilement, en proposant des alternatives CSS et en discutant des cas où JavaScript reste pertinent. Un appel est lancé pour éviter d'utiliser useEffect et useState pour des problèmes de rendu, en insistant sur l'importance de comprendre les capacités natives du navigateur avant de recourir à des bibliothèques JavaScript.
L'article explore comment des techniques anciennes et des API natives du navigateur surpassent les frameworks modernes en termes de performance. L'auteur présente multicardz, un outil de gestion de données spatiales, qui utilise des bitmaps pour les requêtes backend, réduisant ainsi les temps de traitement. Pour le frontend, il utilise DATAOS (DOM As The Authority On State), une approche où le DOM est la source de vérité pour l'état de l'application, éliminant ainsi la nécessité de synchroniser un état séparé. Le résultat est une application performante avec un bundle JavaScript de seulement 32KB, un score Lighthouse de 100, et des temps de réponse extrêmement rapides.
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 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.
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 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.
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.