Comment lire les visualisations

Chaque visualisation est pilotée par un simulateur Git dont la sortie est vérifiée avec le vrai Git. Voici ce que signifie chaque partie de la scène — et une scène en direct pour essayer.

Exemple en direct : `git commit`

Appuyez sur ▶ et regardez un fichier voyager de votre disque à la zone de préparation, puis dans un commit. Pour taper vos propres commandes, ouvrez le bac à sable.

0.0s / 66s

commitanneau = le commit où se trouve HEADinaccessible (existe encore)branche = étiquette déplaçableorigin/* = votre marque-page du dépôt distantHEAD = là où vous êtes

1 Vos fichiers — un fichier, trois endroits

Le tableau de gauche suit chaque fichier à travers les trois endroits où Git le conserve. Une étiquette de version (v1, v2…) change quand le contenu change, et une cellule clignote quand une commande la touche.

Répertoire

Le fichier sur votre disque — ce que montre votre éditeur. Les modifications arrivent d’abord ici.

Préparation

Le brouillon de votre prochain commit. git add y copie une version.

HEAD

La version du dernier commit de la branche sur laquelle vous êtes.

Ligne d’état

Sous chaque nom de fichier : unchanged, modified, staged, untracked, conflict… exactement ce que dirait git status.

2 Le graphe des commits

La partie droite dessine votre dépôt. Tout ce qui s’y trouve vient de l’état réel après chaque commande — rien n’est placé à la main.

Cercle

Un commit, avec son hash court et son message. Les hashs sont réels : ils sont calculés à partir du contenu.

Ligne

Va d’un parent vers son enfant. Un commit de fusion a deux parents, donc deux lignes s’y rejoignent.

Étiquette

Une branche n’est qu’une étiquette déplaçable posée sur un commit (main, feature/login…).

HEAD

Là où vous êtes. HEAD se trouve à côté de la branche sur laquelle vous êtes, ou directement sur un commit quand HEAD est détachée.

Étiquette en pointillés

origin/main et consorts : votre dernière copie connue des branches du serveur, mise à jour par fetch, pull et push.

Cercle pâle en pointillés

Un commit inaccessible — plus aucune branche ne pointe dessus, mais il existe encore (le reflog peut le ramener).

Zone ORIGIN

Affichée quand une leçon utilise un dépôt distant : le dépôt du serveur au-dessus du vôtre, pour que push et fetch déplacent visiblement des commits entre eux.

3 Le terminal

Chaque leçon est une liste de commandes Git. Un simulateur Git intégré au site les exécute dans votre navigateur — avant chaque version, sa sortie est vérifiée ligne par ligne avec le vrai Git 2.48.

~/shop — bashgit add -p

$ git add -p app.js

diff --git a/app.js b/app.js index 4f29dbf..1cd9aa2 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,6 @@ const cart = [] function add(item) { - cart.push(item) + if (item) cart.push(item) } function remove(item) { const i = cart.indexOf(item) (1/2) Stage this hunk [y,n,q,a,d,j,J,g,/,e,p,?]?

Invites

Les commandes interactives (add -p, rebase -i) marquent une pause à chaque question pour que vous puissiez la lire avant que la réponse soit tapée.

~/shop — bashgit commit

$ git commit

✎ .git/COMMIT_EDITMSGsaved ✓ — git continues

Add cart feature

# Please enter the commit message for your changes. Lines starting

# with '#' will be ignored, and an empty message aborts the commit.

# On branch main

# Changes to be committed:

# modified: app.js

# Untracked files:

# login.js

Vue éditeur

Quand Git ouvre un éditeur (message de commit, liste de tâches du rebase, message de tag), la scène montre le fichier en cours d’édition.

$try any command… (help)✎ Edit a file

Bloqué ? Commandes probables ensuite

cat index.html

Voir le conflit : votre version est entre <<<<<<< et =======, la leur en dessous

code index.html

Le résoudre dans l’éditeur (garde les deux côtés, retire les marqueurs)

git add index.html

Après la résolution : dit à Git « index.html est réglé »

Bac à sable

Les leçons se regardent seulement. Pour taper vos propres commandes, ouvrez le bac à sable (lien sous chaque visualisation) : le graphe réagit exactement comme dans les leçons, et des suggestions proposent les commandes les plus probables quand vous êtes bloqué.

~/shop — bashgit fetch

# meanwhile… Sam pushes 7f94dc7 “Update README” to origin/main

$ git fetch

remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Compressing objects: 100% (1/1), done. remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0) Unpacking objects: 100% (3/3), 312 bytes | 312.00 KiB/s, done. From github.com:acme/shop 2e039ac..7f94dc7 main -> origin/main

Lignes « collègue »

Une ligne de narration comme « un collègue pousse… » signifie que quelqu’un d’autre a modifié le serveur — c’est la raison pour laquelle un push ou un pull plus tard se comporte ainsi.

4 Un message à la fois

Une étape est découpée en temps. Chaque temps change une seule chose et l’explique dans une légende en bas de la scène ; tout le reste s’estompe.

~/shop — bash① la commande est tapée

$ echo "<p>Sale</p>" >> index.html

La cause d’abord

La commande est tapée avant que rien ne bouge, et les panneaux ne changent que lorsque son effet arrive.

Un nouveau commit 2b4c917 naît — un instantané de tout ce qui est dans la zone de préparation. main avance dessus (HEAD suit — il pointe sur main)

Légende

Ce qui vient de se passer et pourquoi, en une phrase. Le panneau à côté du terminal la reprend avec l’explication de l’étape.

1Observergit log --oneline
2Vous modifiezecho "cart.push(item)" >> app.js
3Nouveau fichierecho "export function login() {}" > login.js
4Demander à Gitgit status
5Préparergit add app.js login.js

Chapitres

La liste numérotée sous l’explication. Cliquez sur une étape pour y aller.

5 Contrôles

Regardez-la comme une vidéo ou avancez pas à pas.

⏮◀▶▶|1× ▾

⏮ ◀ ▶ ▶|

Recommencer, étape précédente, lecture / pause, étape suivante.

⏮◀▶▶|1× ▾

Chronologie

Faites glisser pour aller à n’importe quel moment de la leçon.

⏮◀▶▶|1× ▾

Vitesse

De 0,5× à 2×.

Spacelecture / pause←→étape précédente / suivante

Clavier

Cliquez sur la scène, puis Espace = lecture / pause, ← / → = étape précédente / suivante.

6 Pages de commandes, options et scénarios

Là où vivent les visualisations.

--force-with-leaseGit ≥ 1.8.5Recommandé

▷ Afficher la visualisation

Page de commande

La visualisation principale couvre l’usage courant de la commande. Chaque option a sa propre courte visualisation — ouvrez-la depuis la liste des options.

RecommandéMainstream, safe choiceSi nécessaireUseful in specific casesDéconseilléRisky or superseded

Recommandation

Chaque option porte un badge : Recommandé, Si nécessaire ou Déconseillé, avec une raison en une ligne.

git add --editGit ≥ 1.6.4

Ouvrir le diff dans votre éditeur avant l’indexation. Vous pouvez choisir à la main les modifications à inclure.

$ git add -e app.js

Pourquoi il n’y a pas d’animation

git add -e ouvre tout le diff sous forme de patch dans votre éditeur ; vous supprimez les lignes que vous ne voulez pas indexer et git applique le reste. C’est un fichier modifié à la main, pas un changement d’état du dépôt que la scène peut animer — git add -p en est l’équivalent visuel.

Comment ça marche

Quelques options dépendent d’éléments extérieurs au dépôt (votre éditeur, les permissions des fichiers, les fins de ligne). Elles ont une carte d’explication au lieu d’une animation.

1Démarrer la fonctionnalité

Brancher

$ git switch -c feature/login

Page de connexion

$ echo "export function login() {}" > login.js && git add login.js && git commit -m "Add login page"

La brancher

$ echo "login()" >> app.js && git commit -am "Call login on load"

Scénarios

Des démonstrations réelles jouées comme une histoire continue, découpées en sections titrées sur lesquelles vous pouvez cliquer.

Paramètres

Le bouton en forme d’engrenage dans l’en-tête regroupe les paramètres : langue, site clair ou sombre, thème des visualisations, mode daltonien et taille du texte.

Prêt à apprendre ?

Suivez un workflow complet, ou choisissez une commande.

Scénario de branche de fonctionnalité Parcourir les commandes

Exemple en direct : git commit

1 Vos fichiers — un fichier, trois endroits

Répertoire

Préparation

HEAD

Ligne d’état

2 Le graphe des commits

Cercle

Ligne

Étiquette

HEAD

Étiquette en pointillés

Cercle pâle en pointillés

Zone ORIGIN

3 Le terminal

Invites

Vue éditeur

Bac à sable

Lignes « collègue »

4 Un message à la fois

La cause d’abord

Légende

Chapitres

5 Contrôles

⏮ ◀ ▶ ▶|

Chronologie

Vitesse

Clavier

6 Pages de commandes, options et scénarios

Page de commande

Recommandation

git add --editGit ≥ 1.6.4

Pourquoi il n’y a pas d’animation

Comment ça marche

Scénarios

Paramètres

Prêt à apprendre ?

Exemple en direct : `git commit`