Home
~/homeHey — welcome to my dev toolkit.
A personal home base of cheatsheets and small in-browser tools I reach for while coding. No trackers, no build step — just static files served straight off the Raspberry Pi under my desk. Pick a section from the menu, or jump in below.
CSS Cheatsheet
A scannable desk reference. Values shown are illustrative — verify edge cases against MDN or caniuse.com.
01 Selectors
* | All elements |
.class | By class |
#id | By id |
a, p | Group (either) |
A B | Descendant |
A > B | Direct child |
A + B | Next sibling |
A ~ B | Later siblings |
[href^="https"] | Starts with |
[src$=".png"] | Ends with |
[class*="col"] | Contains |
02 Pseudo
:hover | Pointer over |
:focus-visible | Focused (kbd) |
:checked :disabled | Form state |
:not(sel) | Negation |
:is() :where() | Match any |
:has(sel) | Parent contains |
:nth-child(2n) | Every even |
:first/last-child | Position |
::before ::after | Generated content |
::placeholder | Input hint |
03 Specificity
Higher wins; ties break by source order.
!important | Beats all avoid |
inline style | 1,0,0,0 |
#id | 0,1,0,0 |
.class [attr] :hover | 0,0,1,0 |
tag ::before | 0,0,0,1 |
Read (inline, id, class, tag) left to right.
04 Box model
box-sizing: border-box | Incl. padding+border use this |
padding: 10px 20px | Inside border |
margin: 0 auto | Outside; centers |
border: 1px solid #ccc | width style color |
border-radius: 8px | Rounded corners |
overflow: auto|hidden | Scroll / clip |
aspect-ratio: 16/9 | Lock proportions |
05 Display & position
block / inline | Stack / flow |
inline-block | Flow but sizable |
flex / grid | Layout containers |
none | Removed |
relative | Offset from self |
absolute | To ancestor |
fixed | To viewport |
sticky | Scrolls then sticks |
z-index: 10 | Stacking order |
06 Flexbox
One axis — a row or a column.
display: flex | Activate |
flex-direction | row | column |
flex-wrap: wrap | Allow wrapping |
justify-content | Main axis align |
align-items | Cross axis align |
gap: 16px | Space between |
flex: 1 | grow shrink basis |
/* perfect centering */ display: flex; justify-content: center; align-items: center;
07 Grid
Two axes — rows and columns.
display: grid | Activate |
grid-template-columns | Define columns |
repeat(3, 1fr) | 3 equal cols |
minmax(200px,1fr) | Flexible w/ floor |
gap: 20px | Gutters |
grid-column: 1 / 3 | Span lines |
place-items: center | align+justify |
/* responsive grid */ grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
08 Typography
font-size | 1rem, 16px |
font-weight | 400 / 700 |
line-height: 1.5 | Unitless = × size |
letter-spacing | Tracking |
text-align | left/center/justify |
text-transform | uppercase… |
text-wrap: balance | Even headings |
text-overflow: ellipsis | … clipped |
09 Color & background
#2965f1 | Hex |
rgb(41 101 241 / .5) | RGB + alpha |
hsl(222 88% 55%) | Hue/sat/light |
oklch(60% .2 250) | Modern, perceptual |
linear-gradient() | Gradient image |
box-shadow: 0 4px 12px… | x y blur spread |
backdrop-filter: blur() | Frost backdrop |
10 Units
px | Absolute |
rem | × root size scalable |
em | × parent size |
% | Of parent |
vw / vh | 1% of viewport |
dvh / svh | Dynamic / small vh |
fr | Grid free space |
ch | Width of "0" |
11 Transitions & transforms
transition: all .2s ease | prop dur timing |
cubic-bezier() | Custom curve |
translate(x,y) | Move |
scale(1.2) | Resize |
rotate(45deg) | Spin |
animation: spin 1s linear infinite | name dur timing iter |
@keyframes spin { to { transform: rotate(360deg); } }
12 Responsive & functions
@media (min-width: 768px) { … } @media (prefers-color-scheme: dark) {} @container (min-width: 400px) {}
var(--x, fallback) | Custom property |
calc(100% - 40px) | Mix units |
clamp(1rem,2vw,2rem) | min·ideal·max fluid |
min() / max() | Pick smaller/larger |
Git Cheatsheet
The everyday commands. <x> means replace with your own value.
01 Setup & start
git init | New repo here |
git clone <url> | Copy a remote repo |
git config --global user.name "X" | Set your name |
git config --global user.email "x" | Set your email |
02 Stage & commit
git status | What changed |
git add <file> | Stage a file |
git add . | Stage everything |
git commit -m "msg" | Commit staged |
git commit -am "msg" | Stage tracked + commit |
git commit --amend | Edit last commit |
03 Branching
git branch | List branches |
git switch -c <name> | Create + switch |
git switch <name> | Change branch |
git merge <name> | Merge into current |
git branch -d <name> | Delete branch |
04 Sync with remote
git remote -v | List remotes |
git fetch | Download, don't merge |
git pull | Fetch + merge |
git push | Upload commits |
git push -u origin <br> | Push + track |
05 Inspect history
git log --oneline | Compact history |
git log --graph --all | Visual tree |
git diff | Unstaged changes |
git diff --staged | Staged changes |
git blame <file> | Who changed each line |
06 Undo & rescue
git restore <file> | Discard file changes |
git restore --staged <file> | Unstage |
git reset --soft HEAD~1 | Undo commit, keep work |
git reset --hard HEAD~1 | Undo + discard careful |
git revert <hash> | New commit that undoes |
git reflog | Recover lost commits |
07 Stash
git stash | Shelve changes |
git stash pop | Restore + remove |
git stash list | See stashes |
git rebase <branch> | Replay commits on top |
git rebase -i HEAD~3 | Edit/squash last 3 |
Regex Cheatsheet
Pattern syntax (PCRE / JavaScript flavour). Try these live in the Regex tester →
01 Character classes
. | Any char (not newline) |
\d / \D | Digit / non-digit |
\w / \W | Word char / non-word |
\s / \S | Whitespace / non-ws |
[abc] | Any of a, b, c |
[^abc] | None of those |
[a-z0-9] | Range |
02 Anchors & boundaries
^ | Start of string/line |
$ | End of string/line |
\b | Word boundary |
\B | Not a boundary |
03 Quantifiers
* | 0 or more |
+ | 1 or more |
? | 0 or 1 (optional) |
{3} | Exactly 3 |
{2,5} | Between 2 and 5 |
{2,} | 2 or more |
*? +? | Lazy (fewest) |
04 Groups & alternation
(abc) | Capture group |
(?:abc) | Non-capturing |
(?<name>abc) | Named group |
a|b | a or b |
\1 | Backreference |
05 Lookaround
(?=...) | Lookahead (followed by) |
(?!...) | Negative lookahead |
(?<=...) | Lookbehind (preceded by) |
(?<!...) | Negative lookbehind |
06 Flags
g | Global (all matches) |
i | Case-insensitive |
m | Multiline (^ $ per line) |
s | Dotall (. matches \n) |
u | Unicode |
07 Handy patterns
^\d{4}-\d{2}-\d{2}$ | ISO date |
\b[\w.]+@[\w.]+\.\w+\b | Email (rough) |
#[0-9a-fA-F]{6} | Hex color |
https?:\/\/\S+ | URL |
\s+$ | Trailing whitespace |
LaTeX Cheatsheet
Typesetting essentials. Math lives inside $ … $ (inline) or \[ … \] (display). Commands start with a backslash.
01 Document structure
\documentclass{article} | article, report, book… |
\usepackage{amsmath} | Load a package |
\begin{document} | Start the body |
\title{} \author{} | Metadata |
\maketitle | Render the title |
\section{} \subsection{} | Headings |
\tableofcontents | Auto table of contents |
\documentclass{article}
\usepackage{amsmath}
\title{My Notes}
\begin{document}
\maketitle
Hello, $E = mc^2$.
\end{document}
02 Text formatting
\textbf{...} | Bold |
\textit{...} | Italic |
\underline{...} | Underline |
\texttt{...} | Monospace |
\emph{...} | Emphasis |
{\large ...} | \small \Large \Huge |
\\ | Line break |
| blank line | New paragraph |
03 Math mode
$ ... $ | Inline math |
\[ ... \] | Display math |
\begin{equation} | Numbered equation |
\begin{align} | Align on & |
x^{2} | Superscript |
x_{i} | Subscript |
\frac{a}{b} | Fraction |
\sqrt[n]{x} | Root |
04 Symbols & Greek
\alpha \beta \gamma | α β γ |
\pi \theta \lambda | π θ λ |
\infty | ∞ |
\times \cdot \div | × · ÷ |
\leq \geq \neq \approx | ≤ ≥ ≠ ≈ |
\rightarrow \Rightarrow | → ⇒ |
\sum \prod \int | ∑ ∏ ∫ |
\partial \nabla | ∂ ∇ |
05 Lists
\begin{itemize} | Bulleted, with \item |
\begin{enumerate} | Numbered, with \item |
\begin{description} | \item[label] |
| nest envs | For sub-lists |
\begin{itemize}
\item First
\item Second
\end{itemize}
06 Tables & figures
\begin{tabular}{lcr} | left/center/right cols |
& | Column separator |
\\ | End of row |
\hline | Horizontal rule |
\begin{figure}[h] | Floating figure |
\includegraphics[width=\textwidth]{f} | Insert image |
\caption{} \label{} | Caption + ref target |
07 References & links
\label{key} | Mark a target |
\ref{key} | Cross-reference number |
\eqref{key} | Equation (n) reference |
\cite{key} | Bibliography citation |
\footnote{...} | Footnote |
\href{url}{text} | Hyperlink hyperref |
08 Handy preamble
\usepackage[utf8]{inputenc} | UTF-8 input |
\usepackage{amsmath,amssymb} | Math + symbols |
\usepackage{graphicx} | Images |
\usepackage[margin=1in]{geometry} | Page margins |
\usepackage{hyperref} | Clickable links/refs |
\usepackage{babel} | Language rules |
HTML Cheatsheet
The markup vocabulary — structure, content, and forms. Pair it with the CSS sheet → for styling.
01 Document skeleton
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page</title> </head> <body> … </body> </html>
<!DOCTYPE html> | HTML5 declaration |
<head> | Metadata (not shown) |
<body> | Visible content |
<link rel="stylesheet"> | Attach CSS |
<script src=""> | Attach JS |
02 Text & headings
<h1> … <h6> | Headings |
<p> | Paragraph |
<br> | Line break |
<hr> | Thematic break |
<strong> / <b> | Bold (strong = meaning) |
<em> / <i> | Italic (em = stress) |
<span> | Inline container |
<pre> <code> | Preformatted / code |
03 Links & media
<a href=""> | Hyperlink |
target="_blank" | New tab (+ rel="noopener") |
<img src="" alt=""> | Image (alt = a11y) |
<picture> <source> | Responsive images |
<video controls> | Video player |
<audio controls> | Audio player |
<figure> <figcaption> | Media + caption |
04 Lists
<ul> | Unordered (bullets) |
<ol> | Ordered (numbers) |
<li> | List item |
<dl> | Description list |
<dt> / <dd> | Term / definition |
05 Tables
<table> | Table root |
<thead> <tbody> <tfoot> | Row groups |
<tr> | Table row |
<th> | Header cell |
<td> | Data cell |
colspan / rowspan | Merge cells |
<caption> | Table title |
06 Forms
<form action="" method=""> | Form container |
<input type="text"> | Text field |
type= email, password… | number, checkbox, radio, date, file |
<label for=""> | Field label (a11y) |
<select> <option> | Dropdown |
<textarea> | Multi-line text |
<button> | Submit / action |
required placeholder | Common attributes |
07 Semantic structure
<header> | Intro / banner |
<nav> | Navigation links |
<main> | Primary content (one) |
<section> | Thematic grouping |
<article> | Self-contained unit |
<aside> | Tangential content |
<footer> | Footer info |
<details> <summary> | Native disclosure |
08 Attributes & meta
id / class | Hooks for CSS/JS |
style | Inline CSS |
data-* | Custom data |
title | Hover tooltip |
hidden | Hide element |
<meta charset="utf-8"> | Encoding |
<meta name="viewport"> | Mobile scaling essential |
<meta name="description"> | SEO snippet |
<meta property="og:..."> | Open Graph (sharing) |
CMD Shell Cheatsheet
Windows Command Prompt (cmd.exe). Not case-sensitive. For the modern shell, see the PowerShell sheet →
01 Navigation
cd \path\to\dir | Change directory |
cd .. | Up one level |
cd /d D:\ | Change drive + dir |
dir | List contents |
dir /a | Include hidden |
tree | Folder tree |
pushd / popd | Push/pop dir stack |
cls | Clear screen |
02 File operations
copy a b | Copy file |
xcopy /s /e src dst | Copy tree (recursive) |
robocopy src dst /e | Robust copy better |
move a b | Move / rename |
ren old new | Rename |
del file | Delete file |
rmdir /s /q dir | Delete folder + contents |
mkdir dir | Make directory |
type file | Print file contents |
03 Find & filter
findstr "text" file | Search (grep-like) |
findstr /s /i "x" *.txt | Recursive, ignore case |
find "text" file | Simple substring find |
cmd | more | Page output |
sort file | Sort lines |
fc a b | Compare two files |
04 System & processes
tasklist | List processes |
taskkill /im app.exe /f | Force-kill by name |
ipconfig /all | Network config |
ping host | Test reachability |
systeminfo | Machine details |
sfc /scannow | Repair system files |
shutdown /r /t 0 | Reboot now |
05 Variables
set VAR=value | Set (this session) |
set | List all variables |
echo %VAR% | Read a variable |
setx VAR value | Persist (new sessions) |
%USERPROFILE% | Home folder |
%PATH% %TEMP% %CD% | Common built-ins |
06 Batch scripting
@echo off | Hide command echo |
rem comment | Comment line |
if exist file (…) | Conditional |
for %%f in (*.txt) do … | Loop (%f in console) |
goto :label | Jump |
call other.bat | Run another script |
%1 %2 | Script arguments |
pause | Wait for keypress |
07 Operators & redirection
& | Run commands in sequence |
&& | Run next if prev succeeded |
|| | Run next if prev failed |
> file | Redirect output (overwrite) |
>> file | Append output |
2> file | Redirect errors |
cmd1 | cmd2 | Pipe |
PowerShell Cheatsheet
Object-oriented shell. Commands are Verb-Noun; the pipeline passes objects, not text.
01 Cmdlets & discovery
Get-Help <cmd> -Full | Full help |
Get-Command *network* | Find cmdlets |
Get-Member | Inspect object props/methods |
Get-Verb | Approved verbs |
| aliases | ls cd cat cp rm map to cmdlets |
Get-Help about_* | Conceptual topics |
02 Files & navigation
Get-ChildItem | List (ls / dir) |
Set-Location | cd |
Get-Content file | Read file (cat) |
Set-Content / Out-File | Write file |
Copy-Item Move-Item | Copy / move |
Remove-Item -Recurse | Delete |
New-Item -ItemType Directory | Make folder |
Test-Path path | Exists? |
03 The pipeline
Objects flow through |; $_ is the current item.
Where-Object { $_.X -gt 5 } | Filter |
ForEach-Object { … } | Act on each |
Select-Object name, size | Pick properties |
Sort-Object size -Desc | Sort |
Measure-Object -Sum | Count / sum / avg |
Group-Object | Group by value |
Get-Process |
Where-Object { $_.CPU -gt 10 } |
Sort-Object CPU -Descending |
Select-Object -First 5
04 Variables & types
$x = 10 | Assign |
$arr = @(1,2,3) | Array |
$h = @{ a = 1; b = 2 } | Hashtable |
"value is $x" | Interpolated (double quotes) |
'literal $x' | No expansion (single) |
$env:PATH | Environment variable |
[int] [string] [datetime] | Type casts |
05 Operators
-eq -ne -gt -lt -ge -le | Comparison |
-like | Wildcard match (*) |
-match | Regex match |
-and -or -not | Logical |
-contains -in | Membership |
$null -eq $x | Null check (null first!) |
06 Flow control
if () {} elseif () {} else {} | Branch |
foreach ($i in $c) {} | Iterate collection |
for ($i=0; $i -lt 10; $i++) {} | Counter loop |
while () {} | While loop |
switch () { } | Multi-branch |
function F { param($a) … } | Define function |
07 System & web
Get-Process / Stop-Process | Processes |
Get-Service / Start-Service | Services |
Get-NetIPAddress | IP config |
Test-Connection host | Ping |
Invoke-RestMethod url | Call an API (JSON) |
Invoke-WebRequest url | Fetch a page |
Get-ExecutionPolicy | Script policy |
Python Cheatsheet
Python 3. Indentation defines blocks; no semicolons or braces needed.
01 Basics & types
x = 10 | Dynamic assignment |
int float str bool | Core types |
None | Null value |
type(x) | Check type |
f"{name} is {age}" | f-string |
# comment | Comment |
print(x, end="") | Output |
02 Strings
s[0] s[-1] | Index (last) |
s[1:4] | Slice |
len(s) | Length |
.upper() .lower() | Case |
.strip() | Trim whitespace |
.split(",") | To list |
",".join(lst) | From list |
.replace(a, b) | Substitute |
03 Collections
[1, 2, 3] | List (mutable) |
(1, 2) | Tuple (immutable) |
{"a": 1} | Dict |
{1, 2, 3} | Set (unique) |
lst.append(x) | Add item |
d.get(k, default) | Safe lookup |
[x*2 for x in lst] | Comprehension |
04 Control flow
if x: … elif: … else: | Branch |
for i in range(10): | Count loop |
for x in lst: | Iterate |
while cond: | While loop |
break / continue | Loop control |
a if cond else b | Ternary |
match x: case …: | Pattern match (3.10+) |
05 Functions
def f(a, b=1): | Define + default |
return x | Return value |
*args **kwargs | Variadic args |
lambda x: x + 1 | Anonymous fn |
def f(x: int) -> str: | Type hints |
@decorator | Decorator |
06 Classes
class Dog:
def __init__(self, name):
self.name = name
def speak(self):
return f"{self.name} barks"
__init__ | Constructor |
self | Instance reference |
class B(A): | Inheritance |
super().__init__() | Parent call |
07 Files & errors
with open("f.txt") as fh:
data = fh.read()
open(path, "w") | Modes: r w a rb |
try: … except E as e: | Catch errors |
finally: | Always runs |
raise ValueError("…") | Throw |
08 Modules & built-ins
import os | Import module |
from x import y | Import name |
pip install pkg | Install package |
enumerate(lst) | Index + value |
zip(a, b) | Pair up |
sorted(lst, key=…) | Sort |
map() filter() | Transform / select |
Rust Cheatsheet
Compiled, memory-safe without a garbage collector. Ownership is the core idea.
01 Variables & types
let x = 5; | Immutable by default |
let mut x = 5; | Mutable |
const MAX: u32 = 100; | Constant |
i32 u8 f64 bool char | Scalar types |
let x: i64 = 5; | Type annotation |
let x = 5; let x = x + 1; | Shadowing |
02 Functions & control
fn add(a: i32, b: i32) -> i32 | Function |
if x > 5 { } else { } | Branch (expression) |
let y = if c { 1 } else { 2 }; | if returns a value |
loop { break; } | Infinite loop |
for i in 0..10 { } | Range loop |
while c { } | While |
match x { 1 => …, _ => … } | Pattern match |
03 Ownership & borrowing
Each value has one owner; it drops when the owner goes out of scope.
let b = a; | Move (a no longer valid) |
&x | Immutable borrow |
&mut x | Mutable borrow (one at a time) |
x.clone() | Deep copy |
Copy types | Integers etc. copy, not move |
04 Compound types
(1, "a", 3.0) | Tuple |
[1, 2, 3] | Array (fixed size) |
struct P { x: i32 } | Struct |
enum E { A, B(i32) } | Enum |
Option<T> | Some(v) / None |
Result<T, E> | Ok(v) / Err(e) |
05 Collections
Vec<T> | Growable array |
vec![1, 2, 3] | Vec literal |
String / &str | Owned / borrowed string |
HashMap<K, V> | Map |
.iter().map(…) | Lazy transform |
.filter(…).collect() | Select + gather |
06 Error handling
Result<T, E> | Recoverable errors |
? | Propagate error early |
.unwrap() | Panic if None/Err careful |
.expect("msg") | Unwrap with message |
match res { Ok(v)…Err(e)… } | Handle both |
panic!("…") | Unrecoverable |
07 Traits & generics
trait Shape { fn area(&self)…} | Define behaviour |
impl Shape for Circle | Implement |
fn f<T>(x: T) | Generic |
<T: Display> | Trait bound |
#[derive(Debug, Clone)] | Auto-implement |
08 Cargo & modules
cargo new proj | New project |
cargo build | Compile |
cargo run | Build + run |
cargo test | Run tests |
mod foo; | Declare module |
use crate::foo::bar; | Bring into scope |
C Cheatsheet
Low-level and explicit — you manage memory yourself. Compile with gcc file.c -o prog.
01 Basics
#include <stdio.h>
int main(void) {
printf("Hello\n");
return 0;
}
#include <stdio.h> | Library header |
int char float double | Basic types |
printf() scanf() | Output / input |
// or /* */ | Comments |
02 Control flow
if (x) { } else { } | Branch |
for (i=0; i<n; i++) | Count loop |
while (c) { } | While |
do { } while (c); | Run-at-least-once |
switch (x) { case 1: … } | Multi-branch |
break / continue | Loop control |
03 Functions
int add(int a, int b) | Definition |
int add(int, int); | Prototype (declare) |
return x; | Return |
void f(void) | No return / no args |
static | File-local / persistent |
04 Pointers
int *p; | Pointer declaration |
p = &x; | Address-of |
*p | Dereference |
p++ | Pointer arithmetic |
NULL | Null pointer |
void * | Generic pointer |
05 Arrays & strings
int a[10]; | Array |
char s[] = "hi"; | String (null-terminated) |
sizeof(a) | Size in bytes |
strlen(s) | String length |
strcpy(d, s) | Copy use strncpy |
strcmp(a, b) | Compare (0 = equal) |
06 Structs & memory
typedef struct {
int x, y;
} Point;
Point *p = malloc(sizeof(Point));
free(p);
struct { … } | Composite type |
typedef | Type alias |
p->x | Member via pointer |
malloc() free() | Heap alloc / release |
calloc() realloc() | Zeroed / resize |
07 Preprocessor
#define PI 3.14 | Constant macro |
#define SQ(x) ((x)*(x)) | Function macro |
#ifdef … #endif | Conditional compile |
#include "local.h" | Local header |
#pragma once | Include guard |
08 printf format specifiers
%d | Integer |
%u | Unsigned |
%f %.2f | Float (2 decimals) |
%s | String |
%c | Character |
%x | Hex |
%p | Pointer address |
JSON Formatter & Validator
Paste JSON on the left, then Format (pretty-print), Minify, or just validate. Everything runs in your browser — nothing is sent anywhere.
Regex Tester
Live match highlighting. Enter a pattern (no slashes) and flags, then type or paste test text below.
Color Converter
Pick a color or type a hex value — get RGB and HSL back instantly.
#2965f1rgb(41, 101, 241)hsl(223, 88%, 55%)Base64 Encode / Decode
UTF-8 safe — handles accents and emoji correctly. All local to your browser.
Timestamp Converter
Convert between Unix epoch (seconds) and a human date. Edit either field.
| Unix (ms) | — |
| UTC / ISO | — |
| Local string | — |
| Relative | — |
URL Encoder / Decoder
Percent-encode text for safe use in URLs (encodes spaces, &, ?, =, /, etc.), or decode it back. Runs locally.
UUID Generator
Random version-4 UUIDs, generated with the browser's cryptographic RNG.
Diff
Compare two blocks of text line by line. Green = added on the right, red = removed from the left.
Hash / Checksum
Compute and verify checksums for serial / RS485 / Modbus frames, or hashes of arbitrary data. Pick an algorithm, paste your bytes, and compare against the expected value. Runs entirely in your browser.
Links & Docs
References and tools worth a permanent bookmark.
📚 Documentation
- MDN Web DocsHTML, CSS, JS — the reference
- DevDocsMany APIs, offline-capable
- Can I useBrowser support tables
- web.devModern best practices
🧪 Online tools
- regex101Regex with explanations
- JSON FormatterHeavier-duty JSON tooling
- cubic-bezier.comBuild easing curves
- Compressor.ioImage compression
🎨 CSS & layout
- Flexbox FroggyLearn flexbox by play
- Grid GardenLearn grid by play
- CSS GradientGradient generator
- CoolorsPalette generator
🛠️ Git & self-hosting
- Git docsOfficial reference
- Oh Shit, Git!?!Fixing common mistakes
- Raspberry Pi docsFor the box this runs on