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

L'article soutient que les fonctionnalités modernes du CSS, telles que l'API View Transitions et les Speculation Rules, ont éliminé les principaux avantages des Single Page Applications (SPAs). Ces innovations permettent des transitions fluides entre les pages, une navigation instantanée et de meilleures performances sans la complexité et la surcharge de JavaScript associées aux SPAs. Alderson argue que les navigateurs modernes peuvent désormais gérer des expériences riches et fluides de manière native, rendant obsolètes les SPAs pour la plupart des sites web. Il encourage les développeurs à utiliser le rendu côté serveur, des pages réelles, des animations CSS et à réduire l'usage de JavaScript pour construire des sites web plus performants et maintenables.

Biome est présenté comme un outil révolutionnaire pour les développeurs front-end, remplaçant efficacement ESLint et Prettier. Il combine les fonctionnalités d'un formatter, d'un linter, et d'un analyseur statique en un seul binaire, offrant une solution plus rapide et moins complexe. Biome simplifie la configuration, réduit le besoin de multiples outils, et améliore la cohérence du code. Il est particulièrement apprécié pour sa rapidité et sa facilité d'intégration, notamment dans des projets Symfony via le bundle kocal/biome-js-bundle. Bien qu'il ne couvre pas 100% des cas d'utilisation d'ESLint, il est efficace dans 90% des situations courantes. Biome impose également des conventions strictes pour des pratiques de codage cohérentes, comme l'utilisation de points-virgules et de virgules finales. En résumé, Biome est une solution tout-en-un qui simplifie le développement et améliore la productivité.

L'article explore les défis et solutions liés à l'utilisation de paramètres avec les écouteurs d'événements en JavaScript. L'auteur souligne l'importance de gérer correctement ces écouteurs pour éviter les fuites de mémoire et les problèmes de performance. L'article aborde des erreurs courantes, comme l'appel immédiat de fonctions lors de l'ajout d'écouteurs, et propose des solutions utilisant des fonctions fléchées, des fermetures et l'API AbortController pour une gestion efficace des paramètres et la suppression des écouteurs.

L'article explore les principaux modèles de conception de création en JavaScript, offrant des solutions éprouvées pour structurer et rendre le code plus flexible et réutilisable. Il couvre plusieurs modèles, dont le Singleton, qui garantit qu'une classe n'a qu'une seule instance, le Prototype, qui permet de créer de nouveaux objets en copiant des objets existants, et le Factory, qui fournit une interface pour créer des objets tout en permettant aux sous-classes de modifier le type d'objets créés. D'autres modèles comme l'Abstract Factory, qui crée des familles d'objets apparentés, et le Builder, qui construit des objets complexes étape par étape, sont également détaillés. Chaque modèle est illustré avec des exemples pratiques et des cas d'utilisation réels, montrant comment ils peuvent être mis en œuvre efficacement en JavaScript pour améliorer la structure et la maintenabilité du code.

Suite de https://css-tricks.com/a-better-api-for-the-resize-observer/ , l'article propose une refonte des API pour MutationObserver et IntersectionObserver afin de les rendre plus simples à utiliser. L'auteur montre comment simplifier l'utilisation de ces observateurs en utilisant des motifs de rappel et d'écouteurs d'événements. Pour MutationObserver, il explique comment observer les mutations du DOM et se déconnecter proprement en utilisant une méthode disconnect. Concernant IntersectionObserver, il détaille comment observer les changements d'intersection d'un élément avec un ancêtre ou une fenêtre de visualisation. Enfin, l'article mentionne une bibliothèque pratique, Splendid Labz, qui offre des utilitaires pour ces observateurs, facilitant leur intégration dans des projets web.

L'auteur donne une série de conseils pour l'écriture de regex en JavaScript, du plus basique au plus complexe : ajout de flags, groupes de capture nommés, etc.

L'article propose une amélioration de l'API pour le ResizeObserver, un outil JavaScript utilisé pour observer les changements de taille des éléments DOM. L'auteur suggère d'encapsuler la logique du ResizeObserver dans une fonction plus simple et réutilisable, ce qui rend son utilisation plus intuitive et proche des modèles d'écouteurs d'événements familiers. En passant un élément et une fonction de rappel à cette fonction personnalisée, les développeurs peuvent facilement réagir aux changements de taille sans avoir à réécrire le code standard du ResizeObserver à chaque fois. De plus, l'article montre comment intégrer des options supplémentaires et gérer l'arrêt de l'observation, offrant ainsi une solution plus flexible et maintenable. Enfin, il mentionne une bibliothèque appelée Splendid Labz qui offre une version améliorée de cet observateur, capable de gérer plusieurs éléments simultanément.

L'article explore les subtilités de la gestion des dates en JavaScript, en se concentrant sur les différences de comportement entre les formats de date comme "2025/05/28" et "2025-05-28". Il explique comment ces formats peuvent être interprétés différemment selon qu'ils sont traités en temps local ou en temps universel (UTC), ce qui peut entraîner des résultats inattendus. L'auteur plonge dans l'historique des navigateurs et des spécifications ECMAScript pour expliquer l'évolution de ces comportements, soulignant les inconsistances passées entre les navigateurs. Enfin, il mentionne l'arrivée de l'API Temporal en JavaScript, qui vise à résoudre ces ambiguïtés en offrant une gestion plus robuste et claire des dates et des heures.

L'article explique comment utiliser les méthodes .map(), .reduce(), et .filter() en JavaScript pour manipuler efficacement les tableaux. Ces outils permettent de transformer, agréger et filtrer des données de manière concise et lisible, remplaçant avantageusement les boucles traditionnelles. En les combinant, on peut effectuer des opérations complexes sur les données avec un code plus propre et plus maintenable.

L'article compare trois outils HTTP : Fetch API, Axios et Alova. Fetch API, intégré nativement dans JavaScript, est léger et idéal pour des requêtes simples mais nécessite une gestion manuelle pour des fonctionnalités avancées. Axios, bien que plus lourd, offre des fonctionnalités automatisées comme la gestion du JSON et des intercepteurs, le rendant adapté pour des applications complexes. Alova, quant à lui, combine la simplicité des requêtes avec des fonctionnalités avancées telles que la gestion de l'état et la mise en cache, ce qui en fait un choix optimal pour des applications front-end lourdes nécessitant une optimisation des performances.

L'action décrite dans le titre est plus compliquée que prévue... Une solution qui marche bien la plupart du temps est de faire {}.toString.call(v)

Une bibliothèque JavaScript open source de visualisation de données très complète

L'auteur explique pourquoi c'est une bonne pratique

L'article montre comment créer un jeu de "devinez le drapeau" en JS natif et CSS, sans framework ni lib. L'auteur explique pas-à-pas ce qu'il fait... C'est très instructif