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.
Kitty Giraudel partage son expérience d'apprentissage de Rust sur une période de six mois, en tant qu'ingénieur JavaScript/TypeScript se lançant dans un système de production. Elle souligne la robustesse de Cargo, le système de build et de gestion de paquets de Rust, contrastant avec les complexités de l'écosystème JavaScript. Elle apprécie également la clarté des messages d'erreur de Rust, bien que les erreurs de compilation, notamment celles liées aux emprunts et à la durée de vie, aient été un défi initial. Son article offre un aperçu de son parcours, mettant en lumière les aspects qu'elle aime et ceux qu'elle n'aime pas, ainsi que ses réflexions sur l'adoption de Rust pour un projet backend.
µJS est une bibliothèque légère de navigation AJAX permettant de transformer un site web traditionnel en une application à page unique (SPA) sans utiliser de JavaScript complexe. En interceptant les clics sur les liens et les soumissions de formulaires, elle charge les nouvelles pages en arrière-plan et ne remplace que le contenu modifié, évitant ainsi les rechargements complets de la page. Avec seulement ~5 KB gzipped et zéro dépendance, µJS s'intègre facilement à n'importe quel backend (PHP, Python, Ruby, etc.) en ajoutant un simple script et en appelant mu.init(). Parmi ses fonctionnalités, on trouve le préchargement au survol, le mode patch pour les mises à jour multiples, le support des événements personnalisés et des requêtes HTTP variées.
Lea Verou explique comment émuler les import maps externes, une solution pour gérer centralement les dépendances JavaScript, grâce à une astuce compatible avec les navigateurs modernes. En injectant dynamiquement une balise <script type="importmap"> via un script classique, il est possible de contourner les limitations actuelles des import maps. La méthode, déjà utilisée par JSPM v4, permet de résoudre les problèmes de URLs relatives et offre une solution simple et efficace pour une gestion centralisée des dépendances.
Oskar Dudycz partage une leçon apprise à propos de la gestion des données, notamment des grands entiers (bigints) dans les environnements JavaScript/TypeScript. Il explique les défis de la sérialisation et de la désérialisation des données, en particulier avec JSON, qui ne supporte pas nativement les grands entiers ou les dates. Il décrit ses tentatives pour contourner ces limitations, y compris une approche "sneaky" qui a finalement causé des problèmes, soulignant l'importance de bien parser les données plutôt que de deviner leur type. Il conclut en recommandant une approche plus rigoureuse et moins "sneaky" pour éviter les erreurs.
L'article explore l'utilisation de l'API Popover pour créer des infobulles (tooltips) en s'appuyant sur les fonctionnalités natives du navigateur plutôt que sur des bibliothèques JavaScript. L'auteur explique comment cette API simplifie la gestion des interactions clavier, de l'accessibilité et des événements, réduisant considérablement le code nécessaire. Il compare l'ancienne méthode utilisant des bibliothèques avec la nouvelle approche basée sur l'API Popover, soulignant les avantages en termes de simplicité et de robustesse. L'article note également que l'API est bien supportée par les navigateurs, bien que certaines fonctionnalités soient encore en développement.
Oxfmt, un formateur de code compatible avec Prettier et développé en Rust, est désormais en version bêta. Plus rapide (30x plus que Prettier et 3x plus que Biome), il prend en charge plusieurs formats de fichiers, intègre le tri des imports et le support de Tailwind CSS, et offre une compatibilité totale avec Prettier. Utilisé par des projets comme Vue.js et Sentry, il est facile à installer et à migrer depuis Prettier.
Antoine Caron partage son expérience d'optimisation de son application open source de poker planning. Initialement, l'application pesait environ 123 Ko (JS + CSS) avec React 19, TanStack Router et Query, et Tailwind 4. En passant à Preact, en pré-compressant les fichiers avec Brotli, Zstd et Zopfli, et en optimisant Tailwind CSS, il a réduit le poids de l'application à environ 40 Ko, soit une réduction de 67%. Un excellent exemple d'optimisation web.
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.