This past week, I started exploring Chrome DevTools through The Odin Project's Inspecting HTML and CSS module.

It was like opening up a new world for me, because I'm finally (and slowly) understanding what happens when you click "Inspect" on an element from a Chrome web page.

While familiarizing myself with the tool, I realized two recurring concepts:

One symbol, different meanings

Previously, I learned that the $ symbol represents a command prompt in Linux.

In DevTools, the same symbol is something you can type in as a command in the Console, e.g., $0, which will return the node selected in the DOM tree.

Shortcuts are helpful

Shortcuts; it appeared in the worlds of basic HTML, terminal commands, and now DevTools as well.

I tend to visualize shortcuts as a language's own set of shortened commands.

Each command, often made up of multiple individual elements, forms a cohesive unit with meaning when combined.

These commands help me communicate with another "speaker" in conversation, i.e., the computer.

For example, pressing CTRL + ALT + T together opens the terminal in Linux.

Meanwhile, if you have DevTools opened on your Chrome web page, you can press Esc to open the Console drawer.

It's pretty cool how various tech programs use similar "vocabulary", though these vocabulary terms and expressions can have vastly different meanings and functions in each program.