Lexique Dev — +1171 définitions

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.

!default assigne une valeur seulement si la variable n'existe pas encore (ideal 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 : Creer des librairies Sass configurables ou les utilisateurs peuvent overrider les valeurs par defaut.

Methode chainable qui attache des attributs par defaut ou calcules a un styled component. Evite de repeter les memes props a chaque utilisation.

Les reglages par defaut 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 : Definir des attributs HTML par defaut (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.

Directive qui marque un composant comme Client Component, activant l'interactivite (state, effets, handlers). Frontiere 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 comme Server Action : elle s'execute sur le serveur mais peut etre appelee depuis le client, comme un RPC transparent.

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 donnees (formulaires, CRUD) sans creer de route API separee.

Directive CSS qui permet d'extraire des utilitaires Tailwind dans des classes CSS custom. Utile pour les composants reutilisables ou l'integration avec du CSS existant.

Creer un raccourci clavier qui execute plusieurs commandes d'un coup.

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

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

Directive qui echappe au nesting pour generer le selecteur a la racine du fichier CSS. Utile pour creer des selecteurs freres 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 : Generer des selecteurs de theme ou de contexte sans casser la structure du nesting.

Decorateur de parametre qui extrait le corps de la requete HTTP et le mappe sur un DTO. Peut cibler une propriete specifique avec @Body('key').

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 donnees envoyees par le client dans les requetes POST, PUT ou PATCH.

Boucles Sass pour generer du CSS dynamiquement. @each itere sur des listes/maps, @for sur une plage numerique, @while tant qu'une condition est vraie.

Des machines qui produisent des variantes en serie : meme modele, differentes couleurs/tailles.

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

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

Cas d'usage : Generer automatiquement des variantes de composants (couleurs, tailles, etats) a partir de maps.

Directive qui fait heriter un selecteur des styles d'un autre. Le selecteur etendu est ajoute au selecteur source dans le CSS compile (groupement de selecteurs).

Copier les genes d'un parent : l'enfant herite de toutes les caracteristiques 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 : Eviter la duplication CSS quand plusieurs selecteurs partagent un ensemble commun de styles.

Decorateurs de methode qui mappent les methodes HTTP aux handlers du controller. Chacun definit le verbe HTTP et le chemin optionnel de la route.

Comme les panneaux directionnels dans un aeroport : 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 : Definir les operations CRUD standard sur une ressource REST.

Decorateur de parametre qui extrait les headers HTTP de la requete. Peut cibler un header specifique par nom ou recuperer tous les headers.

Comme lire l'etiquette sur un colis pour connaitre l'expediteur 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 requetes.

Decorateur qui specifie le token d'injection pour un parametre de constructeur. Necessaire pour les providers enregistres avec un token string ou symbol.

Comme preciser le nom exact du fournisseur quand il y a plusieurs pour le meme 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.

Decorateur qui marque une classe comme injectable par le conteneur DI de NestJS. Obligatoire pour tout provider qui participe a l'injection de dependances.

Comme un badge professionnel : sans lui, le systeme ne te reconnait pas comme employe.

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

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

Directive qui organise le CSS en couches (base, components, utilities). Permet de controler la specificite et l'ordre de vos styles custom.

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

@layer base {
  h1 { @apply text-2xl font-bold; }
}
@layer components {
  .card { @apply p-4 rounded-lg shadow; }
}
@layer utilities {
  .text-shadow { text-shadow: 2px 2px 4px #0003; }
}

Cas d'usage : Organiser ses styles custom pour qu'ils s'integrent correctement dans le systeme de specificite Tailwind.

Media 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.

Decorateur de parametre qui extrait les parametres de route de l'URL (ex: /users/:id). Peut cibler un parametre specifique ou recuperer tous les params.

Comme lire le numero de chambre sur la cle d'hotel 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.

Decorateur de parametre 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 resultats 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 : Implementer la pagination, le tri et le filtrage sur les endpoints de liste.

Règle at qui limite la portée des styles à un sous-arbre DOM spécifique, avec une borne haute (scope root) et optionnellement une borne basse (scope limit). Résout le problème de fuite de styles.

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.

Decorateur qui attache des metadonnees personnalisees a un handler ou controller, lisibles via Reflector dans les guards ou interceptors.

Comme coller une etiquette '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 : Definir les roles requis sur un endpoint pour les verifier dans un RolesGuard.

Règle at qui définit les styles de départ pour les transitions d'entrée d'éléments (display: none vers visible). Permet d'animer l'apparition d'éléments sans JavaScript.

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

dialog {
  opacity: 1; transition: opacity 0.3s;
}
@starting-style {
  dialog { opacity: 0; }
}
dialog:not([open]) { 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 automatiquement du contenu riche (articles, markdown, CMS). Gere les titres, listes, code, citations.

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

<article class="prose prose-lg prose-blue
  dark:prose-invert max-w-none">
  <h1>Mon Article</h1>
  <p>Le contenu est automatiquement style...</p>
  <pre><code>const x = 1;</code></pre>
</article>

Cas d'usage : Styler du contenu editorial/markdown venant d'un CMS ou d'une base de donnees.

@use importe un module Sass avec un namespace (variables accessibles via module.$var). @forward re-exporte les membres d'un module pour creer des points d'entree.

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

// _colors.scss
$primary: blue;

// _index.scss
@forward 'colors';

// component.scss
@use 'settings'; // => settings.$primary
// ou @use 'settings' as *; // => $primary

Cas d'usage : Remplacer @import (deprecie) par un systeme de modules avec namespaces et encapsulation.

Decorateur qui attache un ou plusieurs filtres d'exception a un controller ou handler pour intercepter et formater les erreurs specifiques.

Comme un traducteur qui reformule les erreurs techniques en messages comprehensibles 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 specifique de l'API.

Decorateur qui attache un ou plusieurs guards a un controller ou un handler. Les guards s'executent avant le handler pour autoriser ou refuser l'acces.

Comme placer un vigile devant une porte specifique ou a l'entree de tout le batiment.

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

Cas d'usage : Proteger un controller entier ou des routes specifiques avec authentification et autorisation.

Decorateur qui attache un ou plusieurs interceptors a un controller ou handler pour transformer les requetes/reponses ou ajouter des comportements transversaux.

Comme ajouter un filtre Instagram a une photo : le contenu est le meme mais la presentation change.

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

Cas d'usage : Appliquer la serialisation, le cache ou le logging sur des routes specifiques.

Decorateur qui attache un ou plusieurs pipes a un controller ou handler pour valider ou transformer les donnees entrantes automatiquement.

Comme un detecteur de metaux a l'entree : 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 specifiques.

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 supplementaire sur une fiche sans rien effacer de ce qui est deja ecrit.

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

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

Stage d'aggregation qui distribue les documents dans des intervalles (buckets) definis par des bornes. Utile pour creer des histogrammes ou des tranches.

Trier des eleves par tranche d'age : 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 : Creer des rapports avec des tranches de prix, d'ages ou de scores.

Stage d'aggregation qui execute plusieurs sous-pipelines en parallele sur le meme jeu de documents. Chaque sous-pipeline produit un resultat independant dans un seul document de sortie.

Un journaliste qui ecrit trois angles differents du meme evenement en meme temps.

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

Cas d'usage : Generer un dashboard avec des statistiques multiples en un seul appel a la base.

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

Trier des billes par couleur dans des bols differents, 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 metriques agregees par categorie, utilisateur, periode ou tout autre critere de regroupement.

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

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

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

Cas d'usage : Combiner des donnees de collections separees quand l'embedding n'est pas adapte.

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

Le vigile a l'entree de la boite de nuit : seuls ceux qui remplissent les criteres passent.

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

Cas d'usage : Filtrer les documents en amont du pipeline pour reduire le volume de donnees traite par les stages suivants.

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

Un monteur video qui selectionne les scenes a garder et ajoute des effets speciaux.

{ $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 qui decompacte un champ tableau en creant un document par element. Transforme un document avec un tableau de N elements 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 : Preparer les donnees d'un tableau pour un $group ou un $sort sur les elements individuels.

Methode de la classe $wpdb pour creer des requetes SQL parametrees dans WordPress. Equivalent des prepared statements PDO, adapte a l'ecosysteme WP.

Comme un coffre-fort avec une serrure a combinaison : les donnees ne peuvent pas s'echapper du cadre prevu.

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 requete SQL directe dans WordPress qui inclut des variables.

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 matieres : 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 developpeur sache ou trouver et ajouter du code.

Experimentation ou deux variantes (A et B) sont presentees a des groupes d'utilisateurs differents pour mesurer laquelle performe le mieux selon des metriques definies.

Comme un restaurant qui teste deux recettes de dessert sur deux tables differentes et mesure laquelle est la plus commandee.

// 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 decisions produit basees sur des donnees reelles plutot que des opinions (boutons, textes, parcours).

Pattern de structuration des tests en 3 phases : Arrange (preparer les donnees), Act (executer l'action), Assert (verifier le resultat). Rend les tests lisibles et uniformes.

Comme une recette de cuisine : preparer les ingredients (Arrange), cuisiner (Act), gouter et verifier (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 lisibilite et la coherence.

Programmeur et activiste americain, co-auteur de la spec RSS a 14 ans, co-fondateur de Reddit et militant pour le libre acces a l'information. Decede en 2013 a 26 ans.

Le prodige qui voulait que le savoir soit libre pour tous — un genie du code devenu martyr du libre acces.

<!-- 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 acces a l'information et l'importance de l'activisme technologique.

Attribute-Based Access Control : systeme 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 regles complexes : age + tenue + liste VIP + heure determinant l'acces.

// 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 : Implementer des regles d'autorisation fines comme 'un auteur ne peut modifier que ses propres articles'.

API pour annuler des operations asynchrones (fetch, event listeners, streams). Cree un signal qui peut etre passe a n'importe quelle API supportant l'annulation.

Un bouton d'arret d'urgence : tu peux stopper une operation 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 requetes fetch, annulation lors du demontage d'un composant React, cleanup de listeners.

Classe qui ne peut pas etre instanciee directement et qui sert de modele. Elle peut contenir des methodes abstraites (sans corps) et des methodes concretes.

Comme un plan d'architecte : il definit 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 implementer certains comportements specifiques.

Pattern qui fournit une interface pour creer des familles d'objets lies sans specifier leurs classes concretes. Etend 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 creer des familles d'objets coherents (theme UI, drivers de base de donnees).

Fournit une interface pour creer des familles d'objets lies sans specifier leurs classes concretes. 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 : Creer des composants UI coherents par theme ou des connecteurs DB par provider.

Test qui verifie qu'une fonctionnalite repond aux criteres d'acceptation definis par le Product Owner ou le client. Souvent ecrit en langage naturel (Gherkin).

Comme la checklist du client lors de la reception d'une maison neuve : chaque point du cahier des charges est verifie.

// En Gherkin (Cucumber)
// Feature: Connexion utilisateur
//   Scenario: Login reussi
//     Given un utilisateur inscrit "alice@test.com"
//     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 criteres d'acceptation du Product Owner en tests executables.

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.

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 proprietes ACID (Atomicite, Coherence, 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 gere 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 necessitant des garanties transactionnelles.

Fonction associee a une route qui gere les mutations de donnees (POST, PUT, DELETE) via les soumissions de formulaires natifs.

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

export async function createAction({ request }) {
  const formData = await request.formData();
  await api.createUser(Object.fromEntries(formData));
  return redirect('/users');
}
// Route: { path: 'users/new', action: createAction }

Cas d'usage : Gerer les soumissions de formulaires avec revalidation automatique des loaders apres mutation.

Hook qui permet d'executer du code a un moment precis du cycle WordPress (init, wp_head, save_post, etc.). Ne retourne pas de valeur.

Comme une alarme programmee : quand elle sonne, tu executes l'action prevue.

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 executer du code en reaction a un evenement WordPress : creation de post, login, activation de plugin.

Deux patterns ORM opposes. Active Record (Eloquent) : l'objet connait sa persistence. Data Mapper (Doctrine) : un mapper externe gere la persistence, l'entite reste pure.

Active Record : un employe qui classe lui-meme ses dossiers. Data Mapper : un archiviste independant qui gere 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 metier riche.

Mathematicienne britannique consideree comme la premiere programmeuse de l'histoire. Elle a ecrit le premier algorithme destine a etre execute par une machine, la machine analytique de Charles Babbage.

La premiere personne a avoir ecrit une recette de cuisine... avant meme 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 : Connaitre les origines de la programmation et comprendre que l'informatique a des racines bien anterieures aux ordinateurs electroniques.

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 electrique : ta prise francaise fonctionne dans une prise anglaise grace a l'adaptateur.

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

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

Architecte britannique, ancien VP Cloud chez Netflix et AWS. Il a dirige la migration pionniere de Netflix vers le cloud et les microservices, posant les bases de l'architecture cloud-native.

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 cooperatifs applicatifs geres par PostgreSQL. Contrairement aux verrous de table, ils n'ont de sens que pour l'application qui les utilise. Peuvent etre 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 : Eviter les executions concurrentes de cron jobs ou de migrations sur la meme ressource logique.

Groupe d'entites et de value objects traite comme une unite de coherence transactionnelle. Toutes les modifications passent par la racine d'agregat.

Un bon de commande avec ses lignes : tu ne modifies jamais une ligne directement, tu passes toujours par la commande.

class Order {
  #items = [];
  addItem(product, qty) {
    this.#items.push(new OrderLine(product, qty));
    this.recalculateTotal();
  }
}

Cas d'usage : Garantir les invariants metier dans un perimetre transactionnel defini.

Entite principale d'un agregat qui sert de point d'entree unique. Les objets externes ne peuvent referencer que la racine, jamais les entites internes.

Le chef d'equipe : toute communication avec l'equipe passe par lui pour garantir la coherence.

// Order est la racine, OrderLine est interne
const order = await orderRepo.findById(id);
order.addItem(product, qty); // Pas: orderLine.setQty()
await orderRepo.save(order);

Cas d'usage : Proteger les invariants metier en forçant toutes les operations via un point d'entree unique.

Framework de transformation de donnees ou les documents passent par une sequence d'etapes (stages). Chaque stage transforme les documents et les passe au suivant, comme un pipeline Unix.

Une chaine de montage en usine : chaque poste (stage) effectue une operation sur la piece avant de la passer au suivant.

db.orders.aggregate([
  { $match: { status: 'completed' } },
  { $group: {
    _id: '$customerId',
    total: { $sum: '$amount' }
  }},
  { $sort: { total: -1 } }
]);

Cas d'usage : Calculer des statistiques, generer des rapports ou transformer des donnees complexes directement dans MongoDB.

Mathematicien britannique, pere de l'informatique theorique. Il a formalise le concept de machine universelle (machine de Turing) et a joue un role decisif dans le dechiffrement d'Enigma pendant la Seconde Guerre mondiale.

L'architecte qui a dessine les plans de tous les ordinateurs... avant qu'aucun ne soit construit.

// Machine de Turing — concept fondamental
// Etat + Ruban + Regles de transition
// Si etat=q0 et symbole=1 alors
//   ecrire 0, deplacer droite, aller q1
// Base theorique de TOUT programme

Cas d'usage : Comprendre les fondements theoriques de l'informatique : calculabilite, decidabilite et les limites de ce qu'un ordinateur peut resoudre.

Service SaaS de recherche instantanée avec typo-tolerance, facettes et analytics intégrés. Offre des widgets UI prêts à l'emploi (InstantSearch).

Un moteur de recherche Google clé en main pour votre propre site, avec résultats en moins de 50ms.

import algoliasearch from 'algoliasearch';
const client = algoliasearch('APP_ID', 'SEARCH_KEY');
const index = client.initIndex('products');
const { hits } = await index.search('iphone', {
  filters: 'price < 1000',
  hitsPerPage: 20,
});

Cas d'usage : Ajouter rapidement une recherche performante sur un site e-commerce ou une documentation.

Ecosysteme de librairies CSS-in-JS alternatives : Emotion (API similaire + css prop), Stitches (variants), Vanilla Extract (zero-runtime), Panda CSS (build-time).

Differentes marques de voiture : meme but (se deplacer), moteurs et options differents.

// Emotion
import { css } from '@emotion/react'
<div css={css`color: red;`} />

// Vanilla Extract
import { style } from '@vanilla-extract/css'
const box = style({ color: 'red' })

Cas d'usage : Choisir la librairie CSS-in-JS adaptee aux contraintes du projet (perf, DX, SSR).

Proxy helper deploye a cote d'un service pour gerer les connexions sortantes (retry, circuit breaker, monitoring). Variante du Sidecar.

Un ambassadeur diplomatique : il represente ton pays et gere les protocoles complexes a ta place.

// Le sidecar ambassador gere le retry et le circuit breaking
// L'app appelle simplement localhost:9000
const res = await fetch('http://localhost:9000/external-api');

Cas d'usage : Simplifier les connexions sortantes d'un service vers des APIs externes.

Fichiers de declaration (.d.ts) qui decrivent la forme de code JavaScript existant sans implementation. Permettent a TS de typer des libs JS.

Comme un plan architectural sans les murs reels — il decrit la structure sans la construire.

// globals.d.ts
declare const API_URL: string;
declare function legacy(x: number): string;
// Utilisable partout sans import

Cas d'usage : Typer des bibliotheques JavaScript, des variables globales injectees ou du code legacy.

API CSS qui positionne un élément relativement à un autre (l'ancre) sans JS. Gère automatiquement le repositionnement quand l'espace manque (fallback positioning).

Comme un post-it attaché à un objet spécifique sur un bureau : il suit l'objet et se déplace si l'espace manque.

.trigger { anchor-name: --btn; }
.tooltip {
  position: fixed;
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(center);
  position-try: flip-block;
}

Cas d'usage : Positionner des tooltips, popovers et menus contextuels par rapport à leur déclencheur sans Floating UI.

Informaticien danois, createur de TypeScript, C# et Turbo Pascal. Chez Microsoft, il a transforme l'ecosysteme JavaScript avec TypeScript, adopte massivement par l'industrie.

Le traducteur qui a ajoute la grammaire a JavaScript — comme mettre des panneaux de signalisation sur une autoroute sans regles.

// TypeScript — Anders Hejlsberg, 2012
interface User {
  name: string;
  age: number;
}
const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};

Cas d'usage : TypeScript est devenu le standard pour les projets JS professionnels. Comprendre son createur aide a saisir sa philosophie.

Chercheur slovaco-canadien en IA, ancien directeur IA chez Tesla (Autopilot) et chez OpenAI. Ses tutoriels YouTube sur les reseaux de neurones 'from scratch' sont des references pedagogiques.

Le YouTuber PhD qui code des reseaux de neurones en live comme d'autres font des recettes de cuisine.

# micrograd — Andrej Karpathy
# Moteur autograd en 100 lignes
class Value:
    def __init__(self, data):
        self.data = data
        self.grad = 0
    def __add__(self, other):
        return Value(self.data + other.data)
    def backward(self): ...

Cas d'usage : Ses projets pedagogiques (micrograd, nanoGPT, minGPT) sont les meilleures ressources pour comprendre l'IA de l'interieur.

Informaticien britannico-americain, co-fondateur de Coursera et de Google Brain. Son cours de Machine Learning sur Coursera est le plus suivi au monde, formant des millions de personnes a l'IA.

Le prof de maths qui a rendu l'IA accessible a tout le monde — son cours gratuit a forme plus de devs IA que toutes les universites reunies.

# Machine Learning — Andrew Ng
# Regression lineaire (cours Coursera)
import numpy as np

def gradient_descent(X, y, theta, alpha, n):
    for _ in range(n):
        h = X @ theta
        theta -= (alpha/len(y)) * X.T @ (h - y)
    return theta

Cas d'usage : Son cours Coursera est LE point d'entree recommande pour apprendre le machine learning.

Classes animate-* pour les animations predefinies (spin, ping, pulse, bounce) et transition-* pour les transitions CSS avec duree et easing configurables.

animate c'est une choregraphie complete, transition c'est juste un fondu entre deux poses.

<div class="animate-spin h-8 w-8 border-4
  border-blue-500 rounded-full border-t-transparent">
</div>
<button class="transition-all duration-300 ease-in-out
  hover:scale-105 hover:shadow-lg">Bouton</button>

Cas d'usage : Ajouter du mouvement subtil aux interactions utilisateur (loading spinners, hover effects).

Classes sans nom definies a la volee avec new class. Utiles pour creer des implementations jetables d'interfaces, surtout dans les tests.

Comme un figurant dans un film : il joue son role une seule fois sans avoir besoin d'un nom au generique.

$mock = new class implements Logger {
  public array $logs = [];
  public function log(string $msg): void {
    $this->logs[] = $msg;
  }
};

Cas d'usage : Pour les tests unitaires (mocks rapides) ou les implementations uniques dans des factories.

Outil de configuration management et d'automatisation agentless (via SSH). Utilise des playbooks YAML déclaratifs pour configurer des serveurs.

Un chef d'équipe qui donne des instructions par téléphone (SSH) sans avoir besoin d'installer un logiciel sur place.

# playbook.yml
- hosts: webservers
  tasks:
    - name: Install nginx
      apt: name=nginx state=present
    - name: Start nginx
      service: name=nginx state=started

Cas d'usage : Configurer des serveurs, déployer des applications, orchestrer des tâches multi-machines.

Couche de traduction entre votre domaine et un systeme externe ou legacy. Empeche les concepts etrangers de polluer votre modele.

Un traducteur-interprete entre deux pays : il adapte non seulement la langue mais aussi les conventions culturelles.

class LegacyUserAdapter {
  toModernUser(legacyData) {
    return new User({
      id: legacyData.USR_ID,
      name: `${legacyData.FNAME} ${legacyData.LNAME}`,
    });
  }
}

Cas d'usage : Integrer un systeme legacy sans contaminer votre domaine avec ses conventions.

Plateforme de streaming distribué à haute performance. Les messages sont persistés dans des topics partitionnés, consommés par des consumer groups.

Un journal officiel : les articles (messages) sont publiés, archivés, et chaque lecteur (consumer) peut relire depuis n'importe quelle date.

// Producer
await producer.send({
  topic: 'user-events',
  messages: [{ key: userId, value: JSON.stringify(event) }]
});
// Consumer
await consumer.subscribe({ topic: 'user-events' });
await consumer.run({ eachMessage: async ({ message }) => {
  processEvent(JSON.parse(message.value));
}});

Cas d'usage : Event sourcing, streaming de données temps réel, communication inter-services à grande échelle.

Point d'entree unique pour toutes les requetes client. Gere routage, authentification, rate limiting, aggregation et transformation.

La reception d'un hotel : tous les clients passent par elle, et elle dirige vers le bon service.

// Kong / AWS API Gateway config
routes:
  - path: /users
    service: user-service
    plugins: [rate-limit, jwt-auth]
  - path: /orders
    service: order-service

Cas d'usage : Entree unifiee pour les microservices avec concerns transversaux centralises.

Bonnes pratiques de gestion des clés API : génération sécurisée, stockage hashé côté serveur, rotation régulière, scoping des permissions et révocation.

Des clés de voiture numérotées avec un registre : on sait qui a quelle clé, on peut la désactiver à distance.

const apiKey = `sk_live_${crypto.randomBytes(32).toString('hex')}`;
// Store only hash in DB
const hash = crypto.createHash('sha256').update(apiKey).digest('hex');
await db.insert({ hash, userId, permissions: ['read'], expiresAt });

Cas d'usage : Fournir un accès programmatique à votre API avec traçabilité et contrôle granulaire.

Offset : skip/limit simple mais instable sur les donnees qui changent. Cursor : basee sur un marqueur stable, performante a grande echelle.

Offset : 'page 5 d'un livre' (instable si on ajoute des pages). Cursor : 'lire a partir du marque-page' (toujours fiable).

// Offset: GET /users?page=3&limit=20
// Cursor: GET /users?after=eyJpZCI6MTAwfQ&limit=20
const cursor = Buffer.from(JSON.stringify({ id: lastId })).toString('base64');

Cas d'usage : Offset pour les petits datasets avec UI de pages. Cursor pour les feeds infinis et les APIs a fort volume.

Limite le nombre de requetes qu'un client peut faire dans un intervalle de temps. Protege contre les abus, le DDoS et la surcharge.

Le nombre max de retraits au distributeur par jour : protege la banque et ton compte.

// Express rate limiter
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 min
  max: 100, // 100 requetes par fenetre
});
app.use('/api/', limiter);

Cas d'usage : APIs publiques, protection contre les abus, equite d'acces entre clients.

Strategies pour faire evoluer une API sans casser les clients existants : URL path (/v1/), header (Accept), query param. Chaque approche a ses tradeoffs.

Les editions d'un manuel scolaire : la v1 reste disponible pendant que la v2 est utilisee par les nouveaux etudiants.

// URL versioning (le plus courant)
app.use('/api/v1/users', usersV1Router);
app.use('/api/v2/users', usersV2Router);
// Header versioning
// Accept: application/vnd.api+json;version=2

Cas d'usage : APIs publiques avec des clients que vous ne controlez pas et qui ne migrent pas en meme temps.

Orchestre les use cases de l'application : coordonne le domaine, les repositories et les services externes. Ne contient pas de logique metier.

Un chef de projet : il coordonne les equipes mais ne code pas lui-meme.

class PlaceOrderUseCase {
  async execute(dto) {
    const order = Order.create(dto);
    await this.repo.save(order);
    await this.eventBus.publish(order.events);
  }
}

Cas d'usage : Orchestrer un use case complet : validation, persistance, publication d'events.

Syntaxe entre crochets permettant d'utiliser des valeurs custom non prevues dans le theme. Evite de modifier la config pour des cas ponctuels.

Un joker dans un jeu de cartes : tu l'utilises quand aucune carte standard ne convient.

<div class="top-[117px] w-[calc(100%-2rem)]
  bg-[#1da1f2] grid-cols-[1fr_2fr]
  text-[clamp(1rem,2vw,1.5rem)]">
</div>

Cas d'usage : Respecter une maquette pixel-perfect avec des valeurs specifiques sans polluer la config Tailwind.

Attributs WAI-ARIA qui définissent le rôle d'un élément pour les technologies d'assistance. Ils complètent ou remplacent la sémantique native quand le HTML seul ne suffit pas.

Comme un badge nominatif qui précise la fonction de quelqu'un dans une équipe, même si son titre officiel est différent.

<div role="alert">Erreur de saisie</div>
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <div role="tabpanel">Contenu</div>
</div>

Cas d'usage : Quand un composant custom (onglets, modal, menu) ne peut pas utiliser d'éléments HTML natifs.

Methodes fonctionnelles : map (transformer), filter (filtrer), reduce (accumuler), find/findIndex (chercher), some/every (tester), flat/flatMap (aplatir). Chainables et non-mutantes.

Un pipeline de cuisine : laver (filter), couper (map), mixer (reduce) — chaque etape transforme sans toucher au stock original.

const result = users
  .filter(u => u.active)
  .map(u => u.name)
  .sort();
const total = prices.reduce((sum, p) => sum + p, 0);
const found = items.find(i => i.id === 42);

Cas d'usage : Transformation de donnees, filtrage de listes, calculs d'aggregation, recherche.

PostgreSQL supporte nativement les colonnes de type tableau. Permet de stocker plusieurs valeurs du meme type dans une seule colonne, avec des operateurs dedies (@>, &&, ANY).

Une cellule Excel qui peut contenir une liste de valeurs au lieu d'une seule.

CREATE TABLE posts (
  id SERIAL PRIMARY KEY,
  tags TEXT[] DEFAULT '{}'
);
SELECT * FROM posts WHERE 'sql' = ANY(tags);
SELECT * FROM posts WHERE tags @> '{sql,pg}';

Cas d'usage : Stocker des tags, des permissions ou de petites listes sans creer une table de jointure.

Zone de memoire brute de taille fixe, non redimensionnable. Accessible via des TypedArrays (Uint8Array, Float32Array, etc.) ou DataView pour lire/ecrire des donnees binaires.

Un terrain vague cloture : il existe en memoire, mais tu as besoin d'outils (TypedArray) pour y construire quelque chose.

const buf = new ArrayBuffer(16);
const view = new Uint8Array(buf);
view[0] = 255;
const float = new Float32Array(buf);
// Meme memoire, vue differente

Cas d'usage : Traitement d'images, audio, fichiers binaires, communication avec WebGL ou WASM.

Syntaxe compacte pour les fonctions anonymes avec =>, qui ne possede ni son propre this, ni arguments, ni super. Le this est herite du scope lexical englobant.

Un assistant qui n'a pas de bureau propre (pas de this) : il utilise toujours le bureau de son chef (scope parent).

const add = (a, b) => a + b;
const greet = name => `Hello ${name}`;
const getObj = () => ({ key: 'value' });

class Timer {
  start() {
    setInterval(() => console.log(this), 1000);
    // this = instance Timer (lexical)
  }
}

Cas d'usage : Callbacks, methodes de tableaux (map, filter), quand on veut capturer le this du parent.

Syntaxe courte fn() => pour les closures a une seule expression, avec capture automatique des variables du scope parent par valeur.

Comme un post-it avec une instruction rapide au lieu d'ecrire une lettre complete.

$prices = [10, 20, 30];
$tax = 0.2;

$withTax = array_map(
  fn($price) => $price * (1 + $tax),
  $prices
);

Cas d'usage : Pour les callbacks courts dans array_map, array_filter et autres fonctions d'ordre superieur.

Fichier ou ensemble de fichiers produits par un job CI/CD (binaire, image Docker, rapport de tests). Passé entre stages ou archivé.

Le produit fini sortant d'un atelier, prêt à être livré ou inspecté au poste suivant.

- uses: actions/upload-artifact@v4
  with:
    name: build-output
    path: dist/

Cas d'usage : Partager le résultat du build entre le job de build et le job de deploy.

Prop speciale qui change l'element HTML rendu sans modifier les styles. Un Button styled.button peut etre rendu comme un <a> avec as="a".

Un acteur qui joue differents roles avec le meme costume.

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: blue;
  color: white;
`
// Rendu comme <a> avec les memes styles
<Button as="a" href="/page">Lien style</Button>
// Rendu comme un autre composant
<Button as={Link} to="/page">Nav</Button>

Cas d'usage : Reutiliser les styles d'un composant sur un element HTML different (button -> a, div -> section).

Propriété aspect-ratio qui maintient un rapport largeur/hauteur fixe sur un élément. Remplace le hack du padding-top en pourcentage pour les conteneurs responsives.

Comme un cadre photo qui garde toujours les mêmes proportions, quelle que soit sa taille.

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.avatar {
  aspect-ratio: 1;
  border-radius: 50%;
}

Cas d'usage : Maintenir les proportions des vidéos, images et cartes sans le hack du padding-bottom.

Fonction avec une signature asserts qui lance une erreur si la condition n'est pas remplie. Apres l'appel, le type est narrowe pour le reste du scope.

Comme un douanier qui refuse l'entree et arrete tout si vos papiers sont invalides — pas de retour possible.

function assertString(val: unknown): asserts val is string {
  if (typeof val !== "string") throw new Error("Not string");
}
const x: unknown = getData();
assertString(x);
x.toUpperCase(); // x est string ici

Cas d'usage : Validation stricte en debut de fonction qui narrowe les types pour tout le reste du bloc.

Sucre syntaxique sur les Promises. async declare une fonction retournant une Promise, await suspend l'execution jusqu'a la resolution. Rend le code asynchrone lisible comme du synchrone.

Commander un cafe et attendre au comptoir : tu ne fais rien d'autre en attendant (await), mais le reste du cafe (event loop) continue de tourner.

async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    return await res.json();
  } catch (err) {
    console.error('Fetch failed', err);
  }
}

Cas d'usage : Ecrire du code asynchrone lisible pour les appels API, acces BD, operations fichiers.

Fonction async function* combinant generateurs et async/await. Peut yield des valeurs de maniere asynchrone, consommable via for await...of.

Un chef qui prepare les plats un par un (yield) en attendant chaque ingredient de la livraison (await).

async function* pollData(url, ms) {
  while (true) {
    const res = await fetch(url);
    yield await res.json();
    await new Promise(r => setTimeout(r, ms));
  }
}

Cas d'usage : Polling periodique, lecture de flux reseau, traitement de files de messages.

Protocole pour iterer sur des sequences asynchrones. L'objet implemente [Symbol.asyncIterator]() et next() retourne une Promise de {value, done}. Utilisable avec for await...of.

Un podcast en streaming : chaque episode arrive de maniere asynchrone, et tu les ecoutes un par un.

async function* fetchPages(url) {
  let page = 1;
  while (true) {
    const data = await fetch(`${url}?p=${page++}`);
    const json = await data.json();
    if (!json.length) return;
    yield json;
  }
}
for await (const page of fetchPages('/api')) {}

Cas d'usage : Pagination API, lecture de streams, traitement de donnees en flux.

Approche où chaque classe CSS fait exactement une chose (une propriété, une valeur). Le CSS total est borné car les classes sont réutilisées partout. Tailwind et UnoCSS l'implémentent.

Comme un alphabet : un nombre fini de lettres pour écrire une infinité de mots.

/* Atomic classes */
.d-flex { display: flex; }
.ai-center { align-items: center; }
.p-4 { padding: 1rem; }
.bg-blue { background: blue; }

<div class="d-flex ai-center p-4 bg-blue">

Cas d'usage : Grands projets où la taille du CSS doit rester constante même si le nombre de composants augmente.

Approche ou chaque classe CSS ne fait qu'une seule chose. Les outils comme Tailwind, Griffel ou Stylex generent des classes atomiques pour minimiser la taille du CSS.

Un alphabet : chaque lettre est simple, mais tu peux ecrire tous les mots en les combinant.

/* Atomic CSS genere */
.a { display: flex; }
.b { padding: 8px; }
.c { color: blue; }

/* Usage */
<div class="a b c">...</div>
/* Au lieu de: .card { display:flex; padding:8px; color:blue; } */

Cas d'usage : Reduire drastiquement la taille du CSS final car les declarations sont partagees entre composants.

Objet global fournissant des operations atomiques sur les SharedArrayBuffer : load, store, add, sub, and, or, xor, wait, notify. Garantit l'integrite en contexte multithread.

Un tour de parole officiel : chaque personne attend son tour pour parler (wait/notify) et ses mots sont enregistres sans interruption (operations atomiques).

const sab = new SharedArrayBuffer(4);
const arr = new Int32Array(sab);
Atomics.store(arr, 0, 42);
Atomics.load(arr, 0); // 42
Atomics.add(arr, 0, 8); // ancien: 42
Atomics.load(arr, 0); // 50

Cas d'usage : Synchronisation entre workers, compteurs partages, mutex software.

Metadonnees structurees ajoutees au code via #[...], introduites en PHP 8.0. Remplacent les annotations en commentaires par une syntaxe native.

Comme des etiquettes collees sur des boites : elles decrivent le contenu sans le modifier.

#[Route('/api/users', methods: ['GET'])]
class UserController {
  #[Cache(ttl: 3600)]
  public function list(): Response {
    // ...
  }
}

Cas d'usage : Pour la configuration declarative : routes, validation, serialisation, ORM mapping.

Mecanismes d'authentification de MongoDB. SCRAM (Salted Challenge Response Authentication Mechanism) est le defaut, x509 utilise des certificats TLS pour une authentification sans mot de passe.

SCRAM = badge avec code PIN. x509 = empreinte digitale, impossible a falsifier.

// Creer un utilisateur SCRAM
db.createUser({
  user: 'admin',
  pwd: 'secret',
  roles: [{ role: 'readWrite', db: 'mydb' }]
});

Cas d'usage : Securiser l'acces a la base en production, SCRAM pour les humains, x509 pour les services.

Piege de performance ou trop d'options avec autoload=yes sont chargees en memoire a chaque requete. Une table wp_options volumineuse ralentit tout le site.

Comme charger TOUS tes dossiers dans ton sac chaque matin au lieu de prendre seulement ceux du jour.

// Mauvais : autoload par defaut = yes
update_option('huge_data', $bigArray);

// Bon : desactiver autoload
update_option('huge_data', $bigArray, false);

// Audit
// SELECT SUM(LENGTH(option_value)) FROM wp_options
// WHERE autoload = 'yes';

Cas d'usage : Lors de l'audit de performance d'un site WordPress lent au premier chargement.

React 18 regroupe automatiquement plusieurs mises a jour d'etat en un seul re-rendu, meme dans les callbacks asynchrones et les timeouts.

Comme un facteur qui attend d'avoir tout le courrier du quartier avant de faire sa tournee, au lieu d'un aller-retour par lettre.

// React 18: un seul re-rendu pour les deux
async function handleClick() {
  const data = await fetchData();
  setName(data.name);  // batch
  setAge(data.age);    // batch -> 1 seul rendu
}

Cas d'usage : Amelioration automatique des performances sans intervention du developpeur en React 18+.

Plugin PostCSS qui ajoute automatiquement les prefixes vendeur (-webkit-, -moz-, etc.) selon la liste de navigateurs cibles (browserslist). Plus besoin de les ecrire manuellement.

Un traducteur qui ajoute automatiquement les sous-titres dans toutes les langues necessaires.

/* Input */
.box { display: flex; user-select: none; }

/* Output avec Autoprefixer */
.box {
  display: -webkit-flex;
  display: flex;
  -webkit-user-select: none;
  user-select: none;
}

Cas d'usage : Garantir la compatibilite navigateurs sans ecrire manuellement les prefixes vendeur.

Utility type qui decompresse recursivement les Promise imbriquees pour obtenir le type de la valeur resolue finale.

Comme ouvrir des paquets cadeaux emboites jusqu'a trouver le vrai cadeau au centre.

type A = Awaited<Promise<string>>; // string
type B = Awaited<Promise<Promise<number>>>; // number
type C = Awaited<string>; // string

Cas d'usage : Obtenir le type resolu d'une fonction async ou d'une chaine de Promises pour le typage correct.

Type d'index par defaut dans PostgreSQL. Structure en arbre equilibre optimisee pour les comparaisons d'egalite et de plage (<, >, BETWEEN, ORDER BY).

Un dictionnaire avec des onglets alphabetiques : tu trouves n'importe quel mot en quelques sauts.

CREATE INDEX idx_users_email
  ON users (email);
-- Equivalent a :
CREATE INDEX idx_users_email
  ON users USING btree (email);

Cas d'usage : Optimiser les requetes de recherche, tri et filtrage sur des colonnes frequemment interrogees.

Transpileur JavaScript historique qui transforme la syntaxe moderne (ES2024+, JSX) en code compatible avec les anciens navigateurs. Remplace progressivement par SWC et esbuild.

Comme un traducteur universel : il prend votre texte moderne et le traduit en langue ancienne que tout le monde comprend.

// babel.config.json
{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.5%" }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

Cas d'usage : Pour les projets legacy necessitant des transformations custom ou un support navigateurs tres anciens.

Propriété backdrop-filter qui applique des effets graphiques (flou, saturation) à la zone derrière un élément. Crée des effets de verre dépoli (glassmorphism) sans image.

Comme une vitre dépolie dans une salle de bain : on voit les formes à travers mais pas les détails.

.glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Cas d'usage : Créer des navbars ou panneaux en glassmorphism qui laissent transparaître le contenu en fond.

Informaticienne americaine, creatrice du principe de substitution de Liskov (le L de SOLID). Elle a aussi concu le langage CLU qui a influence Python, Java et C#.

La gardienne de l'heritage : grace a elle, quand tu crees une sous-classe, tu sais qu'elle ne cassera pas le contrat du parent.

// Principe de Liskov (LSP)
// Si S est sous-type de T, alors tout objet T
// peut etre remplace par un objet S
// sans casser le programme
class Bird { fly() {} }
class Penguin extends Bird { fly() { throw Error() } }
// VIOLATION du LSP !

Cas d'usage : Principe fondamental de la POO, question classique en entretien et pilier de SOLID.

Fichier index.ts/js qui re-exporte les modules d'un dossier pour simplifier les imports. Peut nuire au tree shaking et au temps de build si mal utilise.

Un sommaire de livre : pratique pour trouver un chapitre, mais si le sommaire force a charger tout le livre, c'est contre-productif.

// components/index.ts (barrel)
export { Button } from './Button';
export { Modal } from './Modal';
export { Input } from './Input';

// Usage
import { Button } from './components';

Cas d'usage : API publiques de librairies, organisation de dossiers de composants.

Fichiers index.ts qui re-exportent tout un dossier. Pratique pour les imports mais cause des problemes de tree-shaking et de performance en chargeant du code inutilise.

Comme une porte d'entree unique pour un centre commercial : pratique pour trouver, mais vous devez traverser tout le batiment meme pour un seul magasin.

// src/utils/index.ts (barrel file)
export { formatDate } from './date';
export { formatCurrency } from './currency';
export { sendEmail } from './email'; // lourd!

// Probleme: import { formatDate } from './utils'
// => charge aussi sendEmail inutilement
// Fix: import directement depuis le fichier source

Cas d'usage : Acceptable pour les librairies publiees, mais a eviter dans le code applicatif pour les performances.

Modèle de cohérence des systèmes distribués NoSQL. Basically Available, Soft state, Eventually consistent. Opposé à ACID, favorise la disponibilité.

Un réseau social : ton post apparaît chez toi immédiatement mais chez tes amis quelques secondes plus tard.

// Écriture sur le noeud primaire
await primary.set('user:123', userData);
// La replica peut avoir un léger retard
const cached = await replica.get('user:123');
// Peut retourner l'ancienne valeur pendant quelques ms

Cas d'usage : Systèmes à très haute disponibilité où un léger délai de cohérence est acceptable.

Behavior-Driven Development : extension du TDD qui exprime les tests en langage metier (Given-When-Then) pour favoriser la collaboration entre devs, QA et PO.

Comme ecrire le scenario d'un film avant de le tourner : tout le monde (realisateur, acteurs, producteur) comprend l'histoire.

// Cucumber + step definitions
// Feature: Panier d'achat
//   Scenario: Ajout d'un produit
//     Given un panier vide
//     When j'ajoute "iPhone" au panier
//     Then le panier contient 1 article

Given('un panier vide', () => { cart = new Cart(); });
When('j\'ajoute {string} au panier', (item) => {
  cart.add(item);
});

Cas d'usage : Pour les projets ou la communication entre equipes techniques et metier est critique pour la qualite.

Convention de nommage Block-Element-Modifier qui structure les classes CSS. Block = composant, Element = partie interne (__), Modifier = variante (--).

Comme un système d'adresse : Pays__Ville--Quartier identifie précisément chaque zone.

/* Block */
.card {}
/* Element */
.card__title {}
.card__body {}
/* Modifier */
.card--featured {}
.card__title--large {}

Cas d'usage : Organiser le CSS de projets moyens à grands pour éviter les conflits de nommage et clarifier les relations.

Convention de nommage Block__Element--Modifier combinee avec le nesting Sass et le caractere &. Cree des classes plates et previsibles.

Un systeme d'adresse : Immeuble__Appartement--Variante (card__title--large).

.card {
  padding: 1rem;
  &__header { border-bottom: 1px solid #eee; }
  &__title { font-size: 1.25rem; }
  &--featured {
    border-color: gold;
    .card__title { color: gold; }
  }
}

Cas d'usage : Nommer les classes CSS de facon previsible et eviter les conflits de specificite.

Informaticien neerlandais, co-createur de CSS avec Hakon Wium Lie. Il travaille au W3C sur les specifications CSS depuis 1995.

Le co-architecte du systeme de decoration du web — chaque page stylisee lui doit quelque chose.

/* Specification CSS originale */
/* Hakon Wium Lie & Bert Bos, 1996 */
h1 { color: blue; }
p { font-size: 14pt; }
/* Cascade + Specificite + Heritage */

Cas d'usage : Comprendre les specifications CSS et l'importance du W3C dans la standardisation du web.

Un backend dedie par type de client (web, mobile, IoT) qui adapte et agrege les donnees des services backend pour les besoins specifiques de chaque frontend.

Un assistant personnel par langue : chacun traduit et resume l'information selon les besoins de son interlocuteur.

// Mobile BFF - donnees legeres
app.get('/api/mobile/feed', async (req, res) => {
  const data = await feedService.get();
  res.json(data.map(toMobileFeedItem));
});

Cas d'usage : Quand le web a besoin de donnees riches et le mobile de donnees legeres.

Type primitif pour representer des entiers de taille arbitraire, au-dela de Number.MAX_SAFE_INTEGER (2^53 - 1). Cree avec le suffixe n ou BigInt().

Un cahier avec un nombre illimite de pages pour ecrire des nombres, contrairement a une calculatrice a ecran fixe.

const big = 9007199254740993n;
big + 1n; // 9007199254740994n
// Attention : pas de melange
// big + 1; // TypeError
BigInt(Number.MAX_SAFE_INTEGER) + 1n;

Cas d'usage : Identifiants de bases de donnees 64-bit, calculs financiers de precision, cryptographie.

Entrepreneur americain, co-fondateur de Microsoft. Il a democratise l'ordinateur personnel avec MS-DOS puis Windows, et a fait de Microsoft l'entreprise dominante du logiciel pendant des decennies.

Le commercant qui a mis un ordinateur sur chaque bureau du monde — en vendant le logiciel, pas le materiel.

10 REM BASIC — Le premier produit Microsoft
20 PRINT "Hello, World!"
30 GOTO 20
REM Microsoft BASIC (1975)
REM Premier logiciel commercial pour PC

Cas d'usage : Comprendre l'histoire de Microsoft et comment le modele de licence logicielle a faconne l'industrie.

Methodes de Function.prototype pour controler this. call(ctx, ...args) et apply(ctx, [args]) appellent immediatement. bind(ctx, ...args) retourne une nouvelle fonction avec this lie.

call = telephoner a quelqu'un maintenant. apply = idem mais tu lis la liste des courses. bind = enregistrer le numero en favori pour appeler plus tard.

function greet(msg) { return `${msg}, ${this.name}`; }
const user = { name: 'Bob' };
greet.call(user, 'Hi');     // 'Hi, Bob'
greet.apply(user, ['Hi']);  // 'Hi, Bob'
const bound = greet.bind(user);
bound('Hey');               // 'Hey, Bob'

Cas d'usage : Fixer le this dans les callbacks, emprunter des methodes d'un autre objet, partial application.

Informaticien danois, createur du C++. Il a ajoute la programmation orientee objet au langage C, creant le langage qui propulse les jeux video, navigateurs et systemes embarques.

Celui qui a pris le C (une voiture fiable) et y a ajoute la turbo, la clim et le GPS — au prix d'un manuel de 1500 pages.

#include <iostream>
using namespace std;

int main() {
    cout << "Hello, World!" << endl;
    return 0;
}
// C++ — Bjarne Stroustrup, 1985

Cas d'usage : Comprendre les fondations de la POO et pourquoi C++ reste dominant dans la performance critique (jeux, finance, systemes).

Stratégie de déploiement maintenant deux environnements identiques (blue=actif, green=nouvelle version). Le switch est instantané via le load balancer.

Préparer un deuxième plateau repas en cuisine puis échanger les plateaux sur la table d'un coup.

# 1. Déployer la nouvelle version sur green
# 2. Tester green
# 3. Basculer le trafic
aws elbv2 modify-listener \
  --listener-arn $ARN \
  --default-actions TargetGroupArn=$GREEN_TG
# 4. L'ancien blue devient le prochain green

Cas d'usage : Déploiement zero-downtime avec rollback instantané en cas de problème.

Informaticien americain, co-inventeur de TCP/IP avec Vint Cerf. Il a aussi lance le programme qui a mene a la creation d'ARPANET, l'ancetre d'Internet.

Le co-architecte de l'autoroute numerique mondiale — sans lui, pas de routes pour le web.

// TCP — fiabilite de la communication
// SYN -> SYN-ACK -> ACK
// Three-way handshake
// Chaque paquet est acquitte
// Retransmission si perte

Cas d'usage : Comprendre les fondations d'Internet et du protocole qui garantit la fiabilite des communications.

Frontiere explicite dans laquelle un modele de domaine particulier s'applique. Chaque contexte a son propre langage et ses propres regles.

Les departements d'une entreprise : 'client' signifie prospect en commercial et compte en comptabilite.

// Context 'Sales': Customer has cart, wishlist
// Context 'Billing': Customer has invoices, payments
// Meme mot, modeles differents, bases separees

Cas d'usage : Decomposer un systeme complexe en sous-domaines autonomes avec des frontieres claires.

Regles GitHub/GitLab sur les branches protegees (main, develop) : requiert reviews, CI verte, signatures, et interdit les force push. Filet de securite essentiel.

Comme les barrieres de securite sur une autoroute : elles empechent les vehicules de sortir de la route meme en cas d'erreur.

# Regles recommandees pour main
# - Require 1+ review approvals
# - Require status checks (CI) to pass
# - Require branches to be up to date
# - No force pushes
# - No deletions
# - Include administrators

Cas d'usage : Pour proteger les branches de production contre les pushes directs, les force pushes et les merges sans review.

Technique pour simuler du typage nominal en ajoutant une propriete fantome (brand) a un type. Empeche le melange accidentel de types structurellement identiques.

Comme des billets de differentes devises — meme papier, meme forme, mais on ne melange pas des euros et des dollars.

type USD = number & { __brand: "USD" };
type EUR = number & { __brand: "EUR" };
const usd = (n: number) => n as USD;
const eur = (n: number) => n as EUR;
function pay(amount: USD) {}
pay(usd(100)); // OK
// pay(eur(100)); // Erreur

Cas d'usage : Distinguer des IDs, devises ou unites de mesure qui sont structurellement des strings/numbers.

Points de rupture dans les media queries où le layout change pour s'adapter à la taille de l'écran. Les breakpoints modernes sont basés sur le contenu plutôt que sur des appareils spécifiques.

Comme les vitesses d'une boîte de transmission : on passe à la vitesse supérieure quand le régime l'exige.

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}
@media (min-width: 768px) {
  .sidebar { display: block; }
}

Cas d'usage : Adapter les layouts aux différentes tailles d'écran dans une approche mobile-first.

Informaticien americain, createur de JavaScript en 10 jours chez Netscape en 1995. JS est devenu le langage le plus utilise au monde, present dans chaque navigateur web.

Le gars qui a construit un prototype en 10 jours... et 3 milliards d'appareils l'utilisent encore 30 ans plus tard.

// JavaScript — Brendan Eich, 1995
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));
// Cree en 10 jours, domine le web depuis

Cas d'usage : JavaScript est LE langage du web. Le connaitre est obligatoire pour tout developpeur front-end et full-stack.

Informaticien canadien, co-auteur du livre 'The C Programming Language' (K&R) avec Dennis Ritchie. Il a aussi nomme Unix et contribue a AWK.

Le prof qui a ecrit LE manuel que tout le monde a lu — et le premier 'Hello, World!' vient de lui.

// Le premier 'Hello, World!' — B. Kernighan
// Apparu dans un tutorial C de 1974
main() {
    printf("hello, world\n");
}

Cas d'usage : Comprendre l'importance de la documentation et de la pedagogie dans l'adoption d'un langage.

Decouple une abstraction de son implementation pour qu'elles puissent varier independamment. Evite l'explosion combinatoire de sous-classes.

Une telecommande universelle : la telecommande (abstraction) fonctionne avec n'importe quelle TV (implementation).

class Notification {
  constructor(sender) { this.sender = sender; }
  send(msg) { this.sender.deliver(msg); }
}
// new Notification(new SmsSender()).send('Hi');

Cas d'usage : Quand deux dimensions de variation (ex: forme + couleur) generent trop de sous-classes.

Block Range Index, index extremement compact qui stocke les min/max par bloc de pages. Ideal pour les colonnes naturellement ordonnees comme les timestamps.

Au lieu d'indexer chaque page d'un livre, noter juste 'pages 1-50 : chapitres A-C'.

CREATE INDEX idx_logs_time
  ON logs USING brin (created_at)
  WITH (pages_per_range = 128);

Cas d'usage : Indexer des tables de logs ou de series temporelles avec des milliards de lignes et un index minuscule.

API de communication entre contextes de meme origine (onglets, iframes, workers). Plus simple que SharedWorker pour du broadcast de messages.

Une radio interne d'entreprise : tous les bureaux (onglets) branchees sur la meme frequence recoivent le message.

// Onglet 1
const bc = new BroadcastChannel('auth');
bc.postMessage({ type: 'logout' });
// Onglet 2
const bc2 = new BroadcastChannel('auth');
bc2.onmessage = (e) => {
  if (e.data.type === 'logout') redirectToLogin();
};

Cas d'usage : Synchroniser le logout entre onglets, mettre a jour le theme, notifier les onglets d'un changement.

Cryptographe et expert en securite americain, auteur de 'Applied Cryptography'. Il est surnomme le 'security guru' et son blog est une reference en cybersecurite.

Le grand sage de la securite informatique : quand il dit qu'un systeme est fragile, les gouvernements ecoutent.

// Loi de Schneier :
// 'Anyone can invent a security system
//  that he himself cannot break.
//  That doesn't mean it's secure.'
//
// Toujours utiliser des algos eprouves
// (AES, RSA) — jamais inventer les siens

Cas d'usage : Comprendre les principes de securite et pourquoi il ne faut JAMAIS creer sa propre cryptographie.

Ensemble de techniques pour empêcher les attaques par force brute sur l'authentification : lockout progressif, CAPTCHA, délai exponentiel entre les tentatives.

Un coffre-fort qui ajoute 10 secondes d'attente supplémentaires après chaque mauvais code, rendant le crochetage impraticable.

const attempts = await getLoginAttempts(email);
if (attempts > 5) {
  const delay = Math.pow(2, attempts - 5) * 1000;
  await sleep(delay); // Exponential backoff
}
if (attempts > 10) {
  requireCaptcha(req);
}

Cas d'usage : Protéger les formulaires de login et de reset de mot de passe contre les attaques automatisées.

Binary JSON, format de serialisation binaire utilise par MongoDB pour stocker les documents. BSON etend JSON avec des types supplementaires comme Date, ObjectId, Decimal128 et BinData.

JSON en tenue de sport : meme structure mais plus rapide a parcourir et capable de porter des types de donnees plus lourds.

// BSON supporte des types absents en JSON
{
  _id: ObjectId("507f1f77bcf86cd799439011"),
  created: ISODate("2024-01-15"),
  price: NumberDecimal("19.99")
}

Cas d'usage : Comprendre pourquoi MongoDB peut stocker des dates et des nombres decimaux precis, contrairement au JSON brut.

Separe la construction d'un objet complexe de sa representation. Permet de construire etape par etape avec une API fluide.

Commander un burger personnalise : pain, puis steak, puis sauce, puis fromage — chaque etape est optionnelle.

const query = new QueryBuilder()
  .select('name', 'email')
  .from('users')
  .where('active = true')
  .limit(10)
  .build();

Cas d'usage : Construction de requetes SQL, objets de configuration ou DTOs avec beaucoup de parametres optionnels.

Implementation du Builder pattern avec un typage qui evolue a chaque etape. Chaque methode retourne un type plus precis, garantissant la completude a la compilation.

Comme un formulaire multi-etapes ou chaque page deverrouille la suivante — pas de raccourci possible.

class QueryBuilder<T extends object = {}> {
  select<K extends string>(col: K) {
    return this as QueryBuilder<T & Record<K, true>>;
  }
  build(): T { return {} as T; }
}
new QueryBuilder().select("name").select("age").build();

Cas d'usage : APIs fluides (query builders, form builders) ou l'ordre et la completude des appels sont critiques.

Modules integres de Sass (sass:color, sass:math, sass:string, sass:list, sass:map) qui fournissent des fonctions utilitaires sans installation supplementaire.

La boite a outils livree avec ta maison : tournevis, marteau, tout est la de base.

@use 'sass:color';
@use 'sass:math';
@use 'sass:list';

$light: color.adjust(#3498db, $lightness: 20%);
$half: math.div(100%, 2);
$mixed: color.mix(red, blue, 50%);
$first: list.nth((a, b, c), 1); // a

Cas d'usage : Manipuler couleurs, nombres, listes et maps sans dependances externes.

Validateurs integres a Mongoose : required, min/max (Number), minlength/maxlength (String), enum, match (regex). Ils s'executent automatiquement avant la sauvegarde.

Un videur qui verifie ta carte d'identite, ta tenue et ta reservation avant de te laisser entrer.

{
  age: { type: Number, min: 0, max: 150 },
  role: { type: String, enum: ['user', 'admin'] },
  name: { type: String, minlength: 2 }
}

Cas d'usage : Valider les donnees utilisateur avant de les persister en base sans logique custom.

Pattern d'isolation des ressources en compartiments séparés. Si un compartiment sature, les autres continuent de fonctionner normalement.

Les compartiments étanches d'un navire : si un se remplit d'eau, les autres restent secs et le bateau ne coule pas.

// Pools de connexions séparés par service
const paymentPool = new Pool({ max: 10 });
const analyticsPool = new Pool({ max: 5 });
// Si analytics sature son pool,
// le pool de payment reste disponible

Cas d'usage : Empêcher qu'un service lent consomme toutes les connexions et bloque les autres.

Execute un ensemble d'operations d'ecriture (insert, update, delete) en un seul appel reseau. Supporte les modes ordonne et non-ordonne pour optimiser les performances.

Envoyer un colis contenant plusieurs courriers au lieu de poster chaque lettre separement.

await db.collection('users').bulkWrite([
  { insertOne: { document: { name: 'New' } } },
  { updateOne: {
    filter: { name: 'Old' },
    update: { $set: { status: 'archived' } }
  }},
  { deleteOne: { filter: { name: 'Gone' } } }
]);

Cas d'usage : Executer des migrations complexes melangeant insertions, mises a jour et suppressions en une seule operation atomique.

Module pour gerer des queues de jobs asynchrones via Redis et Bull/BullMQ. Permet le traitement en arriere-plan avec retries et scheduling.

Comme une file d'attente au guichet : les taches arrivent, sont traitees dans l'ordre et reessayees si besoin.

@Processor('email')
export class EmailProcessor {
  @Process()
  async sendEmail(job: Job<EmailData>) {
    await this.mailer.send(job.data);
  }
}

// Ajout en queue
await this.emailQueue.add({ to: 'user@mail.com', subject: 'Hello' });

Cas d'usage : Traiter l'envoi d'emails, le redimensionnement d'images ou les exports CSV en arriere-plan.

Librairie Node.js de gestion de queues basée sur Redis. Supporte les jobs delayed, repeatable, la priorisation et les workers concurrents.

Une file d'attente intelligente avec des tickets numérotés, des VIP, et des tâches programmées.

const queue = new Queue('emails');
await queue.add('welcome', { userId: '123' });

const worker = new Worker('emails', async (job) => {
  await sendEmail(job.data.userId);
});

Cas d'usage : Traitement asynchrone : envoi d'emails, génération de PDF, processing d'images.

Analyse visuelle du contenu du bundle JavaScript pour identifier les dependances lourdes et les opportunites de code splitting.

Comme une radio de valise a l'aeroport : tu vois exactement ce qui prend le plus de place dans ton bagage.

// Avec @next/bundle-analyzer
// next.config.js
const withAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withAnalyzer(nextConfig);
// ANALYZE=true npm run build

Cas d'usage : Diagnostiquer pourquoi le bundle est trop gros et prioriser les optimisations de taille.

Analyse visuelle de la composition du bundle JavaScript pour identifier les dependances lourdes et les opportunites d'optimisation (code splitting, lazy loading).

Comme une radiographie de votre valise : vous voyez exactement ce qui prend le plus de place et ce que vous pouvez retirer.

// Avec Vite
// npx vite-bundle-visualizer

// Avec Webpack
// webpack-bundle-analyzer
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

Cas d'usage : Avant chaque release pour detecter les dependances qui gonflent inutilement le bundle.

Processus de suppression ou mise à jour des données en cache devenues obsolètes. L'un des deux problèmes les plus durs en informatique.

Retirer les produits périmés des rayons du supermarché : oublier et le client mange un yaourt périmé.

// TTL-based
await cache.set('user:123', data, 'EX', 300);
// Event-based
userEvents.on('updated', async (userId) => {
  await cache.del(`user:${userId}`);
});

Cas d'usage : Maintenir la fraîcheur des données cachées sans sacrifier les performances.

Stratégie où l'application vérifie le cache d'abord, puis lit la DB en cas de miss et remplit le cache. Le cache ne se remplit qu'à la demande.

Tu cherches dans ton tiroir (cache), si ce n'est pas là tu vas au grenier (DB) et tu ranges une copie dans le tiroir.

async function getUser(id) {
  let user = await cache.get(`user:${id}`);
  if (!user) {
    user = await db.findUser(id);
    await cache.set(`user:${id}`, user, 'EX', 300);
  }
  return user;
}

Cas d'usage : Pattern le plus courant pour accélérer les lectures fréquentes sans charger la DB.

Module de cache integre qui supporte le cache en memoire ou via des stores externes (Redis). Utilise des interceptors pour cacher les reponses automatiquement.

Comme un post-it avec les reponses frequentes : plus rapide que de recalculer a chaque fois.

@Module({
  imports: [CacheModule.register({
    store: redisStore,
    host: 'localhost',
    ttl: 60,
  })],
})
export class AppModule {}

@UseInterceptors(CacheInterceptor)
@Get()
findAll() { return this.service.findAll(); }

Cas d'usage : Cacher les reponses de endpoints lourds comme les listes avec pagination pour reduire la charge DB.

Pile LIFO (Last In, First Out) qui trace les contextes d'execution des fonctions en cours. Chaque appel de fonction empile un frame, chaque return le depile.

Une pile d'assiettes : tu poses la derniere en haut et tu reprends toujours celle du dessus.

function a() { b(); }
function b() { c(); }
function c() { console.trace(); }
a();
// c -> b -> a -> global

Cas d'usage : Lire les stack traces d'erreurs et comprendre les depassements de pile (stack overflow).

File d'attente (macrotask queue) ou sont places les callbacks de setTimeout, setInterval, I/O et evenements DOM. Traites apres que la call stack et la microtask queue sont vides.

La file d'attente normale a la poste : tu passes apres les clients prioritaires (microtasks).

setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro'));
// micro, macro

Cas d'usage : Planifier des taches non-urgentes qui ne doivent pas bloquer le rendu ou les promesses en cours.

Déploiement progressif envoyant d'abord un petit pourcentage du trafic vers la nouvelle version. Si les métriques sont bonnes, on augmente progressivement.

Le canari dans la mine : on envoie un éclaireur (1% du trafic) pour vérifier que l'air est bon avant d'envoyer tout le monde.

# Istio canary routing
apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
spec:
  http:
    - route:
      - destination: { host: api, subset: stable }
        weight: 90
      - destination: { host: api, subset: canary }
        weight: 10

Cas d'usage : Déploiements à haut risque sur des systèmes critiques avec observation progressive.

Strategie de deploiement ou la nouvelle version est deployee sur un petit pourcentage du trafic pour detecter les problemes avant un rollout complet.

Comme le canari dans la mine de charbon : s'il s'arrete de chanter, on sait qu'il y a un probleme avant que les mineurs soient en danger.

# Kubernetes canary deployment
apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
spec:
  http:
  - route:
    - destination: { host: app, subset: stable }
      weight: 95
    - destination: { host: app, subset: canary }
      weight: 5

Cas d'usage : Pour deployer en production avec un filet de securite, en limitant l'impact d'un bug a 5% des utilisateurs.

Un système distribué ne peut garantir simultanément que 2 des 3 propriétés : Consistency, Availability, Partition tolerance. En pratique on choisit CP ou AP.

Tu peux avoir un resto rapide, bon marché, ou de qualité : choisis-en deux, pas trois.

// CP (Consistency + Partition tolerance)
// -> MongoDB avec write concern majority
// AP (Availability + Partition tolerance)
// -> Cassandra, DynamoDB
// CA n'existe pas en distribué (partition inévitable)

Cas d'usage : Choisir la bonne base de données selon les besoins de cohérence vs disponibilité.

Systeme de permissions WordPress ou les roles (admin, editor, author) regroupent des capabilities (edit_posts, manage_options). Controle l'acces aux fonctionnalites.

Comme les badges d'acces dans une entreprise : le directeur ouvre toutes les portes, le stagiaire quelques-unes.

// Verifier une capability
if (!current_user_can('edit_posts')) {
  wp_die('Acces interdit');
}

// Ajouter un role custom
add_role('moderator', 'Moderateur', [
  'read' => true, 'edit_posts' => true,
]);

Cas d'usage : Pour controler finement qui peut faire quoi dans l'admin et via l'API REST.

Verification systematique des permissions utilisateur avant toute action sensible via current_user_can(). Pilier de la securite WordPress.

Comme un vigile qui verifie le badge avant de laisser entrer dans une zone restreinte.

add_action('wp_ajax_delete_item', function() {
  if (!current_user_can('delete_posts')) {
    wp_send_json_error('Non autorise', 403);
  }
  check_ajax_referer('delete_item_nonce');
  // Suppression securisee
});

Cas d'usage : Avant toute action admin : CRUD, changement de settings, acces aux donnees sensibles.

Mécanisme @layer qui organise les styles en couches ordonnées dans la cascade. La dernière couche déclarée a priorité, indépendamment de la spécificité des sélecteurs.

Comme des calques dans Photoshop : chaque couche a une priorité claire, le calque du dessus gagne.

@layer reset, base, components, utilities;

@layer reset { * { margin: 0; } }
@layer base { a { color: blue; } }
@layer components { .btn { color: white; } }
@layer utilities { .text-red { color: red; } }

Cas d'usage : Gérer la priorité CSS dans un design system complexe sans guerres de spécificité.

Librairie d'autorisation isomorphe qui definit les abilities (permissions) de facon declarative. S'integre avec NestJS via un guard custom.

Comme un reglement interieur detaille : chaque personne sait exactement ce qu'elle peut et ne peut pas faire.

const ability = defineAbility((can, cannot) => {
  can('read', 'Article');
  can('update', 'Article', { authorId: user.id });
  cannot('delete', 'Article');
});
// ability.can('update', article) -> true/false

Cas d'usage : Gerer des permissions granulaires avec des conditions sur les champs des entites.

Réseau de serveurs distribués géographiquement pour servir le contenu statique au plus proche de l'utilisateur. Réduit la latence et la charge serveur.

Des distributeurs automatiques dans chaque quartier au lieu d'un seul magasin central.

// Cloudflare, CloudFront, Vercel Edge
// Headers de cache
Cache-Control: public, max-age=31536000, immutable
// Invalidation
aws cloudfront create-invalidation \
  --distribution-id ABC --paths "/*"

Cas d'usage : Servir images, JS, CSS avec des temps de réponse <50ms partout dans le monde.

Réseau de serveurs géographiquement distribués qui cache et sert le contenu statique au plus près des utilisateurs. Réduit la latence et décharge le serveur d'origine.

Des boulangeries de quartier qui stockent le pain cuit à la boulangerie centrale : plus besoin de traverser la ville.

// Next.js with CDN headers
export async function GET() {
  return new Response(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  });
}

Cas d'usage : Servir les assets statiques, images et API réponses cachées avec latence < 50ms mondiale.

Passe une requete le long d'une chaine de handlers. Chaque handler decide de traiter la requete ou de la passer au suivant.

Le service client : operateur, superviseur, manager — ta demande remonte jusqu'a quelqu'un qui peut la traiter.

class Handler {
  setNext(h) { this.next = h; return h; }
  handle(req) {
    if (this.canHandle(req)) return this.process(req);
    return this.next?.handle(req);
  }
}

Cas d'usage : Pipeline de validation, middleware Express, gestion d'evenements DOM (bubbling).

Outil de gestion de versions pour monorepos. Chaque PR ajoute un fichier changeset decrivant le changement et son semver, puis l'outil genere le changelog et publie automatiquement.

Comme un carnet de bord de modifications : chaque mecanicien note ce qu'il a change, et le systeme compile le rapport final.

# Creer un changeset
npx changeset
# Choisir package -> minor -> "Add OAuth"
# Fichier cree: .changeset/brave-fox.md

# En CI: version + publish
npx changeset version  # bump versions
npx changeset publish  # publish to npm

Cas d'usage : Pour les librairies et design systems en monorepo necessitant un versioning et changelog automatises.

Discipline qui consiste a injecter volontairement des pannes (reseau, serveur, latence) en production pour verifier la resilience du systeme. Popularisee par Netflix (Chaos Monkey).

Comme un exercice d'evacuation incendie : on simule la catastrophe pour verifier que tout le monde sait reagir correctement.

// Principe Chaos Monkey (conceptuel)
// 1. Definir l'etat stable (metriques normales)
// 2. Hypothese: le systeme resiste a la panne X
// 3. Injecter: kill un pod, coupure reseau...
// 4. Observer: le systeme se retablit-il ?
// Outils: Gremlin, LitmusChaos, Chaos Mesh

Cas d'usage : Pour les systemes distribues critiques afin de decouvrir les failles de resilience avant qu'elles ne causent des incidents reels.

Contrainte qui verifie qu'une condition booleenne est vraie pour chaque ligne. Peut referencer plusieurs colonnes de la meme table.

Un videur qui verifie ta carte d'identite : si tu as moins de 18 ans, tu ne rentres pas.

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  price NUMERIC CHECK (price > 0),
  discount NUMERIC CHECK (discount BETWEEN 0 AND 1)
);

Cas d'usage : Garantir les regles metier au niveau de la base : prix positif, age minimum, stock non negatif.

Commande Git pour appliquer un commit spécifique d'une branche sur une autre sans fusionner toute la branche.

Cueillir une cerise sur un arbre sans prendre tout l'arbre : on prend juste le commit voulu.

# Appliquer un commit spécifique sur main
git checkout main
git cherry-pick abc1234
# Cherry-pick sans commit
git cherry-pick --no-commit abc1234

Cas d'usage : Appliquer un hotfix de prod sur main sans merger toute la branche de release.

Theme qui herite de toutes les fonctionnalites d'un theme parent et permet de le personnaliser sans modifier ses fichiers. Les mises a jour du parent sont preservees.

Comme customiser une voiture de serie : on ajoute des options sans modifier la carrosserie d'origine.

/* style.css */
/*
 * Theme Name: Mon Theme Enfant
 * Template: theme-parent
 */

// functions.php
add_action('wp_enqueue_scripts', function() {
  wp_enqueue_style('parent', get_template_directory_uri() . '/style.css');
});

Cas d'usage : Pour personnaliser un theme tiers tout en conservant la possibilite de le mettre a jour.

Workflow lancé depuis un autre Workflow parent dans Temporal. Permet la décomposition de processus complexes et l'isolation des échecs.

Un manager qui délègue une sous-tâche à un employé tout en continuant son propre travail.

async function parentWorkflow(orders) {
  const handles = orders.map(order =>
    startChild(processOrderWorkflow, { args: [order] })
  );
  return Promise.all(handles.map(h => h.result()));
}

Cas d'usage : Traiter en parallèle plusieurs sous-processus indépendants tout en gardant un contrôle centralisé.

Deux approches de coordination de services. Orchestration : un chef centralisé dirige (Temporal). Chorégraphie : chaque service réagit aux événements des autres (event-driven).

Orchestre symphonique (chef d'orchestre dirigeant chaque musicien) vs danse de salon (chaque danseur réagit aux mouvements du partenaire).

// Orchestration (centralized)
await paymentService.charge(order);
await inventoryService.reserve(order);
await shippingService.ship(order);
// Choreography (event-driven)
eventBus.emit('order.created', order);
// Each service listens and reacts independently

Cas d'usage : Choisir orchestration pour les workflows critiques avec compensation, chorégraphie pour le découplage maximal.

Informaticien americain, createur de Swift (langage Apple), LLVM (infrastructure de compilateur) et du langage Mojo. LLVM est utilise par Rust, Swift, Clang et bien d'autres.

Le batisseur d'autoroutes pour compilateurs : LLVM est la route sur laquelle roulent la plupart des langages modernes.

// Swift — Chris Lattner, 2014
func greet(_ name: String) -> String {
    return "Hello, \(name)!"
}
print(greet("World"))
// Langage Apple pour iOS/macOS

Cas d'usage : LLVM est l'infrastructure de compilation la plus utilisee au monde. Swift est essentiel pour le dev iOS.

Detecte les defaillances et empeche l'application de tenter des operations vouees a l'echec. Trois etats : ferme, ouvert, semi-ouvert.

Un disjoncteur electrique : il coupe le courant quand il detecte une surcharge pour proteger l'installation.

class CircuitBreaker {
  #failures = 0;
  async call(fn) {
    if (this.#failures > 5) throw new Error('Circuit open');
    try { return await fn(); }
    catch(e) { this.#failures++; throw e; }
  }
}

Cas d'usage : Appels a des services externes instables pour eviter les cascades de pannes.

Pattern de résilience qui coupe les appels vers un service défaillant après N échecs. Évite la cascade de pannes. États : closed, open, half-open.

Un disjoncteur électrique : il coupe le courant automatiquement quand il détecte une surcharge pour protéger le reste.

const breaker = new CircuitBreaker(callExternalAPI, {
  timeout: 3000,
  errorThresholdPercentage: 50,
  resetTimeout: 30000
});
breaker.fallback(() => cachedResponse);
const result = await breaker.fire(params);

Cas d'usage : Protéger un service des cascades de pannes quand un service downstream est instable.

Situation ou le module A importe B et B importe A. En CommonJS, on obtient un export partiel. En ESM, ca fonctionne grace aux live bindings mais peut causer des bugs subtils.

Deux personnes qui se tiennent la porte mutuellement : ca fonctionne si l'une passe en premier, mais ca peut devenir un blocage.

// a.js
import { b } from './b.js';
export const a = 'A' + b;
// b.js
import { a } from './a.js';
export const b = 'B'; // a est undefined ici en CJS!

Cas d'usage : Detecter et casser les cycles avec des outils comme madge ou eslint-plugin-import.

Situation ou deux providers ou modules dependent mutuellement l'un de l'autre, causant une erreur de resolution. Se resout avec forwardRef.

Comme deux personnes bloquees a une porte, chacune attendant que l'autre passe en premier.

// Module A importe B, B importe A
@Module({
  imports: [forwardRef(() => ModuleB)],
})
export class ModuleA {}

Cas d'usage : Resoudre temporairement une dependance circulaire tout en planifiant un refactoring pour l'eliminer.

Fonction CSS qui contraint une valeur entre un minimum et un maximum avec une valeur préférée fluide. clamp(min, preferred, max) remplace les combinaisons de min()/max().

Comme un thermostat : la température varie librement entre une borne basse et une borne haute.

h1 {
  /* De 1.5rem à 3rem, fluide entre */
  font-size: clamp(1.5rem, 4vw, 3rem);
}
.container {
  width: clamp(320px, 90%, 1200px);
}

Cas d'usage : Typographie fluide et largeurs adaptatives sans media queries ni calculs complexes.

Technique consistant a combiner plusieurs classes utilitaires pour creer un style complet. L'ordre des classes n'affecte pas la specificite.

Comme composer un plat en ajoutant des ingredients un par un : sel, poivre, huile, chacun apporte sa touche.

<button class="px-4 py-2 bg-blue-500 text-white
  rounded-lg hover:bg-blue-600 transition-colors">
  Cliquer
</button>

Cas d'usage : Construire des composants UI en empilant des utilitaires sans ecrire de CSS custom.

Mathematicien americain, pere de la theorie de l'information. Il a demontre que toute information peut etre encodee en bits (0 et 1), fondement de toute communication numerique.

Celui qui a prouve que tout — musique, texte, video — peut se reduire a une suite de oui/non.

// Theorie de l'information (1948)
// H = -SUM(p(x) * log2(p(x)))
// Entropie = mesure de l'information
// 1 bit = 1 choix binaire
// Base de toute compression, crypto, telecom

Cas d'usage : Comprendre les bases de la compression de donnees, de la cryptographie et des telecommunications.

Architecture en couches concentriques ou les dependances pointent vers l'interieur. Le domaine est au centre, independant des frameworks et de l'infrastructure.

Un oignon : chaque couche protege le coeur (domaine) des details exterieurs (UI, DB, frameworks).

// Domain (centre) - aucune dependance
class User { validate() { ... } }
// Use Case
class CreateUser { execute(dto) { ... } }
// Infrastructure (exterieur)
class PostgresUserRepo { save(user) { ... } }

Cas d'usage : Applications complexes avec logique metier riche qui doit survivre aux changements de frameworks.

Abstraction pour communiquer avec d'autres microservices via send() (request-reply) ou emit() (event-based). Injectee via ClientsModule.

Comme un telephone interne d'entreprise : tu appelles un autre service et attends (send) ou laisses un message (emit).

@Injectable()
export class OrderService {
  constructor(@Inject('PAYMENT_SERVICE') private client: ClientProxy) {}

  processPayment(order: Order) {
    return this.client.send('process_payment', order);
  }
  notifyShipping(order: Order) {
    this.client.emit('order_shipped', order);
  }
}

Cas d'usage : Appeler des microservices distants depuis un service NestJS de facon decouple.

API asynchrone navigator.clipboard qui permet de lire et écrire dans le presse-papiers de manière sécurisée. Remplace le vieux document.execCommand('copy') avec gestion des permissions.

Comme un presse-papiers sécurisé de bureau : on peut copier et coller, mais avec l'autorisation du propriétaire.

// Copier du texte
await navigator.clipboard.writeText('Copié !');
// Lire le presse-papiers
const text = await navigator.clipboard.readText();
// Copier une image
const blob = await fetch(url).then(r => r.blob());
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);

Cas d'usage : Bouton 'Copier le code' dans une documentation ou un snippet de code.

Fonction qui capture et retient les variables de son scope parent meme apres que celui-ci a termine son execution. C'est le mecanisme fondamental derriere les callbacks, modules et data privacy en JS.

Un sac a dos que tu emportes en quittant la maison : meme loin de chez toi, tu as toujours acces a ce que tu y as mis.

function counter() {
  let count = 0;
  return {
    increment: () => ++count,
    get: () => count
  };
}
const c = counter();
c.increment(); // 1

Cas d'usage : Encapsuler un etat prive dans un module ou creer des fonctions factory avec configuration injectee.

Utilitaires pour construire des chaines de classes conditionnelles. cn() combine clsx + twMerge pour gerer les conditions ET les conflits Tailwind.

Un assistant qui compose ta tenue selon la meteo : si pluie alors parapluie, si froid alors manteau.

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

const cn = (...inputs) => twMerge(clsx(inputs))

cn('p-4 bg-blue-500', isActive && 'bg-green-500',
  { 'opacity-50': isDisabled })
// => 'p-4 bg-green-500' si isActive

Cas d'usage : Gerer proprement les classes conditionnelles dans les composants React avec Tailwind.

Metrique qui mesure le pourcentage de code execute par les tests (lignes, branches, fonctions). Utile comme indicateur mais trompeur comme objectif unique.

Comme mesurer le pourcentage de pieces visitees lors d'une inspection de maison : visiter 100% ne garantit pas d'avoir vu les fissures.

// jest.config.js
module.exports = {
  collectCoverage: true,
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
};

Cas d'usage : Comme garde-fou pour detecter les zones non testees, avec un seuil raisonnable (70-80%).

Pratique ou un ou plusieurs pairs examinent le code soumis avant son integration. Ameliore la qualite, partage les connaissances et detecte les bugs humainement.

Comme la relecture d'un manuscrit par un editeur : il detecte les fautes et les incoherences que l'auteur ne voit plus.

// Bonne PR review checklist
// [ ] Le code fait ce que la description promet
// [ ] Pas de code mort ou commente
// [ ] Tests inclus pour les nouveaux cas
// [ ] Pas de secrets hardcodes
// [ ] Performance acceptable
// [ ] Nommage clair et coherent

Cas d'usage : Pour chaque changement de code afin de maintenir la qualite et partager les connaissances dans l'equipe.

Technique qui decoupe le bundle JS en morceaux charges a la demande via React.lazy et import() dynamique, reduisant le temps de chargement initial.

Comme un buffet a volonte : tu ne prends que ce que tu vas manger maintenant, pas tout le menu d'un coup.

const AdminPanel = React.lazy(() => import('./AdminPanel'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      {isAdmin && <AdminPanel />}
    </Suspense>
  );
}

Cas d'usage : Pages lourdes (admin, dashboard), composants conditionels, routes non critiques.

Fichier GitHub qui assigne automatiquement des reviewers aux PR en fonction des fichiers modifies. Garantit que les experts appropriees reviewent chaque changement.

Comme un organigramme de responsabilites : chaque zone du batiment a un responsable attitre pour les travaux.

# .github/CODEOWNERS
*.ts          @team/frontend
/api/         @team/backend
/infra/       @team/devops
*.sql         @team/dba
package.json  @team/leads

Cas d'usage : Dans les equipes moyennes/grandes pour garantir que les bons experts sont automatiquement assignes en review.

Environnements de dev cloud GitHub bases sur les Dev Containers. Un VS Code complet dans le navigateur ou en local, avec les ports, extensions et outils pre-configures.

Comme un PC gamer dans le cloud : vous y accedez de n'importe quel appareil et retrouvez toute votre configuration.

# Lancer un Codespace depuis GitHub
# 1. Bouton 'Code' -> 'Codespaces'
# 2. 'Create codespace on main'
# 3. VS Code s'ouvre dans le navigateur
# 4. npm ci + extensions installes automatiquement
# Ou en CLI:
# gh codespace create -r owner/repo -b main

Cas d'usage : Pour les contributions open source ou les equipes distribuees voulant un setup zero-config.

Regroupement de documents dans MongoDB, equivalent d'une table en SQL. Les collections n'imposent pas de schema par defaut, chaque document peut avoir une structure differente.

Un dossier dans une armoire : tu y ranges des fiches, mais rien ne t'oblige a ce qu'elles aient toutes le meme format.

// Creer implicitement
db.products.insertOne({ name: "Laptop" });
// Lister les collections
show collections;

Cas d'usage : Organiser les documents par domaine metier : users, orders, products.

Fonction CSS qui mélange deux couleurs dans un espace colorimétrique donné. Permet de créer des variantes (hover, disabled) à partir d'une couleur de base sans calcul manuel.

Comme mélanger deux pots de peinture dans les proportions voulues pour obtenir la teinte parfaite.

.btn {
  --bg: #3b82f6;
  background: var(--bg);
}
.btn:hover {
  background: color-mix(in oklch, var(--bg), black 20%);
}
.btn:disabled {
  background: color-mix(in oklch, var(--bg), gray 50%);
}

Cas d'usage : Générer des variantes de couleur (hover, active, disabled) dynamiquement depuis un token unique.

Fonctions du module sass:color pour manipuler les couleurs : ajuster la luminosite, saturation, teinte, ou melanger deux couleurs avec un ratio.

Un peintre qui eclaircit, assombrit ou melange ses couleurs sur sa palette.

@use 'sass:color';

$base: #3498db;
$lighter: color.adjust($base, $lightness: 15%);
$darker: color.scale($base, $lightness: -30%);
$blend: color.mix($base, white, 80%);

Cas d'usage : Generer des palettes de couleurs derivees automatiquement a partir d'une couleur de base.

Encapsule une requete comme un objet, permettant de parametrer, mettre en file d'attente, journaliser et annuler des operations.

Un bon de commande au restaurant : il capture l'intention, peut etre mis en attente ou annule.

class CreateUserCmd {
  constructor(data) { this.data = data; }
  execute() { return db.users.insert(this.data); }
  undo() { return db.users.delete(this.data.id); }
}

Cas d'usage : Systeme undo/redo, file de taches asynchrones, CQRS command side.

Outil qui verifie que les messages de commit respectent un format conventionnel (Conventional Commits). Permet l'automatisation du changelog et du versioning semantique.

Comme un formulaire avec des champs obligatoires : votre message de commit doit respecter le modele pour etre accepte.

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
};
// Valide: feat(auth): add OAuth login
// Valide: fix(cart): handle empty state
// Invalide: fixed stuff

Cas d'usage : Pour automatiser le changelog et le semantic versioning a partir de messages de commit structures.

CommonJS (require/module.exports) est synchrone, dynamique et utilise par Node.js historiquement. ESM (import/export) est statique, asynchrone, supportant le tree shaking. ESM est le standard moderne.

CommonJS = commander par telephone (dynamique, a la demande). ESM = liste de courses pre-ecrite (statique, analysable a l'avance).

// CommonJS
const fs = require('fs');
module.exports = { readFile: fs.readFile };

// ESM
import { readFile } from 'fs';
export { readFile };

Cas d'usage : Choisir le bon systeme de modules selon le contexte : ESM pour le nouveau code, CommonJS pour la compatibilite Node.js legacy.

Strategie de factorisation des styles repetitifs en composants (React, Vue) ou en classes @apply. Le composant JS/TS est prefere a @apply.

Quand tu repetes la meme recette, tu l'ecris sur une fiche plutot que de la reciter a chaque fois.

// Prefere: composant React
const Button = ({ children }) => (
  <button className="px-4 py-2 bg-blue-500
    text-white rounded hover:bg-blue-600">
    {children}
  </button>
);

Cas d'usage : Eviter la duplication de longues chaines de classes dans les templates/JSX.

Les differentes phases d'un composant : montage, mise a jour et demontage. En hooks, useEffect gere ces phases.

Comme la vie d'un employe : embauche (mount), promotions (update), depart (unmount).

useEffect(() => {
  console.log('Monte ou mis a jour');
  return () => console.log('Demonte / cleanup');
}, [dep]); // se relance si dep change

Cas d'usage : Gerer les effets de bord comme les abonnements, les appels API ou les timers.

Compose enchaine des fonctions de droite a gauche, pipe de gauche a droite. Chaque fonction recoit le resultat de la precedente. Fondamental en programmation fonctionnelle.

Une chaine de montage : chaque poste (fonction) transforme le produit et le passe au suivant.

const pipe = (...fns) => (x) =>
  fns.reduce((acc, fn) => fn(acc), x);
const transform = pipe(
  str => str.trim(),
  str => str.toLowerCase(),
  str => str.replace(/\s+/g, '-')
);
transform('  Hello World  '); // 'hello-world'

Cas d'usage : Transformation de donnees en pipeline, middleware, traitement de texte, ETL.

Gestionnaire de dependances standard de PHP. Gere les packages, l'autoloading PSR-4, les scripts et le versioning semantique via composer.json.

Comme un chef de chantier qui commande les bons materiaux dans les bonnes versions et s'assure que tout est compatible.

// composer.json
{
  "require": {
    "php": "^8.2",
    "laravel/framework": "^11.0"
  },
  "autoload": {
    "psr-4": { "App\\": "src/" }
  }
}

Cas d'usage : Dans tout projet PHP moderne pour gerer les dependances et l'autoloading.

Compose des objets en structures arborescentes pour representer des hierarchies partie-tout. Les clients traitent uniformement objets simples et composes.

Un dossier de fichiers : un dossier peut contenir des fichiers ou d'autres dossiers, et on peut tous les supprimer de la meme facon.

class Folder {
  children = [];
  add(child) { this.children.push(child); }
  getSize() {
    return this.children.reduce((s, c) => s + c.getSize(), 0);
  }
}

Cas d'usage : Menus imbriques, arbres DOM, systemes de fichiers, organigrammes.

Couches indépendantes gérées par le GPU pour le compositing. Les éléments promus en couche composite (via transform, opacity, will-change) sont animés sans affecter les autres couches.

Comme des calques transparents empilés : on peut bouger un calque sans redessiner les autres.

/* Promouvoit l'élément en couche composite */
.animated {
  transform: translateZ(0); /* hack de promotion */
  /* Mieux : */
  will-change: transform;
}
/* Vérifier dans DevTools > Layers */

Cas d'usage : Comprendre pourquoi certaines animations sont fluides (compositing) et d'autres saccadent (reflow).

Principe de design qui favorise l'assemblage d'objets (a un) plutot que l'heritage (est un) pour la reutilisation de code. Produit des architectures plus flexibles.

Comme des briques LEGO : on assemble des pieces pour construire ce qu'on veut, plutot que d'heriter d'un modele fixe.

class OrderService {
  public function __construct(
    private PaymentGateway $payment,
    private Mailer $mailer,
    private Logger $logger,
  ) {}
}

Cas d'usage : Dans la majorite des cas ou on est tente d'heriter pour reutiliser du code.

Favoriser la composition d'objets plutot que l'heritage de classes pour reutiliser du comportement. Plus flexible et moins fragile.

Les LEGO : tu assembles des pieces pour creer des formes variees, au lieu de mouler une piece monolithique par forme.

// Heritage fragile:
class FlyingSwimmingDuck extends FlyingDuck { swim() {} }
// Composition:
class Duck {
  constructor(private fly: Flyable, private swim: Swimmable) {}
}

Cas d'usage : Combiner des comportements sans les limites de l'heritage simple ou le diamond problem.

Pattern ou un composant parent partage son etat implicitement avec ses enfants via Context, offrant une API declarative et flexible.

Comme un menu deroulant HTML <select>/<option> : les options savent qu'elles font partie du select sans configuration explicite.

// Utilisation declarative
<Tabs>
  <Tabs.List>
    <Tabs.Tab>Profil</Tabs.Tab>
    <Tabs.Tab>Settings</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Contenu profil</Tabs.Panel>
    <Tabs.Panel>Contenu settings</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

Cas d'usage : Composants UI complexes (tabs, accordeons, menus) necessitant une API flexible et composable.

Index cree sur plusieurs champs. L'ordre des champs est crucial : il suit la regle ESR (Equality, Sort, Range) pour des performances optimales.

Un annuaire trie d'abord par ville, puis par nom : chercher 'Paris + Dupont' est rapide, mais 'Dupont' seul ne profite pas de l'index.

db.orders.createIndex(
  { status: 1, createdAt: -1, amount: 1 }
);
// Suit la regle ESR

Cas d'usage : Optimiser des requetes qui filtrent et trient sur plusieurs champs simultanement.

Algorithmes de compression HTTP réduisant la taille des transferts. Brotli offre 15-20% de compression en plus que gzip et est supporté par tous les navigateurs modernes.

Aspirer l'air d'un sac sous vide avant de l'envoyer par la poste pour réduire les frais de port.

// Express with compression
import compression from 'compression';
app.use(compression({ level: 6 }));
// Nginx config
gzip on;
brotli on;
brotli_types text/html application/javascript text/css;

Cas d'usage : Réduire de 60-80% la taille des transferts HTTP pour les fichiers texte (JS, CSS, HTML, JSON).

Mode de rendu ou React peut interrompre, reprendre et abandonner des rendus en cours pour prioriser les interactions utilisateur urgentes.

Comme un serveur de restaurant qui interrompt la preparation d'une commande pour repondre a un client qui attend a la caisse.

// Active automatiquement avec createRoot
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

Cas d'usage : Garder l'interface reactive pendant des rendus lourds (longues listes, calculs complexes).

Types qui selectionnent un type selon une condition (T extends U ? X : Y). Le mot-cle infer permet d'extraire des sous-types dans la branche true.

Comme un aiguillage ferroviaire — selon le type de train, il est dirige sur une voie ou une autre.

type Unwrap<T> = T extends Promise<infer U> ? U : T;
type A = Unwrap<Promise<string>>; // string
type B = Unwrap<number>;          // number

Cas d'usage : Extraire des types imbriques (retour de Promise, elements de tableau, props de composants React).

Objet Kubernetes stockant des données de configuration non sensibles sous forme clé-valeur. Injecté comme variable d'env ou fichier monté.

Un tableau d'affichage public dans un bureau : tout le monde peut lire les infos affichées.

apiVersion: v1
kind: ConfigMap
metadata:
  name: app-config
data:
  NODE_ENV: production
  LOG_LEVEL: info

Cas d'usage : Externaliser la configuration pour pouvoir la changer sans reconstruire l'image.

Module officiel @nestjs/config pour gerer les variables d'environnement. Charge les fichiers .env et fournit ConfigService pour l'injection.

Comme un coffre-fort d'entreprise : centralise tous les secrets et parametres, accessible uniquement aux autorises.

@Module({
  imports: [ConfigModule.forRoot({
    isGlobal: true,
    validationSchema: Joi.object({
      DB_HOST: Joi.string().required(),
      DB_PORT: Joi.number().default(5432),
    }),
  })],
})
export class AppModule {}

Cas d'usage : Centraliser et valider toutes les variables d'environnement au demarrage de l'application.

Objet qui gere la connexion a MongoDB. Mongoose maintient un pool de connexions et un buffer des operations en attente jusqu'a ce que la connexion soit etablie.

Le fil du telephone entre ton appli et la base de donnees, avec une ligne d'attente integree.

await mongoose.connect(
  'mongodb://localhost:27017/mydb',
  { maxPoolSize: 10 }
);
mongoose.connection.on('error', console.error);

Cas d'usage : Initialiser la connexion a la base au demarrage de l'application NestJS ou Express.

Technique de reutilisation de connexions base de donnees via un pool precharge. Evite le cout de creation/destruction de connexions a chaque requete.

Comme un parc de voitures partagees : au lieu que chacun achete sa voiture, on partage un pool.

TypeOrmModule.forRoot({
  type: 'postgres',
  host: 'localhost',
  extra: {
    max: 20,
    idleTimeoutMillis: 30000,
  },
})

Cas d'usage : Optimiser les performances en production en configurant le pool selon la charge attendue.

Réutilisation d'un pool de connexions persistantes à la base de données au lieu d'en créer une nouvelle par requête. Réduit la latence et la charge.

Un parking de vélos partagés : tu prends un vélo disponible et tu le rends après, pas besoin d'en acheter un à chaque trajet.

const pool = new Pool({
  host: 'db.example.com',
  max: 20,          // max connexions
  idleTimeoutMillis: 30000
});
const result = await pool.query('SELECT ...');

Cas d'usage : Éviter d'ouvrir/fermer des milliers de connexions par seconde, source de latence et crash.

Assertion qui empeche le widening et rend toutes les proprietes readonly et les valeurs litterales. Transforme un objet/tableau en version profondement immutable.

Comme graver dans le marbre — une fois ecrit, chaque detail est fige exactement tel quel.

const config = {
  api: "https://api.com",
  retries: 3
} as const;
// type: { readonly api: "https://api.com"; readonly retries: 3 }

Cas d'usage : Creer des constantes avec des types litteraux exacts pour les discriminated unions et les lookups.

Syntaxe PHP 8.0 qui declare et assigne les proprietes directement dans la signature du constructeur, eliminant le code repetitif.

Comme remplir un formulaire qui cree automatiquement le dossier, au lieu de recopier chaque champ a la main.

class Product {
  public function __construct(
    private string $name,
    private float $price,
    private int $stock = 0,
  ) {}
}

Cas d'usage : Pour tout constructeur PHP : reduit le boilerplate et rend le code plus lisible.

Utility type qui extrait les types des parametres du constructeur d'une classe sous forme de tuple.

Comme lire la notice de montage d'un meuble pour savoir quels outils sont necessaires.

class Service {
  constructor(public url: string, public timeout: number) {}
}
type Args = ConstructorParameters<typeof Service>;
// [string, number]

Cas d'usage : Creer des factory functions ou des conteneurs d'injection de dependances types.

Propriété qui informe le navigateur qu'un élément est indépendant du reste du document pour le layout, le paint ou le style. Permet au moteur de rendu d'optimiser en isolant les recalculs.

Comme un aquarium scellé : ce qui se passe dedans n'affecte pas l'extérieur et vice versa.

/* Isolation complète sauf la taille */
.widget { contain: content; }
/* Equivalent à layout + style + paint */

/* Isolation totale */
.fixed-size-widget { contain: strict; }
/* Equivalent à size + layout + style + paint */

Cas d'usage : Améliorer les performances de rendu d'éléments indépendants (widgets, cartes, items de liste).

Classe qui fixe la largeur max d'un element selon le breakpoint actif. Peut etre centre automatiquement via la config.

Les bords d'une route : ils empechent le contenu de s'etaler a l'infini sur grands ecrans.

<div class="container mx-auto px-4">
  <!-- Contenu centre et contraint -->
</div>
// config: container: { center: true, padding: '1rem' }

Cas d'usage : Centrer le contenu principal et limiter sa largeur sur grands ecrans.

Permettent d'adapter le style d'un composant en fonction de la taille de son conteneur parent plutôt que du viewport. Déclarés via container-type: inline-size et @container.

Comme un meuble modulable qui change de forme selon la taille de la pièce où il est placé, pas de la maison entière.

.card-wrapper {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { display: flex; gap: 1rem; }
}
@container (max-width: 399px) {
  .card { display: block; }
}

Cas d'usage : Rendre un composant vraiment réutilisable en l'adaptant à son contexte local, pas au viewport global.

Queries basees sur la taille du conteneur parent (pas du viewport). Supportees en Tailwind via le plugin @tailwindcss/container-queries avec les prefixes @sm, @md, @lg.

Un meuble qui s'adapte a la taille de la piece ou il se trouve, pas a la taille de la maison.

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    <!-- S'adapte a la taille du parent -->
  </div>
</div>

Cas d'usage : Creer des composants vraiment responsifs qui s'adaptent a leur conteneur, pas au viewport.

Pattern qui separe les composants en deux types : Container (logique, data fetching) et Presentational (UI pure, recoit des props). Moins pertinent avec les hooks.

Comme un realisateur (container) et un acteur (presentational) : l'un dirige, l'autre joue le role.

// Presentational : UI pure
function UserCard({ name, avatar }) {
  return <div><img src={avatar} /><p>{name}</p></div>;
}
// Container : logique
function UserCardContainer({ userId }) {
  const { data } = useQuery({ queryKey: ['user', userId], queryFn: fetchUser });
  return <UserCard name={data?.name} avatar={data?.avatar} />;
}

Cas d'usage : Rendre les composants UI reutilisables et testables en les separant de la logique.

Propriété contain qui isole un sous-arbre du DOM pour le layout, le style et le painting. Le navigateur peut optimiser le rendu en sachant que les changements ne déborderont pas.

Comme des murs coupe-feu dans un bâtiment : un incendie dans une zone n'affecte pas les autres.

.widget {
  contain: layout style paint;
}
/* Raccourci pour tout sauf size */
.card {
  contain: content;
}
/* Strict = size + content */
.isolated { contain: strict; }

Cas d'usage : Optimiser les performances de rendu de composants indépendants dans un dashboard ou un feed infini.

Mecanisme qui permet a un mixin de recevoir un bloc de CSS via @content. Le bloc est injecte a l'endroit ou @content est appele dans le mixin.

Un gabarit avec un trou : tu remplis le trou avec le contenu que tu veux a chaque utilisation.

@mixin on-hover {
  &:hover, &:focus-visible {
    @content;
  }
}

.button {
  background: blue;
  @include on-hover {
    background: darkblue;
    transform: scale(1.05);
  }
}

Cas d'usage : Creer des mixins de contexte (media queries, pseudo-selecteurs) qui encapsulent un pattern.

Mecanisme HTTP ou le client et le serveur se mettent d'accord sur le format de la reponse via les headers Accept et Content-Type.

Commander dans un restaurant multilangue : tu demandes le menu en français, on te le donne en français.

// Client
Accept: application/json
// Serveur
app.get('/users', (req, res) => {
  if (req.accepts('json')) res.json(users);
  else if (req.accepts('xml')) res.send(toXml(users));
  else res.status(406).end();
});

Cas d'usage : APIs qui doivent supporter plusieurs formats (JSON, XML, CSV) pour differents clients.

Configuration content qui indique a Tailwind ou scanner les classes utilisees. Essentiel pour le tree-shaking : seules les classes trouvees sont generees en prod.

Dire au facteur quelles boites aux lettres existent pour qu'il ne distribue pas de courrier fantome.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.vue',
    './node_modules/flowbite/**/*.js'
  ]
}

Cas d'usage : Configurer correctement le scanning pour eviter que des classes soient manquantes en production.

En-tête HTTP qui restreint les sources autorisées pour les scripts, styles, images et autres ressources. Principale défense contre les attaques XSS.

Une liste blanche à l'entrée d'un club VIP : seules les sources approuvées peuvent entrer et s'exécuter.

// CSP Header
Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-abc123';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://cdn.example.com;
  connect-src 'self' https://api.example.com;

Cas d'usage : Empêcher l'exécution de scripts malicieux injectés dans la page (XSS, injection de publicités).

Propriété CSS qui permet au navigateur de sauter le rendu des éléments hors viewport. content-visibility: auto diffère le layout et le painting, améliorant drastiquement le temps de rendu initial.

Comme un théâtre qui ne monte le décor d'une scène que quand les acteurs y arrivent.

.article-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
/* Le navigateur saute le rendu des sections
   hors viewport et réserve 500px d'espace */

Cas d'usage : Pages longues avec beaucoup de contenu (blog, feed, documentation) pour réduire le temps de rendu initial.

Systeme de partage de donnees sans prop drilling via createContext, Provider et useContext. Attention : chaque changement de valeur re-rend TOUS les consommateurs.

Comme un haut-parleur dans un magasin : tout le monde entend l'annonce, meme ceux qui ne sont pas concernes.

const AuthCtx = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <AuthCtx.Provider value={{ user, setUser }}>
      {children}
    </AuthCtx.Provider>
  );
}

Cas d'usage : Donnees peu changeantes (theme, auth, locale) partagees a travers l'arbre.

Cartographie des relations entre Bounded Contexts : shared kernel, customer-supplier, conformist, ACL, partnership. Definit les contrats d'integration.

La carte diplomatique mondiale : elle montre quels pays sont allies, en conflit, ou independants.

// Context Map (documentation)
// Sales <-> Billing : Customer-Supplier
// Sales -> Shipping : Conformist
// Sales <-> Legacy CRM : Anti-Corruption Layer

Cas d'usage : Visualiser et planifier les integrations entre sous-domaines d'un systeme complexe.

Mécanisme Temporal qui termine un Workflow et en démarre un nouveau avec un historique frais. Évite la croissance illimitée de l'historique d'événements.

Commencer un nouveau carnet quand l'ancien est plein, en notant juste le résumé de la dernière page.

async function pollingWorkflow(state) {
  for (let i = 0; i < 100; i++) {
    state = await pollExternal(state);
  }
  await continueAsNew(state);
}

Cas d'usage : Maintenir des Workflows de longue durée (polling, monitoring) sans dépasser la limite d'historique.

Test qui verifie que l'interface (contrat) entre un consommateur et un fournisseur d'API est respectee. Chaque cote teste independamment sa conformite au contrat.

Comme un contrat de location : le locataire et le proprietaire verifient chacun que les clauses sont respectees sans avoir besoin de se rencontrer.

// Pact consumer test
const interaction = {
  uponReceiving: 'a request for user',
  withRequest: { method: 'GET', path: '/users/1' },
  willRespondWith: {
    status: 200,
    body: { id: 1, name: like('Alice') }
  }
};

Cas d'usage : En architecture microservices pour garantir que les equipes peuvent deployer independamment sans casser les integrations.

Controlled : la valeur est geree par React (via state + onChange). Uncontrolled : la valeur est geree par le DOM (via ref et defaultValue).

Controlled = GPS qui te guide a chaque virage. Uncontrolled = carte papier que tu consultes quand tu veux.

// Controlled
const [val, setVal] = useState('');
<input value={val} onChange={e => setVal(e.target.value)} />

// Uncontrolled
const ref = useRef();
<input defaultValue="" ref={ref} />
// ref.current.value pour lire

Cas d'usage : Controlled pour validation en temps reel, uncontrolled pour formulaires simples ou performance critique.

Classe decoree @Controller qui gere les requetes HTTP entrantes et retourne les reponses. Chaque methode est mappee a une route via des decorateurs HTTP.

Comme un receptionniste d'hotel : il recoit les demandes des clients et les redirige vers le bon service.

@Controller('users')
export class UserController {
  constructor(private userService: UserService) {}

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

Cas d'usage : Definir les endpoints REST de l'API et deleguer la logique metier aux services.

Privilegier des conventions sensees par defaut plutot que de forcer une configuration explicite. Le developpeur ne configure que ce qui devie de la convention.

Une reunion hebdo toujours lundi 9h : pas besoin de reinviter chaque semaine, seules les exceptions sont signalees.

// Convention NestJS: UserController -> /users
@Controller('users') // convention: nom du controleur = route
class UserController {
  @Get() findAll() { ... } // GET /users
}

Cas d'usage : Frameworks comme Rails, NestJS, Spring Boot : reduire le boilerplate de configuration.

Convention de messages de commit structurés (type(scope): description). Permet la génération automatique de changelogs et le versionnement sémantique.

Un formulaire standardisé : tout le monde remplit les mêmes champs, rendant le tri automatique possible.

feat(auth): add OAuth2 login
fix(api): handle null response body
chore(deps): update express to v5
BREAKING CHANGE: remove v1 endpoints

Cas d'usage : Automatiser le versionnement et le changelog dans le pipeline CI/CD.

Les attributs de sécurité des cookies : httpOnly empêche l'accès JavaScript (anti-XSS), secure exige HTTPS, sameSite protège contre le CSRF.

Un coffre-fort avec trois serrures : une contre le vol numérique, une contre l'espionnage réseau, une contre la tromperie.

res.cookie('session', token, {
  httpOnly: true,   // No JS access
  secure: true,     // HTTPS only
  sameSite: 'lax',  // CSRF protection
  maxAge: 3600000,  // 1 hour
  path: '/',
});

Cas d'usage : Stocker des tokens d'authentification de manière sécurisée dans le navigateur.

Trois métriques Google mesurant l'expérience utilisateur : LCP (temps d'affichage du plus grand élément), INP (réactivité aux interactions), CLS (stabilité visuelle).

Les 3 notes d'un restaurant : rapidité du service (LCP), réactivité du serveur (INP), stabilité de la table (CLS).

// Measure with web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(({ value }) => analytics.send('LCP', value));
onINP(({ value }) => analytics.send('INP', value));
onCLS(({ value }) => analytics.send('CLS', value));
// Good: LCP<2.5s, INP<200ms, CLS<0.1

Cas d'usage : Monitorer et optimiser l'UX mesurable pour améliorer le SEO et la satisfaction utilisateur.

Cross-Origin Resource Sharing : mecanisme HTTP qui permet a un frontend sur un domaine different d'acceder a l'API. Configure via app.enableCors().

Comme un visa d'entree : il autorise les visiteurs de certains pays (origines) a acceder au territoire (API).

app.enableCors({
  origin: ['https://monsite.com', 'https://admin.monsite.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true,
});

Cas d'usage : Permettre au frontend SPA sur un autre domaine de communiquer avec l'API backend.

Mecanisme de securite HTTP qui permet a un serveur d'indiquer quelles origines sont autorisees a acceder a ses ressources. Gere via des headers specifiques.

Le badge d'acces a un immeuble : seuls les employes autorises (origines) peuvent entrer dans certains etages (endpoints).

app.use(cors({
  origin: ['https://myapp.com'],
  methods: ['GET', 'POST'],
  credentials: true,
  maxAge: 86400 // preflight cache 24h
}));

Cas d'usage : Frontend sur un domaine different du backend — quasi-obligatoire en SPA moderne.

Mécanisme de sécurité navigateur qui bloque les requêtes cross-origin. Les requêtes non-simples déclenchent un preflight OPTIONS pour vérifier les permissions du serveur.

Avant de livrer un colis international, le douanier appelle le destinataire pour vérifier qu'il attend bien ce paquet.

import cors from 'cors';
app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true,
  maxAge: 86400, // Cache preflight 24h
}));

Cas d'usage : Configurer une API backend pour accepter les requêtes du frontend déployé sur un autre domaine.

Covariance: un sous-type peut remplacer le type parent (sortie). Contravariance: le type parent peut remplacer le sous-type (entree). Determine la compatibilite des generics.

Covariance: un chien peut passer la ou un animal est attendu (du specifique au general). Contravariance: l'inverse pour les consommateurs.

// Covariant: retour de fonction
type Getter<T> = () => T; // Dog -> Animal OK
// Contravariant: parametre de fonction
type Setter<T> = (val: T) => void; // Animal -> Dog OK

Cas d'usage : Comprendre pourquoi certaines assignations generiques echouent et concevoir des APIs correctement typees.

Index qui inclut des colonnes supplementaires non-cle via INCLUDE. Permet un Index-Only Scan en fournissant toutes les colonnes necessaires sans acceder a la table.

Un sommaire de livre qui inclut un resume de chaque chapitre : pas besoin de tourner les pages.

CREATE INDEX idx_orders_covering
  ON orders (user_id)
  INCLUDE (total, status);

Cas d'usage : Eliminer les acces table pour les requetes frequentes qui ne lisent que quelques colonnes.

Command Query Responsibility Segregation : separe les modeles de lecture (Query) et d'ecriture (Command). Permet d'optimiser chaque cote independamment.

Un guichet de banque : un guichet pour deposer (ecriture), un autre pour consulter le solde (lecture).

// Command side
class CreateOrderCmd { execute(data) { db.write(data); } }
// Query side (modele optimise lecture)
class OrderQuery { getList() { return readDb.orders.find(); } }

Cas d'usage : Applications avec des ratios lecture/ecriture tres differents ou des modeles de lecture complexes.

Une methode est soit une commande (modifie l'etat, ne retourne rien) soit une query (retourne des donnees, ne modifie rien). Jamais les deux.

Au guichet : soit tu deposes un cheque (commande), soit tu consultes ton solde (query). Pas les deux en meme temps.

class Stack {
  push(item) { this.items.push(item); } // Command: void
  peek() { return this.items.at(-1); }   // Query: value
  // pop() viole CQS: modifie ET retourne
}

Cas d'usage : Base de CQRS, rend le code previsible et plus facile a raisonner.

Fonction RTK qui genere automatiquement un thunk avec les actions pending/fulfilled/rejected pour les operations asynchrones.

Comme un livreur avec suivi : tu sais quand il part (pending), arrive (fulfilled) ou echoue (rejected).

const fetchUsers = createAsyncThunk(
  'users/fetch',
  async (_, { rejectWithValue }) => {
    try { return (await api.getUsers()).data; }
    catch (e) { return rejectWithValue(e.message); }
  }
);

Cas d'usage : Appels API avec gestion automatique des etats de chargement et d'erreur dans Redux.

Fonction qui cree un composant injectant du CSS global (reset, fonts, variables). Contrairement a styled, ces styles ne sont pas scopes a un element.

Le papier peint de l'appartement : il couvre tous les murs, pas juste un meuble.

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: ${({ theme }) => theme.font};
    background: ${({ theme }) => theme.bg};
  }
`
// <GlobalStyle /> dans App

Cas d'usage : Definir le CSS reset, les styles globaux du body et les custom properties CSS.

Fonction de Reselect (integree a RTK) qui cree des selecteurs memoises. Le resultat n'est recalcule que si les inputs changent, evitant des calculs redondants.

Comme un formulaire pre-rempli : tant que les donnees source ne changent pas, le calcul derive est reutilise.

const selectUsers = (state) => state.users.list;
const selectActiveUsers = createSelector(
  [selectUsers],
  (users) => users.filter(u => u.active)
);
// Ne refiltre que si state.users.list change

Cas d'usage : Derivation de donnees couteuses depuis le store Redux (filtrage, tri, aggregation).

Methode de Test.createTestingModule qui cree un module NestJS isole pour les tests. Permet de mocker les dependances via overrideProvider.

Comme un simulateur de vol : tu recrees l'environnement complet mais en mode test.

const module = await Test.createTestingModule({
  providers: [UserService,
    { provide: UserRepository, useValue: mockRepo }],
}).compile();

const service = module.get<UserService>(UserService);
expect(await service.findAll()).toEqual([]);

Cas d'usage : Ecrire des tests unitaires et d'integration pour les services NestJS avec des mocks.

API de Vanilla Extract pour definir des themes type-safe via des CSS custom properties. Genere un contrat de theme et des classes de theme interchangeables.

Un contrat de location : le theme definit les regles (variables), chaque variante les remplit differemment.

import { createTheme } from '@vanilla-extract/css'

const [themeClass, vars] = createTheme({
  color: { primary: 'blue', bg: 'white' },
  space: { sm: '0.5rem', md: '1rem' },
})
// vars.color.primary => var(--xxx)

Cas d'usage : Creer un systeme de theming type-safe et zero-runtime avec des variantes (light/dark).

Technique d'inlining du CSS nécessaire au rendu above-the-fold directement dans le <head> HTML. Le reste du CSS est chargé de manière asynchrone pour ne pas bloquer le premier rendu.

Comme mettre les ingrédients de l'entrée en premier sur le plan de travail et préparer le dessert plus tard.

<head>
  <style>/* Critical CSS inliné */
    .header { display: flex; }
    .hero { height: 100vh; }
  </style>
  <link rel="preload" href="full.css" as="style"
    onload="this.rel='stylesheet'">
</head>

Cas d'usage : Optimiser le FCP et LCP en éliminant le CSS bloquant le rendu pour le contenu visible initialement.

Technique qui extrait le CSS necessaire au rendu initial (above the fold) et l'inline dans le HTML. Le reste est charge en asynchrone pour accelerer le First Paint.

Mettre les vetements essentiels dans ton bagage a main et le reste en soute.

<!-- HTML inline critical CSS -->
<head>
  <style>.hero{display:flex;height:100vh;}</style>
  <link rel="preload" href="/styles.css" as="style"
    onload="this.rel='stylesheet'">
</head>

Cas d'usage : Ameliorer les metriques FCP et LCP en evitant le blocage du rendu par le CSS externe.

Le chemin critique de rendu CSS identifie les ressources CSS qui bloquent le premier affichage. Optimiser ce chemin implique d'inliner le CSS critique et de différer le reste.

Comme le chemin critique en gestion de projet : les tâches sur ce chemin déterminent le délai total.

<!-- 1. CSS critique inliné -->
<style>/* Above-the-fold styles */</style>
<!-- 2. CSS non-critique en async -->
<link rel="preload" href="styles.css" as="style">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Cas d'usage : Réduire le temps de First Contentful Paint en éliminant le CSS render-blocking.

Le serveur envoie un HTML vide avec un bundle JS. Le navigateur execute React pour generer le DOM. Mauvais pour le SEO et le premier affichage.

Comme recevoir des meubles en kit : le client (navigateur) doit tout assembler lui-meme avant de pouvoir s'asseoir.

// index.html minimal
// <div id="root"></div>
// <script src="bundle.js"></script>

import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);

Cas d'usage : Dashboards internes, apps behind auth ou le SEO n'est pas critique.

Cross-Site Request Forgery : attaque ou un site malveillant force le navigateur a envoyer des requetes authentifiees. Protege via des tokens anti-CSRF.

Comme quelqu'un qui forge ta signature pour signer un cheque a ta place sans que tu le saches.

import csurf from 'csurf';

app.use(csurf({ cookie: true }));
// Le token CSRF est envoye au client et verifie a chaque mutation

Cas d'usage : Proteger les applications avec sessions/cookies contre les requetes forgees.

Attaque qui force un utilisateur authentifie a executer des actions non voulues sur un site ou il est connecte, via un lien ou formulaire piege.

Comme quelqu'un qui imite ta signature pour envoyer une lettre en ton nom.

// Generation du token
$_SESSION['csrf'] = bin2hex(random_bytes(32));
echo '<input type="hidden" name="csrf" value="'
  . $_SESSION['csrf'] . '">';

// Verification
if (!hash_equals($_SESSION['csrf'], $_POST['csrf']))
  throw new SecurityException();

Cas d'usage : Sur tout formulaire ou action modifiant des donnees (POST, PUT, DELETE).

Système qui scope automatiquement les classes CSS à un composant via un hash unique au build. On importe les styles comme un objet JS et les noms de classes sont générés automatiquement.

Comme des badges nominatifs uniques dans une conférence : impossible que deux personnes aient le même.

/* Button.module.css */
.primary { background: blue; }

// Button.tsx
import styles from './Button.module.css';
const Button = () => (
  <button className={styles.primary}>OK</button>
);
/* Rendu: class="Button_primary_x7ks2" */

Cas d'usage : Projets React/Vue avec bundler pour isoler les styles par composant sans convention de nommage.

Plugin PostCSS de minification CSS. Supprime les espaces, commentaires, raccourcit les couleurs et proprietes pour reduire la taille du fichier CSS final.

Un compresseur de valise : meme contenu, mais ca prend beaucoup moins de place.

/* Avant: 234 bytes */
.card {
  background-color: #ffffff;
  margin: 0px 0px 0px 0px;
  padding: 16px;
}
/* Apres cssnano: 48 bytes */
.card{background:#fff;margin:0;padding:16px}

Cas d'usage : Reduire la taille du CSS en production pour ameliorer les temps de chargement.

Mécanisme ::part() qui expose des éléments internes du Shadow DOM au style externe. L'attribut part='nom' sur l'élément interne permet au CSS parent de le cibler.

Comme des boutons de réglage sur la façade d'un appareil : on peut les ajuster sans ouvrir le boîtier.

/* Dans le Shadow DOM du composant */
<button part="btn">Click</button>

/* CSS externe */
my-component::part(btn) {
  background: blue;
  color: white;
}

Cas d'usage : Permettre la personnalisation contrôlée du style d'un Web Component sans casser l'encapsulation.

Prop speciale d'Emotion qui permet d'appliquer des styles directement sur un element JSX sans creer un styled component. Accepte un objet ou un template literal.

Ecrire une note directement sur l'element au lieu de creer une etiquette nommee.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

<div css={css`
  display: flex;
  padding: 1rem;
  &:hover { background: #f0f0f0; }
`}>
  Inline styles avec pseudo-selectors!
</div>

Cas d'usage : Styler rapidement un element unique sans creer un styled component dedie.

Pattern qui utilise les CSS custom properties (--var) comme pont entre le CSS-in-JS et le CSS natif. Permet le theming dynamique sans re-render React.

Un traducteur bilingue entre CSS-in-JS et CSS natif : les deux parlent via les variables CSS.

// Definir les tokens en CSS vars
const GlobalStyle = createGlobalStyle`
  :root {
    --primary: ${({ theme }) => theme.primary};
  }
`
// Utiliser partout (meme hors styled)
.card { color: var(--primary); }

Cas d'usage : Creer un systeme de theming performant qui fonctionne avec CSS-in-JS ET du CSS classique.

Approche qui écrit le CSS directement en JavaScript (styled-components, Emotion). Les styles sont scopés au composant, peuvent utiliser des variables JS et sont générés au runtime ou au build.

Comme un chef qui prépare la sauce directement dans le plat au lieu de la préparer séparément.

import styled from 'styled-components';

const Button = styled.button<{ $primary?: boolean }>`
  background: ${p => p.$primary ? 'blue' : 'gray'};
  color: white;
  padding: 0.5rem 1rem;
`;

Cas d'usage : Applications React avec styles dynamiques basés sur les props ou le thème.

Helper qui permet de definir des blocs de CSS reutilisables avec interpolations. Necessaire pour les interpolations conditionnelles a l'interieur des styled components.

Un paragraphe pre-ecrit que tu peux inserer dans n'importe quelle lettre.

import styled, { css } from 'styled-components'

const truncate = css`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`
const Title = styled.h2`
  font-size: 1.5rem;
  ${truncate}
`

Cas d'usage : Extraire et reutiliser des blocs de styles communs entre plusieurs styled components.

Common Table Expression : sous-requete nommee definie avec WITH, utilisable comme une table temporaire dans la requete principale. Peut etre recursive pour les hierarchies.

Definir une variable intermediaire dans un calcul complexe pour le rendre lisible etape par etape.

WITH active_users AS (
  SELECT * FROM users WHERE status = 'active'
)
SELECT a.name, COUNT(o.id) as orders
FROM active_users a
JOIN orders o ON a.id = o.user_id
GROUP BY a.name;

Cas d'usage : Decomposer des requetes complexes en etapes lisibles, ou parcourir des structures arborescentes avec CTE recursive.

Méthodologie Composition-Utility-Block-Exception qui embrasse la cascade CSS. Utilise les compositions pour le layout, les utilities pour les tokens, les blocks pour les composants, et les exceptions pour les variantes.

Comme un architecte qui planifie les pièces (composition), choisit les matériaux (utilities), meuble chaque pièce (blocks) et ajuste les détails (exceptions).

/* Composition : layout */
.flow > * + * { margin-top: var(--flow-space); }
/* Utility : token */
.text-primary { color: var(--primary); }
/* Block : composant */
.card { /* styles spécifiques */ }
/* Exception */
.card[data-variant='featured'] { /* override */ }

Cas d'usage : Projets qui veulent tirer parti de la cascade CSS plutôt que la combattre.

Transformer une fonction a N arguments en N fonctions a 1 argument chainables. Chaque appel retourne une nouvelle fonction jusqu'a ce que tous les arguments soient fournis.

Un formulaire en plusieurs etapes : chaque page collecte une info, et le formulaire n'est soumis qu'a la derniere etape.

const curry = (fn) => {
  const arity = fn.length;
  return function go(...args) {
    return args.length >= arity
      ? fn(...args)
      : (...more) => go(...args, ...more);
  };
};
const add = curry((a, b, c) => a + b + c);
add(1)(2)(3); // 6

Cas d'usage : Configuration progressive de fonctions, creation de variantes specialisees, composition fonctionnelle.

Pointeur iterable vers les resultats d'une requete. Le curseur ne charge pas tous les documents en memoire mais les recupere par batches depuis le serveur.

Un marque-page dans un gros livre : tu lis page par page au lieu de photocopier tout le livre d'un coup.

const cursor = db.users.find({});
while (await cursor.hasNext()) {
  const doc = await cursor.next();
  process(doc);
}

Cas d'usage : Iterer sur de grands resultats sans saturer la memoire de l'application.

Decorateur personalise cree avec createParamDecorator ou applyDecorators pour extraire des donnees ou combiner des decorateurs existants.

Comme creer un raccourci clavier personnalise qui combine plusieurs actions en un seul geste.

export const CurrentUser = createParamDecorator(
  (data: unknown, ctx: ExecutionContext) => {
    const request = ctx.switchToHttp().getRequest();
    return request.user;
  },
);

Cas d'usage : Extraire l'utilisateur courant du token JWT dans chaque handler sans dupliquer le code.

API native du navigateur permettant de définir de nouvelles balises HTML avec leur propre comportement. Le nom doit contenir un tiret pour éviter les collisions avec les éléments natifs.

Comme créer une nouvelle pièce de Lego sur mesure qui s'emboîte parfaitement avec les pièces standard.

class UserAvatar extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute('name');
    this.innerHTML = `<img alt="${name}">`;
  }
}
customElements.define('user-avatar', UserAvatar);

Cas d'usage : Construire des composants framework-agnostic partageables entre React, Vue et Angular.

Fonction JavaScript prefixee par 'use' qui encapsule de la logique reutilisable composee d'autres hooks. Chaque appel cree sa propre instance de state.

Comme une recette de cuisine : tu la reutilises dans differents repas, mais chaque plat a ses propres ingredients (state).

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

Cas d'usage : Extraire et reutiliser de la logique stateful entre composants (fetch, debounce, form, auth).

API pour creer ses propres plugins Tailwind via addUtilities, addComponents, addVariant. Permet d'etendre le framework avec des fonctionnalites specifiques au projet.

Fabriquer tes propres briques LEGO quand les formes standard ne suffisent plus.

const plugin = require('tailwindcss/plugin')
module.exports = plugin(({ addVariant, e }) => {
  addVariant('hocus', ['&:hover', '&:focus'])
  // Usage: hocus:bg-blue-500
})

Cas d'usage : Ajouter des variantes custom (hocus, supports) ou des utilitaires metier au framework.

Type de contenu personnalise au-dela des posts et pages natifs. Permet de modeliser des entites metier (produits, evenements, temoignages) avec leur propre interface admin.

Comme ajouter un nouveau type de classeur dans une armoire de bureau : factures, devis, contrats.

register_post_type('product', [
  'labels' => ['name' => 'Produits'],
  'public' => true,
  'has_archive' => true,
  'supports' => ['title', 'editor', 'thumbnail'],
  'show_in_rest' => true,
]);

Cas d'usage : Quand le contenu ne correspond pas aux posts/pages natifs : portfolio, evenements, FAQ, produits.

Variables CSS déclarées avec -- et utilisées via var(). Elles cascadent, sont héritées et peuvent être modifiées dynamiquement en JS, contrairement aux variables Sass.

Comme des réglages centralisés dans une télécommande : on change une valeur et tous les appareils s'adaptent.

:root {
  --color-primary: #3b82f6;
  --spacing: 1rem;
}
.btn {
  background: var(--color-primary);
  padding: var(--spacing);
}
.dark { --color-primary: #60a5fa; }

Cas d'usage : Créer un système de design tokens avec thèmes clair/sombre modifiables en runtime.

Providers definis avec useClass, useValue, useFactory ou useExisting pour un controle total sur ce qui est injecte. Permet l'injection de valeurs non-classes.

Comme choisir entre acheter un meuble en kit, le faire sur mesure ou recycler un ancien meuble.

providers: [
  { provide: 'API_KEY', useValue: process.env.API_KEY },
  { provide: Logger, useClass: ProdLogger },
  { provide: 'DB', useFactory: (cfg: ConfigService) =>
    createConnection(cfg.get('DB_URL')),
    inject: [ConfigService],
  },
]

Cas d'usage : Injecter des variables d'environnement, des connexions dynamiques ou des implementations alternatives.

Systeme de classification personnalise pour organiser les contenus au-dela des categories et tags natifs. Peut etre hierarchique ou plate.

Comme creer un nouveau systeme d'etiquettes dans une bibliotheque : par couleur, par taille, par theme.

register_taxonomy('brand', ['product'], [
  'labels' => ['name' => 'Marques'],
  'hierarchical' => false,
  'show_in_rest' => true,
  'rewrite' => ['slug' => 'marque'],
]);

Cas d'usage : Pour classifier les CPT : marques de produits, lieux d'evenements, niveaux de difficulte.

Fonctions de validation personnalisees definies dans le schema. Peuvent etre synchrones ou asynchrones et retournent un booleen ou lancent une erreur.

Un test sur mesure en plus des controles standard : verifier que le code postal correspond bien a la ville.

{
  phone: {
    type: String,
    validate: {
      validator: (v) => /^\+33[0-9]{9}$/.test(v),
      message: 'Format FR invalide'
    }
  }
}

Cas d'usage : Valider des regles metier specifiques comme un format de telephone, une plage de dates ou un IBAN.

Librairie qui cree des variantes de composants type-safe avec des classes CSS (Tailwind). Definit base, variants, compoundVariants et defaultVariants.

Un configurateur de voiture : tu choisis couleur, taille, options, et il genere la bonne combinaison.

import { cva } from 'class-variance-authority'

const button = cva('px-4 py-2 rounded font-medium', {
  variants: {
    intent: { primary: 'bg-blue-500', danger: 'bg-red-500' },
    size: { sm: 'text-sm', lg: 'text-lg px-6 py-3' },
  },
  defaultVariants: { intent: 'primary', size: 'sm' },
})
// button({ intent: 'danger', size: 'lg' })

Cas d'usage : Creer des composants Tailwind avec des variantes type-safe sans styled-components.

Framework de test E2E et composant qui s'execute directement dans le navigateur, offrant un time-travel debugger visuel et une DX excellente.

Comme une camera de surveillance dans votre app : vous voyez chaque clic, chaque requete, et vous pouvez rembobiner.

// login.cy.js
describe('Login', () => {
  it('logs in successfully', () => {
    cy.visit('/login');
    cy.get('#email').type('alice@test.com');
    cy.get('#password').type('secret123');
    cy.get('button[type=submit]').click();
    cy.url().should('include', '/dashboard');
  });
});

Cas d'usage : Pour les tests E2E d'applications web avec besoin d'un debugger visuel puissant et une courbe d'apprentissage douce.

Mode de test Cypress qui monte des composants React dans un vrai navigateur, permettant des tests visuels et d'interaction sans lancer toute l'application.

Comme tester une piece de voiture sur un banc d'essai reel au lieu d'une simulation informatique.

import { mount } from 'cypress/react';

it('affiche le compteur', () => {
  mount(<Counter initial={5} />);
  cy.get('[data-testid="count"]').should('have.text', '5');
  cy.get('button').click();
  cy.get('[data-testid="count"]').should('have.text', '6');
});

Cas d'usage : Tests d'interaction complexes (drag & drop, animations) necessitant un vrai navigateur.

Contrôleur garantissant qu'un Pod tourne sur chaque noeud du cluster (ou un sous-ensemble). Utilisé pour les agents système.

Un concierge par immeuble : chaque bâtiment (noeud) a exactement un concierge attitré.

apiVersion: apps/v1
kind: DaemonSet
metadata:
  name: log-agent
spec:
  selector:
    matchLabels: { app: log-agent }
  template:
    spec:
      containers:
        - name: agent
          image: datadog/agent:latest

Cas d'usage : Déployer des agents de monitoring, collecte de logs ou réseau sur chaque noeud.

Plugin Tailwind qui ajoute des classes de composants semantiques (btn, card, modal). Fournit des themes pre-faits tout en restant personnalisable.

Un kit de meubles IKEA pre-assembles : prets a l'emploi mais tu peux les customiser.

<button class="btn btn-primary">Cliquer</button>
<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Titre</h2>
  </div>
</div>

Cas d'usage : Prototyper rapidement avec des composants pre-styles tout en gardant l'ecosysteme Tailwind.

Developpeur russe-americain, co-createur de Redux et membre de l'equipe React core chez Meta. Son blog 'Overreacted' et ses explications pedagogiques sont des references.

Le professeur de React : il n'a pas invente le framework mais il l'a rendu comprehensible pour des millions de devs.

// Redux — Dan Abramov, 2015
const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
};

Cas d'usage : Redux a defini le pattern de state management en React. Ses idees influencent Zustand, Recoil et Jotai.

Chercheur en securite americain, celebre pour avoir decouvert une faille critique dans le DNS en 2008. Il a coordonne un patch mondial secret avant la divulgation. Decede en 2021.

Le medecin qui a decouvert une epidemie silencieuse (faille DNS) et a vaccine Internet en secret avant qu'elle ne se propage.

// Faille DNS — Dan Kaminsky, 2008
// DNS Cache Poisoning
// Attaquant peut rediriger n'importe quel
// domaine vers un faux serveur
// Patch coordonne avec tous les vendors
// en secret — cas unique dans l'histoire

Cas d'usage : Comprendre l'importance de la securite DNS et de la divulgation responsable des vulnerabilites.

Chercheur italo-americain en IA, co-fondateur et CEO d'Anthropic (createur de Claude). Ancien VP Research chez OpenAI, il a fonde Anthropic pour developper une IA sure et alignee.

Le scientifique qui a quitte le labo principal pour en creer un plus prudent — la securite de l'IA avant la vitesse.

// Anthropic — Dario Amodei, 2021
// Constitutional AI (CAI)
// Approche d'alignement de l'IA :
// 1. Definir des principes (constitution)
// 2. L'IA s'auto-critique selon ces regles
// 3. RLHF + auto-revision
// Claude = produit phare d'Anthropic

Cas d'usage : Comprendre les enjeux de securite de l'IA et l'importance de l'alignement des modeles de langage.

Prefix dark: qui applique des styles quand le mode sombre est actif. Peut fonctionner via la media query prefers-color-scheme ou via une classe sur le HTML.

Un interrupteur jour/nuit dans ta maison : les meubles restent, seul l'eclairage change.

<div class="bg-white dark:bg-gray-900
  text-black dark:text-white">
  Mode clair et sombre automatique
</div>
// tailwind.config: darkMode: 'class'

Cas d'usage : Implementer un theme sombre sans dupliquer les composants ni gerer des variables CSS manuellement.

Dart Sass est l'implementation officielle et activement maintenue. Node Sass (base sur LibSass en C++) est deprecie et ne recoit plus de nouvelles fonctionnalites.

Dart Sass est le nouveau modele de voiture, Node Sass est l'ancien modele qui n'est plus fabrique.

// package.json
// BIEN :
"sass": "^1.77.0" // Dart Sass

// DEPRECIE :
"node-sass": "^9.0.0" // Ne supporte pas @use

Cas d'usage : Toujours utiliser Dart Sass (package npm 'sass') pour avoir acces a @use, @forward et les built-in modules.

Attributs personnalisés préfixés par data-* qui stockent des informations supplémentaires sur un élément HTML. Accessibles en JS via element.dataset et ciblables en CSS via [data-*].

Comme des post-it collés sur des dossiers : ils ajoutent des infos sans modifier le contenu du dossier.

<button data-action="delete" data-id="42">
  Supprimer
</button>
<script>
btn.addEventListener('click', (e) => {
  const { action, id } = e.target.dataset;
});
</script>

Cas d'usage : Stocker des métadonnées légères sur les éléments pour le JS sans polluer les attributs HTML standards.

Conteneur logique de collections dans MongoDB. Une instance MongoDB peut heberger plusieurs databases, chacune avec ses propres fichiers sur disque.

Une armoire entiere dans un bureau : chaque armoire (database) contient ses propres dossiers (collections).

use myApp;
db.stats();
show dbs;

Cas d'usage : Isoler les donnees de differentes applications ou environnements sur un meme serveur.

Scripts versionnés et ordonnés pour modifier le schéma de base de données de manière incrémentale, reproductible et réversible.

Un journal des travaux dans un immeuble : chaque rénovation est documentée et peut être annulée.

// 001_create_users.sql
CREATE TABLE users (
  id UUID PRIMARY KEY,
  email VARCHAR(255) UNIQUE NOT NULL
);
-- npx prisma migrate dev
-- npx knex migrate:latest

Cas d'usage : Synchroniser le schéma de base entre tous les environnements de manière automatisée.

Utilitaire qui regroupe et met en cache les requetes de base de donnees dans une execution GraphQL. Resout le probleme classique N+1.

Comme un livreur qui regroupe toutes les commandes d'un quartier en une seule tournee au lieu de faire un aller-retour par colis.

@Injectable({ scope: Scope.REQUEST })
export class UserLoader {
  private loader = new DataLoader<number, User>(async (ids) => {
    const users = await this.userService.findByIds([...ids]);
    return ids.map(id => users.find(u => u.id === id));
  });
  load(id: number) { return this.loader.load(id); }
}

Cas d'usage : Optimiser les resolvers GraphQL en batchant les requetes par entite pour eviter le N+1.

Utilitaire qui batch et cache les requetes de donnees pour resoudre le probleme N+1 dans GraphQL. Regroupe les appels DB d'un meme tick en une seule requete.

Un serveur qui attend que toute la table ait commande avant d'aller en cuisine, au lieu de faire un aller-retour par personne.

const userLoader = new DataLoader(async (ids) => {
  const users = await db.users.findByIds(ids);
  return ids.map(id => users.find(u => u.id === id));
});
// userLoader.load(1); userLoader.load(2); -> 1 query

Cas d'usage : Resolvers GraphQL qui chargent des entites liees pour eviter N+1 requetes.

Queue spéciale recevant les messages qui ont échoué après plusieurs tentatives de traitement. Permet l'analyse post-mortem et le reprocessing.

Le bureau des objets trouvés de la poste : les lettres non distribuables y sont stockées pour investigation.

const queue = new Queue('payments', {
  defaultJobOptions: {
    attempts: 3,
    backoff: { type: 'exponential', delay: 1000 },
    removeOnFail: false
  }
});
// Les jobs échoués vont dans la DLQ

Cas d'usage : Ne pas perdre les messages critiques (paiements, commandes) malgré les erreurs.

Retarde l'execution d'une fonction jusqu'a ce qu'un delai se soit ecoule sans nouvel appel. Chaque appel reinitialise le timer. N'execute que le dernier appel.

L'ascenseur qui attend que plus personne n'entre pendant 3 secondes avant de fermer les portes.

function debounce(fn, ms) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), ms);
  };
}
const search = debounce(query => fetch(query), 300);

Cas d'usage : Recherche en temps reel (attendre que l'utilisateur arrete de taper), resize handler, auto-save.

Fichiers .d.ts.map qui lient les declarations aux sources originales. Permettent 'Go to Definition' de naviguer vers le .ts source au lieu du .d.ts.

Comme un GPS qui mene directement a l'usine au lieu de s'arreter a la vitrine du magasin.

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

Cas d'usage : Monorepos et bibliotheques ou les developpeurs doivent naviguer vers le code source des dependances.

Mecanisme ou plusieurs declarations du meme nom sont fusionnees en une seule definition. S'applique aux interfaces, namespaces et enums.

Comme deux equipes qui construisent chacune une aile du meme batiment — a la fin, c'est un seul edifice.

interface Box { width: number }
interface Box { height: number }
// Box = { width: number; height: number }
const b: Box = { width: 10, height: 20 };

Cas d'usage : Etendre les types de bibliotheques tierces sans modifier leur code source.

Permet de définir un Shadow DOM directement en HTML via <template shadowrootmode='open'>, sans JavaScript. Le navigateur attache automatiquement le shadow root au parsing.

Comme un meuble livré déjà monté au lieu d'un kit à assembler soi-même.

<my-card>
  <template shadowrootmode="open">
    <style>p { color: blue; }</style>
    <p><slot></slot></p>
  </template>
  Contenu visible
</my-card>

Cas d'usage : SSR de Web Components : le contenu encapsulé est rendu côté serveur sans flash de contenu non stylisé.

Ajoute dynamiquement des responsabilites a un objet sans modifier sa classe. Offre une alternative flexible a l'heritage.

Ajouter des garnitures sur une pizza : chaque garniture enveloppe la precedente et ajoute son propre gout.

function withLogging(fn) {
  return (...args) => {
    console.log('Call:', fn.name);
    return fn(...args);
  };
}
const save = withLogging(saveUser);

Cas d'usage : Ajouter logging, cache, validation ou authentification de facon transparente.

Syntaxe @decorator pour modifier ou annoter des classes et leurs membres. TS supporte les decorateurs legacy (experimentalDecorators) et le standard TC39 stage 3 (TS 5.0+).

Comme un cadre autour d'un tableau — il enveloppe l'oeuvre sans la modifier, en ajoutant du contexte.

// Stage 3 decorator (TS 5.0+)
function log(_target: any, ctx: ClassMethodDecoratorContext) {
  console.log(`Decorating ${String(ctx.name)}`);
}
class Api {
  @log greet() { return "hi"; }
}

Cas d'usage : AOP (logging, auth, validation) dans les frameworks comme Angular, NestJS ou TypeORM.

Valeur par defaut assignee a un parametre generique, utilisee quand le type n'est pas explicitement fourni ni inferable. Similaire aux parametres par defaut de fonctions.

Comme la taille standard d'un vetement — si vous ne precisez pas, on vous donne du M.

interface ApiResponse<T = unknown> {
  data: T;
  status: number;
}
const res: ApiResponse = { data: null, status: 200 };
const typed: ApiResponse<User> = { data: user, status: 200 };

Cas d'usage : Fournir un type par defaut dans les bibliotheques pour simplifier l'usage basique tout en permettant la personalisation.

Supprime tous les documents correspondant au filtre. Avec un filtre vide {}, supprime tous les documents de la collection.

Vider tout un tiroir du classeur d'un coup.

await db.collection('logs').deleteMany({
  createdAt: { $lt: new Date('2023-01-01') }
});

Cas d'usage : Purger des donnees obsoletes comme des logs ou des sessions expirees.

Supprime le premier document correspondant au filtre. Retourne deletedCount indiquant si un document a ete supprime.

Retirer une seule fiche du classeur et la mettre a la poubelle.

const result = await db.collection('users')
  .deleteOne({ _id: userId });
console.log(result.deletedCount); // 1

Cas d'usage : Supprimer un document precis comme un compte utilisateur apres demande RGPD.

Informaticien americain, createur du langage C et co-createur d'Unix avec Ken Thompson. Le C reste le langage le plus influent de l'histoire, a la base de C++, Java, JavaScript et bien d'autres.

Le forgeron qui a fabrique l'enclume sur laquelle tous les autres outils ont ete forges.

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}
// Le programme le plus reproduit de l'histoire

Cas d'usage : Comprendre les racines de la quasi-totalite des langages modernes et des systemes d'exploitation.

Strategie de design qui duplique volontairement des donnees entre documents pour eviter les jointures couteuses. Optimise la lecture au prix de la complexite en ecriture.

Ecrire le nom du client directement sur chaque facture au lieu de ne mettre qu'un numero client.

// Denormalise : nom duplique
{
  orderId: 1,
  customerName: 'Alice',
  customerId: ObjectId('...')
}

Cas d'usage : Quand les lectures sont beaucoup plus frequentes que les ecritures et que les donnees dupliquees changent rarement.

Pattern ou les dependances sont fournies a une classe par le framework plutot que creees par la classe elle-meme. NestJS utilise l'injection par constructeur.

Comme un restaurant ou les ingredients sont livres par les fournisseurs plutot que cultives par le chef.

@Injectable()
export class OrderService {
  constructor(
    private userService: UserService,
    private paymentService: PaymentService,
  ) {}
}

Cas d'usage : Decouple les classes pour faciliter les tests unitaires et permettre le remplacement des implementations.

Les modules de haut niveau ne doivent pas dependre de modules de bas niveau. Les deux doivent dependre d'abstractions (interfaces). L'abstraction ne depend pas des details.

Comme un chef qui commande 'du poisson frais' sans se soucier du fournisseur specifique.

// Haut niveau depend de l'abstraction
class OrderService {
  public function __construct(
    private PaymentGateway $gateway // interface
  ) {}
}
// Bas niveau implemente l'abstraction
class StripePayment implements PaymentGateway { }

Cas d'usage : Pour decouvrir les couches de l'application et permettre le remplacement des implementations (tests, refactoring).

Les modules de haut niveau ne doivent pas dependre des modules de bas niveau. Les deux doivent dependre d'abstractions. Les abstractions ne dependent pas des details.

Une prise electrique : l'appareil et le reseau dependent du standard de la prise, pas l'un de l'autre.

// Haut niveau depend d'une abstraction
interface Logger { log(msg: string): void; }
class UserService {
  constructor(private logger: Logger) {}
}
// Injecte ConsoleLogger ou FileLogger

Cas d'usage : Rendre le code testable en injectant des mocks et decoupler les couches.

Ressource Kubernetes déclarant l'état désiré des Pods (image, replicas, stratégie de mise à jour). Gère le rollout et le rollback.

Un contrat de maintenance : tu déclares combien d'employés tu veux et K8s s'assure que ce nombre est toujours respecté.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: api
spec:
  replicas: 3
  selector:
    matchLabels: { app: api }
  template:
    spec:
      containers:
        - name: api
          image: mon-app:1.0

Cas d'usage : Déployer des applications stateless avec rolling updates et rollback automatique.

Standard de representation des decisions de design (couleurs, typo, espacement) dans un format agnostique (JSON/YAML). Convertis en CSS, Sass, JS, iOS, Android via des outils.

Une partition de musique : un format universel que chaque instrument (plateforme) peut jouer.

// tokens.json (W3C Design Token format)
{
  "color": {
    "primary": {
      "$value": "#3498db",
      "$type": "color"
    }
  }
}
// => CSS: --color-primary: #3498db;
// => Sass: $color-primary: #3498db;

Cas d'usage : Synchroniser les valeurs de design entre Figma, web, mobile et toutes les plateformes.

Syntaxe ES6 pour extraire des valeurs d'objets ou tableaux dans des variables distinctes. Supporte les valeurs par defaut, le renommage et l'imbrication.

Ouvrir un colis et ranger chaque article directement dans le bon tiroir au lieu de tout laisser dans le carton.

const { name, age = 25 } = user;
const [first, ...rest] = [1, 2, 3];
// Nested
const { address: { city } } = user;
// Rename
const { name: userName } = user;

Cas d'usage : Extraire proprement les props d'un composant React, les champs d'une reponse API, les arguments de fonction.

Specification permettant de definir un environnement de developpement reproductible dans un conteneur Docker. Supporte par VS Code, GitHub Codespaces et JetBrains.

Comme un bureau portable pre-equipe : ou que vous alliez, vous retrouvez exactement le meme poste de travail configure.

// .devcontainer/devcontainer.json
{
  "name": "Node.js Dev",
  "image": "mcr.microsoft.com/devcontainers/node:20",
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
  "postCreateCommand": "npm ci",
  "customizations": { "vscode": { "extensions": ["dbaeumer.vscode-eslint"] } }
}

Cas d'usage : Pour onboarder un nouveau developpeur en 5 minutes avec un environnement identique a toute l'equipe.

Developpeur dano-americain, createur de Ruby on Rails et co-fondateur de Basecamp/37signals. Rails a popularise le pattern MVC, 'Convention over Configuration' et le developpement web rapide.

Le chef cuisinier qui a cree la recette 'full-stack en 15 minutes' — et qui n'a pas peur de dire ce qu'il pense.

# Ruby on Rails — DHH, 2004
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
  def create
    @post = Post.new(post_params)
    @post.save
  end
end

Cas d'usage : Rails a influence tous les frameworks MVC (Laravel, Django, NestJS). Ses conventions sont devenues des standards.

Container d'injection de dependances qui instancie automatiquement les objets et leurs dependances. Realisation concrete du principe d'inversion de dependances.

Comme une agence d'interim : tu decris le profil recherche, elle fournit la personne qualifiee.

// Symfony DI
services:
  App\Service\Mailer:
    arguments:
      $transport: '@mailer.transport'

// Auto-wiring resout les types automatiquement

Cas d'usage : Pour eliminer les new manuels et centraliser la configuration des services.

Élément natif <dialog> qui gère les modales avec piège de focus, fermeture Escape et backdrop intégrés. La méthode showModal() crée une modale accessible sans bibliothèque externe.

Comme une fenêtre de guichet : elle capte toute l'attention, bloque l'accès au reste, et se ferme proprement.

<dialog id="dlg">
  <h2>Confirmation</h2>
  <form method="dialog">
    <button value="ok">OK</button>
  </form>
</dialog>
<button onclick="dlg.showModal()">Ouvrir</button>

Cas d'usage : Remplacer les modales custom par l'élément natif pour une accessibilité et une gestion du focus automatiques.

Outil qui charge et decharge automatiquement des variables d'environnement quand vous entrez ou sortez d'un repertoire. Base sur un fichier .envrc versionne.

Comme un badge d'acces automatique : en entrant dans le bureau (dossier), vos droits (variables) s'activent automatiquement.

# .envrc
export DATABASE_URL=postgres://localhost/myapp
export API_KEY=dev-key-123
export NODE_ENV=development

# Terminal:
# cd my-project -> direnv: loading .envrc
# cd ..         -> direnv: unloading
# direnv allow  -> autoriser un nouvel .envrc

Cas d'usage : Pour gerer automatiquement les variables d'environnement par projet sans .env global.

Union de types partageant une propriete commune (discriminant) qui permet a TS de distinguer chaque variante. Pattern fondamental pour modeliser des etats.

Comme des colis avec une etiquette de couleur — la couleur suffit pour savoir quel traitement appliquer.

type Result =
  | { status: "ok"; data: string }
  | { status: "error"; message: string };
function handle(r: Result) {
  if (r.status === "ok") r.data; // string
  else r.message; // string
}

Cas d'usage : Modeliser des etats applicatifs (loading/success/error) avec exhaustivite garantie par le compilateur.

Mecanisme d'heritage de schema qui permet de stocker des documents de types differents dans une meme collection, avec un champ discriminateur (__t) pour differencier les types.

Un parking multi-vehicules : voitures, motos et camions partagent le meme espace mais ont des regles differentes.

const Event = mongoose.model('Event', eventSchema);
const Click = Event.discriminator('Click',
  new Schema({ url: String })
);
const Purchase = Event.discriminator('Purchase',
  new Schema({ amount: Number })
);

Cas d'usage : Modeliser un systeme d'evenements (analytics) ou des entites polymorphiques dans une seule collection.

Suivi d'une requête à travers tous les services d'un système distribué via un trace ID unique. Chaque service ajoute un span au trace.

Le suivi d'un colis : chaque entrepôt (service) scanne le code-barres (trace ID) et ajoute une étape.

// OpenTelemetry
const tracer = trace.getTracer('api');
app.use((req, res, next) => {
  const span = tracer.startSpan('http.request');
  span.setAttribute('http.method', req.method);
  res.on('finish', () => span.end());
  next();
});

Cas d'usage : Identifier quel service cause la latence dans une chaîne de 10 microservices.

Quand un type conditionnel agit sur un parametre generique nu (T extends U), il se distribue sur chaque membre d'une union. Chaque membre est evalue independamment.

Comme un tri postal — chaque lettre de la pile est examinees individuellement et envoyee dans la bonne boite.

type NoNull<T> = T extends null | undefined ? never : T;
type R = NoNull<string | null | number>;
// string | number (null elimine)

Cas d'usage : Filtrer ou transformer chaque membre d'une union independamment (Exclude, Extract fonctionnent ainsi).

Images Docker minimalistes de Google ne contenant que l'application et ses dépendances runtime, sans shell ni gestionnaire de paquets.

Un coffre-fort scellé : impossible d'y entrer même si on essaie, ce qui le rend plus sûr.

FROM node:20 AS build
COPY . .
RUN npm ci && npm run build

FROM gcr.io/distroless/nodejs20
COPY --from=build /app/dist /app
CMD ["/app/server.js"]

Cas d'usage : Réduire la surface d'attaque en production en éliminant tout outil exploitable.

Outil pour définir et orchestrer des applications multi-conteneurs via un fichier YAML. Gère réseaux, volumes et dépendances entre services.

Le chef d'orchestre qui dit à chaque musicien (conteneur) quand jouer et comment se synchroniser.

services:
  api:
    build: .
    ports: ["3000:3000"]
    depends_on: [db]
  db:
    image: postgres:16
    volumes: ["pgdata:/var/lib/postgresql/data"]

Cas d'usage : Environnement de développement local reproduisant la stack complète en une commande.

Instance exécutable d'une image Docker, isolée du système hôte grâce aux namespaces et cgroups Linux. Léger, démarrage en secondes.

Un appartement meublé dans un immeuble : chaque locataire (conteneur) a son espace privé mais partage les fondations (le kernel).

docker run -d --name api -p 3000:3000 mon-app:1.0
docker ps
docker logs api
docker exec -it api sh
docker stop api && docker rm api

Cas d'usage : Exécuter des applications isolées avec des dépendances propres sans conflits système.

Template immuable contenant le code, les dépendances et la config nécessaires pour créer un conteneur. Construite couche par couche via un Dockerfile.

Un moule à gâteau : le moule (image) est toujours le même, mais chaque gâteau produit (conteneur) vit sa propre vie.

# Lister les images locales
docker images
# Télécharger une image
docker pull node:20-alpine
# Construire une image
docker build -t mon-app:1.0 .

Cas d'usage : Base de tout déploiement conteneurisé, garantit la reproductibilité entre dev et prod.

Réseau virtuel isolé permettant la communication entre conteneurs. Bridge par défaut, overlay pour le multi-host.

Un réseau WiFi privé : seuls les appareils connectés au même réseau peuvent se parler.

docker network create mon-reseau
docker run --network mon-reseau --name api app
docker run --network mon-reseau --name db postgres
# api peut joindre db par son nom

Cas d'usage : Isoler les communications entre services tout en permettant la découverte par nom DNS.

Service de stockage et distribution d'images Docker. Docker Hub est le registry public par défaut, mais on peut héberger le sien.

Une bibliothèque de livres (images) où chacun peut emprunter (pull) ou déposer (push) des ouvrages.

docker tag mon-app:1.0 registry.io/mon-app:1.0
docker push registry.io/mon-app:1.0
docker pull registry.io/mon-app:1.0

Cas d'usage : Stocker les images de manière centralisée pour que le CI/CD et tous les environnements y accèdent.

Outil d'analyse de sécurité intégré à Docker qui scanne les images pour détecter les vulnérabilités CVE dans les dépendances.

Un détecteur de métaux à l'entrée d'un aéroport : il scanne tout ce qui passe pour trouver les menaces.

docker scout cves mon-app:1.0
docker scout recommendations mon-app:1.0

Cas d'usage : Intégrer le scan de vulnérabilités dans le pipeline CI pour bloquer les images dangereuses.

Mécanisme de persistance des données indépendant du cycle de vie du conteneur. Géré par Docker et monté dans le filesystem du conteneur.

Un disque dur externe : on le branche sur n'importe quel PC (conteneur) et les données restent.

docker volume create mydata
docker run -v mydata:/app/data mon-app
# Bind mount pour le dev
docker run -v $(pwd):/app mon-app

Cas d'usage : Persister les données de bases de données entre les redémarrages de conteneurs.

Fichier texte décrivant les instructions pour construire une image Docker couche par couche. Chaque instruction crée un layer cacheable.

Une recette de cuisine étape par étape : chaque ligne ajoute un ingrédient ou une action au plat final.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Cas d'usage : Automatiser la construction d'images reproductibles pour le CI/CD.

Unite de base de stockage dans MongoDB, equivalent d'une ligne en SQL. C'est un objet BSON (JSON binaire) compose de paires cle-valeur, pouvant contenir des sous-documents et des tableaux.

Une fiche client dans un classeur : chaque fiche peut avoir des champs differents, contrairement aux lignes figees d'un tableur.

db.users.insertOne({
  name: "Alice",
  age: 30,
  address: { city: "Paris" },
  hobbies: ["code", "cafe"]
});

Cas d'usage : Stocker des donnees semi-structurees ou le schema peut varier d'un enregistrement a l'autre.

Les Document middlewares (save, validate, remove) ont this = le document. Les Query middlewares (find, update, delete) ont this = la query. Important pour savoir quoi modifier.

Document middleware = le chirurgien qui opere directement le patient. Query middleware = le pharmacien qui modifie l'ordonnance.

// Document: this = document
schema.pre('save', function() {
  console.log(this.name);
});
// Query: this = query
schema.pre('find', function() {
  this.where({ deleted: false });
});

Cas d'usage : Implementer du soft-delete en filtrant automatiquement les documents supprimes sur chaque find.

Evenement significatif qui s'est produit dans le domaine metier. Nomme au passe (OrderPlaced, PaymentReceived). Declenche des reactions dans d'autres contextes.

L'annonce au micro dans un magasin : 'Nouveau produit disponible en rayon 3' — tous les interesses reagissent.

class OrderPlaced extends DomainEvent {
  constructor(public orderId: string, public total: number) {
    super('OrderPlaced');
  }
}
order.addEvent(new OrderPlaced(order.id, order.total));

Cas d'usage : Decoupler les side effects (emails, analytics) de la logique metier principale.

Service stateless qui encapsule une logique metier qui ne rentre naturellement dans aucune entite ou value object. Opere sur plusieurs agregats.

Un notaire : il ne possede rien mais orchestre une transaction entre acheteur et vendeur.

class TransferService {
  transfer(from: Account, to: Account, amount: Money) {
    from.debit(amount);
    to.credit(amount);
  }
}

Cas d'usage : Operations metier impliquant plusieurs agregats qui ne peuvent pas etre attribuees a un seul.

Informaticien americain, auteur de 'The Art of Computer Programming', reference absolue en algorithmique. Il a aussi cree TeX, le systeme de composition typographique utilise dans le monde academique.

L'encyclopediste de l'algorithmique : son oeuvre est si complete que certains la comparent a une bible.

% TeX — cree par Donald Knuth
\documentclass{article}
\begin{document}
Hello, \TeX{} World!
\end{document}
% Utilise par tout le monde academique

Cas d'usage : Reference incontournable pour l'analyse d'algorithmes et la rigueur en programmation.

Fichiers de configuration commencant par un point (.bashrc, .gitconfig, .zshrc). Versionnes dans un repo Git, ils permettent de reproduire son environnement sur n'importe quelle machine.

Comme emporter ses preferences personnelles (siege, miroir, thermostat) d'un bureau a l'autre : votre confort vous suit.

# Structure typique d'un repo dotfiles
# ~/.dotfiles/
#   .gitconfig
#   .zshrc
#   .vimrc
#   install.sh  -> symlink tout

# GitHub Codespaces utilise automatiquement
# votre repo dotfiles si configure dans
# Settings > Codespaces > Dotfiles

Cas d'usage : Pour reproduire son environnement de dev sur un nouveau poste ou dans un Codespace en quelques secondes.

Informaticien americain, inventeur de JSON et auteur de 'JavaScript: The Good Parts'. Il a montre que JavaScript avait un bon langage cache sous ses defauts.

Le geologue qui a trouve un diamant dans une mine de charbon — JSON est devenu le format d'echange universel.

// JSON — Douglas Crockford, 2001
{
  "name": "World",
  "greeting": "Hello!",
  "year": 2001
}
// Format d'echange le plus utilise au monde

Cas d'usage : JSON est partout : APIs REST, fichiers de config, bases NoSQL. Comprendre son origine est fondamental.

API native du navigateur qui permet de rendre des éléments déplaçables via draggable='true'. Les événements dragstart, dragover et drop orchestrent le transfert de données.

Comme déplacer des fichiers sur un bureau : on attrape, on glisse, et on lâche à destination.

<div draggable="true"
  ondragstart="e.dataTransfer.setData('text', e.target.id)">
  Glisse-moi
</div>
<div ondrop="drop(e)" ondragover="e.preventDefault()">
  Zone de dépôt
</div>

Cas d'usage : Implémenter des interfaces de réorganisation (kanban, tri de listes) ou d'upload de fichiers.

Chaque piece de connaissance doit avoir une representation unique et non ambigue dans le systeme. Evite la duplication de logique.

Une source unique de verite : un seul calendrier familial, pas un par personne qui divergent.

// Mauvais: validation email dupliquee partout
// Bon:
const isValidEmail = (e) => /^[^@]+@[^@]+$/.test(e);
// Reutilise dans form, API, import

Cas d'usage : Centraliser les regles metier, validations et transformations pour eviter les incoherences.

import() en tant qu'expression retourne une Promise du module. Permet le chargement conditionnel et le code splitting a l'execution, contrairement aux imports statiques.

Commander un plat a la carte au lieu du menu complet : tu ne charges que ce dont tu as besoin, quand tu en as besoin.

const loadChart = async () => {
  const { Chart } = await import('./chart.js');
  return new Chart(data);
};
// Conditionnel
if (user.isAdmin) {
  const { AdminPanel } = await import('./admin.js');
}

Cas d'usage : Code splitting dans les SPA, chargement lazy de routes/composants lourds, chargement conditionnel.

Module configurable via une methode statique (forRoot/forRootAsync) qui retourne un DynamicModule. Permet de passer des options de configuration a l'import.

Comme un abonnement telephonique : le meme operateur mais tu choisis ton forfait (options) a la souscription.

@Module({})
export class MailModule {
  static forRoot(config: MailConfig): DynamicModule {
    return {
      module: MailModule,
      providers: [{ provide: 'MAIL_CONFIG', useValue: config }, MailService],
      exports: [MailService],
    };
  }
}

Cas d'usage : Creer des modules reutilisables comme les modules de config, cache ou mail avec des parametres variables.

Tests end-to-end qui simulent de vraies requetes HTTP via la librairie supertest. Testent le pipeline complet du request au response.

Comme un client mystere qui teste le restaurant de A a Z : de la reservation au dessert.

const app = moduleFixture.createNestApplication();
await app.init();

await request(app.getHttpServer())
  .post('/users')
  .send({ email: 'test@test.com', password: '12345678' })
  .expect(201)
  .expect(res => expect(res.body.email).toBe('test@test.com'));

Cas d'usage : Valider que les endpoints, la validation, les guards et la serialisation fonctionnent ensemble.

Test de bout en bout qui simule le parcours reel d'un utilisateur a travers l'application complete (navigateur, API, BDD). Valide le systeme dans son ensemble.

Comme un client mystere qui entre dans un restaurant, commande, mange et paye pour verifier toute l'experience.

// checkout.spec.ts (Playwright)
test('user can complete checkout', async ({ page }) => {
  await page.goto('/products');
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="checkout"]');
  await page.fill('#email', 'test@mail.com');
  await page.click('button:text("Pay")');
  await expect(page.locator('.success')).toBeVisible();
});

Cas d'usage : Pour valider les parcours utilisateurs critiques (inscription, achat, paiement) avant chaque release.

Exécution de code côté serveur au plus près de l'utilisateur sur un réseau distribué de points de présence (PoP). Réduit la latence de 100-300ms à 10-50ms.

Des guichets de banque dans chaque quartier au lieu d'un seul siège en centre-ville.

// Cloudflare Worker
export default {
  async fetch(request) {
    const country = request.cf?.country;
    const cached = await caches.default.match(request);
    if (cached) return cached;
    const response = await fetch(request);
    return response;
  },
};

Cas d'usage : Personnalisation géographique, auth validation, A/B testing et cache API au plus près des utilisateurs.

Fichier de configuration standardise (.editorconfig) qui definit les regles basiques d'edition (indentation, fin de ligne, charset) pour tous les editeurs et IDE.

Comme une regle commune pour toute la classe : que vous utilisiez un stylo bleu ou noir, tout le monde ecrit sur les memes lignes.

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Cas d'usage : Pour garantir des bases communes (tabs vs spaces, LF vs CRLF) dans une equipe avec differents editeurs.

Informaticien neerlandais, pionnier de l'algorithmique et de la programmation structuree. Son algorithme du plus court chemin est utilise partout, de Google Maps aux protocoles reseau.

Le GPS de l'informatique : il a trouve le chemin le plus court avant meme que les GPS n'existent.

// Algorithme de Dijkstra (1956)
// Trouver le plus court chemin dans un graphe
function dijkstra(graph, source) {
  // dist[v] = Infinity pour tout v
  // dist[source] = 0
  // Pour chaque voisin, relacher l'arete
  // Complexite : O((V+E) log V)
}

Cas d'usage : Algorithme fondamental pour les parcours de graphes, utilise en entretien technique et en production (routage reseau, navigation).

Moteur de recherche distribué basé sur Lucene, optimisé pour la recherche full-text, l'analyse de logs et l'agrégation de données à grande échelle.

Un bibliothécaire surpuissant qui retrouve n'importe quel livre en millisecondes parmi des millions.

const results = await client.search({
  index: 'products',
  body: {
    query: { multi_match: {
      query: 'chaussure running',
      fields: ['name^3', 'description'],
      fuzziness: 'AUTO'
    }}
  }
});

Cas d'usage : Recherche produit e-commerce, analyse de logs (ELK stack), moteur de suggestions.

Suite Elasticsearch + Logstash + Kibana pour la collecte, l'indexation et la visualisation des logs. Souvent remplacé par EFK (Fluentd) ou Loki.

Un système de classement automatique : Logstash trie le courrier, Elasticsearch le range, Kibana permet de chercher.

// Filebeat -> Logstash -> Elasticsearch
// Recherche dans Kibana :
// level:error AND service:api AND @timestamp > now-1h

Cas d'usage : Centraliser les logs de tous les services pour le debugging et l'audit.

Frameworks pour créer des emails HTML responsives. MJML utilise un langage de balisage dédié, React Email utilise des composants React transpilés en HTML compatible email.

Un moule à gâteau pour emails : vous choisissez la forme, le contenu s'adapte automatiquement à tous les fours (clients email).

// React Email component
import { Html, Button, Text } from '@react-email/components';
export function WelcomeEmail({ name, url }) {
  return (
    <Html>
      <Text>Bienvenue {name} !</Text>
      <Button href={url}>Confirmer</Button>
    </Html>
  );
}

Cas d'usage : Créer des emails professionnels responsives compatibles Outlook, Gmail et Apple Mail.

Choix de design fondamental en MongoDB : embarquer les donnees liees dans le meme document (denormalisation) ou stocker une reference (ObjectId) vers un autre document (normalisation).

Coller la photo dans le passeport (embedding) ou noter un numero de dossier renvoyant a la photo (referencing).

// Embedding
{ name: 'Alice', address: { city: 'Paris' } }
// Referencing
{ name: 'Alice', addressId: ObjectId('...') }

Cas d'usage : Embedding pour les relations 1:1 et 1:few lues ensemble. Referencing pour les relations 1:many ou many:many.

Librairie CSS-in-JS performante offrant deux APIs : styled (comme styled-components) et css prop (styles inline avec typage). Souvent plus rapide que styled-components.

Le couteau suisse du CSS-in-JS : plusieurs outils (styled, css prop) dans un seul package.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import styled from '@emotion/styled'

const style = css`color: red; font-size: 1.2rem;`
<div css={style}>Emotion css prop</div>

const Box = styled.div`padding: 1rem;`

Cas d'usage : Alternative performante a styled-components avec l'avantage du css prop pour du styling inline.

Principe OOP qui restreint l'acces direct aux donnees internes d'un objet via des modificateurs de visibilite (public, protected, private).

Comme un distributeur de billets : tu interagis via l'ecran et le clavier, pas en ouvrant le coffre.

class BankAccount {
  private float $balance = 0;

  public function deposit(float $amount): void {
    if ($amount <= 0) throw new \InvalidArgumentException();
    $this->balance += $amount;
  }
  public function getBalance(): float { return $this->balance; }
}

Cas d'usage : Pour proteger l'etat interne des objets et garantir que les modifications passent par des methodes controlees.

Objet du domaine defini par son identite unique plutot que par ses attributs. Deux entites avec les memes attributs mais des IDs differents sont distinctes.

Deux jumeaux identiques : meme apparence, mais ce sont deux personnes distinctes avec des identites differentes.

class User {
  constructor(public readonly id: string, public name: string) {}
  equals(other: User) { return this.id === other.id; }
}

Cas d'usage : Modeliser des concepts metier qui ont un cycle de vie et une identite persistante.

Utilitaire RTK qui genere un ensemble de reducers et selecteurs pour gerer des collections normalisees (ids + entities) avec operations CRUD pre-construites.

Comme un classeur a fiches avec index : ajout, suppression et recherche sont automatises et optimises.

const usersAdapter = createEntityAdapter();
const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
  }
});

Cas d'usage : Collections d'entites (utilisateurs, produits, commentaires) necessitant des operations CRUD normalisees.

Type introduit en PHP 8.1 qui represente un ensemble fini de valeurs possibles. Les enums peuvent etre pures ou backed (avec valeur string/int).

Comme les feux de signalisation : il n'existe que rouge, orange et vert, rien d'autre.

enum Status: string {
  case Draft = 'draft';
  case Published = 'published';
  case Archived = 'archived';
}

$post->status = Status::Published;

Cas d'usage : Pour remplacer les constantes de classe et garantir qu'une valeur appartient a un ensemble defini.

Type personnalise definissant un ensemble fixe de valeurs autorisees. Plus performant et type-safe qu'une contrainte CHECK sur un VARCHAR.

Un menu deroulant avec des options figees : tu ne peux choisir que ce qui est propose.

CREATE TYPE mood AS ENUM (
  'happy', 'sad', 'neutral'
);
CREATE TABLE entries (
  id SERIAL PRIMARY KEY,
  feeling mood NOT NULL
);

Cas d'usage : Definir des statuts, roles ou categories avec un nombre fini de valeurs connues a l'avance.

Trois facons de modeliser un ensemble fini: enum (objet runtime), const enum (inline a la compilation, efface), union de litteraux (zero runtime). Chacune avec ses compromis.

Enum: un panneau permanent. Const enum: un post-it qu'on retire apres lecture. Union: une regle orale connue de tous.

enum Dir { Up, Down } // objet JS emis
const enum Fast { A, B } // inline, pas d'objet
type Clean = "up" | "down"; // zero runtime

Cas d'usage : Preferer les unions de litteraux pour la legerete. Enum pour l'iteration. Const enum pour la performance (avec precaution).

Auteur et consultant americain, createur du Domain-Driven Design (DDD). Son livre 'the Blue Book' a defini les concepts d'Aggregate, Entity, Value Object, Bounded Context.

Le traducteur entre les developpeurs et les experts metier : DDD est le langage commun.

// Domain-Driven Design — Eric Evans
// Bounded Contexts
class Order {           // Contexte Vente
  customerId: string;
  total: Money;
}
class Order {           // Contexte Livraison
  address: Address;
  weight: number;
}  // Meme nom, contextes differents

Cas d'usage : DDD est essentiel pour les architectures microservices et les systemes complexes. Sujet courant en entretien senior.

Expert CSS americain, auteur de 'CSS: The Definitive Guide' et co-createur du reset CSS. Il est l'une des references mondiales en CSS depuis les annees 2000.

Le maitre zen du CSS : quand tu as un doute sur une propriete, c'est probablement son livre qui a la reponse.

/* Reset CSS — Eric Meyer */
html, body, div, span, h1, h2, h3,
p, a, img, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

Cas d'usage : Le reset CSS et ses ecrits sont des fondamentaux pour comprendre le modele de boite et la cascade.

Programmeur et essayiste americain, auteur de 'The Cathedral and the Bazaar'. Cet essai a convaincu Netscape de liberer son code source et a popularise le modele open source.

Le philosophe du bazar open source : il a prouve qu'un millier de devs desorganises font mieux qu'une equipe fermee.

// La loi de Linus (par Raymond) :
// 'Given enough eyeballs,
//  all bugs are shallow'
//
// Plus il y a de gens qui lisent le code,
// plus les bugs sont trouves rapidement.
// Fondement de l'open source

Cas d'usage : Comprendre la philosophie open source et pourquoi les entreprises adoptent ce modele de developpement.

Composant classe qui intercepte les erreurs JavaScript dans son sous-arbre et affiche un UI de secours au lieu de crasher toute l'application.

Comme un fusible electrique : il saute pour proteger le reste du circuit.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return <p>Oups!</p>;
    return this.props.children;
  }
}

Cas d'usage : Encapsuler des sections critiques pour que le reste de l'app continue de fonctionner en cas d'erreur.

JS a des types d'erreurs built-in : TypeError (mauvais type), ReferenceError (variable inconnue), SyntaxError, RangeError, URIError. On peut creer des erreurs custom via extends Error.

Differents codes d'alerte dans un hopital : chaque type indique immediatement la nature du probleme.

class AppError extends Error {
  constructor(message, code) {
    super(message);
    this.name = 'AppError';
    this.code = code;
  }
}
throw new AppError('Not found', 404);

Cas d'usage : Creer des erreurs metier typees pour un meilleur handling et des messages clairs.

Bundler et transpileur JavaScript ecrit en Go, 10 a 100x plus rapide que les alternatives JavaScript. Utilise en interne par Vite pour le dev server.

Comme un TGV face a un train regional : meme destination, mais la vitesse est dans une autre categorie.

// En CLI
// esbuild src/index.ts --bundle --outfile=out.js

// En API
import { build } from 'esbuild';
await build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/out.js',
  minify: true,
});

Cas d'usage : Pour les outils CLI, les librairies ou comme transpileur rapide dans la toolchain de dev.

Fonctions d'echappement WordPress adaptees au contexte de sortie : esc_html pour le contenu, esc_attr pour les attributs HTML, esc_url pour les URLs.

Comme des combinaisons de protection differentes selon l'environnement : labo, chantier, ou cuisine.

<a href="<?php echo esc_url($link); ?>">
  <?php echo esc_html($title); ?>
</a>
<input value="<?php echo esc_attr($value); ?>">
<?php echo wp_kses_post($html_content); ?>

Cas d'usage : A chaque affichage de donnees dynamiques dans les templates WordPress, selon le contexte.

Linter JavaScript/TypeScript qui analyse statiquement le code pour detecter les erreurs, les mauvaises pratiques et les violations de style. Entierement configurable par regles et plugins.

Comme un correcteur orthographique pour le code : il souligne les erreurs avant que vous ne les envoyiez.

// eslint.config.js (flat config)
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'error',
      'no-console': 'warn',
    },
  },
];

Cas d'usage : Dans chaque projet JS/TS pour attraper les bugs et maintenir un style de code coherent dans l'equipe.

Mecanisme de cache HTTP : le serveur renvoie un ETag (hash du contenu), le client le renvoie dans If-None-Match. Si inchange, 304 Not Modified.

Un numero de version sur un document : si tu as deja la derniere version, pas besoin de retelecharger.

// Reponse serveur
res.setHeader('ETag', '"abc123"');
// Requete client suivante
// If-None-Match: "abc123"
// Serveur: 304 Not Modified (pas de body)

Cas d'usage : Reduire la bande passante et la charge serveur pour les ressources rarement modifiees.

Developpeur chinois-americain, createur de Vue.js et Vite. Vue.js est le 3e framework front-end le plus populaire. Vite a revolutionne le tooling front-end avec un bundler ultra-rapide.

L'artisan independant qui a construit un framework rival de ceux de Facebook et Google — seul au depart.

<!-- Vue.js — Evan You, 2014 -->
<template>
  <h1>Hello, {{ name }}!</h1>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('World')
</script>

Cas d'usage : Vue.js est tres adopte en France et en Asie. Vite est devenu le build tool par defaut de nombreux frameworks.

Deux phases de propagation des evenements DOM. Capturing descend du document vers la cible, bubbling remonte de la cible vers le document. Par defaut, les listeners ecoutent en phase bubbling.

Capturing = le facteur descend l'escalier pour trouver la bonne porte. Bubbling = la nouvelle remonte de voisin en voisin jusqu'au concierge.

// Bubbling (defaut)
el.addEventListener('click', handler);
// Capturing
el.addEventListener('click', handler, true);
// Ou avec options
el.addEventListener('click', handler, {
  capture: true
});

Cas d'usage : Intercepter des evenements avant qu'ils n'atteignent leur cible (capture), ou deleguer apres (bubbling).

Canal central de communication par evenements au sein d'une application. Les composants publient et s'abonnent sans se connaitre mutuellement.

Le tableau d'affichage d'une entreprise : n'importe qui peut y poster une annonce, n'importe qui peut la lire.

class EventBus {
  #handlers = {};
  on(event, fn) { (this.#handlers[event] ??= []).push(fn); }
  emit(event, data) { this.#handlers[event]?.forEach(fn => fn(data)); }
}

Cas d'usage : Communication entre modules d'un monolithe modulaire ou composants UI decouples.

Attacher un seul event listener sur un parent au lieu d'un sur chaque enfant. Exploite le bubbling pour capturer les evenements des descendants via event.target.

Un standardiste unique qui recoit tous les appels de l'immeuble et les redirige vers le bon bureau.

document.getElementById('list')
  .addEventListener('click', (e) => {
    if (e.target.matches('li.item')) {
      handleClick(e.target.dataset.id);
    }
  });