Lexique Dev — +1432 définitions

!default assigne une valeur seulement si la variable n'existe pas encore (idéal pour les librairies). !global rend une variable locale accessible dans le scope global.

!default c'est 'sauf avis contraire', !global c'est 'je crie pour que tout le monde entende'.

// Librairie
$primary: blue !default; // Overridable
$border-radius: 4px !default;

// Projet utilisateur (avant @use)
$primary: red; // Override la valeur

// !global (a eviter si possible)
@mixin set-theme($color) {
  $theme-color: $color !global;
}

Cas d'usage : Créer des librairies Sass configurables ou les utilisateurs peuvent overrider les valeurs par défaut.

Attribut natif de PHP 8.4 qui marque une fonction, une méthode, une constante de classe ou un cas d'enum comme déprécié. À l'appel, le moteur émet un E_USER_DEPRECATED avec le message et la version (since) fournis ; la réflexion expose isDeprecated().

L'étiquette « bientôt retiré de la vente » sur un produit encore en rayon.

class PhpVersion
{
  #[\Deprecated(
    message: "utilisez getVersion() à la place",
    since: "8.4",
  )]
  public function getPhpVersion(): string
  {
    return $this->getVersion();
  }
}
// Appel : Deprecated: Method PhpVersion::getPhpVersion()
// is deprecated since 8.4, utilisez getVersion() à la place

Cas d'usage : Faire évoluer une API publique de bibliothèque sans casser les utilisateurs, avec un signal uniforme pour les IDE et l'analyse statique.

Attribut de PHP 8.5 qui avertit (E_WARNING pour les fonctions natives, E_USER_WARNING pour le code utilisateur) quand la valeur de retour d'une fonction est ignorée. Le cast (void) marque un rejet volontaire. Appliqué nativement à flock() et aux méthodes set*() de DateTimeImmutable.

Le distributeur qui bipe si vous partez sans prendre votre carte.

#[\NoDiscard]
function getPhpVersion(): string {
  return 'PHP 8.5';
}

getPhpVersion();
// Warning: The return value should either be used
// or intentionally ignored

(void) getPhpVersion(); // rejet explicite, pas d'avertissement

// piège classique désormais signalé :
$date->setTime(0, 0); // DateTimeImmutable retourne une copie !

Cas d'usage : Objets immuables (with*/set* qui retournent une copie) et fonctions dont le retour porte un statut à vérifier.

Attribut de PHP 8.3 qui déclare qu'une méthode surcharge une méthode parente ou d'interface. Si aucune méthode correspondante n'existe (faute de frappe, renommage dans la classe mère), PHP lève une erreur fatale à la compilation au lieu de laisser une méthode orpheline silencieuse.

Le « répondre à » d'un courriel : si le message d'origine n'existe pas, la messagerie refuse d'envoyer.

class MyTest extends TestCase
{
  #[\Override]
  protected function taerDown(): void
  {
    // Fatal error: MyTest::taerDown() has #[\Override]
    // attribute, but no matching parent method exists
  }
}

Cas d'usage : Tests, hooks de framework et hiérarchies profondes : sécuriser les refactorisations de la classe mère.

Stage d'aggregation qui ajoute de nouveaux champs aux documents sans supprimer les champs existants. Alias de $set dans le contexte d'aggregation.

Coller un post-it supplémentaire sur une fiche sans rien effacer de ce qui est déjà écrit.

{ $addFields: {
  totalPrice: {
    $multiply: ['$price', '$quantity']
  },
  isExpensive: {
    $gt: ['$price', 100]
  }
}}

Cas d'usage : Enrichir les documents avec des champs calcules sans perdre les données originales.

Stage d'aggregation qui distribue les documents dans des intervalles (buckets) définis par des bornes. Utile pour créer des histogrammes ou des tranches.

Trier des élèves par tranche d'âge : 6-10, 11-14, 15-18 ans.

{ $bucket: {
  groupBy: '$age',
  boundaries: [0, 18, 30, 50, 100],
  default: 'Other',
  output: { count: { $sum: 1 } }
}}

Cas d'usage : Créer des rapports avec des tranches de prix, d'ages ou de scores.

Stage d'aggregation qui exécute plusieurs sous-pipelines en parallèle sur le même jeu de documents. Chaque sous-pipeline produit un résultat indépendant dans un seul document de sortie.

Un journaliste qui écrit trois angles différents du même evenement en même temps.

{ $facet: {
  byCategory: [
    { $group: { _id: '$cat', n: { $sum: 1 } } }
  ],
  priceStats: [
    { $group: { _id: null, avg: { $avg: '$price' } } }
  ],
  total: [{ $count: 'count' }]
}}

Cas d'usage : Générer un dashboard avec des statistiques multiples en un seul appel a la base.

Stage d'aggregation qui regroupe les documents par une clé (_id) et applique des accumulateurs ($sum, $avg, $max, $min, $push, $first). Équivalent du GROUP BY en SQL.

Trier des billes par couleur dans des bols différents, puis compter combien il y en a dans chaque bol.

{ $group: {
  _id: '$category',
  count: { $sum: 1 },
  avgPrice: { $avg: '$price' },
  items: { $push: '$name' }
}}

Cas d'usage : Calculer des métriques agrégées par catégorie, utilisateur, période ou tout autre critère de regroupement.

Stage d'aggregation qui réalise une jointure gauche (LEFT JOIN) entre deux collections. Ajoute un tableau de documents correspondants depuis la collection jointe.

Appeler le service comptabilité pour joindre les factures de chaque client a leur fiche.

{ $lookup: {
  from: 'orders',
  localField: '_id',
  foreignField: 'userId',
  as: 'userOrders'
}}

Cas d'usage : Combiner des données de collections séparées quand l'embedding n'est pas adapte.

Stage d'aggregation qui filtre les documents, équivalent du WHERE en SQL. Place en début de pipeline, il utilise les index pour optimiser les performances.

Le vigile a l'entrée de la boite de nuit : seuls ceux qui remplissent les critères passent.

{ $match: {
  status: 'active',
  createdAt: { $gte: new Date('2024-01-01') }
}}

Cas d'usage : Filtrer les documents en amont du pipeline pour réduire le volume de données traite par les stages suivants.

Stage d'aggregation qui restructure les documents en incluant, excluant ou créant de nouveaux champs calcules. Permet de renommer des champs et d'appliquer des expressions.

Un monteur vidéo qui sélectionne les scènes a garder et ajoute des effets spéciaux.

{ $project: {
  fullName: { $concat: ['$first', ' ', '$last'] },
  year: { $year: '$createdAt' },
  _id: 0
}}

Cas d'usage : Formater la sortie de l'aggregation pour qu'elle corresponde exactement au format attendu par le frontend.

Stage d'aggregation, généralement disponible (GA) depuis MongoDB 8.0, qui combine les classements de plusieurs sous-pipelines (par exemple recherche vectorielle et recherche full-text) en un seul classement hybride pondéré.

Comme un jury qui fusionne les notes de plusieurs juges (recherche vectorielle, recherche texte) en un classement final unique.

db.products.aggregate([
  { $rankFusion: {
    input: { pipelines: {
      vector: [{ $vectorSearch: {
        index: 'v_idx', path: 'emb',
        queryVector: [0.1, 0.2], limit: 20
      }}],
      text: [{ $search: {
        text: { query: 'chaussures', path: 'name' }
      }}]
    }}
  }}
]);

Cas d'usage : Combiner recherche sémantique et recherche full-text pour un classement de résultats plus pertinent (hybrid search).

Stage d'aggregation, généralement disponible (GA) depuis MongoDB 8.3 (4 mai 2026), qui combine les scores de plusieurs sous-pipelines selon une formule explicite plutôt que par simple fusion de rangs comme $rankFusion.

La ou $rankFusion fusionne des classements, $scoreFusion fusionne des notes chiffrées selon une formule choisie.

db.articles.aggregate([
  { $scoreFusion: {
    input: {
      pipelines: {
        recent: [{ $addFields: {
          score: { $divide: [1, '$ageInDays'] }
        }}],
        relevance: [{ $search: {
          text: { query: 'ia', path: 'title' }
        }}]
      },
      normalization: 'minMaxScaler'
    }
  }}
]);

Cas d'usage : Construire un score composite (fraîcheur + pertinence textuelle) pour trier un fil d'actualité.

Stage d'aggregation qui decompacte un champ tableau en créant un document par élément. Transforme un document avec un tableau de N éléments en N documents.

Ouvrir un paquet de bonbons et poser chaque bonbon sur la table individuellement.

// { tags: ['js', 'mongo'] } devient :
// { tags: 'js' }
// { tags: 'mongo' }
{ $unwind: '$tags' }

Cas d'usage : Préparer les données d'un tableau pour un $group ou un $sort sur les éléments individuels.

Stage d'aggregation qui effectue une recherche sémantique par similarité vectorielle sur un index Atlas Vector Search. Disponible sur Atlas 6.0.11+ et sur MongoDB Enterprise/Community 8.2+ ; chaque document retourne inclut un score de similarité entre 0 et 1.

Comme chercher une chanson en fredonnant l'air plutôt qu'en tapant son titre exact : on cherche par proximité de sens, pas par égalité de texte.

db.movies.aggregate([
  { $vectorSearch: {
    index: 'vector_index',
    path: 'plotEmbedding',
    queryVector: [0.12, -0.45, 0.88],
    numCandidates: 150,
    limit: 10
  }}
]);

Cas d'usage : Recherche sémantique (RAG, recommandation) sur des embeddings générés par un modèle IA.

Méthode de la classe $wpdb pour créer des requêtes SQL paramétrées dans WordPress. Équivalent des prepared statements PDO, adapte a l'écosystème WP.

Comme un coffre-fort avec une serrure a combinaison : les données ne peuvent pas s'échapper du cadre prévu.

global $wpdb;
$results = $wpdb->get_results(
  $wpdb->prepare(
    "SELECT * FROM {$wpdb->posts}
     WHERE post_author = %d AND post_status = %s",
    $authorId, 'publish'
  )
);

Cas d'usage : Pour toute requête SQL directe dans WordPress qui inclut des variables.

Directive Next.js (expérimentale en 15, activée par cacheComponents: true depuis Next.js 16, 21 octobre 2025) qui rend cachable une page, un composant ou une fonction async. La clé de cache est dérivée automatiquement par le compilateur (ID de build, ID de fonction, arguments et variables capturées). Tout ce qui n'est pas marqué est dynamique par défaut : le cache implicite de l'ancien App Router disparaît. Les portées 'use cache' constituent la coquille statique du Partial Prerendering.

Un plat cuisiné sous vide : préparé une fois, réchauffé à chaque service tant que la date (cacheLife) n'est pas dépassée.

// next.config.ts
export default { cacheComponents: true };

// lib/data.ts
import { cacheLife, cacheTag } from 'next/cache';
export async function getProducts(category: string) {
  'use cache';
  cacheLife('hours');            // durée explicite recommandée
  cacheTag('products');          // invalidation ciblée
  return db.products.findMany({ where: { category } });
}
// Composant entier cachable (doit être async)
export async function Footer() { 'use cache'; return <footer>…</footer>; }

Cas d'usage : Mettre en cache des requêtes BDD ou des blocs de page coûteux tout en gardant le reste dynamique, avec navigation instantanée côté client.

Directive qui marque un composant comme Client Component, activant l'interactivité (state, effets, handlers). Frontière entre serveur et client dans l'arbre.

Comme le panneau 'zone libre-service' dans un magasin : a partir de la, c'est le client qui interagit.

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Cas d'usage : Composants interactifs : formulaires, boutons, modales, tout ce qui a besoin de state ou d'event handlers.

Directive qui marque une fonction (ou tout un module) comme Server Function : elle s'exécute sur le serveur mais le client en reçoit une référence appelable, comme un RPC. Elle ne marque PAS un Server Component : les composants serveur sont le défaut, sans directive.

Comme un bouton dans un ascenseur : tu appuies cote client, mais le moteur (serveur) fait tout le travail.

'use server';

export async function createUser(formData) {
  const name = formData.get('name');
  await db.insert({ name });
  revalidatePath('/users');
}

Cas d'usage : Mutations de données (formulaires, CRUD) sans créer de route API séparée.

Option introduite en TypeScript 5.8 (28 février 2025) qui interdit toute syntaxe TypeScript nécessitant une génération de code : enum, namespace contenant du code, propriétés de paramètre de constructeur, import x = require(). Elle garantit que le fichier peut être exécuté par simple effacement des types, comme le fait Node.js (type stripping, stable en 24.12.0 et 25.2.0). La documentation Node la recommande avec verbatimModuleSyntax.

N'écrire qu'au crayon sur la copie : la gomme suffit pour retrouver le texte original.

// tsconfig.json
// { "compilerOptions": { "erasableSyntaxOnly": true, "verbatimModuleSyntax": true } }

// ❌ Refusé : nécessite du code généré
enum Statut { Actif, Inactif }
class A { constructor(private x: number) {} }

// ✅ Effaçable
const Statut = { Actif: 0, Inactif: 1 } as const;
type Statut = (typeof Statut)[keyof typeof Statut];
class B { #x: number; constructor(x: number) { this.#x = x; } }

Cas d'usage : Tout projet exécuté par node fichier.ts, Bun ou Deno sans build, ou transpilé par un outil sans typechecker.

Option introduite en TypeScript 5.5 (20 juin 2024) qui exige une annotation de type explicite sur chaque export dont le type ne se déduit pas trivialement. En échange, les fichiers .d.ts peuvent être générés fichier par fichier, sans vérification de type globale, donc en parallèle et par des outils non-TS (Oxc, esbuild, SWC). Pensée pour les monorepos.

Chaque colis porte son étiquette complète : n'importe quel trieur peut le router sans ouvrir les autres colis.

// tsconfig.json : { "compilerOptions": { "isolatedDeclarations": true, "declaration": true } }

// ❌ Erreur TS9007 : le type de retour doit être annoté
export function creer(n: number) { return { id: n, tags: [] }; }

// ✅ Le .d.ts se déduit sans typechecker
export function creer(n: number): { id: number; tags: string[] } {
  return { id: n, tags: [] };
}

Cas d'usage : Monorepos où la génération des .d.ts est le goulot du build ; bibliothèques publiées avec un bundler Rust.

Stratégie de résolution des modules ajoutée en TypeScript 5.0 (16 mars 2023) pour les projets construits par Vite, esbuild, webpack ou Rolldown : elle comprend le champ exports et les conditions de package.json comme Node, mais tolère les imports sans extension et n'exige pas de syntaxe CommonJS. TypeScript 7.0 (8 juillet 2026) supprime les anciennes stratégies classic, node et node10 ; bundler et nodenext deviennent les deux choix courants.

Le plan de métro adapté à la ligne qu'on prend vraiment, plutôt que la carte routière nationale.

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "allowImportingTsExtensions": true
  }
}

Cas d'usage : Applications front bundlées : le bundler émet le JavaScript, tsc ne fait que vérifier les types.

Option introduite en TypeScript 5.0 (16 mars 2023) : les imports et exports sont conservés tels qu'écrits, et seuls ceux marqués type sont supprimés. Fini l'élision implicite des imports « probablement de type » : le code émis est prévisible, ce qui est indispensable aux transpileurs fichier par fichier et au type stripping de Node.js, qui la recommande avec erasableSyntaxOnly.

Le traducteur qui rend chaque phrase mot pour mot au lieu de décider ce qui « ne sert à rien ».

// tsconfig.json : { "compilerOptions": { "verbatimModuleSyntax": true } }

import type { Utilisateur } from './types.ts';  // effacé
import { type Role, charger } from './api.ts'; // Role effacé, charger gardé

// ❌ Erreur : Utilisateur est un type, il faut `import type`
// import { Utilisateur } from './types.ts';

export type { Utilisateur };

Cas d'usage : Projets ESM modernes, bibliothèques, exécution directe par Node/Bun/Deno, builds Vite/esbuild/Oxc.

Méthode chainable qui attache des attributs par défaut ou calcules a un styled component. Évite de répéter les mêmes props a chaque utilisation.

Les réglages par défaut d'un appareil : tu les configures une fois, plus besoin d'y penser.

const Input = styled.input.attrs(({ $size }) => ({
  type: 'text',
  size: $size || '1em',
}))`
  padding: ${({ size }) => size};
  border: 1px solid #ccc;
  border-radius: 4px;
`
// <Input $size="2em" />

Cas d'usage : Définir des attributs HTML par défaut (type, role, aria-*) sur un styled component.

Fichier listant les patterns à exclure du contexte de build Docker. Réduit la taille du contexte envoyé au daemon.

La liste des choses à NE PAS mettre dans la valise avant un voyage.

node_modules
.git
.env
dist
*.md
.DS_Store

Cas d'usage : Accélérer le build et éviter de copier des fichiers sensibles ou inutiles dans l'image.

Code de statut HTTP informatif défini par la RFC 8297 : pendant que le serveur prépare la vraie réponse (requête en base, rendu), il envoie d'abord un 103 contenant des en-têtes Link (preload, preconnect) pour que le navigateur commence à charger CSS, polices et scripts. Chrome le supporte depuis la version 103, uniquement sur HTTP/2 et HTTP/3 ; Cloudflare peut le générer automatiquement à partir des en-têtes Link de vos pages.

Le serveur du restaurant qui vous apporte pain et couverts dès la commande, sans attendre que le plat soit prêt en cuisine.

// Node.js >= 18 : res.writeEarlyHints (HTTP/2 côté proxy pour Chrome)
import http from 'node:http';

http.createServer(async (req, res) => {
  res.writeEarlyHints({
    link: [
      '</styles/app.css>; rel=preload; as=style',
      '</fonts/inter.woff2>; rel=preload; as=font; crossorigin',
      '<https://api.example.com>; rel=preconnect',
    ],
  });                                   // 103 part immédiatement
  const html = await renderPage(req);   // travail lent (BDD, SSR)
  res.writeHead(200, { 'content-type': 'text/html' });
  res.end(html);                        // 200 final
}).listen(3000);

Cas d'usage : Pages rendues côté serveur avec un TTFB de plusieurs centaines de millisecondes : les ressources critiques se chargent pendant l'attente.

Méthodologie en 12 principes pour construire des applications cloud-native. Inclut config via env vars, stateless processes, port binding, logs as streams.

Les 12 commandements du développeur cloud : suis-les et ton app tournera partout sans problème.

// Factor 3 : Config via env vars
const dbUrl = process.env.DATABASE_URL;
// Factor 6 : Stateless processes
// Pas de state en mémoire locale
// Factor 11 : Logs as event streams
process.stdout.write(JSON.stringify(logEvent));

Cas d'usage : Concevoir des applications facilement déployables sur n'importe quel cloud ou PaaS.

Authentification multi-facteurs combinant quelque chose que l'utilisateur sait (mot de passe), possède (téléphone/clé) ou est (biométrie). Réduit drastiquement les compromissions.

Entrer dans un coffre-fort de banque avec une clé ET un code : voler l'un sans l'autre est inutile.

import { authenticator } from 'otplib';
const secret = authenticator.generateSecret();
const qrUrl = authenticator.keyuri(user.email, 'MyApp', secret);
// Verification
const isValid = authenticator.verify({
  token: userInput, secret: user.totpSecret
});

Cas d'usage : Ajouter une couche de sécurité obligatoire pour les comptes admin et les opérations sensibles.

Architecture de fichiers Sass en 7 dossiers (abstracts, base, components, layout, pages, themes, vendors) et 1 fichier main.scss qui les importe tous.

Un classeur avec 7 intercalaires et une table des matières : tout est range et facile a trouver.

sass/
  abstracts/  (_variables, _mixins, _functions)
  base/       (_reset, _typography)
  components/ (_button, _card, _modal)
  layout/     (_header, _footer, _grid)
  pages/      (_home, _about)
  themes/     (_dark, _light)
  vendors/    (_bootstrap)
  main.scss   (importe tout)

Cas d'usage : Organiser un projet CSS moyen/grand pour que chaque développeur sache ou trouver et ajouter du code.

Pseudo-classe relationnelle surnommée 'sélecteur parent'. Permet de cibler un élément en fonction de ses descendants, frères ou états internes sans JavaScript.

Comme dire 'la maison QUI A un jardin' : on sélectionne le parent selon ce qu'il contient.

/* Card avec image = layout horizontal */
.card:has(img) { display: flex; }
/* Form avec champ invalide = bordure rouge */
form:has(:invalid) { border: 2px solid red; }
/* Label quand son input est focus */
label:has(+ input:focus) { color: blue; }

Cas d'usage : Adapter dynamiquement les styles parents selon le contenu ou l'état des enfants, sans JS.

Pseudo-classe fonctionnelle qui accepte une liste de sélecteurs et adopte la spécificité du sélecteur le plus spécifique de la liste. Simplifie les sélecteurs longs et répétitifs.

Comme un raccourci postal : au lieu d'écrire 3 adresses séparées, on les groupe en une seule ligne.

/* Avant : 3 règles répétitives */
article h1, article h2, article h3 { color: navy; }
/* Après : condensé avec :is() */
article :is(h1, h2, h3) { color: navy; }

Cas d'usage : Factoriser des sélecteurs CSS répétitifs pour réduire la taille et améliorer la lisibilité.

Identique à :is() en fonctionnalité mais avec une spécificité toujours à 0. Parfait pour les styles de base facilement surchargeables.

Comme une suggestion écrite au crayon : facile à effacer et remplacer par quelque chose d'autre.

/* Spécificité 0 : facile à surcharger */
:where(article, section, aside) h2 {
  font-size: 1.5rem;
}
/* N'importe quel sélecteur peut surcharger */
.custom h2 { font-size: 2rem; }

Cas d'usage : Définir des styles reset ou utilitaires de base qui doivent être facilement surchargeables.

Composant livré dans React 19.2 (1er octobre 2025) qui masque ou révèle un sous-arbre sans le démonter. En mode hidden, le contenu est caché en display: none, l'état React et le DOM (brouillon de textarea, position vidéo) sont conservés, les effets sont nettoyés et le rendu continue à basse priorité. Il permet aussi de pré-rendre en arrière-plan un écran pas encore visible.

Mettre une pièce en veille : lumières éteintes, mais les meubles restent en place pour le retour.

import { Activity } from 'react';

function App({ tab }) {
  return (
    <>
      <Activity mode={tab === 'home' ? 'visible' : 'hidden'}>
        <Home />     {/* état conservé quand on change d'onglet */}
      </Activity>
      <Activity mode={tab === 'posts' ? 'visible' : 'hidden'}>
        <Posts />    {/* pré-rendu à basse priorité si caché */}
      </Activity>
    </>
  );
}

Cas d'usage : Onglets, barres latérâles, écrans d'un flux multi-étapes dont on veut garder l'état ; pré-chargement du code et des données d'une page probable.

Depuis Chrome 135 (annonce du 24 mars 2025), appearance: base-select sur select et ::picker(select) rend la liste déroulante entièrement stylable ; les <option> acceptent du HTML riche (images, SVG). <selectedcontent>, unique enfant d'un <button> placé en tête du <select>, affiche un clone de l'option choisie. Disponibilité limitée, non Baseline ; repli automatique sur le select natif.

Une vitrine de pâtisserie à la place d'un menu texte : on voit ce qu'on choisit.

<select>
  <button><selectedcontent></selectedcontent></button>
  <option><img src="fr.svg" alt=""> Français</option>
  <option><img src="en.svg" alt=""> English</option>
</select>
<style>
  select, ::picker(select) { appearance: base-select; }
  select::picker-icon { transition: rotate .3s; }
  select:open::picker-icon { rotate: 180deg; }
  selectedcontent img { display: none; }
</style>

Cas d'usage : Sélecteurs de langue, de statut ou d'avatar accessibles et natifs, sans bibliothèque de « custom select » en JavaScript.

Composant stable depuis React 19.3 (9 septembre 2026), après une phase expérimentale annoncée le 23 avril 2025. Il anime les éléments qui entrent, sortent, se déplacent ou se partagent entre écrans en s'appuyant sur l'API View Transition du navigateur. Il ne se déclenche que dans une transition (startTransition, Suspense, useDeferredValue). addTransitionType permet de choisir l'animation selon la cause (navigation avant/arrière).

Le fondu enchaîné d'un monteur vidéo, appliqué automatiquement entre deux plans de votre interface.

import { ViewTransition, addTransitionType, startTransition } from 'react';

<ViewTransition
  enter={{ 'nav-forward': 'slide-left', 'nav-back': 'slide-right', default: 'auto' }}
  exit="auto"
>
  <Page />
</ViewTransition>

// Dans le routeur
startTransition(() => {
  addTransitionType('nav-' + direction);
  navigate(url);
});
/* CSS : ::view-transition-old(.slide-left) { animation: ... } */

Cas d'usage : Transitions de pages, agrandissement d'une vignette en plein écran (prop name partagée), apparition/disparition d'items de liste.

Directive qui injecte des utilitaires Tailwind dans une classe CSS. En v4, dans un fichier séparé (CSS module, <style> Vue/Svelte), il faut d'abord @référence la feuille principale pour accéder au thème, sans dupliquer le CSS émis.

Créer un raccourci clavier qui exécute plusieurs commandes d'un coup.

/* Component.vue <style> ou styles.module.css */
@reference "../../app.css";

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg
    hover:bg-blue-700 transition-colors;
}

Cas d'usage : Extraire un composant réutilisable quand les classes sont trop longues dans le HTML.

Directive qui échappe au nesting pour générer le sélecteur a la racine du fichier CSS. Utile pour créer des sélecteurs frères ou globaux depuis un contexte imbrique.

Sortir de l'immeuble pour planter un arbre dans le jardin commun, pas sur ton balcon.

.card {
  color: black;
  @at-root .theme-dark #{&} {
    color: white;
  }
}
// CSS: .theme-dark .card { color: white; }

Cas d'usage : Générer des sélecteurs de theme ou de contexte sans casser la structure du nesting.

Décorateur de paramètre qui extrait le corps de la requête HTTP et le mappe sur un DTO. Peut cibler une propriété spécifique avec @Body('key'). Depuis NestJS 12.0.0, @Body() accepte aussi une option schema compatible Standard Schema (Zod, Valibot, ArkType), validée par StandardSchemaValidationPipe, en complément du flux class-validator historique.

Comme ouvrir un colis et en extraire le contenu pour le traiter.

@Post()
create(@Body() dto: CreateUserDto) {
  return this.userService.create(dto);
}

@Post('login')
login(@Body('email') email: string) {
  return this.authService.login(email);
}

Cas d'usage : Recevoir les données envoyées par le client dans les requêtes POST, PUT ou PATCH.

Boucles Sass pour générer du CSS dynamiquement. @each itere sur des listes/maps, @for sur une plage numérique, @while tant qu'une condition est vraie.

Des machines qui produisent des variantes en série : même modèle, différentes couleurs/tailles.

$colors: (primary: #3498db, danger: #e74c3c);

@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
    &:hover { background: darken($color, 10%); }
  }
}

Cas d'usage : Générer automatiquement des variantes de composants (couleurs, tailles, états) a partir de maps.

Directive qui fait hériter un sélecteur des styles d'un autre. Le sélecteur étendu est ajoute au sélecteur source dans le CSS compile (groupement de sélecteurs).

Copier les gènes d'un parent : l'enfant hérité de toutes les caractéristiques sans duplication.

.message {
  padding: 1rem;
  border: 1px solid;
  border-radius: 4px;
}
.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
// CSS: .message, .success, .error { padding... }

Cas d'usage : Éviter la duplication CSS quand plusieurs sélecteurs partagent un ensemble commun de styles.

Règle qui déclare une fonction CSS nommée --nom(), avec paramètrès typés, valeurs par défaut et descripteur result ; on l'appelle ensuite comme n'importe quelle fonction. Le résultat peut dépendre d'un @média interne. Disponibilité limitée, non Baseline.

Une recette de cuisine réutilisable : mêmes gestes, ingrédients différents.

@function --transparent(--color <color>, --alpha <number>: 0.8)
  returns <color> {
  result: oklch(from var(--color) l c h / var(--alpha));
}

@function --double(--value) {
  result: calc(var(--value) * 2);
}

.btn {
  background: --transparent(var(--brand), 0.5);
  padding: --double(8px); /* 16px */
}

Cas d'usage : Design systems : factoriser les conversions de couleur, d'espacement ou de tailles fluides sans préprocesseur.

Décorateurs de méthode qui mappent les méthodes HTTP aux handlers du controller. Chacun définit le verbe HTTP et le chemin optionnel de la route.

Comme les panneaux directionnels dans un aéroport : chacun oriente vers la bonne porte d'embarquement.

@Controller('items')
export class ItemController {
  @Get() findAll() { /* ... */ }
  @Post() create(@Body() dto: CreateItemDto) { /* ... */ }
  @Put(':id') update(@Param('id') id: string) { /* ... */ }
  @Delete(':id') remove(@Param('id') id: string) { /* ... */ }
}

Cas d'usage : Définir les opérations CRUD standard sur une ressource REST.

Décorateur de paramètre qui extrait les headers HTTP de la requête. Peut cibler un header spécifique par nom ou récupérer tous les headers.

Comme lire l'étiquette sur un colis pour connaître l'expéditeur et le contenu.

@Get()
getData(@Headers('authorization') auth: string) {
  return this.service.getData(auth);
}

Cas d'usage : Extraire les tokens d'authentification, API keys ou headers custom des requêtes.

Décorateur qui spécifie le token d'injection pour un paramètre de constructeur. Nécessaire pour les providers enregistres avec un token string ou symbol.

Comme préciser le nom exact du fournisseur quand il y a plusieurs pour le même type de service.

@Injectable()
export class AppService {
  constructor(
    @Inject('DATABASE_CONNECTION')
    private db: Connection,
  ) {}
}

Cas d'usage : Injecter des providers enregistres avec useValue/useFactory qui utilisent des tokens string.

Décorateur qui marque une classe comme injectable par le conteneur DI de NestJS. Obligatoire pour tout provider qui participe a l'injection de dépendances.

Comme un badge professionnel : sans lui, le système ne te reconnaît pas comme employé.

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

Cas d'usage : Annoter chaque service, guard, interceptor, pipe et tout provider custom.

Organisation du CSS en couches natives (@layer base, components, utilities). En v4 les @tailwind base/components/utilities disparaissent au profit d'un seul @import ; @layer base et components restent valides, mais un utilitaire personnalisé se déclare avec @utility pour supporter les variantes.

Les étages d'un immeuble : base au sous-sol, composants au milieu, utilitaires au sommet (la plus haute priorité).

@import "tailwindcss";

@layer base {
  h1 { font-size: var(--text-2xl); }
}
@layer components {
  .card { padding: --spacing(4); box-shadow: var(--shadow-md); }
}
/* v3 : @layer utilities { .tab-4 {...} }  →  v4 : */
@utility tab-4 { tab-size: 4; }

Cas d'usage : Organiser ses styles custom pour qu'ils s'intègrent correctement dans le système de spécificité Tailwind.

Média queries qui détectent les préférences utilisateur du système : prefers-color-scheme (thème), prefers-reduced-motion (animations), prefers-contrast (contraste élevé).

Comme un restaurant qui adapte automatiquement le menu selon les allergies déclarées du client.

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1a1a; --fg: #eee; }
}
@media (prefers-contrast: more) {
  .btn { border: 2px solid; }
}

Cas d'usage : Respecter les préférences système pour l'accessibilité, le confort visuel et les performances.

Décorateur de paramètre qui extrait les paramètrès de route de l'URL (ex: /users/:id). Peut cibler un paramètre spécifique ou récupérer tous les params.

Comme lire le numéro de chambre sur la clé d'hôtel pour savoir ou aller.

@Get(':id')
findOne(@Param('id', ParseIntPipe) id: number) {
  return this.userService.findOne(id);
}

Cas d'usage : Extraire les identifiants de ressources ou slugs depuis les URLs REST.

Règle at qui enregistre une custom property avec un type, une valeur initiale et un comportement d'héritage. Permet d'animer des variables CSS et d'ajouter une validation de type.

Comme déclarer le type d'une variable en TypeScript : on précise ce qu'elle peut contenir et sa valeur par défaut.

@property --hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.element {
  --hue: 0deg;
  background: hsl(var(--hue) 80% 50%);
  transition: --hue 0.5s;
}
.element:hover { --hue: 120deg; }

Cas d'usage : Animer des dégradés ou des couleurs via des transitions sur des custom properties typées.

Décorateur de paramètre qui extrait les query parameters de l'URL (ex: ?page=1&limit=10). Supporte la transformation via pipes.

Comme les filtres de recherche sur un site e-commerce : ils affinent les résultats sans changer la page.

@Get()
findAll(
  @Query('page', new DefaultValuePipe(1), ParseIntPipe) page: number,
  @Query('limit', new DefaultValuePipe(10), ParseIntPipe) limit: number,
) { return this.service.paginate(page, limit); }

Cas d'usage : Implémenter la pagination, le tri et le filtrage sur les endpoints de liste.

Règle @scope qui limite la portée des styles à un sous-arbre DOM, avec une borne haute (racine) et optionnellement une borne basse (limite). Elle ajoute un critère de cascade, la proximité de portée. Baseline « Newly available » depuis mars 2026.

Comme une clôture de jardin avec une zone interdite au fond : les règles s'appliquent dans l'espace délimité.

@scope (.card) to (.card-footer) {
  p { color: navy; }
  a { text-decoration: underline; }
}
/* Les <p> dans .card-footer ne sont pas affectés */

Cas d'usage : Isoler les styles d'un composant sans Shadow DOM ni convention de nommage comme BEM.

Décorateur qui attache des metadonnees personnalisées a un handler ou controller, lisibles via Reflector dans les guards ou interceptors.

Comme coller une étiquette 'VIP' ou 'Public' sur une porte pour que le vigile sache qui laisser entrer.

export const Roles = (...roles: string[]) =>
  SetMetadata('roles', roles);

@Post()
@Roles('admin')
create() { /* ... */ }

Cas d'usage : Définir les roles requis sur un endpoint pour les vérifier dans un RolesGuard.

Depuis Tailwind v4.0, la détection des classes est automatique et respecte .gitignore. @source ajoute un chemin ignoré (bibliothèque dans node_modules), @source not exclut un dossier, @import "tailwindcss" source(none) désactive l'automatique, et @source inline() remplace la safelist avec expansion d'accolades.

Dire au facteur quelles rues desservir en plus de sa tournée habituelle, et lesquelles éviter.

@import "tailwindcss";

@source "../node_modules/@acme/ui-lib";
@source not "../src/legacy";

/* safelist : bg-red-50 … bg-red-950 avec hover: */
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

Cas d'usage : Monorepos et bibliothèques de composants partagées, classes construites dynamiquement côté serveur.

Règle @starting-style qui définit les styles de départ d'une transition d'entrée (display: none vers visible). Combinée à transition-behavior: allow-discrète, elle anime aussi la sortie. Baseline « Newly available » depuis août 2024.

Comme le rideau d'un théâtre : on définit la position de départ avant qu'il ne s'ouvre en douceur.

dialog[open] {
  opacity: 1;
  transition: opacity 0.3s, overlay 0.3s allow-discrete,
    display 0.3s allow-discrete;
  @starting-style { opacity: 0; }
}
dialog { opacity: 0; }

Cas d'usage : Animer l'ouverture de modales, popovers et éléments passant de display:none à visible.

Feature query CSS qui teste le support d'une propriété ou valeur avant de l'appliquer. Permet l'amélioration progressive en servant des styles de fallback aux navigateurs plus anciens.

Comme vérifier si un appareil a le bon adaptateur avant de le brancher, avec un plan B si ce n'est pas le cas.

.grid {
  display: flex; /* Fallback */
}
@supports (grid-template-columns: subgrid) {
  .grid {
    display: grid;
    grid-template-columns: subgrid;
  }
}

Cas d'usage : Utiliser des fonctionnalités CSS modernes avec fallback gracieux pour les navigateurs qui ne les supportent pas.

Plugin officiel qui ajoute la classe prose pour styler du contenu riche (articles, markdown, CMS). En v4 il se charge avec la directive @plugin dans le CSS, plus via plugins: [] du fichier JS.

Un styliste personnel pour tes articles : il rend tout beau sans que tu touches a chaque élément.

<!-- app.css : @import "tailwindcss"; @plugin "@tailwindcss/typography"; -->
<article class="prose prose-lg dark:prose-invert max-w-none">
  <h1>Mon article</h1>
  <p>Le contenu est stylé automatiquement…</p>
</article>

Cas d'usage : Styler du contenu éditorial/markdown venant d'un CMS ou d'une base de données.

Directive de Tailwind v4.0 (22 janvier 2025) qui remplace theme de tailwind.config.js. Chaque variable déclarée dans un espace de noms (--color-*, --font-*, --breakpoint-*, --spacing-*, --text-*…) génère les utilitaires et variantes correspondants, et reste disponible comme variable CSS native. --color-*: initial réinitialise un espace de noms ; @theme inline sert quand on référence d'autres variables.

Un tableau de bord où déplacer un curseur change toutes les pièces reliées d'un coup.

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178); /* bg-mint-500, text-mint-500… */
  --font-display: "Satoshi", sans-serif;  /* font-display */
  --breakpoint-3xl: 120rem;               /* 3xl:… */
}

@theme inline {
  --font-sans: var(--font-inter); /* référence une variable externe */
}

.custom { color: var(--color-mint-500); } /* utilisable en CSS pur */

Cas d'usage : Décrire la charte (couleurs, polices, points de rupture) dans la feuille principale et la partager avec le CSS maison.

@use importe un module Sass avec un espace de noms (module.$var), et peut le configurer avec with(). @forward réexporte les membres d'un module pour créer des points d'entrée. Migration automatique : sass-migrator module --migrate-deps entrée.scss.

@use c'est importer un outil, @forward c'est le mettre en vitrine dans ta boutique pour les autres.

// _colors.scss
$primary: blue !default;

// _index.scss
@forward 'colors';

// component.scss
@use 'settings' with ($primary: navy); // configure
.btn { color: settings.$primary; }
// ou @use 'settings' as *;  // => $primary sans préfixe

Cas d'usage : Remplacer @import (déprécie) par un système de modules avec namespaces et encapsulation.

Décorateur qui attache un ou plusieurs filtres d'exception a un controller ou handler pour intercepter et formater les erreurs spécifiques.

Comme un traducteur qui reformule les erreurs techniques en messages compréhensibles pour le client.

@Controller('users')
@UseFilters(new HttpExceptionFilter())
export class UserController {
  @Post()
  create(@Body() dto: CreateUserDto) {
    return this.service.create(dto);
  }
}

Cas d'usage : Appliquer un format d'erreur personnalise pour un domaine spécifique de l'API.

Décorateur qui attache un ou plusieurs guards a un controller ou un handler. Les guards s'exécutent avant le handler pour autoriser ou refuser l'accès.

Comme placer un vigile devant une porte spécifique ou a l'entrée de tout le bâtiment.

@Controller('admin')
@UseGuards(AuthGuard, RolesGuard)
export class AdminController {
  @Get('dashboard')
  getDashboard() { return 'admin data'; }
}

Cas d'usage : Protéger un controller entier ou des routes spécifiques avec authentification et autorisation.

Décorateur qui attache un ou plusieurs interceptors a un controller ou handler pour transformer les requêtes/réponses ou ajouter des comportements transversaux.

Comme ajouter un filtre Instagram a une photo : le contenu est le même mais la présentation change.

@Controller('users')
@UseInterceptors(CacheInterceptor)
export class UserController {
  @Get()
  @UseInterceptors(ClassSerializerInterceptor)
  findAll() { return this.service.findAll(); }
}

Cas d'usage : Appliquer la sérialisation, le cache ou le logging sur des routes spécifiques.

Décorateur qui attache un ou plusieurs pipes a un controller ou handler pour valider ou transformer les données entrantes automatiquement.

Comme un détecteur de métaux a l'entrée : il filtre automatiquement tout ce qui n'est pas conforme.

@Post()
@UsePipes(new ValidationPipe({ whitelist: true }))
create(@Body() dto: CreateUserDto) {
  return this.service.create(dto);
}

Cas d'usage : Activer la validation automatique des DTOs avec class-validator sur des routes spécifiques.

Directive de Tailwind v4 qui déclare un utilitaire maison compatible avec toutes les variantes (hover:, lg:, dark:). La forme fonctionnelle nom-* accepte des valeurs via --value() (thème, entier nu, littéral, arbitraire) et un modificateur via --modifier(), avec --default() comme repli (v4.3). Elle remplace @layer utilities et addUtilities().

Ajouter sa propre pièce au jeu de construction, taillée pour s'emboîter avec les autres.

@utility content-auto {
  content-visibility: auto;
}

/* tab-2, tab-4, tab-[7] */
@utility tab-* {
  tab-size: --value(--tab-size-*, integer, [integer]);
}

/* text-fluid-3/1.2 : valeur + modificateur */
@utility text-fluid-* {
  font-size: --value(integer, --default(2));
  line-height: --modifier(number, --default(1.2));
}

Cas d'usage : Étendre Tailwind avec des propriétés absentes (content-visibility, text-shadow…) ou des échelles métier, sans plugin JavaScript.

Deux directives v4. @variant applique une variante Tailwind (dark, hover, md…) à l'intérieur d'une règle CSS maison ; v4.3 (8 mai 2026) accepte les variantes empilées (hover:focus) et composées (hover, focus). @custom-variant crée une nouvelle variante à partir d'un sélecteur, par exemple pour piloter le mode sombre par classe.

Un tampon « uniquement le week-end » qu'on appose sur n'importe quelle règle.

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant hocus (&:hover, &:focus);

.button {
  background: var(--color-sky-500);
  @variant hover:focus { background: var(--color-sky-600); } /* empilée */
  @variant dark { background: var(--color-sky-300); }
}

Cas d'usage : Écrire du CSS de composant qui réutilise les variantes du projet, et définir des variantes métier (theme-midnight, hocus).

Expérimentation ou deux variantes (A et B) sont présentées a des groupes d'utilisateurs différents pour mesurer laquelle performe le mieux selon des métriques définies.

Comme un restaurant qui teste deux recettes de dessert sur deux tables différentes et mesure laquelle est la plus commandée.

// Feature flag A/B test
const variant = getExperimentVariant(userId, 'checkout-v2');
if (variant === 'B') {
  return <NewCheckout />;
}
return <OldCheckout />;
// Tracking: analytics.track('purchase', { variant });

Cas d'usage : Pour prendre des décisions produit basées sur des données réelles plutôt que des opinions (boutons, textes, parcours).

Standard ouvert de communication entre agents, créé par Google puis donné à la Linux Foundation, sous licence Apache 2.0, en version 1.0 ; le comité technique réunit AWS, Cisco, Google, IBM Research, Microsoft, Salesforce, SAP et ServiceNow. Chaque agent publie une Agent Card décrivant ses compétences, puis les agents s'échangent des tâches sans exposer leur mémoire ni leurs outils internes. Complémentaire de MCP : MCP relie un agent à ses outils, A2A relie des agents entre eux.

MCP est la prise pour brancher vos appareils ; A2A est le téléphone pour appeler un autre bureau.

// Agent Card (extrait) publiée par un agent A2A
{
  "name": "Agent Facturation Socy",
  "description": "Répond aux questions de facturation et émet des avoirs",
  "url": "https://agents.socy.fr/billing",
  "version": "1.0.0",
  "capabilities": { "streaming": true },
  "skills": [
    { "id": "issue-credit-note", "name": "Émettre un avoir",
      "description": "Crée un avoir à partir d'un numéro de facture" }
  ]
}

Cas d'usage : Systèmes multi-agents inter-équipes ou inter-entreprises où chaque agent reste une boîte noire.

Pattern de structuration des tests en 3 phases : Arrange (préparer les données), Act (exécuter l'action), Assert (vérifier le résultat). Rend les tests lisibles et uniformes.

Comme une recette de cuisine : préparer les ingrédients (Arrange), cuisiner (Act), goûter et vérifier (Assert).

test('applies 10% discount for VIP', () => {
  // Arrange
  const user = createUser({ vip: true });
  const cart = createCart({ total: 100 });
  // Act
  const finalPrice = applyDiscount(user, cart);
  // Assert
  expect(finalPrice).toBe(90);
});

Cas d'usage : Comme structure standard pour tous les tests unitaires afin de maintenir la lisibilité et la cohérence.

Programmeur et activiste américain, co-auteur de la spec RSS a 14 ans, co-fondateur de Reddit et militant pour le libre accès a l'information. Décédé en 2013 a 26 ans.

Le prodige qui voulait que le savoir soit libre pour tous — un génie du code devenu martyr du libre accès.

<!-- RSS 1.0 — co-ecrit par Aaron Swartz a 14 ans -->
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <channel>
    <title>Mon Blog</title>
    <link>https://example.com</link>
  </channel>
</rdf:RDF>

Cas d'usage : Comprendre les enjeux du libre accès a l'information et l'importance de l'activisme technologique.

Attribute-Based Access Control : système d'autorisation base sur les attributs du sujet, de la ressource et du contexte. Plus flexible que RBAC.

Comme une boite de nuit avec des règles complexes : âge + tenue + liste VIP + heure déterminant l'accès.

// Regle ABAC: l'auteur peut modifier son propre article
canActivate(ctx: ExecutionContext) {
  const user = ctx.switchToHttp().getRequest().user;
  const articleId = ctx.switchToHttp().getRequest().params.id;
  const article = await this.articleService.findOne(articleId);
  return article.authorId === user.id;
}

Cas d'usage : Implémenter des règles d'autorisation fines comme 'un auteur ne peut modifier que ses propres articles'.

Registre standardisé, introduit dans WordPress 6.9 « Gene » (2 décembre 2025), qui décrit des unités de fonctionnalité lisibles par machine : wp_register_ability() déclare label, description, input_schema, output_schema, exécuté_callback et permission_callback, sur le hook wp_abilities_api_init. Les abilities s'exposent en REST sous wp-abilities/v1. WordPress 7.0 ajoute un client côté navigateur et un client IA, 7.1 un cycle d'exécution filtrable.

La carte d'un restaurant lisible par un robot : chaque plat, ses ingrédients et qui a le droit de le commander.

add_action('wp_abilities_api_init', function () {
  wp_register_ability('my-plugin/get-post-count', [
    'label'       => __('Nombre d\'articles', 'my-plugin'),
    'description' => __('Retourne le total d\'articles publiés.'),
    'category'    => 'content-management',
    'execute_callback'    => fn() => wp_count_posts()->publish,
    'permission_callback' => fn() => current_user_can('read'),
    'meta' => ['show_in_rest' => true],
  ]);
});
// GET  /wp-json/wp-abilities/v1/abilities
// POST /wp-json/wp-abilities/v1/abilities/my-plugin/get-post-count/run

Cas d'usage : Exposer proprement les actions d'une extension aux agents IA, aux automatisations et aux autres extensions, avec schéma et permissions.

API pour annuler des opérations asynchrones (fetch, event listeners, streams). Créé un signal qui peut être passe a n'importe quelle API supportant l'annulation.

Un bouton d'arrêt d'urgence : tu peux stopper une opération en cours a tout moment.

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') console.log('Annule');
  });
// Annuler apres 5s
setTimeout(() => controller.abort(), 5000);

Cas d'usage : Timeout de requêtes fetch, annulation lors du démontage d'un composant React, cleanup de listeners.

Classe qui ne peut pas être instanciee directement et qui sert de modèle. Elle peut contenir des méthodes abstraites (sans corps) et des méthodes concrètes.

Comme un plan d'architecte : il définit la structure mais on ne peut pas y habiter, il faut d'abord construire la maison.

abstract class Shape {
  abstract public function area(): float;
  public function describe(): string {
    return get_class($this) . ': ' . $this->area();
  }
}

Cas d'usage : Quand plusieurs classes partagent une logique commune mais doivent chacune implémenter certains comportements spécifiques.

Fournit une interface pour créer des familles d'objets lies sans spécifier leurs classes concrètes. C'est une factory de factories.

Un catalogue IKEA par style : tu choisis 'scandinave' et tu obtiens table, chaise et lampe assorties.

class DarkThemeFactory {
  createButton() { return new DarkButton(); }
  createInput() { return new DarkInput(); }
}
// Usage: const ui = getFactory('dark');

Cas d'usage : Créer des composants UI cohérents par theme ou des connecteurs DB par provider.

Pattern qui fournit une interface pour créer des familles d'objets lies sans spécifier leurs classes concrètes. Étend le Factory Method a plusieurs produits.

Comme un concessionnaire de marque : Peugeot produit berlines ET SUV, Toyota aussi, mais dans leur propre style.

interface UIFactory {
  public function createButton(): Button;
  public function createInput(): Input;
}
class DarkThemeFactory implements UIFactory {
  public function createButton(): Button { return new DarkButton(); }
  public function createInput(): Input { return new DarkInput(); }
}

Cas d'usage : Quand on doit créer des familles d'objets cohérents (theme UI, drivers de base de données).

Test qui vérifie qu'une fonctionnalité répond aux critères d'acceptation définis par le Product Owner ou le client. Souvent écrit en langage naturel (Gherkin).

Comme la checklist du client lors de la réception d'une maison neuve : chaque point du cahier des charges est vérifié.

// En Gherkin (Cucumber)
// Feature: Connexion utilisateur
//   Scenario: Login reussi
//     Given un utilisateur inscrit "[email protected]"
//     When il saisit son mot de passe correct
//     Then il voit son tableau de bord
//     And un cookie de session est cree

Cas d'usage : Pour formaliser et automatiser les critères d'acceptation du Product Owner en tests exécutables.

Représentation parallèle au DOM que le navigateur construit pour les technologies d'assistance. Chaque noeud contient un rôle, un nom, un état et une valeur accessibles.

Comme le plan d'évacuation d'un bâtiment : une vue simplifiée qui ne montre que les infos essentielles pour naviguer.

<!-- Le navigateur crée un noeud accessible : -->
<!-- Role: button, Name: 'Envoyer', State: enabled -->
<button aria-label="Envoyer le formulaire">
  <svg>...</svg>
</button>

Cas d'usage : Pour comprendre et déboguer ce que les lecteurs d'écran communiquent réellement aux utilisateurs.

Mot-clé accessor introduit en TypeScript 4.9 pour les classes : accessor x = 1 déclare un champ privé de stockage et une paire getter/setter publique sur le prototype. Il vient de la proposition TC39 Decorators (Stage 2.7 au 27 septembre 2026), où il permet aux décorateurs d'intercepter lectures et écritures, ce qu'un champ ordinaire ne permet pas.

Une boîte aux lettres avec fente et clé : on passe toujours par l'ouverture, jamais par le fond de la boîte.

function suivi<T>(cible: ClassAccessorDecoratorTarget<any, T>,
                  ctx: ClassAccessorDecoratorContext) {
  return {
    set(this: any, v: T) {
      console.log(`${String(ctx.name)} ←`, v);
      cible.set.call(this, v);
    },
  };
}
class Compteur {
  @suivi accessor valeur = 0; // get/set générés, stockage privé
}

Cas d'usage : Décorateurs de réactivité, de validation ou d'observation de propriétés (frameworks, ORM).

Propriétés des transactions relationnelles. Atomicité (tout ou rien), Cohérence, Isolation (pas d'interférence), Durabilité (persisté après commit).

Un virement bancaire : soit les deux comptes sont mis à jour, soit aucun. Pas de demi-transfert.

const trx = await db.transaction();
try {
  await trx('accounts').where({ id: from }).decrement('balance', amount);
  await trx('accounts').where({ id: to }).increment('balance', amount);
  await trx.commit();
} catch (e) {
  await trx.rollback();
}

Cas d'usage : Garantir l'intégrité des données financières, commandes, stocks.

Depuis la version 4.0, MongoDB supporte les propriétés ACID (Atomicité, Cohérence, Isolation, Durabilite) au niveau multi-documents. Un seul document est toujours ACID nativement.

MongoDB a passe son permis ACID : avant il ne conduisait qu'un document, maintenant il gère tout un convoi.

// ACID single doc : toujours garanti
db.accounts.updateOne(
  { _id: 'A' },
  { $inc: { balance: -100 }, $push: { log: 'debit' } }
);

Cas d'usage : Justifier le choix de MongoDB pour des applications nécessitant des garanties transactionnelles.

Fonction associée à une route qui traite les mutations (POST, PUT, DELETE) soumises par un <Form>. Après l'action, React Router revalide automatiquement les loaders de la page. Depuis la v8 (17 juin 2026), l'action peut être précédée d'un middleware (auth, contexte), activé par défaut.

Comme la boite aux lettres d'un bureau : tu deposes ton courrier (formulaire), le bureau (action) le traite.

import { redirect } from 'react-router';
import type { Route } from './+types/new-user';

export async function action({ request }: Route.ActionArgs) {
  const form = await request.formData();
  await api.createUser(Object.fromEntries(form));
  return redirect('/users');   // les loaders sont revalidés
}
// <Form method="post"> déclenche l'action sans JS custom

Cas d'usage : Gérer les soumissions de formulaires avec revalidation automatique des loaders après mutation.

Hook qui permet d'exécuter du code a un moment précis du cycle WordPress (init, wp_head, save_post, etc.). Ne retourne pas de valeur.

Comme une alarme programmée : quand elle sonne, tu exécutés l'action prévue.

add_action('save_post', function(int $postId): void {
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
  update_post_meta($postId, '_custom_field', 'value');
}, 10, 1);

Cas d'usage : Pour exécuter du code en réaction a un evenement WordPress : création de post, login, activation de plugin.

Depuis React 19 (5 décembre 2024), une fonction asynchrone passée à startTransition ou à la prop action d'un <form> est une « Action ». React gère pour vous l'état pending, le séquencement, les erreurs (remontées à l'Error Boundary) et la réinitialisation du formulaire. Les hooks useActionState, useFormStatus et useOptimistic sont bâtis dessus.

Un serveur de restaurant qui prend la commande, annonce « c'est en cours », et revient vous prévenir si la cuisine a un souci : vous n'avez plus à surveiller la porte.

function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  function handleSubmit() {
    startTransition(async () => {         // Action
      const err = await updateName(name); // isPending géré par React
      if (err) { setError(err); return; }
      redirect('/profile');
    });
  }
  return <button onClick={handleSubmit} disabled={isPending}>Enregistrer</button>;
}

Cas d'usage : Toute mutation déclenchée par l'utilisateur (enregistrer, liker, supprimer) où l'on affichait auparavant un état isLoading manuel.

Deux patterns ORM opposes. Active Record (Éloquent) : l'objet connaît sa persistence. Data Mapper (Doctrine) : un mapper externe gère la persistence, l'entité reste pure.

Active Record : un employé qui classe lui-même ses dossiers. Data Mapper : un archiviste indépendant qui gère le classement.

// Active Record (Eloquent)
$user = User::find(1);
$user->name = 'Alice';
$user->save();

// Data Mapper (Doctrine)
$user = $em->find(User::class, 1);
$user->setName('Alice');
$em->flush();

Cas d'usage : Active Record pour les projets simples/rapides, Data Mapper pour les domaines complexes avec logique métier riche.

Mathématicienne britannique considérée comme la première programmeuse de l'histoire. Elle a écrit le premier algorithme destine a être exécuté par une machine, la machine analytique de Charles Babbage.

La première personne a avoir écrit une recette de cuisine... avant même que le four n'existe.

// Premier algorithme de l'histoire (1843)
// Calcul des nombres de Bernoulli
// sur la Machine Analytique de Babbage
// — Bien avant l'electricite

Cas d'usage : Connaître les origines de la programmation et comprendre que l'informatique a des racines bien antérieures aux ordinateurs électroniques.

Convertit l'interface d'une classe en une autre interface attendue par le client. Permet a des classes incompatibles de collaborer.

Un adaptateur de prise électrique : ta prise française fonctionne dans une prise anglaise grâce a l'adaptateur.

class StripeAdapter {
  constructor(stripe) { this.stripe = stripe; }
  pay(amount) {
    return this.stripe.charges.create({ amount });
  }
}

Cas d'usage : Intégrer une librairie tierce dont l'API ne correspond pas a votre interface interne.

Document court, versionné avec le code, qui consigne une décision d'architecture importante : contexte, décision, conséquences, statut (proposé, accepté, déprécié, remplacé). Popularisé par Michael Nygard dans son billet « Documenting Architecture Décisions » de 2011, le format a évolué vers des modèles comme MADR. Une ADR n'est jamais modifiée après acceptation : on en écrit une nouvelle qui la remplace.

Le journal de bord d'un capitaine : on ne réécrit pas les pages d'hier, on ajoute celle d'aujourd'hui en expliquant pourquoi on change de cap.

# docs/adr/0007-remplacer-ingress-nginx-par-gateway-api.md
# 7. Remplacer Ingress NGINX par la Gateway API
Date : 2026-03-02
Statut : Accepté (remplace ADR-0003)
## Contexte
Ingress NGINX est retiré par le projet Kubernetes en mars 2026 :
plus de correctifs de sécurité.
## Décision
Migrer vers Envoy Gateway + HTTPRoute via ingress2gateway.
## Conséquences
+ routage canary natif, rôles séparés plateforme/équipes
- formation, réécriture des annotations spécifiques

Cas d'usage : Toute décision structurante (base de données, découpage en services, framework, hébergement) qu'un nouvel arrivant devra comprendre dans deux ans.

Architecte britannique, ancien de Sun, eBay et Netflix, où il a dirigé la migration pionnière vers le cloud et les microservices, puis VP chez AWS (2016-2022). Retraité du travail à plein temps le 3 juin 2022, il est aujourd'hui associé et analyste chez OrionX (durabilité, HPC, IA).

Le capitaine qui a navigue Netflix du datacenter vers le cloud — et tout le monde a suivi sa carte.

// Architecture Netflix — Adrian Cockcroft
// Patterns cloud-native :
// - Circuit Breaker (Hystrix)
// - Service Discovery (Eureka)
// - API Gateway (Zuul)
// - Config Server
// Netflix OSS = reference cloud-native

Cas d'usage : Les patterns Netflix sont devenus des standards de l'industrie (resilience, observabilite, microservices).

Verrous coopératifs applicatifs gères par PostgreSQL. Contrairement aux verrous de table, ils n'ont de sens que pour l'application qui les utilise. Peuvent être session-level ou transaction-level.

Un panneau 'Occupe' sur une cabine : c'est l'application qui le respecte, pas la base qui bloque.

-- Verrou au niveau session
SELECT pg_advisory_lock(42);
-- ... logique exclusive ...
SELECT pg_advisory_unlock(42);

Cas d'usage : Éviter les exécutions concurrentes de cron jobs ou de migrations sur la même ressource logique.

Système où le LLM décide lui-même de ses étapes et de ses appels d'outils pour atteindre un objectif, par opposition au workflow dont le chemin est fixé par le code (distinction posée par Anthropic le 19 décembre 2024). Un agent = un modèle + des outils + une boucle + un contexte géré. À réserver aux tâches ouvertes où l'erreur est rattrapable (tests, revue, rollback).

Un stagiaire autonome à qui l'on confie une mission, un badge d'accès limité et un point d'étape régulier.

// Critères avant de construire un agent (Anthropic, « Building effective agents »)
const shouldBuildAgent = {
  complexite: 'tâche multi-étapes difficile à spécifier à l\'avance',
  valeur:     'le résultat justifie coût et latence supérieurs',
  viabilite:  'le modèle est réellement compétent sur ce type de tâche',
  coutErreur: 'les erreurs sont détectables et réversibles (tests, revue, rollback)',
};
// Un seul « non » → rester sur un appel simple ou un workflow codé.
const agentOK = Object.values(shouldBuildAgent).every(Boolean);

Cas d'usage : Agent de code (Claude Code, Codex), agent support qui consulte CRM et base de tickets, agent de recherche.

Famille d'outils qui exécutent des tâches de développement de bout en bout. Cursor : éditeur-agent basé sur VS Code, règles dans .cursor/rules, choix du modèle (Claude, GPT, Gemini, Composer). GitHub Copilot cloud agent : on lui assigne une issue, il travaille dans GitHub Actions et ouvre une PR brouillon (59 min max par session). Codex d'OpenAI : CLI en Rust, extension IDE, version web et application bureau.

Trois collègués avec des styles différents : l'un vit dans votre éditeur, l'autre travaille la nuit sur GitHub, le troisième dans un terminal.

# Codex CLI (OpenAI)
curl -fsSL https://chatgpt.com/codex/install.sh | sh
codex "ajoute des tests pour le module auth et fais-les passer"

# GitHub Copilot cloud agent : assigner une issue à @copilot
gh issue create --title "Corriger le 500 sur /export" --assignee copilot
# → travaille dans GitHub Actions, ouvre une PR brouillon à relire

# Cursor : règles de projet versionnées
mkdir -p .cursor/rules && cat > .cursor/rules/style.mdc <<'EOF'
---
description: Conventions TypeScript du projet
alwaysApply: true
---
Strict mode, pas de any, tests Vitest à côté du fichier.
EOF

Cas d'usage : Choisir l'outil selon le flux : édition interactive, tâches asynchrones sur issues, automatisation terminal.