DEV Community: Garrin Costa, Jr.

Know Your Environment: Building Fluency with Shortcuts, Terminals, and Git

Garrin Costa, Jr. — Tue, 02 Jun 2026 14:09:43 +0000

Cmd+C, Cmd+V, Cmd+Z — the basics settle into procedural memory quickly. Beyond that, most shortcuts remain things we intend to learn eventually.

The resources are easy to find. Most applications expose shortcuts directly in their menus, publish reference pages, and allow custom key bindings. Yet a 2005 study by Lane, Napier, Peres, and Sandor found that even experienced users relied on keyboard shortcuts less than 10% of the time, and that time spent using a program had little relationship with keyboard shortcut proficiency. Exposure alone doesn't build skill.

What builds it is intentional repetition — and a willingness to be slower before you're faster. Fitts and Posner's three-stage model of skill acquisition describes the progression: cognitive (active recall, slower execution), associative (familiarity forming, still requires attention), autonomous (fires without thought). Remington, Yuen, and Pashler put a number on the crossover: after roughly 200 repetitions, keyboard shortcuts became consistently faster than menu navigation. A new shortcut might cost you a beat every time you reach for it on day one. By the end of the first week of consistent use, that friction is mostly gone.

For developers working in digital environments all day, the environment itself is part of the work. Every unnecessary trip through a menu is a small interruption. Repeated across a session, across a week, those costs are real — and avoidable.

What follows is a practical reference organized by layer: operating system, browser, VS Code, terminal, and Git. The goal is not completeness, but a high-value subset of shortcuts and workflows that address genuine friction in day-to-day development.

Operating System

Developers move constantly between editors, terminals, browsers, documentation, and communication tools. A handful of OS-level shortcuts reduces the overhead of that navigation significantly.

Purpose	macOS	Windows/Linux
Switch applications	`Cmd+Tab`	`Alt+Tab`
Switch windows (same app)	`Cmd+`	`Alt+Esc`
Open system search	`Cmd+Space`	`Win+S`
Hide application	`Cmd+H`	`Win+D`
Minimize current window	`Cmd+M`	`Win+↓`
Quit application	`Cmd+Q`	`Alt+F4`
Screenshot / screen capture	`Cmd+Shift+5`	`Win+Shift+S`

Spotlight (Cmd+Space) deserves particular attention. It launches applications, locates files, performs calculations, and searches system settings — all without leaving the keyboard or touching the Dock or Finder.

Window Management

macOS Sequoia introduced native tiling via drag-to-edge. For keyboard-driven window management with more control, Rectangle (free) and Magnet (paid) both provide configurable shortcuts for snapping windows to halves, thirds, corners, and specific displays.

A typical development layout — editor on one side, browser or DevTools on the other, terminal on a second display — can be arranged entirely from the keyboard. Once those positions are muscle memory, context switching between tools stops requiring any deliberate navigation.

Browser

Browsers function as documentation readers, debugging environments, and research platforms throughout a development session.

Purpose	macOS	Windows/Linux
Focus address bar	`Cmd+L`	`Ctrl+L`
New tab	`Cmd+T`	`Ctrl+T`
Close current tab	`Cmd+W`	`Ctrl+W`
Reopen closed tab	`Cmd+Shift+T`	`Ctrl+Shift+T`
Switch to tab 1–9	`Cmd+1–9`	`Ctrl+1–9`
Navigate back / forward	`Cmd+[` / `Cmd+]`	`Alt+←` / `Alt+→`
Hard refresh (bypass cache)	`Cmd+Shift+R`	`Ctrl+Shift+R`
Open DevTools — elements	`Cmd+Opt+I`	`Ctrl+Shift+I`
Open DevTools — console	`Cmd+Opt+J`	`Ctrl+Shift+J`
Find on page	`Cmd+F`	`Ctrl+F`

Cmd+Opt+J / Ctrl+Shift+J opens DevTools directly to the console — no clicking through panels. For frontend work specifically, that one earns its place in muscle memory fast.

Cmd+L / Ctrl+L focuses the address bar immediately. Combined with typing a URL or search term and pressing Enter, it removes the mouse from routine browser navigation entirely.

VS Code

Navigation & Interface

Purpose	macOS	Windows/Linux
Open file by name	`Cmd+P`	`Ctrl+P`
Command palette	`Cmd+Shift+P`	`Ctrl+Shift+P`
Global search	`Cmd+Shift+F`	`Ctrl+Shift+F`
Toggle sidebar	`Cmd+B`	`Ctrl+B`
Toggle terminal panel	`Cmd+J`	`Ctrl+J`
New terminal	`Ctrl+Shift+`	`Ctrl+Shift+`
Split editor	`Cmd+\`	`Ctrl+\`
Go to definition	`F12`	`F12`
Rename symbol	`F2`	`F2`
View all keyboard shortcuts	`Cmd+K, Cmd+S`	`Ctrl+K, Ctrl+S`

Cmd+P / Ctrl+P opens any file by name — type a few characters and it filters in real time. With Cmd+B to hide the sidebar and Cmd+J to toggle the terminal, the file explorer panel becomes largely optional.

Cmd+Shift+P / Ctrl+Shift+P opens the command palette. For any action without a memorized shortcut, it's the fastest path.

Cmd+K, Cmd+S opens the full keyboard shortcuts editor. It's worth exploring — and anything that conflicts with existing habits can be remapped there.

Editing

Purpose	macOS	Windows/Linux
Move line up / down	`Opt+↑` / `Opt+↓`	`Alt+↑` / `Alt+↓`
Duplicate line	`Shift+Opt+↓`	`Shift+Alt+↓`
Select next occurrence	`Cmd+D`	`Ctrl+D`
Select all occurrences	`Cmd+Shift+L`	`Ctrl+Shift+L`
Add cursor	`Opt+Click`	`Alt+Click`
Add cursor above / below	`Cmd+Opt+↑/↓`	`Ctrl+Alt+↑/↓`
Add cursors across lines	`Cmd+Opt+Shift+↑/↓`	`Ctrl+Alt+Shift+↑/↓`
Toggle comment	`Cmd+/`	`Ctrl+/`
Column selection	`Shift+Opt+Drag`	`Shift+Alt+Drag`

Multi-cursor editing is worth investing time in. Selecting all occurrences of a variable, renaming across multiple lines simultaneously, or applying the same edit to a column of values — these are the kinds of tasks that used to require find-and-replace or repeated manual edits.

Terminal & Shell

Before building terminal shortcuts, it's worth knowing which shell you're actually in:

echo $SHELL

A shell is the command interpreter between you and the operating system — handling command execution, history, aliases, functions, environment variables, and startup configuration. Most modern macOS installations default to zsh. Personal configuration for zsh lives in:

~/.zshrc

After editing that file, reload it without opening a new terminal window:

source ~/.zshrc

The shortcuts and aliases in this section assume zsh, though most apply equally to bash.

Command Line Navigation

Purpose	Shortcut
Move to line start	`Ctrl+A`
Move to line end	`Ctrl+E`
Delete to line start	`Ctrl+U`
Delete to line end	`Ctrl+K`
Delete previous word	`Ctrl+W`
Search command history	`Ctrl+R`

Ctrl+R initiates a reverse search through command history. Start typing any fragment of a previous command and it surfaces matches interactively — useful for long commands you remember running but don't want to retype.

Useful Commands

Display command history

history
history | grep git

Useful when you remember running a command but not its exact syntax.

Print working directory

pwd

The fastest way to confirm where you are in a directory structure.

View large files

less server.log

Unlike cat, less allows scrolling through large files without flooding the terminal output.

Repeat previous command

!!

A common use case: rerunning a command with elevated privileges after it fails without them:

sudo !!

Shell Customization

Aliases turn repetitive commands into single words. A few practical examples to add to ~/.zshrc:

alias ll="ls -la"
alias gs="git status"
alias gp="git push"

Small improvements compound. A few well-chosen aliases, combined with history search and readline shortcuts, reduce a meaningful amount of low-level friction every time a terminal opens.

Git

Common Commands

git status
git add .
git commit -m "message"
git push
git pull

git status is the most frequently useful of these. When uncertain about the state of a repository — what's staged, what's modified, what branch you're on — it provides an immediate summary.

Aliases

Add these to ~/.gitconfig under [alias]:

[alias]
  st   = status -sb
  aa   = add .
  cm   = commit -m
  ps   = push
  pl   = pull
  lg   = log --oneline --graph --decorate
  undo = reset HEAD~1 --mixed

Or as shell aliases in ~/.zshrc:

alias gst='git status -sb'
alias gaa='git add .'
alias gcm='git commit -m'
alias gps='git push'
alias gpl='git pull'
alias gl='git log --oneline --graph --decorate'

gl is worth calling out specifically. The --oneline --graph --decorate flags render commit history and branch structure in a format that's actually readable — a significant improvement over the default git log output.

Recovery Commands

Most Git commands create history rather than destroy it. A few commands that help when things go wrong:

Inspect unstaged changes

git diff

Review modifications before staging or committing.

Restore a file to its last committed state

git restore filename.js

Save work temporarily without committing

git stash

Useful when switching tasks mid-work. git stash pop restores it.

Switch branches

git switch feature-branch

A more explicit alternative to git checkout for branch switching.

Deliberate Practice

Reading about shortcuts can be useful. Acquiring them requires repetition. Deliberate action.

To accompany this article, I built a small workshop repository designed around that idea. The project walks through common development tasks using the same layers covered here — OS navigation, browser workflows, terminal commands, Git operations, and VS Code shortcuts.

Participants can fork and clone the repository, navigate the filesystem, open the project in VS Code, and complete progressively larger tasks. Instructions are embedded in the project files, and automated tests provide feedback as each task is completed.

Developer Shortcuts Workshop

Start Small

Pick one shortcut — ideally one that addresses something you actually do repeatedly. Use it every time that action comes up, even when it's slower than what you'd normally reach for. That's stage one of the acquisition arc. It's temporary.

By the end of a week of consistent use, the shortcut is close to automatic. At that point, add another.

The environment stops being an obstacle when the tools in it no longer require conscious attention. That happens one shortcut at a time.

Source Notes

Lane, D. M., Napier, H. A., Peres, S. C., & Sandor, A. (2005). Hidden costs of graphical user interfaces: Failure to make the transition from menus and icon toolbars to keyboard shortcuts. International Journal of Human-Computer Interaction, 18(2), 133–144.

"Results showed that shortcut use was very low (less than 10% of the time) and that the number of hours participants had been using the program did not predict the frequency of shortcut use."

Fitts, P. M., & Posner, M. I. (1967). Human Performance. Brooks/Cole.

Original source for the three-stage model of skill acquisition: cognitive, associative, and autonomous. The model describes how a learner moves from effortful, conscious execution of a skill toward automatic execution requiring minimal attentional resources.

Remington, R. W., Yuen, H. W. H., & Pashler, H. (2016). With practice, keyboard shortcuts become faster than menu selection: A crossover interaction. Journal of Experimental Psychology: Applied, 22(1), 95–106. DOI: 10.1037/xap0000069

"It is widely believed that a graphical user interface (GUI) is superior to a command line interface (CLI) for novice users, but less efficient than the CLI after practice. However, there appears to be no detailed study of the crossover interaction that this implies... The predicted crossover was observed after approximately 200 responses. Experiment 2 showed that following training all but 1 subject in the CLI-trained group chose to continue using shortcuts. These results suggest that frequency of shortcut use is a function of ease of retrieval, which develops over the course of multiple repetitions of the command."

Full References

Lane, D. M., Napier, H. A., Peres, S. C., & Sandor, A. (2005). Hidden costs of graphical user interfaces: Failure to make the transition from menus and icon toolbars to keyboard shortcuts. International Journal of Human-Computer Interaction, 18(2), 133–144.
Fitts, P. M., & Posner, M. I. (1967). Human Performance. Brooks/Cole.
Remington, R. W., Yuen, H. W. H., & Pashler, H. (2016). With practice, keyboard shortcuts become faster than menu selection: A crossover interaction. Journal of Experimental Psychology: Applied, 22(1), 95–106. DOI: 10.1037/xap0000069
Fagarasanu, M., & Kumar, S. (2003). Carpal tunnel syndrome due to keyboarding and mouse tasks: A review. International Journal of Industrial Ergonomics, 31(2), 119–136.
Jardina, J. R., Peres, S. C., Nguyen, V., Megasari, A., Griggs, K. R., Pinales, R., & Amos, A. N. (2009). Keyboard shortcut users: They are faster at more than just typing. Proceedings of the Human Factors and Ergonomics Society Annual Meeting, 53(15).

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 garrin <abcdefg@123.com> 1779654747 -0500
committer garrin <abcdefg@123.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.