Engineering concepts for visual learners. Updated weekly.
Terminal
Terminal
Terminal & Shell
Terminal is the window where you type. Shell is the engine that reads your command and tells the computer what to do.
Default shell: zsh (Mac), PowerShell / cmd (Windows)
bash: Historic standard for Linux and older macOS systems
Remote sessions (SSH) run entirely inside a terminal
Terminal
Terminal & Shell
Terminal is the window where you type. Shell is the engine that reads your command and tells the computer what to do.
Default shell: zsh (Mac), PowerShell / cmd (Windows)
bash: Historic standard for Linux and older macOS systems
Remote sessions (SSH) run entirely inside a terminal
Clicking & Dragging
Command Line
Command Line
A way of controlling your computer through text-based instructions, rather than clicks and drags. Fast, precise, and repeatable.
CLI (Command Line Interface): General term for any tool you interact with by typing commands.
Most CLIs have a --help flag that lists all available subcommands / options.
cp to copy, mv to move, rm to delete.
Clicking & Dragging
Command Line
Command Line
Controls your computer through text-based instructions (rather than with your cursor). Fast, precise, and repeatable.
CLI (Command Line Interface): General term for any tool you interact with by typing commands.
Most CLIs have a --help flag that lists all available subcommands / options.
cp to copy, mv to move, rm to delete.
Clicking & Dragging
Command Line
Command Line
A way of controlling your computer through text-based instructions, rather than clicks and drags. Fast, precise, and repeatable.
CLI (Command Line Interface): General term for any tool you interact with by typing commands.
Most CLIs have a --help flag that lists all available subcommands / options.
cp to copy, mv to move, rm to delete.
Commands
Scripts
Script
A saved command – or set of commands – that automates a particular task.
Can change files, databases, or systems, depending on permissions.
Useful for repetitive tasks (e.g importing data, deploying code)
Can be written in languages such as; JavaScript, Python, Bash etc.
Always understand what a script does before running it (especially one from the internet)
Commands
Scripts
Script
A saved command – or set of commands – that automates a particular task.
Can change files, databases, or systems, depending on permissions.
Useful for repetitive tasks (e.g importing data, deploying code)
Can be written in languages such as; JavaScript, Python, Bash etc.
Always understand what a script does before running it (especially one from the internet)
Working Directory
Working Directory
The folder your terminal is currently operating inside. Determines which projects / files your commands affect.
pwd (print working directory) shows your location. Run to ensure you’re working in the correct project/folder.
cd ../ takes you to the previous directory. Useful when bouncing between two locations.
ls shows everything in your current directory.
Working Directory
Working Directory
The folder your terminal is currently operating inside. Determines which projects / files your commands affect.
pwd (print working directory) shows your location. Run to ensure you’re working in the correct project/folder.
cd ../ takes you to the previous directory. Useful when bouncing between two locations.
ls shows everything in your current directory.
Local
Remote
SSH (Secure Shell)
Lets you securely access a terminal on another computer /server and control it remotely.
Access is usually protected with passwords or, preferably, SSH keys.
Always check which server you’re connected to before running commands.
Changes can affect live systems. Be careful with destructive commands, installs, configuration changes, and anything involving production data.
Local
Remote
SSH (Secure Shell)
Lets you securely access a terminal on another computer /server and control it remotely.
Access is usually protected with passwords or, preferably, SSH keys.
Always check which server you’re connected to before running commands.
Changes can affect live systems. Be careful with destructive commands, installs, configuration changes, and anything involving production data.
Component
Web Component
Hardcoded
Reusable
Web Components
Reusable UI element, packaged with markup, styling, and behaviour. Write once, then use anywhere an HTML tag can go.
3 ingredients; HTML templates, Custom Elements, and Shadow DOM.
Great for design systems shared across many teams and tech stacks.
Web Component
Hardcoded
Reusable
Web Components
Reusable UI element, packaged with markup, styling, and behaviour. Write once, then use anywhere an HTML tag can go.
3 ingredients; HTML templates, Custom Elements, and Shadow DOM.
Great for design systems shared across many teams and tech stacks.
HTML Templates
Standardised way to declare reusable patterns using <template> and <slot>.
Templates set the structure, slots decide the content.
Slots only work when there's a shadow DOM present.
Nothing runs (images + scripts) until it's used.
Always clone, never move the master.
HTML Templates
Standardised way to declare reusable patterns using <template> and <slot>.
Templates set the structure, slots decide the content.
Slots only work when there's a shadow DOM present.
Nothing runs (images + scripts) until it's used.
Always clone, never move the master.
Custom Elements
An HTML tag you invent, which the browser then treats like one of its own.
Must contain a hyphen so the browser knows it’s yours.
Inherits page styles like any other tag, unless there’s a Shadow DOM.
No built-in meaning: Role, focus order, and keyboard behaviour added separately.
Custom Elements
An HTML tag you invent, which the browser then treats like one of its own.
Must contain a hyphen so the browser knows it’s yours.
Inherits page styles like any other tag, unless there’s a Shadow DOM.
No built-in meaning: Role, focus order, and keyboard behaviour added separately.
Shadow DOM
A walled off area inside a component that protects its structure and styles. Allows a component to look and behave the same wherever it’s used.
Isolation both ways. Global resets won’t touch it, but inherited styles (e.g. colour, font) still get through.
Theming needs a deliberate opening (usually via CSS custom properties)
Shadow DOM
A walled off area inside a component that protects its structure and styles. Allows a component to look and behave the same wherever it’s used.
Isolation both ways. Global resets won’t touch it, but inherited styles (e.g. colour, font) still get through.
Theming needs a deliberate opening (usually via CSS custom properties)
Git
Project Folder
Repository
Repository (Repo)
Project folder and its entire history. Tracked by Git, usually hosted on GitHub.
One repo per project
Add .gitignore early so build output and secrets never get tracked.
git status: See what’s changed, staged, or untracked
git fetch: Origin syncs your local and remote repo
git init: Creates a new repo
Project Folder
Repository
Repository (Repo)
Project folder and its entire history. Tracked by Git, usually hosted on GitHub.
One repo per project
Add .gitignore early so build output and secrets never get tracked.
git status: See what’s changed, staged, or untracked
git fetch: Origin syncs your local and remote repo
git init: Creates a new repo
Remote
Local
Push / Pull
Push uploads your local commits (saves) to the hosted repo so teammates can see them. Pull downloads their commits back to you. Together they keep local and remote in sync.
git push: send your saved work to the remote
git pull: receive updates to your local
Pull before you push to avoid outdated pushes.
Never force–push shared branches as it can overwrite others' history.
Remote
Local
Push / Pull
Push uploads your local commits (saves) to the hosted repo so teammates can see them. Pull downloads their commits back to you. Together they keep local and remote in sync.
git push: send your saved work to the remote
git pull: receive updates to your local
Pull before you push to avoid outdated pushes.
Never force–push shared branches as it can overwrite others' history.
Remote
Local
Clone
Copies every file and its complete history from the remote onto your local.
Allows you to view logs, switch branches and commit code offline.
Clone wires your local to the remote, so you can sync changes later.
Clone once per machine. Pull to stay in sync.
git clone <url>: Downloads a copy of the remote repo to your local machine.
Remote
Local
Clone
Copies every file and its complete history from the remote onto your local.
Allows you to view logs, switch branches and commit code offline.
Clone wires your local to the remote, so you can sync changes later.
Clone once per machine. Pull to stay in sync.
git clone <url>: Downloads a copy of the remote repo to your local machine.