DEV Community

Cover image for Git The Game Changer
Satpalsinh Rana
Satpalsinh Rana

Posted on • Edited on • Originally published at satpalsinhrana.hashnode.dev

Git The Game Changer

#github #git

The Tale of the Overwritten Code

Once upon a time, there were two frontend developers, Jon and Arya, working on the launch website for "Winterfell Watch."

Jon was responsible for styling the new "Hero Section" (the big banner at the top). Arya was responsible for the "Contact Form" at the bottom.

It was Friday night, and the Martin wanted the site live by morning.

The Handoff Jon finished the Hero Section. It looked majestic with a new bold font. He felt good. He compressed the folder and named it: 📁 Winterfell_final.zip

He emailed it to Arya so she could add her work.

The Fix Arya downloaded Jon's zip file. She started working on her part. She noticed the Contact Form submit button was broken (🐛). She wrote the JavaScript to fix it. While she was there, she also adjusted the padding on the footer.

She saved her work, zipped the whole project, and named it: 📁 Winterfell_Arya_Fixed.zip

She emailed it back to Jon and went to grab a coffee.

The Disaster Strikes Jon received the email, but before he opened it, he noticed a typo in his Hero Section headline.

“I’ll just fix this quickly on my local copy before I merge Arya’s stuff,” he thought.

He opened the folder on his desktop (his version, before Arya’s fix). He fixed the typo. Then, thinking he was being efficient, he simply dragged Arya's folder into his, clicked "Replace All" to get her files, and then... he hesitated.

He realized his styles.css was newer than hers because he just fixed the typo. So he chose "Keep My File" for the stylesheet.

He zipped the result as: 📁 Winterfell_Launch.zip

The Result They deployed the site.

The Good: Jon’s typo was fixed.

The Bad: Because Jon kept his version of the stylesheet, Arya’s footer padding changes were deleted.

The Ugly: Because of the messy copy-paste, the JavaScript file linking broke. The Contact Form didn't work at all.

The Backup Nightmare Jon looked at his desktop. It was a graveyard of zip files.

He had no idea which folder contained the working Contact Form code. He had overwritten Arya's bug fix with his typo fix.

The Realization Arya stared at the broken form and sighed. "Jon, we are professional developers. We shouldn't be emailing zip files like it's 300 AC. We need a way to merge my footer and your header without erasing each other."

The Single Source of Truth

After the "Launch Ready" disaster, Jon and Arya realized the root of their problem wasn't bad luck it was bad architecture.

They had been operating with Two Sources of Truth: Jon’s laptop (which believed the Hero Section was most important) and Arya’s laptop (which believed the Contact Form fix was most important).

Here comes our savior 🧑‍💻 “The mindful engineers of the world“ who introduced the version control system.

Local Version Control

  • Concept: Engineers created a local database on their computer that stored changes to files.

  • Problem: If Jon wanted to share code with Arya, he still had to email it. It solved the "Undo" problem, but not the "Collaboration" problem.

Centralized Version Control

  • Concept: It contains a single server which stores the changes to files.

  • Problem: Single point of failure. If Night king attacks the server it will go down. If the central server goes down, nobody can commit or collaborate because the server is the single point of truth.

Distributed Version Control

  • Concepts: The code lived everywhere, safely duplicated across the Server and every Local machine.

  • Example: Git, Mercurial, Fossil, and Bazaar

GIT - Time Machine for our code

Back to our story.

Initialize Repository

git init
Enter fullscreen mode Exit fullscreen mode

Jon casts a spell on his project folder, transforming it from a normal directory into a repository watched by the Time Machine (GIT).

Selection 

git add index.html
Enter fullscreen mode Exit fullscreen mode

Jon tells Git to include “index.html” in his next save point.

Then he created a large number of files and wanted all untracked files to be included in the next save point.

git add .
Enter fullscreen mode Exit fullscreen mode

Save Point 

git commit -m "First Commit by Jon"
Enter fullscreen mode Exit fullscreen mode

Jon created a checkpoint.

History

git log
Enter fullscreen mode Exit fullscreen mode

Jon can now see the history of the code changes.

Sharing 

git push
Enter fullscreen mode Exit fullscreen mode

Jon pushes all his save points to the “The Remote Kingdoms” in night. So, Arya will get an update.

Copy 

git clone <url>
Enter fullscreen mode Exit fullscreen mode

Sansa joins the team. She needs a perfect clone of the repository on her device.

Update 

git pull
Enter fullscreen mode Exit fullscreen mode

As Jon pushed all his changes at night in the “The Remote Kingdoms”. In the morning, Arya wants the latest code, so she types pull and get all the save points from the “The Remote Kingdoms”.

Parallel Verse 

git branch dark-mode
Enter fullscreen mode Exit fullscreen mode

Sansa wants to work on dark mode. So, she create a branch and checkout to the dark-mode branch and started her work on it.

git checkout dark-mode
Enter fullscreen mode Exit fullscreen mode

Combination

Sansa completed her development and want to merge the Dark Mode back to the main branch.

So she teleport back to main branch and spell below merge command.

git checkout main
git merge dark-mode
Enter fullscreen mode Exit fullscreen mode

Correction

Sansa realizes that there is commit which contains a bug 🐛 in the “Dark Mode” development which was merged.

But she can’t time travel back (reset) because Arya already downloaded (pulled) the code in her local. So, she decided to revert particular commit.

  git revert <commit-id>
Enter fullscreen mode Exit fullscreen mode

Time Travel (Handle it carefully)

Jon want to travel back to some a save point (e.g. a1b2c3). He uses the below spell to forcefully rewind time back to that exact moment (a1b2c3). Everything after that moment is erased. Using reset --hard after sharing code (push) is dangerous because it rewrites history and can break everyone’s repo.

git reset --hard <commit-id>
Enter fullscreen mode Exit fullscreen mode

The Remote Kingdoms

Once Jon, Sansa and Arya learned to push their code to the cloud, Robb revealed a secret of remote kingdoms and their kings:

GitHub (The Kingdom of Open Source)

The largest kingdom in the realm. Developers across the Seven Kingdoms gather here, creating alliances through Pull Requests and winning glory with Stars.

GitLab (The Fortress of DevOps)

A more disciplined kingdom. Known for pipelines, CI/CD dragons, and strict military formations.

Bitbucket (The House of Private Repositories)

A quieter, more introverted kingdom. Mostly favored by the Houses of Atlassian and Jira Knights.

Deep Dive

Once Jon asks Robb, “Where does this Time Machine GIT actually live? Is it magic?"

Robb opened a project folder and enabled “Show hidden files”. There, sitting quietly at the top, was a folder named 📁 .git .

Let’s open this folder and see how the engine works.

HEAD (You are here)

Open file in notepad, it contains something like: ref: refs/heads/master. It tells Git where you currently are. When Jon teleports using git checkout dark-mode, Git updates this file to point to the dark-mode branch and now it would contains ref: refs/heads/dark-mode.

objects/ (The Database)

It’s the storage space for Git. It stores blobs, trees, and commits, each named after their SHA-1 hash.

So, when Sansa takes a snapshot git commit then git compress, calculates their unique ID, and throws them into this bucket.

If you want to read file use below command:

git cat-file -p <object-id>
# cat-file: "Show me the file."
# -p: "Pretty-print it" (Make it human-readable).
Enter fullscreen mode Exit fullscreen mode

Content:

tree 8d3a1...
parent 1f4e2...
author Jon Snow <jon.dev@winterfell.com> 1703865000 +0000

Created the homepage hero section
Enter fullscreen mode Exit fullscreen mode

refs/ (Bookmarks)

This folder stores your Branches and Tags.

When Sansa created a branch named dark-mode, Git simply creates a new file in this folder named dark-mode and writes the current Commit ID inside it.

config (Project Settings)

This is where your local settings for your project live.

index (Staging Area)

When Jon types git add, Git updates this index file to build the list of what will be in the next save point.

Moral of the Story

And so, with Git guarding their code like a sworn member of the Night’s Watch, Jon, Arya, and Sansa finally worked together without accidentally destroying each other’s changes.

They no longer feared overwritten files, broken features, or mysterious zip-file dragons lurking on their desktops.

Every change had a history.

Every branch had a purpose.

Every mistake had a safe way back.

Great teams don’t just write good code, they protect it with good practices.

And Git is the shield that keeps chaos beyond the Wall.

Top comments (1)

Collapse
 
karan_patel profile image
Karan Patel •

What an awesome way to teach Git! The Game of Thrones analogy is brilliant seriously fun and memorable. Keep it up!