Forem: Garrin Costa, Jr.

What’s Actually Happening When You Use Git

Garrin Costa, Jr. — Mon, 25 May 2026 13:48:05 +0000

I’d been using Git comfortably for months before getting uncomfortable with how little I actually understood.

git add. git commit. git push were memory at this point. But ask me what Git was actually doing under the hood? I couldn’t tell you. I had some (mostly wrong) assumptions but that was about it.

Then I discovered the .git/ directory…

Git Is Not What You Think It Is

Many people think of Git as a “track changes” tool. That’s the way I thought of it. Like the version history in a Google Doc. That’s not wrong, but it’s not the whole picture.

Git’s creator, Linus Torvalds, described it more precisely:

“Git is fundamentally a content-addressable filesystem with a VCS user interface written on top of it.”

So, what is a content-addressable filesystem?

Instead of storing files by name or location, Git stores them by their content. Every piece of data gets run through a hashing algorithm (SHA-1) that produces a unique 40-character fingerprint. That fingerprint is the file’s identity in Git’s database. The same content will always return the same hash, always.

Understanding this immediately explained much of what felt confusing about Git.

The `.git/` Directory Is Your Entire Repository

Open any Git project and run this:

ls .git/

You’ll see something like:

HEAD    config    description    hooks    info    objects    refs

.git/ is a hidden directory created when a Git repository is initialized.
This directory is your entire repository. Every commit, every version of every file, the full history — all of it lives inside .git/. Your working directory (the files you actually edit) is just a projection of what’s in there.

You can copy .git/ somewhere else, and you’ll have everything. On the other hand, if you delete .git/ you lose your entire history. Not just your latest changes. Everything.
It’s hidden for a good reason, but it is hugely helpful to be aware of it.

Two very important directories:

objects/ — Git’s content database. Every blob, tree, and commit lives here.
refs/ — Pointers. Branch names, tags, remotes. All of them are just pointers to commits in objects/.

Three Objects. One Chain.

Git stores everything as one of three object types. Understanding these three types makes everything else click.

Blob — The File

A blob (Binary Large OBject) is an immutable object with a header. It contains the raw file content and nothing more.
It does not store the filename or its location. It has no reference to itself or any other files.
If one character in a file changes, Git creates a brand new blob with a completely different SHA. The old one stays untouched.

Run this on any blob SHA to see for yourself:

git cat-file -p <blob SHA>

You’ll see the raw file content. No filename. No path. Just the content.

Tree — The Snapshot

A tree object represents a directory. It’s a list of entries — each one containing a file mode, object type, SHA, and filename.

This is where filenames live. The tree connects a name to a blob. Run git cat-file -p on a tree SHA and you’ll see something like:

100644 blob b7aec520dec0a7516c18eb4c68b64ae1eb9b5a5e    README.md

Mode, type, SHA, filename. The tree is the snapshot of your project at a given moment.

Commit — The Pointer

A commit object is simpler than most people expect. Run git cat-file -p on a commit SHA:

tree 7102e6ffc1a508e552d53f28bbeb0a976124d7e6
parent d48a0fbe5c378c69ad9522883d1d2f8dbe5ebd69
author Gmcjr <gmcostajr@gmail.com> 1779654747 -0500
committer Gmcjr <gmcostajr@gmail.com> 1779654747 -0500

second commit

That’s it. A commit is:

A pointer to a tree (the snapshot)
A pointer to its parent commit (the history)
Metadata that includes the author (who made changes/wrote the code) and committer (who made the commit), as well as when the commit was made, and the commit message.

The chain is always:

commit → tree → blob(s)

There’s actually a fourth object type — the annotated tag. I won’t go into detail here, but the annotated tag wraps a commit with its own metadata and SHA, and is often used for marking official releases.

The History Is a Graph, Not a Line

The chain — commit → tree → blob — implies something linear. It isn’t.

Every commit points to its parent. Most commits have one. Merge commits have two. Over time, those parent-child relationships form a DAG: a Directed Acyclic Graph.

Directed means the edges go one way — a commit points to its parent, never the reverse. Acyclic means no loops — you can’t follow the chain and end up back where you started. Graph means the structure branches and rejoins freely.

This is why git log can look like a tree but isn’t one. Trees don’t rejoin. A DAG can. Every time you merge two branches, the merge commit has two parent pointers — two incoming edges — and the graph folds back on itself.

Understanding that Git’s history is a DAG explains a lot: why git log --graph draws forks and merges the way it does, why reachability matters (an object is “live” if you can reach it by following edges from a named ref), and why Git’s garbage collector targets objects with no incoming path from any branch or tag.

The Stuff That Trips People Up

A Branch Is a Text File

Run this:

cat .git/refs/heads/main

You’ll get a single SHA. That’s your main branch. A 41-character text file. That’s the entire concept of a branch in Git — a file containing the SHA of the commit it currently points to.

Creating a branch creates a file. Switching branches changes which file HEAD points to. Deleting a branch deletes the file.

Which brings us to something important.

Deleting a Branch Doesn’t Delete Your Commits

When you delete a branch, you delete the pointer. You do not delete the objects in .git/objects/. The commits, trees, and blobs that branch pointed to are still in the database. They’re just unreachable by name.

You can prove it. Delete a branch, then run git cat-file -p on a commit SHA that was on it. It’s still there.

Git’s garbage collector (git gc) will eventually clean up truly unreachable objects — but not for at least two weeks by default. Which means if you accidentally delete a branch, git reflog can save you.

Staging Already Writes to the Database

Most people think git add just “queues” a file for the next commit. It does more than that.

When you run git add, Git immediately:

Hashes your file content
Creates a blob object
Writes it to .git/objects/
Updates the index (staging area) to track it

The blob is already stored before you ever run git commit. The commit just formalizes it — creating the tree and commit objects that make the blob part of your permanent history.

`git reset` Moves a Pointer. It Doesn’t Delete Data.

git reset --hard <SHA> feels destructive. It’s not — at least not immediately.

What it actually does: moves the branch pointer back to the specified commit. The commits you “reset away” are still in .git/objects/. They’re just unreachable from your current branch.

Run git reflog after a reset and you’ll see every place HEAD has pointed. Your “lost” commits are listed there, recoverable by SHA.

git revert works differently. Instead of moving a pointer, it creates a brand new commit that applies the inverse of a previous commit’s changes. History is preserved. This is why git revert is safe on shared branches and git reset is not — reset rewrites history, revert adds to it.

Merge Commits Have Two Parents

When you merge two branches and there’s a conflict, Git compares three blobs: the common ancestor, your version, and their version. This is called a three-way merge.

If the same lines changed on both sides, Git writes conflict markers to your working directory and waits for you to resolve them. Once you do, git add creates a new blob. Then git commit creates a merge commit — the only commit type with two parent pointers, one for each branch tip.

That two-parent structure is exactly what the DAG looks like in the object database.

Why This Mental Model Matters

You don’t need to know this stuff to use Git day-to-day. But once you do, a few things happen:

Detached HEAD stops being scary. It just means HEAD is pointing directly at a commit SHA instead of a branch name.
Merge conflicts make sense. Two commits changed the same lines. Git can’t pick — it’s asking you to resolve a pointer conflict.
“Lost” commits stop feeling lost. The objects are almost always still there. git reflog is your safety net.
You stop being afraid of git reset, git rebase, and other commands that feel dangerous.
git log --graph stops being decorative. It’s a literal rendering of the DAG — every fork is a branch tip, every convergence is a merge commit.

Git isn’t magic. It’s a content-addressable filesystem with a great interface. A few text files, a database of hashed objects, and a set of rules for how they point to each other.

Open .git/ and look around. It’s less mysterious than you think.

Further reading:

What is jQuery Really? A Look Under the Hood

Garrin Costa, Jr. — Sat, 25 Apr 2026 18:25:40 +0000

What is jQuery Really?

jQuery can drastically simplify working with HTML, CSS, and JavaScript. Taking a little time to understand how a tool works — the mechanism that drives it — is often the difference between having access to a tool and having command over it.

To better understand what jQuery is doing under the hood, it is helpful to understand a little bit about the DOM. The DOM (Document Object Model) is a programming interface, built by browsers, which represents the structure of a web document in memory. It is created when a webpage is loaded, representing the document with a tree-like structure. The DOM can be thought of like a bridge or a hub, allowing a webpage's content, styling, and interactivity to be accessed and manipulated dynamically.

A look under the hood — engine components exposed, illustrating the mechanism beneath the surface.

The DOM Problem jQuery Solves

The DOM exposes a set of built-in browser APIs for accessing and manipulating elements. These APIs offer a world of capabilities and give us precise control, but they are verbose and low-level by design, requiring a lot of explicit instruction for even simple operations.

jQuery wraps those verbose native APIs in shorter, more readable methods. We write the jQuery shorthand — jQuery handles the verbose part under the hood.

The example below demonstrates a simple DOM interaction. We're going to grab a button on a webpage and change its color when clicked — the same operation written first in vanilla JavaScript, then in jQuery:

document.getElementById('button')
  .addEventListener('click', function() {
    this.style.backgroundColor = 'red';
  })

As you might notice, the code needed to perform relatively simple modifications can get cumbersome. This is just ONE modification.

Now here's the same operation done with jQuery:

$('#button').click(function() {
  $(this).css('background-color', 'red');
})

jQuery collapses our JavaScript into just a few lines of clean, readable code.

$ is Just a Function

As we pull back the curtain on jQuery, let's first look at the $ symbol.

A common misconception many beginners have about this is that $ is special syntax — something built into JavaScript itself. Perhaps assuming JavaScript just knows what $ means.

However, that is not the case. We know that $ is a valid character to use when naming variables in JavaScript, but that's all. On its own, $ means nothing to JavaScript unless defined — which is exactly what happens when jQuery is imported. Both jQuery and its alias $ are defined as the jQuery function. By convention, most developers use $, but either works — what matters is consistency.

We pass element selectors into the function as arguments. It returns an array-like container (the jQuery object) that contains the selected DOM nodes. This gives us access to jQuery's methods, which we can execute on the selected elements.

To get access to the jQuery library and use it in a project, you can download the library and then in your project's HTML file, create a script tag with a src attribute that points to your copy of jQuery:

<!-- Local download -->
<script src="jquery.js"></script>

Another option is to load jQuery via CDN:

<!-- CDN -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

What You Actually Get Back

Unlike vanilla JavaScript which returns raw DOM elements directly, jQuery returns an array-like container holding the nodes. With jQuery, we manipulate elements through this container, not directly.

You can see what this looks like for yourself. Open your DevTools console on any jQuery page and run $('p'). What you get back should look something like this:

T {0: p, 1: p, 2: p, 3: p, 4: p, 5: p, 6: p, 7: p, 8: p, 9: p.copyright, 10: p, length: 11, prevObject: T}

What you're seeing is the jQuery object. It contains indexed elements and a length — the number of matched elements — along with some internal jQuery properties (prevObject) that are beyond the scope of this article. If we expand it, we can see a vast array of methods and properties now accessible to us. This behavior of returning the jQuery object enables us to write the same code whether our selector matches one element or many — jQuery handles the iteration.

Vanilla JavaScript requires a manual loop:

var paragraphs = document.querySelectorAll('p');
for (var i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.color = 'red';
}

Whereas jQuery silently iterates:

$('p').css('color', 'red');

Much simpler in form, easy to follow, and easy to chain.

Why Chaining Works

When we call a jQuery function, what we get back is the jQuery object, rather than the raw node that we're operating on. This is by design. What's special about this behavior is that the jQuery object — that container that wraps our raw data — comes equipped with many of jQuery's built-in methods and properties. It gives us something to operate on. This is what makes chaining jQuery methods so simple and effective.

Why would we want to chain methods? What makes this so useful? Take a look at this example:

$('#button').css('background-color', 'red')
            .slideUp(500)
            .slideDown(500);

Here, we've performed three different operations on our #button element without having to re-select it three times. It's simple, logical, and sleek.

Event Handling

Event handlers wait for a specific event and invoke a callback function when that event occurs. jQuery makes this operation concise and readable. With jQuery, .on() is the universal event handler. Though not the only way to implement event handling, it is preferred for flexibility and consistency. It looks like this:

$('#button').on('click', function() {
  // do something
});

jQuery also provides shorthand methods for specific event types — here are a few common ones.

Let's say we have some card elements on our page and we want to blur the background when we hover on a card. This requires a couple of functions. In jQuery, we can do this like so:

$('#card').hover(
  function() {
    $(this).addClass('expanded');
    $('body').addClass('blurred');
  },
  function() {
    $(this).removeClass('expanded');
    $('body').removeClass('blurred');
  }
);

Our $ is a function, into which we pass the #card element selector. Since jQuery returns its container object, we can then chain .hover() to the object and pass the functions that will perform our desired action. Those functions can also call the jQuery object to do so.

Here's an example of showing/hiding options based on checkbox state:

$('#checkbox').change(function() {
  $('#options-list').toggle();
});

We start with calling $ and pass into it the #checkbox selector. We implement the .change() jQuery method on the returned object, letting us pass a callback function which passes another $ call with our next element selector as its argument, returning the jQuery object onto which we can apply the .toggle() method. Clean and concise.

And here's one more example showing how we might use jQuery to implement an event listener that starts music playback on spacebar press:

$(document).keydown(function(e) {
  if (e.key === ' ') {
    music.play();
  }
});

This again shows how simple and readable our code can be when implementing operations that often prove tedious and difficult to follow otherwise.

Conclusion

I hope this has helped in showing some of jQuery's capabilities and usefulness, as well as given some insight into what's going on under the hood. A deeper understanding of how jQuery interacts with our code makes bugs easier to avoid — and when they do occur, easier to debug. It also deepens our understanding of JavaScript as a whole.

Another benefit to understanding a library like this is that it can serve as a template for understanding ANY library. While syntax, structure, and individual details will vary, the broader concepts often overlap. This can make expanding our range of knowledge and broadening our toolsets a much less daunting and more rewarding experience.