Sujet : javascript
-
Stockage dans le navigateur : cookies, Web Storage et IndexedDB comparés
Les cookies voyagent avec chaque requête et sont de petite taille par spécification ; localStorage et sessionStorage sont des magasins de chaînes synchrones avec quelques Mio par origine ; IndexedDB est asynchrone, transactionnel et partage le grand quota de l'origine. Tout le stockage du navigateur est de type best-effort sauf si la persistance est accordée, et il est délimité par origine.
-
Utiliser fetch avec des délais d'expiration et AbortController
Une promesse fetch n'est rejetée qu'en cas d'échec réseau, pas en cas de statut d'erreur HTTP, et elle n'a par elle-même aucun délai d'expiration. Passer un AbortSignal combinant AbortSignal.timeout et un contrôleur de l'appelant, vérifier response.ok, et distinguer dans le catch TimeoutError, AbortError, les erreurs réseau et les erreurs HTTP.
-
Les builds en modules ES avec effets de bord déclarés réduisent davantage les paquets des consommateurs que les builds CommonJS
Hypothèse : pour une bibliothèque composée de nombreuses fonctions indépendantes, un consommateur qui en importe quelques-unes obtient un paquet plus petit lorsque la bibliothèque distribue des modules ES avec une déclaration sideEffects que lorsqu'elle distribue du CommonJS, parce que le tree shaking dépend de la structure statique import/export ; une comparaison fondée sur des fixtures est proposée.
-
Web components : éléments personnalisés, DOM fantôme, et où s'arrête l'encapsulation
Les éléments personnalisés enregistrent une classe sous un nom de balise à trait d'union avec des rappels de cycle de vie ; le DOM fantôme lui donne un sous-arbre isolé dont les styles ne fuient dans aucun sens ; les templates et les racines fantômes déclaratives fournissent le balisage. Chaque préoccupation traversant la frontière, du style via les parts et les propriétés personnalisées jusqu'à la participation aux formulaires via ElementInternals et l'association de labels, doit être ouverte délibérément.
-
Quand le routage côté client reste-t-il rentable maintenant que les navigateurs offrent bfcache, le prérendu et les transitions de vue entre documents ?
Question ouverte : les routeurs internes à la page ont été adoptés pour éviter les rechargements complets de page, au prix de la desserte d'une coquille (shell), de la gestion des 404, de la restauration du défilement et du focus, et d'un paquet (bundle) qui doit arriver en premier ; le cache avant/arrière (back/forward cache), la Speculation Rules API et les transitions de vue entre documents répondent désormais aux motivations d'origine dans les sites multipages. Pour quels sites et quels schémas d'interaction un routeur interne à la page l'emporte-t-il encore de façon mesurable ?
-
Interfaces sensibles aux paramètres régionaux : règles de pluriel Intl, dates et mise en page droite-à-gauche
Formater les nombres, dates et heures relatives avec les objets Intl du navigateur plutôt que par arithmétique de chaînes, choisir les formes de pluriel par les catégories d'Intl.PluralRules plutôt que par n == 1, mettre en page avec des propriétés CSS logiques pour qu'un document dir=rtl se reflète lui-même, et laisser de la place pour un texte qui s'allonge à la traduction.
-
Modules ES contre CommonJS dans Node.js
CommonJS utilise require de façon synchrone et module.exports ; les modules ES utilisent import/export statiques, le await de premier niveau et import.meta. Node décide par fichier selon l'extension et le champ type du package.json le plus proche ; les modules ES exigent l'extension complète des fichiers et ne disposent ni de __dirname ni de require, dont les remplacements sont documentés.
-
Décalages de texte en JavaScript : distinguer unités UTF-16, points de code et caractères visibles
Nommer l'unité du décalage à chaque frontière d'éditeur ou d'API, et convertir délibérément avant de découper le texte.
-
Déployer un service worker en toute sécurité : portée, caches versionnés, worker en attente et interrupteur d'arrêt
Un service worker qui met en cache du HTML peut figer les utilisateurs sur d'anciennes versions du code après un déploiement. L'enregistrer avec une portée explicite, récupérer le script à neuf à chaque vérification de mise à jour, versionner les caches par build et supprimer les anciens à l'activation, choisir des stratégies par type de ressource, décider comment le worker en attente prend le relais, et livrer un interrupteur d'arrêt testé avant la première mise en production.
-
Navigation au clavier dans les widgets composites : tabindex flottant, flèches et Échap
Tab et Maj+Tab déplacent le focus entre les composants ; les touches fléchées le déplacent à l'intérieur d'un composant, tel qu'une liste d'onglets, une barre d'outils, un menu ou un groupe de boutons radio. Mettre cela en œuvre avec un tabindex flottant (un seul élément à tabindex=0, les autres à -1) ou avec aria-activedescendant, fermer les surfaces transitoires avec Échap, et ne jamais piéger le focus sans offrir une sortie annoncée.
-
Gestion du focus dans les interactions de page unique : boîtes de dialogue, changements de route et éléments supprimés
Lorsqu'une page change sans chargement complet, le focus clavier doit être déplacé délibérément : dans une boîte de dialogue à son ouverture et de retour vers son déclencheur à sa fermeture, vers le titre de la nouvelle vue après un changement de route côté client, et vers un voisin pertinent quand l'élément focalisé est supprimé. Sinon, le focus retombe sur le corps du document et les personnes utilisant un lecteur d'écran sont renvoyées en haut de page.
-
Gérer les erreurs dans les promesses et avec async/await
Une fonction async transforme un throw en rejet, et await le relance ; chaque rejet a besoin d'un responsable. N'encapsuler que ce dont on peut se remettre, ne jamais laisser une promesse flotter sans suite, utiliser allSettled lorsqu'un échec partiel est acceptable, et enregistrer un gestionnaire unhandledrejection en dernier recours.
-
La boucle d'événements de JavaScript : tâches, microtâches et rendu
JavaScript exécute une tâche à la fois ; la boucle d'événements HTML prend une tâche, puis vide entièrement la file des microtâches (réactions de promesses, queueMicrotask) avant la tâche suivante ou une occasion de rendu. Un travail synchrone long et des chaînes de microtâches sans fin bloquent les entrées et l'affichage.
-
BigInt en JSON : définir un contrat de champ sans perte avant d'ajouter un replacer
Encoder les grands entiers avec un schéma explicite et les restituer sans passer silencieusement par Number.
-
Bases de la manipulation de bits : indicateurs, masques et décalages sans surprise
Les indicateurs (flags) sont des puissances de deux combinées avec OR, testées avec AND et effacées avec AND NOT ; les masques et les décalages extraient des champs. Les pièges sont la priorité des opérateurs, les décalages à droite avec signe, la conversion fixe sur 32 bits en JavaScript et les entiers non bornés en Python ; nommer chaque indicateur et parenthéser chaque test.
Lisible par machine : JSON