Code Snack
Code Snack
Engineering concepts for visual learners. Updated weekly.
Engineering concepts for visual learners. Updated weekly.
CSS Layout
CSS Grid
A two-dimensional layout system for arranging content on a page.
Content lives inside items, which fill a cell or area.
Items can be turned into a new, independent grid container, known as a nested grid. They can also be turned into a subgrid to inherit their parent tracks.
For now, the grid itself can’t be styled. It lives in CSS only, not the DOM.
CSS Grid
A two-dimensional layout system for arranging content on a page.
Content lives inside items, which fill a cell or area.
Items can be turned into a new, independent grid container, known as a nested grid. They can also be turned into a subgrid to inherit their parent tracks.
For now, the grid itself can’t be styled. It lives in CSS only, not the DOM.
Viewport Responsiveness
Traditional fixed-column layouts respond to viewport breakpoints, whereas modern layout systems like Grid and Flexbox adapt to content and available space.
Flexbox flows items along one axis. Grid places them across rows and columns. Most layouts use both.
Set a minimum size, let the layout find its own breakpoints.
Explicit grid is when you've defined rows and columns. Implicit grid is when the browser creates them for you.
Viewport Responsiveness
Traditional fixed-column layouts respond to viewport breakpoints, whereas modern layout systems like Grid and Flexbox adapt to content and available space.
Flexbox flows items along one axis. Grid places them across rows and columns. Most layouts use both.
Set a minimum size, let the layout find its own breakpoints.
Explicit grid is when you've defined rows and columns. Implicit grid is when the browser creates them for you.
Spacing
The space in and around elements. Keeps layouts readable and consistent.
Only the gutter (gap) belongs to grid itself. Margin and padding come from the box model.
Use a spacing scale (e.g. multiples of 4 or 8) so gaps, margins and padding stay consistent.
Spacing
The space in and around elements. Keeps layouts readable and consistent.
Only the gutter (gap) belongs to grid itself. Margin and padding come from the box model.
Use a spacing scale (e.g. multiples of 4 or 8) so gaps, margins and padding stay consistent.
Fractional Units (fr)
A flexible unit representing a proportion of available space in the grid.
Percentages (%) divide the total space, whereas fractions (fr) divide the leftover space.
Fr columns never shrink below their content's minimum size.
Use minmax(0, 1fr) when you need strict proportional control, regardless of content.
Fractional Units (fr)
A flexible unit representing a proportion of available space in the grid.
Percentages (%) divide the total space, whereas fractions (fr) divide the leftover space.
Fr columns never shrink below their content's minimum size.
Use minmax(0, 1fr) when you need strict proportional control, regardless of content.
Context
Data Files
Stores information for a program to read, rather than instructions to run. They can be structured (names and values linked), unstructured (no fixed format), or both.
Unstructured data: Human readable, flexible (e.g. md, images, audio)
Structured data: Easier for AI, deterministic (e.g. json, xml, csv)
Front-matter: A common middle ground with structured header and free-form body.
Data Files
Stores information for a program to read, rather than instructions to run. They can be structured (names and values linked), unstructured (no fixed format), or both.
Default shell: zsh (Mac), PowerShell / cmd (Windows).
bash: Historic standard for Linux and older macOS systems.
Data Files
Stores information for a program to read, rather than instructions to run. They can be structured (names and values linked), unstructured (no fixed format), or both.
Unstructured data: Human readable, flexible (e.g. md, images, audio)
Structured data: Easier for AI, deterministic (e.g. json, xml, csv)
Front-matter: A common middle ground with structured header and free-form body.
Annotations
Digital sticky notes describing design intent, accessibility requirements, and functional behaviours, without changing the code logic.
Annotate the exceptions, not the obvious.
Tie each note to a specific screen or instance.
Accessibility intent (focus order, roles, ARIA labels etc) rarely survive without annotation.
Annotations
Digital sticky notes describing design intent, accessibility requirements, and functional behaviours, without changing the code logic.
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.
Architecture Decision Record (ADR)
A logbook that captures a decision, its context, and any consequences when it was made. Prevents problems resurfacing down the line.
One topic per record (1-2 pages)
Save as markdowns and store next to the code so they version and review together
Include; title, status, context, decision and consequences.
Never edit past decisions.
Architecture Decision Record (ADR)
Controls your computer through text-based instructions (rather than with your cursor). Fast, precise, and repeatable.
One topic per record (1-2 pages)
Save as markdowns and store next to the code so they version and review together
Include; title, status, context, decision and consequences.
Never edit past decisions.
Architecture Decision Record (ADR)
A logbook that captures a decision, its context, and any consequences when it was made. Prevents problems resurfacing down the line.
One topic per record (1-2 pages)
Save as markdowns and store next to the code so they version and review together
Include; title, status, context, decision and consequences.
Never edit past decisions.
Design System Contracts
A single source-of-truth file that sits between design and code, allowing teams to move in parallel without silently drifting.
Holds design intent such as properties, tokens, and behaviours
Often written as JSON or YAML
Design System Contracts
A single source-of-truth file that sits between design and code, allowing teams to move in parallel without silently drifting.
Holds design intent such as properties, tokens, and behaviours
Often written as JSON or YAML
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 & 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.
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
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.
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.
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.
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)
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
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
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.
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.
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 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 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
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
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
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.
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.
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.
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.