MicroLighter est une bibliothèque de coloration syntaxique légère et sans dépendances, conçue pour être rapide et facile à intégrer. Elle ne génère pas de <span> superflus dans le code, ce qui contribue à sa performance. Les grammaires, au format TextMate utilisé par VS Code, peuvent être chargées de manière asynchrone pour optimiser le temps de chargement.
L'installation de MicroLighter se fait simplement via npm. Il suffit d'importer la fonction highlightAll et un thème CSS, puis d'ajouter la classe language-* aux blocs de code. Une option existe pour un chargement automatique immédiat, ainsi qu'un bundle pour utiliser des éléments personnalisés offrant des fonctionnalités comme la copie ou la numérotation des lignes.
MicroLighter prend en charge plusieurs langages de programmation, tels que JavaScript, CSS, HTML, Ruby, Python, SQL et C++. La librairie est pensée pour une utilisation efficace et moderne du code dans les projets web.
L'auteur présente sa structure HTML de base actuelle, expliquant les choix derrière chaque élément. L'idée principale est de fournir une base solide et bien pensée pour tout projet web, allant au-delà d'un simple copier-coller de modèles existants. Parmi les détails importants, il met en avant l'importance de la déclaration <!DOCTYPE html>, de l'attribut lang pour l'accessibilité et le SEO, ainsi que la gestion de l'encodage des caractères avec <meta charset="UTF-8">. L'utilisation d'une classe no-js sur la balise <html> est également soulignée pour permettre une gestion conditionnelle du JavaScript.
La balise <meta name="viewport"> est essentielle pour assurer un affichage correct et responsive sur les différents appareils mobiles. L'article détaille également la configuration des métadonnées pour l'optimisation des moteurs de recherche (SEO) et le partage sur les réseaux sociaux, incluant des éléments comme la description, le titre, les images et les URL canoniques. Des optimisations pour les icônes de favoris (favicon) et la gestion de la couleur de thème pour les applications web progressives (PWA) sont aussi mentionnées.
Enfin, l'auteur explique l'intégration de feuilles de style, y compris une version spécifique pour l'impression (media="print"), et l'inclusion de scripts JavaScript. L'utilisation de nomodule pour les polyfills JavaScript destinés aux anciens navigateurs et de type="module" pour les scripts modernes est expliquée, démontrant une approche soignée de la compatibilité et des performances.
L’article de Dmitry Zakharov critique l’usage de JSON.stringify en JavaScript, qu’il considère comme une mauvaise pratique à proscrire au profit d’outils d’encodage dédiés. Il souligne que cette fonction native, souvent utilisée par défaut, présente des risques majeurs : elle retourne undefined pour certains types (fonctions, undefined), génère des erreurs non explicites (comme pour les BigInt ou les structures circulaires), et surtout, elle corrompt silencieusement les données en les transformant en null ou en les omettant (par exemple, Infinity devient null, ou les clés avec undefined disparaissent).
L’auteur propose une alternative radicale : remplacer JSON.stringify par des encodeurs spécialisés, comme sa propre bibliothèque Sury, conçue pour éviter ces écueils. Il compare cette approche à la philosophie "Parse, don’t validate" de 2019, suggérant qu’elle pourrait devenir une norme dans l’écosystème JavaScript. Bien que JSON.stringify reste utile en interne pour certains encodeurs, Zakharov insiste sur le fait qu’elle ne devrait jamais apparaître directement dans le code applicatif.
Le site Web Without JS démontre qu'il est possible de créer des interfaces interactives et dynamiques en utilisant uniquement HTML et CSS, sans JavaScript. L'idée principale repose sur l'exploitation des fonctionnalités natives des navigateurs, comme les popovers, les modales ou les changements de thème, pour reproduire des comportements autrefois réservés aux frameworks JavaScript. La page met en avant des exemples concrets, tels que des menus déroulants, des notes modales ou des carrousels, tous implémentés avec des éléments HTML standards et des styles CSS.
Cependant, certaines fonctionnalités avancées, comme la persistance des données, la recherche en temps réel ou un bouton de copier-coller, nécessitent encore du JavaScript. Le site propose également une section Lab qui teste les limites des technologies utilisées, en indiquant pour chaque exemple s'il est compatible avec tous les moteurs de rendu ou s'il reste limité à Chromium. Les performances sont soulignées, avec une page de seulement 12 Ko et une feuille de style de 39 Ko, sans aucun script.
Enfin, le projet explore des solutions créatives pour des cas d'usage spécifiques, comme un système de notes exclusives, un carrousel utilisant le défilement natif ou un mode impression optimisé. L'objectif est de montrer que, malgré certaines contraintes, HTML et CSS peuvent offrir une expérience utilisateur riche et moderne, tout en réduisant la dépendance aux technologies lourdes.
L’article de Smashing Magazine explore l’utilisation de SMIL (Synchronized Multimedia Integration Language) pour animer des SVG, une alternative méconnue aux animations CSS ou JavaScript. SMIL permet d’animer intégralement un SVG, y compris via la balise <img>, sans recourir à JavaScript, bien que certaines propriétés comme viewBox ne disposent pas encore d’équivalents CSS. L’auteur souligne que SMIL, malgré sa syntaxe verbeuse, offre une solution native pour des animations complexes, notamment lorsque JavaScript est bloqué.
Pour simplifier la gestion des animations SMIL, souvent alourdies par des balises répétitives (une par propriété et élément), l’auteur propose de planifier les animations à l’avance en utilisant des timing charts (diagrammes de timing). Ces diagrammes, inspirés de segments de ligne, aident à visualiser les séquences, chevauchements et synchronisations entre animations, facilitant ainsi leur conception et leur maintenance. Une approche visuelle qui rappelle les principes de parallélisme et de séquencement en animation.
L’article explore l’évolution des pseudo-classes CSS qui, bien que conçues pour gérer des états, peuvent parfois imiter le comportement des écouteurs d’événements JavaScript. L’auteur souligne que des pseudo-classes comme :hover, :active, :focus ou :checked réagissent à des interactions utilisateur (clic, survol, focus), offrant une alternative à JavaScript pour des cas simples. Par exemple, :focus-visible utilise des heuristiques pour déterminer si un élément doit afficher un indicateur de focus, une logique difficile à reproduire efficacement en JavaScript.
L’auteur aborde aussi des pseudo-classes plus avancées comme :focus-within et :has(), qui permettent de cibler des éléments parents en fonction de l’état de leurs enfants, réduisant ainsi le besoin de scripts. Ces fonctionnalités illustrent comment CSS gagne en expressivité, notamment avec des spécifications émergentes comme les Animation Triggers, qui pourraient un jour permettre de déclencher des animations via des événements. Cependant, ces innovations restent encore en développement.
Enfin, l’article mentionne des pseudo-classes liées aux formulaires (:valid, :invalid, etc.), qui simplifient la gestion des états de validation sans recourir à JavaScript. L’auteur conclut que, malgré ces avancées, CSS et JavaScript restent complémentaires, chacun ayant ses forces pour gérer les interactions et la logique applicative.
Comment réduire votre dépendance en JavaScript grâce à Baseline
L’article explique comment le projet Baseline, porté par le WebDX Community Group, permet d’alléger les applications JavaScript en remplaçant des bibliothèques tierces par des fonctionnalités natives du navigateur. Beaucoup de dépendances courantes (formatage de dates, requêtes HTTP, modales, etc.) sont désormais intégrées aux navigateurs modernes, réduisant ainsi le poids des applications de 60 à 90 Ko (minifié et compressé). L’auteur propose une méthode pour auditer ces dépendances en regroupant les fonctionnalités par niveau de maturité (Limited, Newly available, Widely available), afin d’identifier celles qui peuvent être supprimées sans risque.
Baseline fournit un cadre clair pour évaluer la compatibilité des fonctionnalités via des outils comme webstatus.dev ou MDN, qui indiquent leur statut (nouveau, stable ou en développement). L’article insiste sur l’importance de réévaluer régulièrement ses dépendances, car le web évolue rapidement. Une approche structurée permet de supprimer des bibliothèques obsolètes tout en maintenant la compatibilité avec les anciens navigateurs si nécessaire.
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.