1 WEB FOUNDATIONS

Git Internals: Mastering the Time Machine

๐ŸŒณ Git Internals: How Version Control Actually Works

๐ŸŽฏ Lesson Objectives

By the end of this lesson, learners will be able to:

  • Explain the difference between Git (local tool) and GitHub (cloud backup).
  • Understand the Three Trees architecture (Working Directory, Staging, Repository).
  • Master the fundamental lifecycle of a commit using various command flags.
  • Handle common development scenarios like fixing typos or selective staging.

๐Ÿ—๏ธ The Three Trees (Git Architecture)

Git doesn't just save files; it manages them through three distinct "trees" or areas:

  1. Working Directory: Your actual project folder. Changes here are "Untracked" or "Modified".
  2. Staging Area (The Index): A loading zone for your next snapshot.
  3. Local Repository (.git): The permanent database of completed snapshots (commits).

๐Ÿ”‘ Deep Dive: Essential Commands & Scenarios

1๏ธโƒฃ git add โ€” The Staging Master

Using git add isn't always about "adding everything." Selective staging makes you a cleaner developer.

  • git add <file>: Stage a specific file. Best for keeping commits focused.
  • git add .: Stage everything in your current directory and subdirectories.
  • git add -A: Stage every change in the entire repository, including file deletions.
  • git add -p: Patch Mode. Git will show you small chunks (hunks) of your code and ask if you want to stage them. Perfect for splitting one day's work into three clean commits.

2๏ธโƒฃ git commit โ€” Sealing the Snapshot

  • git commit -m "message": The standard way to save staged changes.
  • git commit -am "message": Stages all tracked modified files and commits them in one step. (Note: This will not include new, untracked files).
  • git commit --amend: The Oops Fixer. If you just committed but realized you made a typo or forgot to add a file, use this. It re-opens the last commit so you can add more or change the message.

3๏ธโƒฃ git log โ€” Reading History

  • git log --oneline: A condensed view showing only the ID and message.
  • git log --graph --all --oneline: Shows the "family tree" of branches, even those you aren't currently on.

4๏ธโƒฃ git status โ€” The Health Check

  • git status: The full, detailed bridge. Recommended for beginners.
  • git status -s: Short mode. Shows a concise list (e.g., M for modified, ?? for untracked).

๐Ÿ› ๏ธ Real-World Scenarios

Scenario: "I made a typo in my last commit message!"

Fix: Type git commit --amend -m "The correct message". Git replaces the old, broken commit with a new, fixed one.

Scenario: "I have 500 lines of changes, but I only want to commit the login fix."

Fix: Don't use git add .. Instead, use git add src/auth/login.js or git add -p to interactively pick only the relevant lines.


๐Ÿงช Practice Exercise

# 1. Setup
mkdir scenario-practice && cd scenario-practice
git init

# 2. Selective Staging
touch file1.txt file2.txt
git add file1.txt
git status -s   # Notice file1 is Green (staged), file2 is Red (untracked)

# 3. The Amend Trick
git commit -m "initial commit"
echo "oops" >> file1.txt
git add .
git commit -m "aditinal changes" # Typo intentional!
git commit --amend -m "additional changes"

# 4. Short Status
touch feature.js
git status -s

๐Ÿ–ผ๏ธ Terminal Example

Git workflow


๐ŸŽฅ Lesson Video

<video controls width="100%"> <source src="/videos/lesson-4-git-internals.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

๐Ÿ“ Project Task: Command Mastery

Perform these steps using your terminal:

  1. Initialize a repo and create web.css and app.js.
  2. Use selective staging to only commit web.css first.
  3. Commit app.js with a messy message like fixed bug.
  4. Use git commit --amend to change that message to feat: implement main application logic.
  5. Create a new file temp.log, then use git status -s to see the short-hand status.
  6. Show your commit history using git log --oneline --graph.

Knowledge Check

Complete this quick quiz to verify your understanding and unlock the next module.