Chapitre 24 — Annexes : Cours Complet

1. Glossaire Complet (150+ Entrées)

A

Terme	Définition
Accessibilité (a11y)	Pratique de conception permettant aux personnes handicapées d'utiliser le web. Les chiffres "11" représentent les 11 lettres entre "a" et "y".
ADR	Architecture Decision Record — Document qui capture une décision architecturale, son contexte, les alternatives et la justification.
AggregateError	Type d'erreur JS qui regroupe plusieurs erreurs (utilisé par `Promise.any()`).
AJAX	Asynchronous JavaScript and XML — Technique pour échanger des données avec le serveur sans recharger la page.
API	Application Programming Interface — Interface de communication entre logiciels.
ARIA	Accessible Rich Internet Applications — Attributs HTML pour améliorer l'accessibilité des composants dynamiques.
AST	Abstract Syntax Tree — Représentation arborescente du code source (utilisé par Babel, ESLint, Prettier).
Async/Await	Syntaxe ES2017 pour écrire du code asynchrone de manière synchrone.
Atomic Design	Méthodologie de conception de design systems (atomes → molécules → organismes → templates → pages).

B

Terme	Définition
Babel	Transpiler JS qui convertit le code moderne (ES6+) en code compatible navigateurs plus anciens.
BigInt	Type primitif ES2020 pour les entiers de taille arbitraire (suffixe `n`).
Block Scope	Portée délimitée par les accolades `{}` (let, const).
BOM	Browser Object Model — API navigateur (window, navigator, location, history).
Border-Box	Valeur de `box-sizing` où width/height incluent padding et border.
Bounded Context	Concept DDD délimitant le périmètre d'un modèle de domaine.
Box Model	Modèle de boîte CSS : content → padding → border → margin.
Brotli	Algorithme de compression plus efficace que gzip (supporté par tous les navigateurs modernes).
Bundler	Outil qui regroupe les modules JS (et CSS, images) en fichiers optimisés (Webpack, Vite, Rollup, esbuild).
Bundle Phobia	Service qui calcule le coût (poids) d'ajouter un package npm à un bundle.

C

Terme	Définition
Cache	Stockage temporaire de données pour accélérer les accès futurs (HTTP cache, Service Worker, Memory cache).
Call Stack	Pile d'exécution où sont empilés les contextes de fonction (LIFO — Last In, First Out).
Caniuse	Site de référence pour la compatibilité navigateur des fonctionnalités HTML/CSS/JS.
CDN	Content Delivery Network — Réseau de serveurs distribués géographiquement pour servir le contenu plus rapidement.
CI/CD	Continuous Integration / Continuous Deployment — Automatisation des tests et déploiements.
Class	Syntaxe ES6 pour créer des objets avec héritage prototypal (sucre syntaxique).
CLI	Command Line Interface — Interface en ligne de commande.
Closure	Combinaison d'une fonction et de son environnement lexical (scope) au moment de sa création.
CLS	Cumulative Layout Shift — Métrique Core Web Vitals mesurant la stabilité visuelle.
CMS	Content Management System — Système de gestion de contenu (WordPress, Contentful, Sanity).
Code Splitting	Technique de division du bundle JS en morceaux chargés à la demande (React.lazy, dynamic import).
Coercion	Conversion implicite de type en JavaScript (ex: `1 + '2'` = `'12'`).
CommonJS	Système de modules Node.js historique basé sur `require()` et `module.exports`.
Composant	Bloc d'interface réutilisable (React, Vue, Svelte, Web Component).
Context (React)	API de partage de données sans passer par les props (prop drilling).
Core Web Vitals	Ensemble de métriques Google mesurant l'expérience utilisateur (LCP, FID, CLS).
CORS	Cross-Origin Resource Sharing — Mécanisme de sécurité navigateur pour les requêtes cross-origin.
CRDT	Conflict-free Replicated Data Type — Structure de données pour le travail collaboratif temps réel.
CRP	Critical Rendering Path — Chemin critique de rendu (HTML → CSSOM → Render Tree → Layout → Paint).
CSS Custom Properties	Variables CSS (`--primary: blue; color: var(--primary)`).
CSS Grid	Système de mise en page CSS 2D (lignes et colonnes).
CSS Modules	Technique de CSS localisé par défaut (noms de classe hashés).
CSSOM	CSS Object Model — Représentation en arbre des règles CSS (utilisé par le navigateur pour le rendu).
CSR	Client-Side Rendering — Rendu de l'application entièrement côté client.

D

Terme	Définition
DDD	Domain-Driven Design — Approche de conception logicielle centrée sur le domaine métier (Eric Evans).
Debounce	Technique de limitation d'exécution : une fonction n'est appelée qu'après un délai d'inactivité.
Declaration (JS)	Utilisation du mot-clé `var`, `let`, `const`, `function`, `class` pour déclarer une variable/fonction.
Décorateur	Pattern de conception qui ajoute des comportements à un objet sans modifier sa structure (proposal TC39 stage 3).
Design System	Collection de composants, patterns, guidelines et outils pour assurer la cohérence UI.
Destructuring	Syntaxe ES6 pour extraire des valeurs d'objets/tableaux (`const { name } = obj`).
DevTools	Outils de développement intégrés aux navigateurs (Elements, Console, Network, Performance, Memory).
DOM	Document Object Model — Représentation en arbre du document HTML manipulable par JS.
DRY	Don't Repeat Yourself — Principe de non-duplication de code.
DSL	Domain-Specific Language — Langage dédié (ex: JSX, GraphQL, RegExp).
Dynamic Import	Importation asynchrone de modules ES (`const mod = await import('./module')`).

E

Terme	Définition
ECMAScript	Spécification standardisée du langage JavaScript (maintenue par ECMA TC39).
Edge Computing	Exécution de code au plus proche de l'utilisateur (CDN Edge, Vercel Edge Functions, Cloudflare Workers).
E2E Testing	End-to-End Testing — Tests qui parcourent l'application comme un utilisateur (Cypress, Playwright).
ESLint	Outil d'analyse statique du code JS pour détecter les erreurs et appliquer des conventions.
ESM	ES Modules — Système de modules natif du navigateur (`import`/`export`).
Event Loop	Mécanisme qui gère l'exécution du code JS (Call Stack, Microtask Queue, Task Queue, rAF).
Event Sourcing	Pattern de persistence où chaque changement d'état est stocké comme un événement immuable.
Expression (JS)	Fragment de code qui produit une valeur (ex: `2 + 2`, `fn()`, `a && b`).

F

Terme	Définition
FCP	First Contentful Paint — Métrique mesurant le temps d'affichage du premier contenu.
Feature Flag	Technique permettant d'activer/désactiver des fonctionnalités sans déploiement (LaunchDarkly).
FID	First Input Delay — Métrique Core Web Vitals mesurant le temps de réponse à la première interaction.
Flexbox	Système de mise en page CSS 1D (ligne ou colonne).
FP	Functional Programming — Paradigme de programmation basé sur les fonctions pures et l'immutabilité.
FCP	First Contentful Paint — Premier rendu de contenu textuel ou graphique.
FOUC	Flash of Unstyled Content — Affichage bref de la page sans CSS avant que les styles ne s'appliquent.

G

Terme	Définition
Garbage Collector	Mécanisme automatique de libération de la mémoire (V8: Scavenger + Mark-Sweep-Compact).
Generator	Fonction ES6 qui peut être mise en pause et reprise (`function*`, `yield`).
GraphQL	Langage de requête API permettant de demander exactement les données nécessaires.
gzip	Algorithme de compression standard pour la transmission web.

H

Terme	Définition
HOC	Higher-Order Component — Pattern React : une fonction qui prend un composant et en retourne un nouveau.
Hoisting	Comportement JS où les déclarations (var, function) sont déplacées en haut de leur scope.
Hook (React)	Fonction permettant d'utiliser l'état et les cycles de vie dans un composant fonctionnel (useState, useEffect).
HMR	Hot Module Replacement — Remplacement de modules à chaud sans perdre l'état de l'application (Vite, Webpack).
HTML	HyperText Markup Language — Langage de balisage pour structurer le contenu web.
HTTP/2	Version majeure du protocole HTTP avec multiplexage, push serveur, compression d'en-têtes.
HTTP/3	Dernière version du protocole HTTP basée sur QUIC (UDP) pour une latence réduite.

I

Terme	Définition
IDE	Integrated Development Environment — Environnement de développement intégré (VS Code, WebStorm).
IIFE	Immediately Invoked Function Expression — Fonction auto-exécutée créant un scope local.
Immutable	Donnée qui ne peut pas être modifiée après sa création (concept clé React/FP).
IndexedDB	Base de données NoSQL côté navigateur pour le stockage structuré de grandes quantités de données.
INP	Interaction to Next Paint — Nouvelle métrique Core Web Vitals (remplace FID en 2024).
Intersection Observer	API navigateur pour observer la visibilité d'éléments dans le viewport.
ISR	Incremental Static Regeneration — Mise à jour de pages statiques sans rebuild complet (Next.js).
Iterator	Objet avec une méthode `next()` qui renvoie `{ value, done }`.

J

Terme	Définition
JavaScript	Langage de programmation haut niveau, interprété, multi-paradigme, prototype-based.
JSX	Extension syntaxique de JavaScript pour décrire la structure UI (utilisé par React).
JWT	JSON Web Token — Format de token pour l'authentification (stateless).
JAMstack	Architecture : JavaScript + API + Markup (génération statique, CDN, serverless).

K

Terme	Définition
Key (React)	Attribut spécial aidant React à identifier les éléments dans une liste (stabilité nécessaire).
KQL	Knowledge Query Language — Langage de requête pour la recherche (utilisé par certains CMS).

L

Terme	Définition
LCP	Largest Contentful Paint — Métrique Core Web Vitals mesurant le temps de chargement du plus grand élément.
Lazy Loading	Technique de chargement différé (images, composants, modules) jusqu'au moment où ils sont nécessaires.
Lexical Scope	Portée déterminée par la position du code dans le source (closures).
Lighthouse	Outil automatisé d'audit de performance, accessibilité, SEO et bonnes pratiques.
LSP	Language Server Protocol — Protocole standard pour les fonctionnalités d'IDE (autocomplétion, diagnostics).
LTR/RTL	Left-to-Right / Right-to-Left — Direction d'écriture (internationalisation).

M

Terme	Définition
MDN	Mozilla Developer Network — Documentation web de référence.
Memoization	Technique de cache des résultats de fonction pour éviter des recalculs coûteux.
Micro-Frontend	Architecture où chaque équipe possède un morceau indépendant de l'interface.
Microtask	File d'attente prioritaire de l'Event Loop (Promise callbacks, queueMicrotask).
Middleware	Couche logicielle entre deux systèmes (Redux middleware, Express middleware).
MITM	Man-in-the-Middle — Attaque où un tiers intercepte les communications.
Mixin	Pattern de réutilisation de code par combinaison d'objets.
Module Federation	Plugin Webpack 5 pour partager des modules entre applications à l'exécution.
Monorepo	Dépôt unique contenant plusieurs projets/packages (Turborepo, Nx, pnpm workspaces).
MutationObserver	API navigateur pour observer les modifications du DOM.
MVP	Minimum Viable Product — Version minimale d'un produit pour valider une hypothèse.

N

Terme	Définition
NPM	Node Package Manager — Gestionnaire de paquets Node.js (et registry de packages).
Nullish Coalescing	Opérateur ES2020 `??` qui retourne la valeur de droite si la gauche est `null` ou `undefined`.
NVM	Node Version Manager — Gestionnaire de versions Node.js.

O

Terme	Définition
Observer Pattern	Pattern où un objet (subject) notifie des observateurs de ses changements d'état.
OCP	Open/Closed Principle — Principe SOLID : ouvert à l'extension, fermé à la modification.
Optional Chaining	Opérateur ES2020 `?.` pour accéder aux propriétés sans erreur si intermédiaire null.
OT	Operational Transformation — Algorithme de résolution de conflits pour l'édition collaborative.

P

Terme	Définition
Paint	Étape du rendu où les pixels sont dessinés à l'écran.
Polyfill	Code qui implémente une fonctionnalité moderne dans les navigateurs qui ne la supportent pas.
Prettier	Formateur de code opinionné (JS, CSS, HTML, JSON, Markdown).
Promise	Objet ES6 représentant une valeur asynchrone future (pending → fulfilled/rejected).
Prop Drilling	Passage de props à travers plusieurs niveaux de composants (problème résolu par Context).
Prototype	Mécanisme d'héritage JS : chaque objet a un prototype dont il hérite des propriétés.
Proxy	Objet ES6 qui intercepte les opérations sur un autre objet (get, set, deleteProperty).
PWA	Progressive Web App — Application web qui peut être installée et fonctionner hors-ligne.

Q

Terme	Définition
QPS	Queries Per Second — Métrique de débit pour un serveur/API.
Quirks Mode	Mode de compatibilité navigateur pour les pages HTML anciennes (nécessite un DOCTYPE).

R

Terme	Définition
rAF	requestAnimationFrame — API navigateur pour des animations fluides synchronisées avec le refresh rate.
Reconciliation	Algorithme React qui compare deux arbres VDOM et applique les changements minimaux au DOM.
Reflow	Recalcul des positions/dimensions des éléments après un changement de layout (coûteux).
RegExp	Expression régulière — Langage de motifs pour la recherche/remplacement dans les chaînes.
Render	Processus de conversion du code (React/Vue) en DOM réel.
Repaint	Redessinage des pixels sans changement de layout (moins coûteux que reflow).
Repository	Objet DDD/Fowler qui abstrait l'accès aux données (source de données).
REST	Representational State Transfer — Style d'architecture API (CRUD via HTTP methods).
RSC	React Server Components — Composants React rendus côté serveur (Next.js App Router).
RUM	Real User Monitoring — Collecte de métriques de performance depuis les vrais utilisateurs.

S

Terme	Définition
Sass/SCSS	Préprocesseur CSS (variables, nesting, mixins, fonctions).
SDK	Software Development Kit — Ensemble d'outils pour développer sur une plateforme spécifique.
SEO	Search Engine Optimization — Optimisation pour les moteurs de recherche.
Serverless	Modèle de cloud où le fournisseur gère l'infrastructure (AWS Lambda, Vercel Functions).
Shadow DOM	API Web Components pour encapsuler le style et le DOM d'un composant.
SIP	Single Immutable Principle — Ne pas modifier les objets, en créer de nouveaux.
Skeleton Screen	Écran de chargement qui montre la structure de la page (améliore la perception de performance).
SOLID	Principes de conception OO : Single Responsibility, Open/Closed, Liskov, Interface Segregation, Dependency Inversion.
SPA	Single Page Application — Application web qui s'exécute dans une seule page HTML.
Specification	Motif DDD encapsulant une règle métier booléenne (ex: `isEligibleForDiscount`).
SSG	Static Site Generator — Générateur de sites statiques (Next.js SSG, Astro, Eleventy).
SSR	Server-Side Rendering — Rendu de l'application sur le serveur avant envoi au client.
SSR Streaming	Envoi progressif du HTML au fur et à mesure du rendu serveur (React Suspense streaming).
State Machine	Modèle mathématique d'un système qui peut être dans un état précis à un moment donné (XState).
Statement (JS)	Instruction qui exécute une action (ex: `if`, `for`, `return`, `let x = 1`).
Strict Mode	Mode JS (`'use strict'`) qui applique des règles plus strictes et lance plus d'erreurs.
SVG	Scalable Vector Graphics — Format d'image vectorielle natif du navigateur.
SWC	Speedy Web Compiler — Transpiler/bundler Rust (100x plus rapide que Babel).
Symbol	Type primitif ES6 pour des identifiants uniques (souvent utilisés comme clés de propriétés privées).
Synthetic Event	Abstraction React des événements navigateur pour la compatibilité cross-browser.

T

Terme	Définition
TBT	Total Blocking Time — Métrique mesurant le temps pendant lequel le thread principal est bloqué.
TC39	Technical Committee 39 — Comité qui standardise ECMAScript (JavaScript).
TCO	Tail Call Optimization — Optimisation des appels récursifs en queue (peu supporté en JS).
TDZ	Temporal Dead Zone — Période entre l'entrée dans un scope et la déclaration d'une variable let/const.
Throttle	Technique qui limite l'exécution d'une fonction à un intervalle maximum (ex: 1 fois par seconde).
TLS	Transport Layer Security — Protocole de chiffrement des communications (HTTPS).
Tree Shaking	Élimination du code mort lors du build (via static analysis des ES modules).
TS	TypeScript — Sur-ensemble typé de JavaScript par Microsoft.
TTFB	Time to First Byte — Temps entre la requête et le premier byte reçu du serveur.
TTI	Time to Interactive — Temps jusqu'à ce que la page soit interactive.
Tuple	Structure de données de taille fixe avec des éléments de types potentiellement différents (TypeScript / proposition JS).

U

Terme	Définition
UDP	User Datagram Protocol — Protocole de transport sans connexion (utilisé par HTTP/3, WebRTC).
UI	User Interface — Interface utilisateur.
Umami	Outil d'analytics web open-source et respectueux de la vie privée.
Unicode	Standard de codage de caractères (UTF-8, UTF-16).
URL	Uniform Resource Locator — Adresse d'une ressource sur le web.
UX	User Experience — Expérience utilisateur.

V

Terme	Définition
Value Object	Objet DDD défini par ses attributs (pas d'identité), immuable (ex: Money, Email, Color).
V8	Moteur JavaScript de Chrome (et Node.js, Deno, Electron).
VDOM	Virtual DOM — Représentation légère du DOM en mémoire (React, Vue, Preact).
Vite	Outil de build nouvelle génération (esbuild en dev, Rollup en prod).
Vue	Framework JavaScript progressif pour construire des UI.

W

Terme	Définition
W3C	World Wide Web Consortium — Organisation qui standardise les technologies web (HTML, CSS, WCAG).
WCAG	Web Content Accessibility Guidelines — Standards d'accessibilité web.
Web API	Interfaces de programmation fournies par le navigateur (DOM, Fetch, Canvas, WebGL, WebSocket).
Web Component	Standard de composant web réutilisable (Custom Elements, Shadow DOM, HTML Templates).
Web Worker	Thread d'exécution en arrière-plan pour ne pas bloquer l'UI.
WebAssembly	Format d'instruction binaire exécutable dans le navigateur (performant, multi-langage).
WebGL	API de rendu 3D dans le navigateur (basée sur OpenGL ES).
Webpack	Bundler historique, configurable, avec vaste écosystème de plugins/loaders.
WebRTC	API de communication temps réel (audio, vidéo, data) entre navigateurs.
WebSocket	Protocole de communication bidirectionnelle temps réel entre client et serveur.
WYSIWYG	What You See Is What You Get — Éditeur visuel (TinyMCE, Quill, ProseMirror, TipTap).

X

Terme	Définition
XHR	XMLHttpRequest — API historique pour les requêtes AJAX (pré-fetch, encore largement utilisée).
XSS	Cross-Site Scripting — Injection de code malveillant dans une page web.

Y

Terme	Définition
YAML	Yet Another Markup Language — Format de sérialisation de données (configurations CI/CD, Docker Compose).
Yarn	Gestionnaire de paquets alternatif à npm (Berry, PnP).
Yield	Mot-clé utilisé dans les generators pour suspendre et reprendre l'exécution.

Z

Terme	Définition
Z-Index	Propriété CSS qui contrôle l'ordre d'empilement sur l'axe Z (dépend du stacking context).
Zustand	Bibliothèque de state management React (petite, simple, performante).
ZX	Outil Google pour écrire des scripts shell en JavaScript/TypeScript.

2. Cheat Sheets

2.1 HTML Cheat Sheet

<!-- Structure de base -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre</title>
  <meta name="description" content="Description pour SEO">
</head>
<body>
  <!-- Header -->
  <header><nav><ul><li><a href="/">Accueil</a></li></ul></nav></header>

  <!-- Contenu principal -->
  <main>
    <section><h1>Titre</h1><p>Paragraphe</p></section>
    <article><h2>Article</h2><time datetime="2024-01-01">1er janvier</time></article>
    <aside>Contenu complémentaire</aside>
  </main>

  <!-- Footer -->
  <footer><small>&copy; 2024</small></footer>

  <!-- Formulaires -->
  <form action="/submit" method="POST" novalidate>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required autocomplete="email">
    <input type="text" inputmode="numeric" pattern="[0-9]*">
    <textarea rows="4" cols="50"></textarea>
    <select name="country">
      <optgroup label="Europe">
        <option value="fr">France</option>
      </optgroup>
    </select>
    <datalist id="suggestions"><option value="Paris"></datalist>
    <fieldset><legend>Préférences</legend>
      <label><input type="checkbox" name="newsletter"> Newsletter</label>
    </fieldset>
    <button type="submit">Envoyer</button>
  </form>

  <!-- Media -->
  <picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Description" loading="lazy" decoding="async" width="800" height="600">
  </picture>
  <video controls preload="metadata" poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="fr" label="Français">
  </video>

  <!-- Sémantique -->
  <details><summary>Plus d'infos</summary><p>Contenu masqué</p></details>
  <dialog open><p>Modal natif</p><button onclick="this.closest('dialog').close()">Fermer</button></dialog>
  <progress value="70" max="100"></progress>
  <meter value="0.7" min="0" max="1">70%</meter>
</body>
</html>

2.2 CSS Cheat Sheet

/* Reset minimal */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Variables */
:root {
  --primary: #0070f3;
  --font-base: 16px;
  --spacing-unit: 8px;
}

/* Layout */
/* Flexbox 1D */
.flex-row { display: flex; gap: var(--spacing-unit); }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* Grid 2D */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.grid-sidebar { display: grid; grid-template-columns: 250px 1fr; gap: 24px; }

/* Typographie */
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.clamp-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Espacement */
.m-1 { margin: 4px; } .p-1 { padding: 4px; }
.m-2 { margin: 8px; } .p-2 { padding: 8px; }
.m-4 { margin: 16px; } .p-4 { padding: 16px; }
.m-8 { margin: 32px; } .p-8 { padding: 32px; }

/* Conteneur responsive */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }

/* Media queries */
@media (max-width: 768px) { /* tablet/mobile */ }
@media (prefers-color-scheme: dark) { /* dark mode */ }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; } }
@container (max-width: 400px) { /* container query */ }

/* Aspect ratio */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1; }

/* Animation */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.3s ease-out; }

/* Focus visible */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Scrollbar custom */
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #ccc transparent; }

/* Sélecteurs avancés */
.parent:has(> .child) { /* parent conditionnel */ }
:is(h1, h2, h3) { font-weight: bold; }
:where(.dark, .high-contrast) .text { /* spécificité nulle */ }

2.3 JavaScript Cheat Sheet

// === TYPES ===
typeof 42             // "number"
typeof 'hello'        // "string"
typeof true           // "boolean"
typeof undefined      // "undefined"
typeof null           // "object" (bug)
typeof Symbol()       // "symbol"
typeof 42n            // "bigint"
typeof {}             // "object"
typeof []             // "object"
Array.isArray([])     // true

// === COERCION EXPLICITE ===
String(42)            // "42"
Number('42')          // 42
Boolean(0)            // false
!!0                   // false
parseInt('42px', 10)  // 42
+'42'                 // 42

// === FONCTIONS ===
// Arrow
const add = (a, b) => a + b;
// Default params
const greet = (name = 'World') => `Hello ${name}`;
// Rest params
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
// Spread
const merged = { ...obj1, ...obj2 };
const clone = [...arr];

// === TABLEAUX ===
arr.map(fn)           // transformation
arr.filter(fn)        // filtrage
arr.reduce(fn, init)  // accumulation
arr.find(fn)          // premier élément trouvé
arr.some(fn)          // au moins un ?
arr.every(fn)         // tous ?
arr.flat()            // aplatir 1 niveau
arr.flatMap(fn)       // map + flat
arr.at(-1)            // dernier élément
arr.toSorted()        // trié (copie)
arr.toReversed()      // inversé (copie)
arr.groupBy(fn)       // ES2024 : groupement

// === OBJETS ===
Object.keys(obj)      // clés
Object.values(obj)    // valeurs
Object.entries(obj)   // [clé, valeur]
Object.fromEntries(arr) // inverse de entries
Object.groupBy(arr, fn) // ES2024

// === PROMISES ===
Promise.resolve(value)
Promise.reject(error)
Promise.all([p1, p2])        // toutes ou une erreur
Promise.allSettled([p1, p2]) // toutes (résultat)
Promise.race([p1, p2])       // première
Promise.any([p1, p2])        // première réussie

// === OPTIONAL CHAINING & NULLISH ===
obj?.prop?.nested         // undefined safe
obj?.[key]                // bracket optional
fn?.()                    // function optional
value ?? defaultValue     // null/undefined → default
value || fallback         // falsy → fallback (0, '', false inclus)

// === DESTRUCTURING ===
const { name, age } = obj;
const [first, ...rest] = arr;
function fn({ name = 'default' } = {}) {}

// === DATE ===
new Date().toISOString()                    // "2024-01-01T00:00:00.000Z"
new Intl.DateTimeFormat('fr-FR').format(d)  // "01/01/2024"
Temporal.Now.plainDateISO()                 // Temporal API (ES2024+)

// === NUMBERS ===
Number.EPSILON                   // plus petite différence
Number.isNaN(NaN)                // true
Number.isFinite(Infinity)        // false
(0.1 + 0.2).toFixed(1)          // "0.3"

2.4 TypeScript Cheat Sheet

// === TYPES DE BASE ===
type User = {
  readonly id: string;     // immuable
  name: string;
  email?: string;          // optionnel
  role: 'admin' | 'user';  // union
};

// === INTERFACES ===
interface Animal {
  name: string;
  speak(): string;
}
interface Dog extends Animal {
  breed: string;
}

// === GENERICS ===
type Result<T, E = Error> = { success: true; data: T } | { success: false; error: E };
function identity<T>(arg: T): T { return arg; }

// === UTILITY TYPES ===
Partial<User>              // tout devient optionnel
Required<User>             // tout devient requis
Pick<User, 'id' | 'name'> // ne garde que ces props
Omit<User, 'email'>       // supprime ces props
Readonly<User>             // tout readonly
Record<K, V>              // objet avec clés K, valeurs V
ReturnType<typeof fn>     // type de retour de fn
Parameters<typeof fn>     // tuple des paramètres
Awaited<Promise<string>>  // string (dépaquète Promise)

// === TYPE GUARDS ===
function isString(v: unknown): v is string {
  return typeof v === 'string';
}

// === TEMPLATE LITERAL TYPES ===
type EventName = `on${Capitalize<string>}`;
type HexColor = `#${string}`;

// === SATISFIES ===
const config = { port: 3000, host: 'localhost' } satisfies Record<string, unknown>;

// === AS CONST ===
const Colors = { RED: '#ff0000', GREEN: '#00ff00' } as const;
type Color = keyof typeof Colors; // 'RED' | 'GREEN'

2.5 React Cheat Sheet

// === COMPOSANT ===
function Component({ name, children }: { name: string; children?: React.ReactNode }) {
  return <div>{children}</div>;
}

// === HOOKS ===
const [state, setState] = useState<Type>(initialValue);
useEffect(() => { /* effect */ return () => /* cleanup */ }, [deps]);
useRef<HTMLDivElement>(null);
useMemo(() => computeExpensive(a, b), [a, b]);
useCallback((arg: T) => doSomething(arg), [deps]);
useContext(MyContext);
useReducer(reducer, initialState);
useImperativeHandle(ref, () => ({ focus }), []);

// === CONTEXT ===
const Ctx = createContext<Type>(defaultValue);
<Ctx.Provider value={value}><App /></Ctx.Provider>;
const value = useContext(Ctx);

// === LAZY LOADING ===
const LazyComponent = React.lazy(() => import('./Component'));
<Suspense fallback={<Spinner />}><LazyComponent /></Suspense>;

// === MOMOIZATION ===
React.memo(Component);                    // skip re-render si props identiques
useMemo(() => expensive(a), [a]);          // memoize valeur
useCallback(fn, [deps]);                   // memoize fonction

// === PORTAL ===
createPortal(children, document.getElementById('portal')!);

// === ERROR BOUNDARY ===
class ErrorBoundary extends React.Component<{ fallback: ReactNode }> {
  state = { error: null };
  static getDerivedStateFromError(error) { return { error }; }
  render() { return this.state.error ? this.props.fallback : this.props.children; }
}

// === FORMS ===
<input value={value} onChange={e => setValue(e.target.value)} />;
<button type="submit" disabled={isLoading}>{isLoading ? 'Envoi...' : 'Envoyer'}</button>;

// === PATTERNS ===
// Compound Components
<Select value={val} onChange={setVal}>
  <Select.Option value="a">Option A</Select.Option>
  <Select.Option value="b">Option B</Select.Option>
</Select>;

// Render Props
<DataProvider render={data => <div>{data}</div>} />;

// Custom Hook
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  useEffect(() => {
    const update = () => setIsOnline(navigator.onLine);
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
    return () => { window.removeEventListener('online', update); window.removeEventListener('offline', update); };
  }, []);
  return isOnline;
}

2.6 Git Cheat Sheet

# === CONFIGURATION ===
git config --global user.name "Votre Nom"
git config --global user.email "email@example.com"
git config --global init.defaultBranch main
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.st status
git config --global alias.unstage 'reset HEAD --'

# === BRANCHES ===
git branch                    # lister les branches
git branch -a                 # toutes (locales + remote)
git branch feature-x          # créer une branche
git checkout feature-x        # switcher
git checkout -b feature-x     # créer + switcher
git branch -d feature-x       # supprimer (fusionnée)
git branch -D feature-x       # supprimer (force)
git merge feature-x           # fusionner dans la branche courante
git rebase main               # rejouer les commits sur main

# === COMMITS ===
git add .                     # stage tout
git add -p                    # stage interactif (par hunk)
git commit -m "feat: message"  # commit avec message
git commit --amend            # modifier dernier commit
git log --oneline --graph     # historique compact
git log --oneline -10         # 10 derniers commits
git diff                      # unstaged changes
git diff --staged             # staged changes

# === REMOTE ===
git remote -v                 # voir les remotes
git push origin branch        # pousser la branche
git push -u origin branch     # pousser + upstream
git push origin --delete branch  # supprimer remote
git pull origin main          # fetch + merge
git fetch origin              # fetch sans merge
git fetch --prune             # nettoyer les refs distantes

# === RESET / REVERT ===
git reset HEAD~1              # annuler dernier commit (garde les changes)
git reset --hard HEAD~1       # annuler dernier commit (perd les changes)
git revert HEAD               # créer un commit qui annule HEAD
git restore fichier.js        # restaurer un fichier
git stash                     # sauvegarder temporairement
git stash pop                 # restaurer + supprimer
git stash list                # lister les stashs

# === CHERRY-PICK / REBASE ===
git cherry-pick abc123        # appliquer un commit spécifique
git rebase -i HEAD~3          # rebase interactif (squash, reword, drop)
git rebase --abort            # annuler un rebase en cours
git rebase --continue         # continuer après résolution

# === TAGS ===
git tag v1.0.0                # créer un tag
git tag -a v1.0.0 -m "v1.0"  # tag annoté
git push origin --tags        # pousser les tags

3. Tableau des Compatibilités Navigateurs

Feature	Chrome	Firefox	Safari	Edge	Note
CSS Grid	57+	52+	10.1+	16+	Safari 10.1 supporte l'ancienne spec
CSS Container Queries	105+	110+	16+	105+	Stable depuis 2023
CSS :has()	105+	121+	15.4+	105+	Support partiel Safari < 15.4
CSS Layers (@layer)	99+	97+	15.4+	99+
CSS Subgrid	117+	71+	16+	117+
CSS Nesting (natif)	120+	117+	17.2+	120+	2024
JavaScript ES Modules	61+	54+	10.1+	79+	Safari nécessite `type="module"`
Dynamic Import	63+	67+	11+	79+
Optional Chaining (?.)	80+	74+	13.1+	80+
Nullish Coalescing (??)	80+	72+	13.1+	80+
Promise.allSettled	76+	71+	13+	79+
Promise.any	85+	79+	14+	85+
Array.at()	92+	90+	15.4+	92+
Array.findLast()	97+	104+	15.4+	97+
structuredClone()	98+	94+	15.4+	98+
Top-level await	89+	89+	15+	89+	Modules uniquement
Hashbang Grammar	74+	67+	13.1+	79+
Error Cause	93+	91+	15+	93+	`new Error('msg', { cause })`
RegExp Duplicate Named Groups	125+	136+	17+	125+	ES2025
Set Methods (intersection, union, etc.)	122+	127+	17+	122+	ES2025
Promise.withResolvers	119+	131+	16.4+	119+	ES2024
WebP Image	32+	65+	14+	79+
AVIF Image	85+	93+	16.1+	121+
WebGL 2.0	56+	51+	15+	79+
Web Workers	4+	3.5+	4+	12+	Très mature
Service Workers	40+	44+	11.1+	79+
WebSocket	4+	3+	5+	12+
WebRTC	28+	22+	11+	79+
IndexedDB	11+	4+	4+	12+
Intersection Observer	51+	55+	12.1+	79+
Resize Observer	64+	69+	13.1+	79+
Crypto API (Subtle)	37+	34+	7+	79+	HTTPS required
View Transitions API	111+	❌	❌	111+	Experimental
CSS Scroll-Driven Animations	115+	❌	❌	115+	Experimental

4. Référence Rapide : Accessibilité (ARIA)

4.1 Rôles ARIA Principaux

Rôle	Usage
`role="button"`	Élément cliquable qui n'est pas un `<button>`
`role="link"`	Élément qui navigue (préférer `<a>` natif)
`role="navigation"`	Zone de navigation (`<nav>` de préférence)
`role="main"`	Contenu principal (`<main>` de préférence)
`role="banner"`	En-tête de page (`<header>` de préférence)
`role="contentinfo"`	Footer (`<footer>` de préférence)
`role="complementary"`	Contenu complémentaire (`<aside>` de préférence)
`role="form"`	Formulaire (`<form>` de préférence)
`role="search"`	Barre de recherche
`role="alert"`	Message important (lecture immédiate par screen reader)
`role="dialog"`	Fenêtre modale
`role="tablist"`, `role="tab"`, `role="tabpanel"`	Système d'onglets
`role="listbox"`, `role="option"`	Liste de sélection
`role="combobox"`	Autocomplete
`role="progressbar"`	Barre de progression
`role="status"`	État mis à jour dynamiquement
`role="switch"`	Toggle binaire
`role="tooltip"`	Infobulle
`role="tree"`, `role="treeitem"`	Arborescence

4.2 Attributs ARIA Essentiels

Attribut	Usage
`aria-label="Description"`	Label pour les éléments sans texte visible
`aria-labelledby="id"`	Référence à un élément qui sert de label
`aria-describedby="id"`	Référence à une description détaillée
`aria-hidden="true"`	Masquer un élément des screen readers
`aria-expanded="true/false"`	État déplié/replié (accordéon, menu)
`aria-pressed="true/false"`	État pressé (toggle button)
`aria-current="page/step/location"`	Élément actif dans une liste
`aria-selected="true/false"`	Élément sélectionné (onglet, option)
`aria-checked="mixed/true/false"`	État de checkbox (mixed = indéterminé)
`aria-disabled="true"`	Élément désactivé (permet focus contrairement à disabled)
`aria-required="true"`	Champ obligatoire
`aria-invalid="true"`	Champ avec erreur de validation
`aria-errormessage="id"`	Référence au message d'erreur
`aria-live="polite/assertive/off"`	Annoncer les mises à jour dynamiques
`aria-atomic="true"`	Lire tout le contenu même si seul un sous-élément change
`aria-relevant="additions/removals/text"`	Quels types de changements annoncer
`aria-sort="ascending/descending/none"`	Tri dans un tableau
`aria-haspopup="menu/listbox/dialog/grid"`	Indique un popup
`aria-controls="id"`	Contrôle un autre élément
`aria-owns="id"`	Relation parent-enfant non-DOM
`aria-activedescendant="id"`	Élément actif dans une liste (autocomplete)
`aria-dropeffect="move/copy/execute/none"`	Effet de glisser-déposer
`aria-grabbed="true/false"`	État de saisie pour glisser-déposer

4.3 Check-list Accessibilité

✅ Structure sémantique (landmarks : header, nav, main, footer)
✅ Titres hiérarchiques (h1 → h6, pas de saut de niveau)
✅ Images avec alt text descriptif (alt="" si décorative)
✅ Contrastes WCAG AA (4.5:1 pour texte normal, 3:1 pour grand)
✅ Focus visible (outline sur :focus-visible)
✅ Labels associés aux inputs (label htmlFor ou aria-label)
✅ Messages d'erreur associés (aria-describedby, aria-invalid)
✅ Navigation clavier (Tab, Enter, Escape, Arrow keys)
✅ Skip links (lien "Aller au contenu")
✅ Announcement des changements dynamiques (aria-live)
✅ Touch targets (min 44×44px)
✅ Test avec screen reader (NVDA, VoiceOver, Orca)
✅ Test avec zoom (200%)
✅ Test sans couleur
✅ Test sans souris (clavier uniquement)

5. Référence Rapide : Performance (Core Web Vitals)

5.1 Les 3 (ou 4) Core Web Vitals

Métrique	Ce qu'elle mesure	Seuil Good	Seuil Poor	Amélioration
LCP (Largest Contentful Paint)	Chargement perçu (hero image, titre)	≤ 2.5s	> 4.0s	Optimiser images, preload, SSR
INP (Interaction to Next Paint)	Réactivité aux interactions (← remplace FID en 2024)	≤ 200ms	> 500ms	Éviter long tasks, code splitting
CLS (Cumulative Layout Shift)	Stabilité visuelle	≤ 0.1	> 0.25	Dimensions explicites, éviter injections tardives
TBT (Total Blocking Time)	Blocage du thread principal	≤ 200ms	> 600ms	Web Workers, lazy loading

5.2 Stratégies d'Optimisation par Métrique

LCP :
  - Preload LCP resource (hero image, font)
  - SSR/SSG pour le contenu critique
  - Optimiser les images (AVIF/WebP, responsive)
  - Éliminer les render-blocking resources
  - CDN + caching agressif

INP :
  - Éviter les long tasks (> 50ms)
  - Code splitting + lazy loading
  - Web Workers pour les calculs lourds
  - Debounce/throttle event handlers
  - main-thread scheduling (isInputPending)

CLS :
  - width + height explicites sur images/media
  - aspect-ratio CSS
  - Réserver l'espace pour les ads/embeds
  - Éviter d'injecter du contenu au-dessus du fold après load
  - Préférer transform: aux animations qui changent le layout

5.3 Métriques Secondaires

Métrique	Description	Bon
FCP (First Contentful Paint)	Premier texte/image visible	≤ 1.8s
TTFB (Time To First Byte)	Latence serveur	≤ 800ms
TTI (Time To Interactive)	Page complètement interactive	≤ 3.8s
FID (First Input Delay)	Défunt (remplacé par INP)	≤ 100ms
SI (Speed Index)	Rapidité de remplissage contenu	≤ 3.4s

6. Emojis de Commit Conventionnels

6.1 Conventional Commits avec Emojis

Emoji	Type	Signification
✨	`feat`	Nouvelle fonctionnalité
🐛	`fix`	Correction de bug
📚	`docs`	Documentation
💄	`style`	CSS, UI, style (non-fonctionnel)
♻️	`refactor`	Refactoring (ni feat ni fix)
⚡	`perf`	Amélioration de performance
✅	`test`	Ajout ou modification de tests
🔧	`chore`	Tâches techniques (deps, config)
🚀	`deploy`	Mise en production
🎨	`design`	Amélioration UI/UX
🔥	`remove`	Suppression de code/fichier
🏗️	`build`	Système de build
🚨	`lint`	Linting / corrections ESLint
🐳	`docker`	Docker
🔒	`security`	Sécurité
🌐	`i18n`	Internationalisation
📦	`package`	Mise à jour de packages
🚚	`rename`	Renommage de fichier
🗑️	`deprecate`	Dépréciation
🧪	`experiment`	Expérimental
⏪	`revert`	Annulation de commit
⬆️	`upgrade`	Mise à jour de dépendance
⬇️	`downgrade`	Rétrogradation de dépendance
👷	`ci`	CI/CD
🚑	`hotfix`	Correction urgente
💚	`fix-ci`	Correction CI
📱	`responsive`	Responsive design
♿	`a11y`	Accessibilité
🌱	`init`	Initialisation

6.2 Format Recommandé

<emoji> <type>(<scope optionnel>): <description>

[corps optionnel]

[pied optionnel : BREAKING CHANGE, footer]

Exemples :

✨ feat(api): ajouter l'endpoint de recherche

🐛 fix(auth): corriger le refresh token expiré

♻️ refactor(components): extraire le hook useDebounce

⚡ perf(images): migrer vers AVIF avec fallback WebP

📚 docs: mettre à jour le README avec les instructions d'installation

♿ a11y(nav): ajouter aria-current aux liens actifs

7. Commandes Git Essentielles

7.1 Débuter un Projet

git init                          # Initialiser un dépôt
git clone <url>                   # Cloner un dépôt distant
git clone --depth=1 <url>         # Cloner sans historique (shallow)
git remote add origin <url>       # Ajouter un remote

7.2 Workflow Quotidien

git pull --rebase                 # Fetch + rebase (évite le merge commit)
git add -A                        # Stage tout
git commit -m "feat: message"     # Commiter
git push origin branch            # Pousser
git push --force-with-lease       # Force push sécurisé

7.3 Réparer les Erreurs

git commit --amend -m "fix message"  # Changer le message du dernier commit
git commit --amend --no-edit          # Ajouter des changements au dernier commit
git reset HEAD~1                      # Défaire le dernier commit (garder les changes)
git reset --hard HEAD~1               # Défaire le dernier commit (perdre les changes)
git revert <hash>                     # Créer un commit inverse
git restore <file>                    # Restaurer un fichier modifié
git checkout -- <file>                # (ancienne syntaxe)

7.4 Branches

git branch -m main main-old          # Renommer une branche
git branch -d <branch>               # Supprimer (si fusionnée)
git branch -D <branch>               # Supprimer (force)
git push origin --delete <branch>    # Supprimer la branche distante
git merge --squash <branch>          # Fusionner en un seul commit

7.5 Stash

git stash push -m "WIP: message"     # Stasher avec message
git stash list                       # Lister
git stash apply stash@{0}            # Appliquer sans supprimer
git stash pop                        # Appliquer et supprimer
git stash drop stash@{0}             # Supprimer un stash
git stash clear                      # Vider tous les stashs

7.6 Bisect (Trouver un Bug)

git bisect start
git bisect bad                       # Commit actuel a le bug
git bisect good <tag>                # Tag où ça marchait
# Git checkout des commits automatiquement
# Tester et marquer : git bisect good / git bisect bad
git bisect reset                     # Terminer

7.7 Hooks Utiles

# .husky/pre-commit
npm run lint-staged                  # Linter les fichiers staged

# .husky/commit-msg
npx --no-install commitlint --edit $1  # Valider le message de commit

# .husky/pre-push
npm run test                         # Lancer les tests avant push

8. API Browser Utiles

8.1 API de Base

API	Usage	Exemple
fetch()	Requêtes HTTP	`fetch('/api').then(r => r.json())`
localStorage	Stockage persistant (5MB)	`localStorage.setItem('key', 'val')`
sessionStorage	Stockage session	`sessionStorage.getItem('key')`
cookies	`document.cookie`	Lecture/écriture de cookies
URL	Parsing URL	`new URL('https://example.com')`
FormData	Données formulaire	`new FormData(form)`
AbortController	Annulation requête	`controller.abort()`

8.2 DOM API

API	Usage	Exemple
querySelector	Sélection CSS	`document.querySelector('.class')`
Element.closest()	Ancêtre CSS	`el.closest('.container')`
IntersectionObserver	Visibilité	`new IntersectionObserver(cb).observe(el)`
ResizeObserver	Changement taille	`new ResizeObserver(cb).observe(el)`
MutationObserver	Changement DOM	`new MutationObserver(cb).observe(el, config)`
Element.scrollIntoView()	Scroll automatique	`el.scrollIntoView({ behavior: 'smooth' })`
Element.matches()	Test CSS selector	`el.matches(':hover')`
dataset	Data attributes	`el.dataset.userId`
classList	Gestion classes	`el.classList.toggle('active')`
createElement	Création d'élément	`document.createElement('div')`
DocumentFragment	DOM hors-ligne	`fragment.append(...nodes)`
Node.isConnected	Test dans le DOM	`el.isConnected`

8.3 Network et Communication

API	Usage
navigator.onLine	Statut connexion
WebSocket	Communication bidirectionnelle
EventSource	Server-Sent Events (unidirectionnel)
WebRTC	Communication P2P (audio, vidéo, data)
BroadcastChannel	Communication inter-onglets
navigator.sendBeacon()	Envoi analytique fiable (même en déchargement)
Cache API	Cache programmatique (Service Worker)

8.4 Performance et Monitoring

API	Usage
Performance API	`performance.now()`, `performance.mark()`
PerformanceObserver	Observer les métriques (LCP, CLS, etc.)
navigator.connection	Type de connexion (4g, 3g, slow-2g)
navigator.hardwareConcurrency	Nombre de CPU (pour Workers)
navigator.deviceMemory	RAM disponible
requestIdleCallback()	Exécuter pendant les temps morts
AbortSignal.timeout()	Timeout avec AbortController

8.5 Device APIs

API	Usage
Geolocation	Position GPS
navigator.mediaDevices	Caméra/micro
navigator.clipboard	Presse-papier
navigator.share	Web Share API
navigator.vibrate	Vibration
Screen Orientation	Orientation écran
Battery API	Niveau batterie
navigator.credentials	Credential Management
File System Access	Accès fichiers système
Screen Wake Lock	Empêcher veille

8.6 Storage APIs

API	Taille	Persistance	Async	Usage
localStorage	~5MB	Oui	Non	Préférences, tokens
sessionStorage	~5MB	Session	Non	Données temporaires
IndexedDB	Beaucoup (gigaoctets)	Oui	Oui	Grandes données, offline
Cache API	Variable	Oui (SW)	Oui	Resources réseau
Cookie	~4KB	Oui	Non	Auth, sessions
OPFS (Origin Private FS)	Beaucoup	Oui	Oui	Fichiers (navigateur)

8.7 APIs Graphiques et Rendu

API	Usage
Canvas 2D	Dessin 2D programmatique
WebGL	Rendu 3D (basé OpenGL)
WebGPU	Rendu 3D nouvelle génération (2024+)
SVG	Graphiques vectoriels (déclaratif)
OffscreenCanvas	Canvas en Web Worker
ImageBitmap	Décodage d'image optimisé
requestAnimationFrame	Animations synchronisées
View Transitions API	Transitions de pages natives

8.8 APIs Avancées

API	Usage
Service Worker	Proxy réseau, offline, push notifications
Web Worker / SharedWorker	Threads en arrière-plan
WebAssembly	Exécution de code natif dans le navigateur
WebAuthn	Authentification sans mot de passe (FIDO2)
Payment Request	Paiement natif dans le navigateur
Credential Management	Gestion des identifiants
Content Index	Indexation du contenu hors-ligne
Periodic Background Sync	Synchro périodique en arrière-plan
Push API	Notifications push natives
Notification API	Notifications système
Speech Synthesis	Synthèse vocale
Speech Recognition	Reconnaissance vocale
Web Bluetooth	Communication Bluetooth
Web USB	Communication USB
Web Serial	Communication série
Web NFC	Communication NFC
Web MIDI	Périphériques MIDI
Gamepad API	Manettes de jeu
Pointer Lock	Verrouillage du pointeur
Fullscreen API	Plein écran
Screen Capture	Capture d'écran
EyeDropper	Pipette de couleur
CSS Painting API (Houdini)	Paint Worklet personnalisé

9. Conclusion

Les annexes de ce chapitre sont conçues comme une référence quotidienne. Que vous prépariez un entretien, que vous cherchiez la syntaxe d'une API, ou que vous vouliez vérifier un attribut ARIA, ces pages doivent être votre premier réflexe avant Google.

Imprimez les cheat sheets. Collez le glossaire au mur. Gardez le tableau de compatibilité sous le coude. La connaissance technique n'est pas de tout retenir par cœur, mais de savoir où trouver l'information rapidement.