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.

Découvrez 17 fonctionnalités récentes de JavaScript qui pourraient vous avoir échappé. Cet article explore des innovations comme Intl.ListFormat pour formater des listes selon les règles locales, Intl.RelativeTimeFormat pour afficher des temps relatifs, et Intl.DurationFormat pour décrire des durées de manière appropriée à la langue. Il aborde aussi des améliorations pour les objets, les tableaux et les chaînes de caractères, offrant des solutions légères et efficaces pour réduire les dépendances. Parfait pour ceux qui veulent moderniser leur code ou simplifier leurs projets.

L'article explique comment utiliser l'API SpeechSynthesis pour permettre à un navigateur de lire du texte à voix haute. L'API est accessible via window.speechSynthesis et permet de créer des objets SpeechSynthesisUtterance pour spécifier le texte à lire. L'exemple de code montre comment faire parler le navigateur avec une simple ligne de code. Bien que cette API ne remplace pas les outils d'accessibilité natifs, elle peut les compléter pour améliorer l'expérience utilisateur, notamment pour les personnes malvoyantes.

dependency-cruiser est un outil open source qui permet de valider et visualiser les dépendances dans les projets JavaScript, TypeScript, CoffeeScript ou LiveScript. Il analyse les dépendances selon des règles personnalisables, détecte les violations (comme les dépendances circulaires ou manquantes), et génère des rapports sous forme de texte, graphiques (dot, mermaid, SVG), HTML ou CSV. Idéal pour intégrer dans un pipeline CI/CD, il s’installe via npm/yarn/pnpm et se configure facilement avec npx depcruise --init. Il offre aussi des visualisations claires pour mieux comprendre l’architecture de son code.

Cet article explore le concept des expressions en JavaScript, extrait du cours JavaScript for Everyone. Une expression est un bout de code qui, une fois évalué, produit une valeur (exemple : 2 + 2 donne 4). L’article détaille plusieurs types d’expressions : les expressions primaires (comme les littéraux numériques ou les variables), les opérateurs de regroupement (parenthèses pour contrôler l’ordre d’évaluation), et les expressions avec effets de bord (comme l’assignation ou l’appel de fonction, qui produisent une valeur tout en effectuant une action). Il aborde aussi des cas particuliers comme l’opérateur virgule, qui évalue plusieurs expressions mais ne retourne que la dernière, et souligne que la plupart des déclarations (sauf var) ne sont ni des expressions ni des instructions. L’objectif est de clarifier comment JavaScript interprète et manipule les valeurs, offrant une base solide pour comprendre la logique interne du langage.

L’article explique pourquoi il n’est plus nécessaire de développer des APIs REST à partir de zéro en 2025. Il met en avant des frameworks modernes comme tRPC, Fastify et Hono, qui permettent de réduire la quantité de code répétitif grâce à une approche basée sur les schémas, améliorant ainsi la rapidité et la sécurité des développements. L’idée centrale est d’utiliser ces outils pour automatiser et standardiser la création d’APIs, plutôt que de tout coder manuellement. Une lecture utile pour les développeurs souhaitant optimiser leur workflow et adopter des pratiques plus efficaces.

Cet article explique comment générer des "captures d’écran" au format SVG d’éléments HTML, notamment pour les réutiliser dans des fichiers HTML, EPUB ou PDF. L’auteur présente deux bibliothèques JavaScript permettant de convertir du HTML en SVG, avec une préférence pour html-to-svg. Il détaille une méthode pour créer une page web contenant plusieurs démonstrations de mises en page CSS, chacune convertie en SVG via un script. Chaque section peut être affichée ou téléchargée sous forme d’image SVG, avec un nom de fichier dérivé de l’ID de la section. L’astuce repose sur l’utilisation de Blob et de URL.createObjectURL pour générer un lien de téléchargement fonctionnel. Une solution pratique pour intégrer des visuels dynamiques et scalables dans divers formats de documents.

Obsidian explique comment ils minimisent les risques d’attaques par la chaîne d’approvisionnement (supply chain attacks) en limitant au maximum ses dépendances externes. L’application privilégie le développement en interne (comme pour les fonctionnalités Bases et Canvas), évite les bibliothèques tierces quand c’est possible, et utilise des versions figées et vérifiées pour les dépendances inévitables (comme Electron ou CodeMirror). Les mises à jour sont rares, méticuleusement testées et espacées dans le temps, avec une revue approfondie des changements et des sous-dépendances. Cette approche réduit la surface d’attaque et permet de détecter rapidement d’éventuels problèmes avant qu’ils n’affectent les utilisateurs. Une stratégie qui combine minimalisme, contrôle strict et prudence pour garantir un environnement sécurisé et privé.

Cet article explique pourquoi l’utilisation de Math.random() pour générer des mots de passe est dangereuse (prédictibilité, absence de sécurité cryptographique) et propose une solution robuste via l’API Web Crypto et sa méthode crypto.getRandomValues(). Cette dernière utilise des sources d’entropie cryptographiquement sécurisées, évitant les biais de distribution grâce au rejection sampling.

L’article fournit un exemple d’implémentation complète, incluant :

• Une classe SecurePasswordGenerator personnalisable (longueur, types de caractères, exclusion des caractères ambigus).
• Une méthode pour calculer la force du mot de passe généré.
• Des bonnes pratiques : validation côté serveur, gestion mémoire, et compatibilité navigateur (HTTPS requis).

À retenir : Toujours privilégier crypto.getRandomValues() et éviter Math.random() pour toute application sensible. L’API est largement supportée (Chrome, Firefox, Safari) et garantit une sécurité optimale.

Lyra Rebane défend l’idée que beaucoup de sites n’ont pas besoin de JS ou de frameworks lourds pour offrir une expérience riche : modernes, HTML et CSS seuls suffisent souvent. L’article montre de nouveaux outils CSS (naming, nesting, pseudo-classes, color mixing, unités viewport dynamiques, etc.), des composants interactifs accessibles (via « \:checked », « \:has », « details/summary », etc.), et des effets visuels performants. L’auteur insiste aussi sur les bénéfices pour la performance, l’accessibilité, la vie privée, et le plaisir de coder léger, esthétique et fonctionnel.

Cet article présente des astuces pour un code plus propre, rapide et maintenable. Découvre les named capture groups en regex pour un parsing lisible, Object.fromEntries() pour transformer des données en un clin d’œil, ou les champs privés de classe (#) pour encapsuler ton état. Utilise le top-level await pour simplifier tes modules, l’API Intl pour un formatting localisé sans dépendances, ou le pipeline operator (|>) pour des chaînes de fonctions élégantes. WeakMap stocke des métadonnées sans polluer tes objets, les opérateurs d’assignation logique (||=, &&=, ??=) réduisent les conditionnelles, et Array.at(-1) élimine les acrobaties d’indexation. Des outils comme optional chaining (?.) ou Intl remplacent avantageusement des librairies externes.

L’article souligne l’importance d’une gestion rigoureuse des versions npm pour sécuriser ses projets JavaScript, surtout après des attaques comme celles sur chalk et debug. Il recommande d’utiliser des versions exactes pour les dépendances critiques (ex: "react": "18.2.0") plutôt que des ranges permissifs (^, ~, >=), et d’always commiter les lock files (package-lock.json ou yarn.lock) pour éviter les incohérences entre environnements. Une méthodologie sécurisée inclut : des audits réguliers (npm audit), des mises à jour contrôlées (via npm-check-updates), des tests complets après chaque modification, et l’intégration de vérifications automatiques dans le CI/CD. L’objectif est de minimiser les risques liés à la supply chain en privilégiant la sécurité à la commodité, notamment pour les packages critiques en production. Une checklist pratique résume les bonnes pratiques : versions exactes, lock files versionnés, audits automatiques, monitoring continu et backups des versions stables. La sécurité devient ainsi un investissement clé pour la stabilité des projets.

L’article d’Alsacréations explique clairement la différence entre les redirections HTTP 301 (permanente) et 302 (temporaire), deux codes essentiels pour gérer les changements d’URL. Une redirection 301 indique aux moteurs de recherche et aux navigateurs que la page a définitivement déménagé, transférant ainsi le référencement (SEO) et l’autorité de l’ancienne URL vers la nouvelle. Elle est idéale pour les migrations de site ou les changements de structure durables. À l’inverse, la redirection 302 signale un déplacement temporaire, utile pour des maintenance ou des tests, mais sans transférer le capital SEO. L’article détaille aussi comment les implémenter via le fichier .htaccess (Apache) ou la configuration serveur, et souligne l’importance de choisir le bon type pour éviter de nuire au référencement ou à l’expérience utilisateur. En résumé : utilisez le 301 pour les changements définitifs, et le 302 pour les situations provisoires.

Il s'agit d'une visionneuse PDF JavaScript intégrable

L'auteur présente 3 techniques pour déclencher un téléchargement de fichier :

• un attribut introduit en HTML5
• la simulation d'un clic en JavaScript, par exemple suite à une action utilisateur
• dans le cas du téléchargement de données générées dynamiquement, les transformer en Blob et utiliser la méthode précédente

Points clés

1. L’internationalisation, bien plus que la traduction

L’i18n ne se limite pas à traduire du texte : elle inclut aussi le formatage des dates, des nombres, des listes, la pluralisation, etc., selon les attentes culturelles de chaque locale. L’API Intl de JavaScript offre une solution native, performante et standardisée pour gérer ces aspects, sans dépendre de bibliothèques tierces lourdes.

2. Qu’est-ce qu’une locale ?

Une locale (en-US, fr-FR, ja-JP, etc.) définit non seulement la langue, mais aussi la région, le script, et d’autres préférences culturelles. Elle permet d’adapter finement l’affichage des données.

3. Les principaux outils de l’API Intl

• Intl.DateTimeFormat : Formate les dates et heures selon les conventions locales (ex. : 27/06/2025 vs June 27, 2025).
• Intl.NumberFormat : Affiche les nombres, devises et unités avec les séparateurs et symboles locaux (ex. : 123,456.79 $ vs 123.456,79 €).
• Intl.ListFormat : Génère des listes naturelles avec les conjonctions adaptées (ex. : « pommes, oranges et bananes » vs « apples, oranges, and bananas »).
• Intl.RelativeTimeFormat : Affiche des expressions temporelles relatives (« hier », « dans 3 mois ») de manière localisée.
• Intl.PluralRules : Détermine la catégorie de pluralisation (singulier/pluriel, mais aussi « zero », « one », « two », etc. pour l’arabe).
• Intl.DisplayNames : Fournit les noms localisés des langues, régions ou scripts (ex. : « French » vs « français »).

4. Avantages

• Natif : Intégré à tous les navigateurs modernes, sans besoin de polyfills.
• Performant : Réduit la taille des bundles et améliore les performances.
• Flexible : Permet de surcharger la locale par défaut (via navigator.language ou un attribut lang en HTML).

5. Cas d’usage

• Afficher des prix, dates ou listes adaptés à l’utilisateur.
• Gérer la pluralisation complexe (ex. : arabe, russe).
• Éviter les solutions maison ou les bibliothèques externes.

6. Limites

L’API Intl gère le formatage des données, mais pas la traduction de contenu, la typographie RTL/LTR, ou les nuances culturelles profondes.

7. Ressources utiles

• Documentation MDN sur Intl
• Spécification ECMA-402

Pourquoi l’utiliser ?
L’API Intl simplifie l’internationalisation tout en respectant les standards du web. Idéal pour des applications multilingues légères et maintenables.

L’article met en lumière un piège courant en JavaScript : l’utilisation de Array.includes dans une boucle (comme source.some(item => target.includes(item))) peut devenir extrêmement coûteuse en performance avec des tableaux volumineux, car la complexité algorithmique passe à *O(nm). Par exemple, avec des tableaux de 60 000 éléments, l’exécution peut prendre plusieurs secondes. La solution consiste à utiliser des structures de données optimisées pour des recherches en temps constant, comme un objet, une Map, ou mieux, un Set (new Set(target)), réduisant la complexité à O(n + m)** et rendant le code quasi instantané même pour de très grands jeux de données. Une astuce simple, mais cruciale pour éviter des goulots d’étranglement inattendus dans le code JavaScript.

Un éditeur markdown WYSIWYG léger

Ce dépôt présente les principaux design patterns avec des exemples en JavaScript