96 termes

Glossaire Vibe Coding

Quatre-vingt-seize termes, une fiche chacun. De l'idée au lancement : une ligne d'explication et un exemple pour chacun.

Parcourir par thème

À essayer tout de suite

05Design et expérience

Prototype

Réalisez d'abord une maquette cliquable de l'interface pour sentir l'usage.

Par exemple

Faites quelques écrans dans Figma et parcourez le flux en cliquant.

Figma

18Code et versions

Branch

Branche

Ouvrez une ligne parallèle depuis le code principal pour développer sans toucher à la version principale.

Par exemple

J'ai créé une branche feature pour construire la connexion.

Learn Git Branching

35Frontend et web

Browser DevTools

DevTools du navigateur

Le débogueur intégré au navigateur pour inspecter structure, styles et erreurs.

Par exemple

Quand la page ne s'affichait pas, j'ai ouvert les DevTools pour lire l'erreur.

Chrome DevTools

41IA et prompting

RAG

Faites d'abord chercher à l'IA des documents pertinents, puis répondez à partir d'eux : moins d'hallucinations, plus de précision.

Par exemple

Mon app utilise le RAG pour récupérer des données de dictionnaire, puis l'IA rédige l'explication.

43Mise en ligne et sécurité

CI / CD

Teste, construit et déploie automatiquement après chaque commit, sans étape manuelle.

Par exemple

J'ai configuré la CI/CD dans GitHub Actions : chaque push se déploie seul.

47Déboguer et tester

Log

Les informations qu'un programme enregistre seul pendant son exécution, utiles pour tracer les problèmes.

Par exemple

J'ai lu le log d'exécution et trouvé pourquoi l'appel API échouait.

50Idées et planification

Wireframe

Un croquis de la page montrant la mise en page et la place des éléments, sans couleur ni détail visuel.

Par exemple

J'ai d'abord dessiné un wireframe pour fixer la place du bouton et du texte.

Excalidraw

67Backend et données

Cache

Conserver temporairement les données les plus utilisées pour que le système réponde plus vite.

Par exemple

Je garde les résultats des mots populaires en cache pour qu'ils s'affichent plus vite.

68IA et prompting

Vector Database

Base vectorielle

Une base conçue pour stocker et retrouver des vecteurs, courante en IA comme la recherche sémantique.

Par exemple

Je stocke le vecteur de chaque mot dans une base vectorielle pour la recherche sémantique.

Cloudflare Vectorize

75Réseau et protocoles

Status Code

Code de statut

Le nombre à trois chiffres renvoyé par le serveur, indiquant si la requête a réussi.

Par exemple

200 signifie que la requête a réussi ; un 404 indique probablement une URL erronée.

MDN Status Codes

84Déboguer et tester

Test Coverage

Couverture de tests

La part du code atteinte par les tests ; elle mesure si tester est assez complet.

Par exemple

La couverture de mon projet est de 80 %, donc l'essentiel du code est testé.

Vitest

88Mise en ligne et sécurité

Monitoring

Supervision

Observer après la mise en ligne l'état de l'app et les indicateurs clés (taux d'erreur, temps de réponse) pour détecter les anomalies.

Par exemple

J'ai mis en place une supervision, vu le taux d'erreurs grimper la nuit et enquêté.

Workers Observability

97Idées et planification

User Feedback

Retour utilisateur

Les avis, suggestions et problèmes remontés par les utilisateurs ; une base essentielle pour progresser.

Par exemple

Un utilisateur a dit que la prononciation était peu claire, j'ai donc amélioré l'audio.

Publier une page

Voir tous les termes

01Idées et planification

Idea

Idée

Ce que vous voulez construire, et quel problème cela résout.

Par exemple

Une app qui aide à découvrir l'histoire derrière les mots anglais.

02Idées et planification

MVP

Produit minimum viable

Construisez d'abord la plus petite version qui fonctionne vraiment, pour valider l'idée.

Par exemple

La première version fait seulement : quelques mots et leur étymologie.

03Idées et planification

PRD

Document de besoins

Écrivez globalement ce que fait le produit, pour qui et pourquoi.

Par exemple

Voici la fiche produit complète.

Markdown vers HTML

04Idées et planification

Spec

Spécification

Détaillez exactement comment une fonctionnalité doit se comporter.

Par exemple

Le bouton d'enregistrement est en haut à droite, devient plein au clic, et la donnée est stockée en base.

05Design et expérience

Prototype

Réalisez d'abord une maquette cliquable de l'interface pour sentir l'usage.

Par exemple

Faites quelques écrans dans Figma et parcourez le flux en cliquant.

Figma

06IA et prompting

Prompt

L'instruction que vous donnez à l'IA ; elle détermine la qualité du résultat.

Par exemple

Crée-moi un composant carte de mot en React avec le mot, la prononciation et un bouton d'enregistrement.

07IA et prompting

Context

Contexte

Les informations utiles dont l'IA a besoin pour accomplir la tâche.

Par exemple

Objectif produit + code actuel + document de besoins : tout cela est du contexte.

08Code et versions

GitHub

Synchronisez votre dépôt local dans le cloud ; c'est aussi le portfolio du développeur.

Par exemple

Poussez le code sur GitHub pour la sauvegarde et pour continuer sur une autre machine.

Learn Git Branching

09Mise en ligne et sécurité

Deploy

Déploiement

Publiez l'app terminée sur un serveur pour que d'autres puissent y accéder.

Par exemple

Après le déploiement, votre app a une URL que le monde entier peut visiter.

Hébergement en 1 clic

10Environnement de développement

Code Editor

Éditeur de code

L'outil où vous écrivez et modifiez le code, comme Word pour les documents.

Par exemple

J'écris du code dans Cursor : c'est mon éditeur de code.

Cursor

11Environnement de développement

Terminal

Contrôlez l'ordinateur directement par des commandes texte, sans souris.

Par exemple

Je tape des commandes dans le terminal pour installer des dépendances.

ExplainShell

12Environnement de développement

Shell

Le programme qui reçoit vos commandes et les exécute réellement.

Par exemple

J'utilise zsh — c'est un type de shell.

Oh My Zsh

13Environnement de développement

Package Manager

Gestionnaire de paquets

Télécharge, installe et gère les outils et bibliothèques externes dont un projet a besoin.

Par exemple

J'utilise npm install pour ajouter une nouvelle bibliothèque.

npm

14Code et versions

Repository

Dépôt

L'ensemble de tout le code, de l'historique et de la configuration d'un projet.

Par exemple

Mon projet Bunny est un dépôt GitHub.

15Code et versions

Commit

Prenez une photo de cette modification du code et laissez une trace permanente.

Par exemple

Quand je termine une fonctionnalité je fais un commit, pour pouvoir y revenir.

Learn Git Branching

16Code et versions

Push

Envoyez vos commits locaux vers un dépôt distant comme GitHub.

Par exemple

J'utilise git push pour synchroniser le code avec GitHub.

17Code et versions

Pull

Téléchargez sur votre machine le dernier contenu du dépôt distant.

Par exemple

En équipe, je fais d'abord git pull pour récupérer les dernières modifications.

18Code et versions

Branch

Branche

Ouvrez une ligne parallèle depuis le code principal pour développer sans toucher à la version principale.

Par exemple

J'ai créé une branche feature pour construire la connexion.

Learn Git Branching

19Frontend et web

Frontend

Ce que l'utilisateur voit et manipule : boutons, pages, animations.

Par exemple

La page d'accueil, les boutons et les cartes que je vois sont faits côté frontend.

20Backend et données

Backend

Ce que l'utilisateur ne voit pas : la gestion des données et la logique métier en coulisses.

Par exemple

Quand je me connecte, le backend vérifie mon compte et mon mot de passe.

21Backend et données

Database

Base de données

Là où les données sont conservées durablement : utilisateurs, éléments enregistrés, etc.

Par exemple

Les mots enregistrés sont en base et y sont encore la fois suivante.

22Backend et données

API

La fenêtre par laquelle deux logiciels se passent commande.

Par exemple

Mon app envoie un mot à l'IA via une API et reçoit l'explication.

MDN HTTP

23Backend et données

API Key

Clé d'API

Le secret qui prouve votre identité quand vous appelez l'API d'un autre. Ne le publiez jamais.

Par exemple

Je garde la clé d'API OpenAI dans un fichier .env.

24Code et versions

Framework

Un échafaudage déjà construit par d'autres pour livrer plus vite.

Par exemple

J'utilise Next.js comme framework pour ce projet.

25Environnement de développement

Dependency

Dépendance

Un outil ou une bibliothèque externe que votre projet doit emprunter pour fonctionner.

Par exemple

Ce projet a besoin d'installer quelques dépendances pour fonctionner.

26Environnement de développement

Environment

Environnement

L'ensemble système, outils et variables dont un programme a besoin pour s'exécuter.

Par exemple

J'exécute le code dans mon environnement de développement local, différent de la production.

27Environnement de développement

Runtime

La plateforme où le code s'exécute réellement, comme Node.js ou Python.

Par exemple

Mon projet tourne sur le runtime Node.js.

Node.js

28Frontend et web

HTML

Définit le contenu d'une page : le squelette de la page.

Par exemple

J'ai écrit un titre et un bouton dans la page avec HTML.

Ouvrir le playground MDN HTML

29Frontend et web

CSS

Contrôle le style de la page : couleur, typographie, espacements et mise en page.

Par exemple

Avec CSS j'ai mis le bouton en vert et arrondi ses coins.

MDN CSS Ouvrir le playground

30Frontend et web

JavaScript

Fait vivre la page : clics, saisie, données et autres logiques d'interaction.

Par exemple

Avec JavaScript, le mot apparaît au clic sur le bouton.

MDN JavaScript

31Frontend et web

React

Un framework frontend populaire qui construit les interfaces à partir de composants.

Par exemple

Avec React j'ai transformé la carte de mot en composant réutilisable.

react.dev

32Frontend et web

Component

Composant

Un bloc d'interface réutilisable et autonome : bouton, carte, barre de navigation.

Par exemple

J'ai créé un composant carte de mot utilisable sur n'importe quelle page.

33Frontend et web

State

État

Les données que l'interface détient à l'instant ; quand elles changent, la page se met à jour seule.

Par exemple

Après le clic sur enregistrer, l'état passe à true et l'icône devient pleine.

34Frontend et web

DOM

L'arbre dans lequel le navigateur transforme le HTML, et que JavaScript utilise pour modifier la page.

Par exemple

J'ai modifié le texte de la page via le DOM avec JavaScript.

MDN DOM

35Frontend et web

Browser DevTools

DevTools du navigateur

Le débogueur intégré au navigateur pour inspecter structure, styles et erreurs.

Par exemple

Quand la page ne s'affichait pas, j'ai ouvert les DevTools pour lire l'erreur.

Chrome DevTools

36Design et expérience

Responsive

Fait qu'une page s'affiche correctement sur mobile, tablette et ordinateur.

Par exemple

J'ai mis en place une mise en page responsive et la page reste belle sur mobile.

web.dev

37Mise en ligne et sécurité

Hosting

Hébergement

Faire tourner votre site ou app sur le serveur cloud d'un autre pour que le monde y accède.

Par exemple

J'ai déployé l'app sur Vercel pour que d'autres puissent la visiter.

Hébergement en 1 clic

38Mise en ligne et sécurité

Domain

Domaine

L'adresse nommée du site, pour que l'utilisateur y accède par un nom mémorisable.

Par exemple

J'ai acheté le domaine www.mydapp.com.

Cloudflare Registrar

39Mise en ligne et sécurité

HTTPS / SSL

Chiffre le trafic entre le site et l'utilisateur ; le navigateur affiche un cadenas signalant une connexion sûre.

Par exemple

Après le déploiement j'ai configuré HTTPS, il y a donc un cadenas dans la barre d'adresse.

Let's Encrypt

40Backend et données

NoSQL

Une base sans structure de tables fixe : plus souple, adaptée aux données complexes ou changeantes.

Par exemple

Je stocke les historiques d'étude dans MongoDB, sans tables complexes.

MongoDB

41IA et prompting

RAG

Faites d'abord chercher à l'IA des documents pertinents, puis répondez à partir d'eux : moins d'hallucinations, plus de précision.

Par exemple

Mon app utilise le RAG pour récupérer des données de dictionnaire, puis l'IA rédige l'explication.

42Environnement de développement

Docker

Empaquette une app avec l'environnement dont elle a besoin pour tourner à l'identique partout.

Par exemple

J'empaquette le projet avec Docker : une seule commande sur un nouveau serveur.

Docker docs

43Mise en ligne et sécurité

CI / CD

Teste, construit et déploie automatiquement après chaque commit, sans étape manuelle.

Par exemple

J'ai configuré la CI/CD dans GitHub Actions : chaque push se déploie seul.

44Mise en ligne et sécurité

Serverless

Aucun serveur à gérer : le code tourne à la demande et vous payez à l'usage.

Par exemple

J'utilise les fonctions serverless de Vercel pour la logique backend.

Cloudflare Workers

45Déboguer et tester

Bug

Une erreur ou un problème dans un programme qui le fait se comporter de façon inattendue.

Par exemple

La page plante après le clic sur enregistrer : c'est un bug.

46Déboguer et tester

Debug

Déboguer

Trouver la cause d'un problème et le corriger.

Par exemple

J'ai débogué pas à pas depuis l'erreur et vu une faute dans un nom de variable.

47Déboguer et tester

Log

Les informations qu'un programme enregistre seul pendant son exécution, utiles pour tracer les problèmes.

Par exemple

J'ai lu le log d'exécution et trouvé pourquoi l'appel API échouait.

48Déboguer et tester

Test

Vérifier si un programme se comporte comme il devrait.

Par exemple

Après la connexion, j'ai testé le cas normal, le mauvais mot de passe et d'autres.

49Idées et planification

User Flow

Parcours utilisateur

Les étapes et le chemin qu'un utilisateur suit pour atteindre un objectif.

Par exemple

Ouvrir l'app → voir le mot du jour → le toucher → enregistrer. Voilà un parcours utilisateur.

50Idées et planification

Wireframe

Un croquis de la page montrant la mise en page et la place des éléments, sans couleur ni détail visuel.

Par exemple

J'ai d'abord dessiné un wireframe pour fixer la place du bouton et du texte.

Excalidraw

51Design et expérience

UI

La présentation visuelle du produit : couleur, typographie, icônes, boutons.

Par exemple

J'ai conçu l'UI de l'app dans Figma pour la rendre plus épurée.

52Design et expérience

UX

Le ressenti global d'usage du produit : utilisable, fluide, agréable.

Par exemple

Nous avons simplifié les étapes pour trouver plus vite les mots enregistrés : meilleure UX.

53Code et versions

Algorithm

Algorithme

Un ensemble clair d'étapes pour résoudre un problème, afin que l'ordinateur traite les données et obtienne un résultat.

Par exemple

Les réseaux sociaux utilisent un algorithme pour décider ce que vous voyez dans votre fil.

54Identité et sécurité

Phishing

Hameçonnage

Se faire passer pour une organisation de confiance afin de vous faire livrer mots de passe ou numéros de carte.

Par exemple

J'ai reçu un e-mail prétendant venir de ma banque et demandant de cliquer : probable hameçonnage.

Google Phishing Quiz

55Mise en ligne et sécurité

Cloud

Des ressources informatiques (stockage, logiciels, serveurs) fournies par internet plutôt que par votre machine.

Par exemple

Je garde mes fichiers dans le cloud pour y accéder partout.

Cloudflare

56Code et versions

Git

Un outil qui suit les modifications du code et permet le travail en équipe.

Par exemple

J'utilise Git pour garder différentes versions du code et travailler en équipe.

Learn Git Branching

57Idées et planification

Iteration

Itération

Améliorer ce qui existe déjà, par petites mises à jour qui rapprochent d'un meilleur résultat.

Par exemple

Nous itérons selon les retours utilisateurs pour améliorer le produit.

58Idées et planification

Prioritize

Prioriser

Décider quoi faire d'abord et quoi remettre à plus tard, selon l'importance et l'urgence.

Par exemple

Je termine d'abord la tâche la plus importante et je laisse le reste.

59Idées et planification

Stakeholder

Partie prenante

Toute personne intéressée par un projet ou produit : utilisateurs, clients, équipe, direction.

Par exemple

Avant de commencer, il faut comprendre ce que veut chaque partie prenante.

60Idées et planification

Conversion

Quand un utilisateur accomplit l'action attendue (inscription, achat, abonnement) : indicateur clé du produit.

Par exemple

Nous avons amélioré le taux de conversion d'inscription en refaisant la page.

64Backend et données

Schema

Schéma

Définit la structure des données d'une base : quels champs existent et de quel type.

Par exemple

En concevant la base, j'ai d'abord défini le schéma de la table utilisateurs, avec id, name et email.

65Backend et données

Query

Requête

L'opération qui récupère des données dans une base, généralement en SQL ou dans un autre langage de requête.

Par exemple

Je récupère en SQL l'utilisateur dont id = 1.

66Backend et données

ORM

Mappage objet-relationnel

Piloter la base depuis le code de votre langage au lieu d'écrire du SQL à la main.

Par exemple

Je crée les utilisateurs via l'ORM plutôt qu'en écrivant du SQL complexe.

Drizzle ORM

67Backend et données

Cache

Conserver temporairement les données les plus utilisées pour que le système réponde plus vite.

Par exemple

Je garde les résultats des mots populaires en cache pour qu'ils s'affichent plus vite.

68IA et prompting

Vector Database

Base vectorielle

Une base conçue pour stocker et retrouver des vecteurs, courante en IA comme la recherche sémantique.

Par exemple

Je stocke le vecteur de chaque mot dans une base vectorielle pour la recherche sémantique.

Cloudflare Vectorize

69Backend et données

File Storage

Stockage de fichiers

Un service pour stocker images, audio, vidéo et autres fichiers.

Par exemple

J'envoie les audios de prononciation vers le stockage cloud pour que l'app les lise.

70Réseau et protocoles

HTTP

Le protocole de base pour transmettre des données sur internet ; il définit le dialogue client-serveur.

Par exemple

Quand je saisis une URL dans le navigateur, j'envoie une requête au serveur en HTTP.

MDN HTTP

71Réseau et protocoles

Request

Requête

Les données et instructions que le client envoie au serveur, avec URL, méthode et paramètres.

Par exemple

J'envoie une requête au serveur pour obtenir la liste des mots du jour.

MDN HTTP Methods

72Réseau et protocoles

Response

Réponse

Les données et le résultat que le serveur renvoie après avoir reçu une requête.

Par exemple

Le serveur renvoie une réponse JSON contenant le mot et sa définition.

73Réseau et protocoles

Endpoint

L'adresse d'accès d'une fonction précise de l'API ; chaque fonction a généralement son endpoint.

Par exemple

J'appelle l'endpoint /v1/words pour obtenir la liste des mots.

74Réseau et protocoles

HTTP Method

Méthode HTTP

Indique l'opération effectuée par la requête ; les plus courantes sont GET, POST, PUT et DELETE.

Par exemple

J'utilise POST pour envoyer un nouveau mot au serveur.

MDN HTTP Methods

75Réseau et protocoles

Status Code

Code de statut

Le nombre à trois chiffres renvoyé par le serveur, indiquant si la requête a réussi.

Par exemple

200 signifie que la requête a réussi ; un 404 indique probablement une URL erronée.

MDN Status Codes

76Réseau et protocoles

JSON

Un format de données léger et lisible, souvent utilisé entre frontend et backend.

Par exemple

Les données de mots renvoyées par l'API sont généralement en JSON.

MDN JSON

77Réseau et protocoles

Webhook

Quand un événement survient, le serveur envoie des données à une URL que vous avez configurée, sans que vous ayez à interroger.

Par exemple

Après le paiement, le système prévient mon serveur via un webhook.

78Code et versions

SDK

Une boîte à outils déjà préparée qui facilite l'appel des fonctions d'un autre service sans tout écrire.

Par exemple

Avec le SDK d'OpenAI, quelques lignes suffisent pour appeler son API.

79Identité et sécurité

Authentication

Authentification

Confirme qui vous êtes et prouve que vous pouvez accéder à un système ou une ressource.

Par exemple

Après ma connexion, le système confirme mon identité par authentification.

Better Auth

80Identité et sécurité

Authorization

Autorisation

Une fois l'identité confirmée, détermine les ressources et actions auxquelles vous avez droit.

Par exemple

Même connecté, sans autorisation je ne peux pas supprimer les données d'autrui.

81Déboguer et tester

Error

Erreur

Un problème survenu pendant l'exécution qui empêche certaines fonctionnalités de marcher.

Par exemple

J'ai vu un TypeError, donc il y a une erreur de types dans le code.

82Déboguer et tester

Debugging

Débogage

Le processus de localisation, d'analyse et de correction des problèmes pour rétablir le programme.

Par exemple

J'ai remonté l'erreur ligne par ligne et j'ai fini par trouver et corriger le problème.

83Déboguer et tester

Test Case

Cas de test

Un scénario et des étapes précises conçus pour vérifier qu'une fonctionnalité marche.

Par exemple

J'ai écrit un cas de test : un mot de passe erroné doit afficher un message.

84Déboguer et tester

Test Coverage

Couverture de tests

La part du code atteinte par les tests ; elle mesure si tester est assez complet.

Par exemple

La couverture de mon projet est de 80 %, donc l'essentiel du code est testé.

Vitest

85Mise en ligne et sécurité

CI

Après chaque commit, construire et tester automatiquement pour détecter tôt les problèmes.

Par exemple

Après mon push sur GitHub, la CI lance les tests et me répond.

GitHub Actions

86Mise en ligne et sécurité

CD

Une fois les tests passés, déployer automatiquement en production ou en staging pour livrer plus vite.

Par exemple

Quand les tests passent, le CD déploie la dernière version sur Vercel.

87Mise en ligne et sécurité

Production

L'environnement réel utilisé par les utilisateurs, par opposition au développement, et généralement plus stable et sûr.

Par exemple

Après les tests, nous avons déployé l'app en production et ouvert au public.

88Mise en ligne et sécurité

Monitoring

Supervision

Observer après la mise en ligne l'état de l'app et les indicateurs clés (taux d'erreur, temps de réponse) pour détecter les anomalies.

Par exemple

J'ai mis en place une supervision, vu le taux d'erreurs grimper la nuit et enquêté.

Workers Observability

89Mise en ligne et sécurité

Scaling

Mise à l'échelle

Quand le trafic augmente, ajouter des ressources ou améliorer l'architecture pour accroître la capacité.

Par exemple

Avec plus d'utilisateurs nous sommes passés de 1 à 3 serveurs pour rester rapides.

90Idées et planification

Milestone

Jalon

Un point important du projet, qui marque souvent l'achèvement d'un objectif d'étape.

Par exemple

Notre premier jalon est de finir le MVP ; le second, le lancement bêta.

91Idées et planification

Timeline

Calendrier

Le planning prévu du début à la fin du projet, avec les points clés de chaque phase.

Par exemple

Nous prévoyons de finir le MVP en 3 mois : c'est le calendrier du projet.

92Idées et planification

Resource

Ressource

Les personnes, le temps, l'argent et les outils disponibles pour mener le projet à bien.

Par exemple

Je suis seul sur ce projet, il faut donc bien répartir temps et ressources.

93Idées et planification

Collaboration

Plusieurs personnes travaillant ensemble : communiquer, répartir les tâches, partager les fichiers et synchroniser l'avancement.

Par exemple

Je collabore avec un collègue sur ce projet via GitHub.

94Idées et planification

Documentation

Les fichiers qui consignent les informations du projet : notices, guides de développement, docs d'API, etc.

Par exemple

J'ai écrit un README pour que les autres comprennent vite le projet.

Markdown vers HTML

95Code et versions

License

Licence

L'accord légal qui précise comment les autres peuvent utiliser, modifier et distribuer votre code.

Par exemple

J'ai choisi la licence MIT pour que les autres utilisent librement mon projet.

Choose a License

96Code et versions

Open Source

Open source

Du code public que chacun peut voir, utiliser, modifier et auquel contribuer, souvent maintenu par une communauté.

Par exemple

J'ai ouvert le projet sur GitHub, en espérant plus de retours et de contributions.

Open Source Guides

97Idées et planification

User Feedback

Retour utilisateur

Les avis, suggestions et problèmes remontés par les utilisateurs ; une base essentielle pour progresser.

Par exemple

Un utilisateur a dit que la prononciation était peu claire, j'ai donc amélioré l'audio.

Publier une page

98Idées et planification

Analytics

Analytique

Collecter et analyser les données de comportement pour comprendre l'usage du produit et décider.

Par exemple

L'analytique a montré que la majorité est sur mobile, j'ai donc optimisé le mobile en premier.

99Mise en ligne et sécurité

Release

Publication de version

Publier officiellement une version nouvelle ou améliorée pour les utilisateurs.

Par exemple

Les tests sont finis, nous pouvons publier la v1.0.0.