L’article explique comment gérer la concurrence sur le web avec l’API Web Locks, en s’appuyant sur un cas concret chez OLX : le téléchargement de gros fichiers (jusqu’à 20 Go). Pour permettre à l’utilisateur de continuer à naviguer tout en uploadant, OLX a mis en place un système de reprise des téléchargements, mais cela a posé un problème de synchronisation lorsque plusieurs onglets tentent de reprendre le même téléchargement simultanément, entraînant des doublons coûteux.

L’auteur, ingénieur frontend chez OLX, compare les verrous (locks) à la gestion d’une cuisine professionnelle, où plusieurs tâches doivent être coordonnées pour éviter les conflits. Il souligne que, contrairement aux applications multithreads en Java, le développement web moderne (avec React, Web Workers, etc.) doit désormais intégrer des mécanismes de synchronisation pour éviter des situations chaotiques, comme des téléchargements dupliqués ou des coûts inutiles.

La solution proposée repose sur l’API Web Locks, qui permet de réserver une ressource partagée (comme un téléchargement) pour un seul onglet à la fois. L’article introduit d’abord le concept de verrou, essentiel pour éviter les incohérences dans les systèmes concurrents, avant de détailler son implémentation pratique pour résoudre le problème de reprise des uploads chez OLX.

Travels est une bibliothèque JavaScript légère et agnostique des frameworks, conçue pour implémenter des fonctionnalités d'annulation (undo) et de rétablissement (redo) optimisées pour les états volumineux et les mises à jour fréquentes. Contrairement aux solutions classiques qui copient l'intégralité de l'état à chaque modification, Travels stocke uniquement les différences (JSON Patch selon la RFC 6902), réduisant ainsi considérablement l'empreinte mémoire et facilitant la persistance des historiques.

Compatible avec React, Vue, Zustand ou JavaScript vanilla, cette solution cible les applications interactives comme les éditeurs de texte ou les outils de dessin. Elle propose des modes avancés (journal contrôlé, mode mutable ou archivage) pour s'adapter à différents besoins, tout en garantissant une gestion efficace des historiques longs et des mises à jour mineures.

Le projet, maintenu sous licence MIT, inclut des benchmarks, des exemples et une documentation détaillée pour faciliter son intégration. Il s'appuie sur Mutative, un moteur de patch JSON performant, et vise à équilibrer performance, scalabilité et simplicité d'utilisation.

Gridstack.js est une bibliothèque TypeScript moderne et sans dépendances externes, conçue pour créer rapidement des tableaux de bord interactifs et réactifs. Elle permet de concevoir des interfaces avec des éléments déplaçables, redimensionnables et adaptés aux mobiles, tout en offrant des fonctionnalités avancées comme la gestion de grilles imbriquées ou le déplacement d'éléments entre plusieurs grilles.

Compatible avec divers frameworks (Angular, React, Vue, etc.), Gridstack.js simplifie l'intégration grâce à des wrappers dédiés et des exemples prêts à l'emploi. Son utilisation se résume à quelques lignes de code, comme l'installation via npm et l'initialisation d'une grille avec des widgets personnalisables.

Le projet, open source et maintenu activement, bénéficie d'une communauté active et est utilisé par de nombreuses entreprises. Une version de démonstration interactive est disponible sur le site pour en tester les capacités.

L’article de Victor Ayomipo, publié sur Smashing Magazine, remet en question la règle souvent absolue de ne jamais bloquer le fil principal (main thread) du navigateur en JavaScript. Bien que cette pratique soit généralement déconseillée pour éviter de figer l’interface utilisateur, l’auteur explique qu’il a dû y déroger lors du développement d’une extension Chrome de capture d’écran, Fastary. Malgré l’utilisation d’un Offscreen Document (un processus en arrière-plan), les opérations sur le canevas restaient lentes, parfois plus que si elles avaient été exécutées directement sur le fil principal.

L’argument central repose sur les limites des architectures recommandées, qui séparent strictement les tâches lourdes des opérations d’interface. L’auteur souligne que la communication entre les différents contextes (fil principal, Web Workers, Service Workers) peut introduire des latences supplémentaires, notamment lors de la sérialisation et désérialisation des données. Dans certains cas, comme celui de son extension, le transfert de travail vers un fil secondaire s’est avéré plus lent que de le laisser sur le fil principal.

Pour illustrer ce propos, l’article aborde brièvement l’architecture d’isolation des contextes du navigateur, expliquant comment les différents environnements (fil principal, Web Workers, etc.) communiquent entre eux. Cette analyse met en lumière les compromis inhérents aux bonnes pratiques en matière de performance, invitant les développeurs à évaluer au cas par cas l’opportunité de bloquer le fil principal.

L’article de Mat Marquis sur Piccalilli explore l’utilisation des Proxy et Reflect en JavaScript, des outils puissants pour intercepter et modifier les opérations internes sur les objets. L’auteur explique comment ces mécanismes permettent de mieux comprendre le fonctionnement profond du langage, un atout pour les développeurs souhaitant progresser vers un niveau senior. Il illustre leur utilité en montrant comment un Proxy agit comme intermédiaire entre un objet cible et les opérations qui lui sont appliquées, tout en soulignant leur rôle dans l’apprentissage des mécanismes internes de JavaScript.

L’article s’inscrit dans le cadre du cours JavaScript for Everyone de Piccalilli, bien que présenté comme un extrait non listé, laissant planer un mystère sur son intégration future. Marquis aborde ensuite la structure des objets JavaScript, détaillant les étapes internes déclenchées par l’accès à une propriété (comme la recherche dans la chaîne de prototypes ou l’invocation d’un accesseur), avant d’introduire le Proxy comme moyen de personnaliser ces comportements.

Enfin, l’auteur propose un exemple concret de création d’un Proxy, avec un objet cible et un gestionnaire vide, montrant comment l’objet proxy résultant encapsule à la fois la cible et le gestionnaire via des slots internes. L’article se termine sur une note engageante, invitant le lecteur à explorer davantage ces fonctionnalités pour maîtriser JavaScript au-delà de la syntaxe.

Driver.js est une bibliothèque JavaScript légère et sans dépendances, conçue pour créer des visites guidées de produits, des surbrillances et des aides contextuelles. Elle fonctionne avec tous les navigateurs majeurs, y compris sur mobile, et est compatible avec les frameworks comme React, Vue ou Angular. Écrite en TypeScript et distribuée sous licence MIT, elle est facile à intégrer et à personnaliser.

Cette solution permet d’accompagner les utilisateurs lors de leur première utilisation, de mettre en avant de nouvelles fonctionnalités ou de guider pas à pas dans des formulaires. Son API flexible couvre des cas d’usage variés, comme l’onboarding, les tutoriels interactifs ou la réduction des distractions.

Avec plus de 4 millions de téléchargements mensuels et une adoption par des entreprises comme Red Hat ou Intel, Driver.js se distingue par sa simplicité d’utilisation et son poids plume (environ 5 Ko). Son code source est disponible sur GitHub sous licence MIT, sans obligation d’attribution.

Cette page propose une collection de composants web (accordéons, carrousels, modales, etc.) réalisables avec peu ou pas de JavaScript, en exploitant les capacités modernes de HTML et CSS. L’objectif est de réduire la charge JavaScript sur les sites, souvent excessive pour des fonctionnalités simples. Le projet est open source et disponible sur GitHub, avec des exemples concrets et des démonstrations.

L’auteur souligne l’importance de transférer le travail des tâches basiques vers HTML/CSS, tout en critiquant les approches trop dépendantes de JavaScript. La page inclut aussi des ressources externes et des liens vers des experts du domaine, encourageant les contributions via des pull requests pour enrichir la collection.

La version 9 de TanStack Table réduit jusqu’à 90 % l’utilisation mémoire par rapport à la version 8, notamment pour les grands jeux de données. Cette amélioration, issue d’un refactoring subtil, permet de traiter 10 à 16 millions de lignes avant d’atteindre la limite des 4 Go de mémoire, contre 1 à 1,5 million auparavant. Les gains sont particulièrement marqués pour les tables paginées ou virtualisées avec des centaines de milliers de lignes.

Les benchmarks montrent une réduction significative de la consommation mémoire dès 1 000 lignes, avec des économies dépassant 2 Go pour 1 million de cellules (1 million de lignes × 8 colonnes). Les performances restent similaires pour les petits jeux de données, mais l’écart se creuse rapidement à mesure que la taille des données augmente.

Cette optimisation repose sur une refactorisation simple, avec un impact minimal (une seule rupture de compatibilité). L’approche pourrait inspirer d’autres bibliothèques pour améliorer leur gestion mémoire, bien que l’utilisation de 15 millions de lignes côté client reste rare dans la pratique.

Les sourcemaps sont des fichiers JSON qui permettent de faire le lien entre le code minifié et exécuté par le navigateur et le code source original, facilitant ainsi le débogage en production. Elles contiennent des informations comme les chemins des fichiers sources, les noms des variables et fonctions d'origine, ainsi que des mappings précis pour retrouver la position exacte dans le code original. Ces outils sont essentiels pour les développeurs, mais ils exposent aussi la structure et le contenu du code source, posant des risques de sécurité.

L'auteur explique leur fonctionnement technique, notamment les champs clés comme sources, names et mappings, qui assurent la correspondance entre le code minifié et le code original. Les sourcemaps peuvent inclure même le contenu complet des fichiers sources (sourcesContent), ce qui simplifie le débogage mais augmente l'exposition des données. Leur format compact (base64 VLQ) optimise leur taille pour le transfert.

Enfin, l'article souligne l'importance de bien configurer les sourcemaps pour éviter de divulguer des informations sensibles, tout en profitant de leurs avantages pour le développement et le diagnostic d'erreurs. Une gestion prudente est recommandée pour concilier observabilité et sécurité.

Ce site propose un guide structuré pour maîtriser JavaScript à travers 33 concepts fondamentaux, allant des bases (types primitifs, portée, fermetures) aux sujets avancés (moteurs JS, expressions régulières, algorithmes). Chaque notion est expliquée de manière claire avec des exemples pratiques, des schémas et des ressources complémentaires, adaptées aussi bien aux débutants qu’aux développeurs expérimentés.

L’approche met l’accent sur la compréhension profonde plutôt que sur le copier-coller, en couvrant des mécanismes clés comme l’asynchrone (boucle d’événements, Promesses), la programmation orientée objet (prototypes, classes) et les bonnes pratiques (code propre, motifs de conception). Les sections dédiées à l’entretien technique et à l’optimisation des performances en font aussi un outil utile pour les candidats.

Le contenu est organisé en parcours progressifs, avec une recherche intégrée et un index complet pour naviguer facilement. Le projet s’appuie sur des ressources externes vérifiées et propose des quiz pour valider les acquis, tout en restant accessible aux autodidactes ou aux développeurs souhaitant combler des lacunes.

Ce site propose un tutoriel moderne et complet sur JavaScript, couvrant à la fois les bases du langage et ses aspects avancés, comme la programmation orientée objet ou les promesses. Il est structuré en trois parties : le langage JavaScript, la manipulation du navigateur (DOM, événements) et des articles thématiques supplémentaires. Le contenu est régulièrement mis à jour, avec la dernière version datant de mai 2026.

L’approche pédagogique mise sur des explications claires et détaillées, sans se perdre dans des détails spécifiques à un environnement particulier. Le tutoriel aborde aussi des outils comme les éditeurs de code, la console développeur et les tests automatisés, tout en intégrant des concepts modernes comme les modules, les classes ou l’asynchrone avec async/await.

Disponible en ligne gratuitement, le site propose également des versions payantes en EPUB/PDF. Il inclut des liens vers des ressources complémentaires comme un dépôt GitHub ou un chat Discord pour échanger avec la communauté.

L’article de Josh W. Comeau compare les performances des animations en CSS et en JavaScript, un sujet souvent abordé avec des idées reçues. L’auteur explique que, contrairement aux apparences, les animations JavaScript ne sont pas nécessairement plus lentes, mais leur exécution sur le fil principal (main thread) les rend vulnérables aux blocages causés par d’autres tâches JavaScript. À l’inverse, les animations CSS s’exécutent sur un fil dédié, ce qui les rend plus fluides dans des applications complexes.

L’analyse se concentre sur deux méthodes : les keyframes CSS et une boucle JavaScript utilisant requestAnimationFrame. Bien que le JavaScript moderne soit optimisé pour des calculs rapides, son exécution sur le fil principal le rend sensible aux interruptions, contrairement au CSS qui bénéficie d’un traitement séparé. L’auteur illustre ce point avec une démonstration où des blocages du fil principal perturbent davantage l’animation JavaScript que l’animation CSS.

Enfin, l’article souligne que le choix entre CSS et JavaScript dépend du contexte : le CSS est idéal pour des animations simples et performantes, tandis que le JavaScript offre plus de flexibilité pour des interactions dynamiques ou complexes, malgré les risques de latence liés au fil principal.

Cet article explique comment rendre une application web monopage (SPA) réactive sans utiliser React ou Vue, en utilisant Symfony UX. L’auteur montre comment ajouter de l’interactivité à un tableau Kanban statique en combinant Stimulus pour gérer le glisser-déposer, Turbo Streams et Mercure pour la mise à jour en temps réel via des événements serveur envoyés (SSE), et une base de données SQLite. L’approche repose sur des technologies standards et évite les bibliothèques lourdes.

L’idée principale est d’utiliser Stimulus, un framework JavaScript minimaliste, pour interagir avec l’API native de glisser-déposer du HTML5 et effectuer des mises à jour optimistes de l’interface. Un contrôleur Stimulus gère les événements de glisser-déposer, tandis qu’un contrôleur Symfony reçoit les requêtes et met à jour la base de données.

Enfin, Turbo Streams et Mercure permettent de diffuser les modifications du serveur vers tous les clients connectés, actualisant automatiquement le DOM sans rechargement de page. Cette méthode simplifie le développement tout en offrant une expérience utilisateur fluide et réactive.

L’article propose une solution pour tester efficacement le JavaScript dans Symfony Asset Mapper, souvent confronté à des erreurs comme ERR_MODULE_NOT_FOUND en raison de l’incompatibilité entre l’importmap.php de Symfony et les outils Node.js. L’auteur suggère d’utiliser des liens symboliques pour faire correspondre les fichiers Symfony (dans assets/vendor ou vendor) avec la structure attendue par Node.js dans node_modules, évitant ainsi de dupliquer ou modifier les imports.

Un script PHP automatise la création de ces liens symboliques en analysant l’importmap.php, permettant à Node.js de résoudre les modules comme en production. Cette méthode s’intègre via un pretest dans le package.json, exécutant le script avant chaque test. L’approche privilégie le test runner natif de Node.js (depuis la version 20) pour sa simplicité, sa rapidité et son absence de configuration complexe, tout en testant les fichiers réels utilisés en production.

L’architecture d’un système de modules JavaScript est une décision clé pour structurer une application, car elle détermine les frontières entre les composants et influence la maintenabilité du code. Avant les modules, JavaScript dépendait du scope global, entraînant des conflits de variables et des écrasements de scripts. Les modules, comme ESM (ECMAScript Modules) ou CommonJS, permettent de créer des portées privées et de contrôler explicitement les exports, mais leur conception impacte différemment la flexibilité et l’analysabilité du code.

ESM et CommonJS diffèrent par leur approche : CommonJS offre une flexibilité accrue avec des imports dynamiques (via require()), tandis qu’ESM impose des règles strictes (imports statiques en haut de fichier) pour faciliter l’analyse statique et le tree-shaking, réduisant ainsi la taille des bundles. Cette rigidité améliore la prédictibilité des dépendances, mais limite certaines pratiques comme les imports conditionnels.

Enfin, la gestion des modules reflète l’architecture globale d’un projet, influençant les dépendances, la collaboration d’équipe et la scalabilité. Une conception réfléchie des modules dès le départ évite des problèmes de maintenance futurs, faisant de ce choix une étape fondatrice pour tout développement JavaScript.

Le principe d’animation squash and stretch (écrasement et étirement), issu des 12 principes de base de Disney, consiste à déformer un objet en mouvement pour lui donner une apparence plus dynamique et réaliste. L’auteur illustre ce concept avec une balle qui s’aplatit à l’impact et s’allonge lors du rebond, tout en soulignant l’importance de modérer l’effet pour éviter un rendu exagéré.

L’application concrète sur le web concerne souvent des icônes SVG, comme des flèches qui s’étirent et s’amincissent au survol. Cette technique, subtile mais efficace, améliore l’interactivité perçue. L’article propose un tutoriel pour implémenter ce effet, en partant d’un code SVG simple et en utilisant des bibliothèques JavaScript pour faciliter l’animation.

Cette page explique comment créer un sélecteur de plage de dates en CSS, principalement grâce à la syntaxe :nth-child(n of selector). L’auteure montre comment cette méthode permet de cibler des éléments spécifiques parmi un groupe, comme le deuxième élément d’une classe donnée, plutôt que le deuxième enfant global. Un exemple concret illustre la construction d’un calendrier où l’utilisateur peut sélectionner une plage de dates, avec une gestion partielle en JavaScript pour ajuster dynamiquement les dates choisies. L’approche combine CSS moderne et un peu de logique JavaScript pour une interaction fluide.

Une attaque de type supply chain a compromis brièvement la bibliothèque JavaScript Axios en mars 2026 via le piratage du compte npm d’un mainteneur, permettant la publication de versions malveillantes intégrant une dépendance piégée qui installait un cheval de Troie (RAT) multiplateforme lors d’un simple npm install, exposant potentiellement les environnements de développement et les pipelines CI/CD sans modification directe du code applicatif. L’incident, actif seulement quelques heures mais à fort impact en raison de la popularité d’Axios, illustre la fragilité des chaînes d’approvisionnement logicielles et pousse à adopter des mesures comme le gel ou le filtrage des dépendances récentes, la rotation des secrets, l’audit des systèmes et une sécurisation renforcée des comptes et pipelines pour limiter ce type de compromission

Découvrez le destructuring en JavaScript avec un extrait du cours "JavaScript for Everyone" de Mat Marquis, conçu pour rendre accessible les concepts avancés du langage. Destiné aux débutants comme aux développeurs juniors, ce cours explique non seulement comment mais aussi pourquoi JavaScript fonctionne ainsi, avec des exemples concrets comme le destructuring. Une lecture utile pour maîtriser des syntaxes puissantes et concises, souvent mal comprises.

L'article explore l'évolution des bibliothèques de gestion de dates et d'heures en JavaScript, en particulier le passage de Moment.js à l'API Temporal. Il explique les limites de l'API Date intégrée, les avantages et les inconvénients de Moment.js, et introduit Temporal comme une solution moderne et intégrée, plus performante et moins sujette aux erreurs. L'auteur partage des conseils pratiques pour migrer du code basé sur Moment.js vers Temporal.