Home

~/home

Hey — 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.

Orion Nebula

CSS Cheatsheet

A scannable desk reference. Values shown are illustrative — verify edge cases against MDN or caniuse.com.

01 Selectors

Basic
*All elements
.classBy class
#idBy id
a, pGroup (either)
Combinators
A BDescendant
A > BDirect child
A + BNext sibling
A ~ BLater siblings
Attribute
[href^="https"]Starts with
[src$=".png"]Ends with
[class*="col"]Contains

02 Pseudo

State
:hoverPointer over
:focus-visibleFocused (kbd)
:checked :disabledForm state
:not(sel)Negation
:is() :where()Match any
:has(sel)Parent contains
Structural & ::elements
:nth-child(2n)Every even
:first/last-childPosition
::before ::afterGenerated content
::placeholderInput hint

03 Specificity

Higher wins; ties break by source order.

!importantBeats all avoid
inline style1,0,0,0
#id0,1,0,0
.class [attr] :hover0,0,1,0
tag ::before0,0,0,1

Read (inline, id, class, tag) left to right.

04 Box model

box-sizing: border-boxIncl. padding+border use this
padding: 10px 20pxInside border
margin: 0 autoOutside; centers
border: 1px solid #cccwidth style color
border-radius: 8pxRounded corners
overflow: auto|hiddenScroll / clip
aspect-ratio: 16/9Lock proportions

05 Display & position

Display
block / inlineStack / flow
inline-blockFlow but sizable
flex / gridLayout containers
noneRemoved
Position
relativeOffset from self
absoluteTo ancestor
fixedTo viewport
stickyScrolls then sticks
z-index: 10Stacking order

06 Flexbox

One axis — a row or a column.

display: flexActivate
flex-directionrow | column
flex-wrap: wrapAllow wrapping
justify-contentMain axis align
align-itemsCross axis align
gap: 16pxSpace between
flex: 1grow shrink basis
/* perfect centering */
display: flex;
justify-content: center;
align-items: center;

07 Grid

Two axes — rows and columns.

display: gridActivate
grid-template-columnsDefine columns
repeat(3, 1fr)3 equal cols
minmax(200px,1fr)Flexible w/ floor
gap: 20pxGutters
grid-column: 1 / 3Span lines
place-items: centeralign+justify
/* responsive grid */
grid-template-columns:
 repeat(auto-fit, minmax(240px,1fr));

08 Typography

font-size1rem, 16px
font-weight400 / 700
line-height: 1.5Unitless = × size
letter-spacingTracking
text-alignleft/center/justify
text-transformuppercase…
text-wrap: balanceEven headings
text-overflow: ellipsis… clipped

09 Color & background

#2965f1Hex
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

pxAbsolute
rem× root size scalable
em× parent size
%Of parent
vw / vh1% of viewport
dvh / svhDynamic / small vh
frGrid free space
chWidth of "0"

11 Transitions & transforms

transition: all .2s easeprop dur timing
cubic-bezier()Custom curve
translate(x,y)Move
scale(1.2)Resize
rotate(45deg)Spin
animation: spin 1s linear infinitename 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 initNew 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 statusWhat 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 --amendEdit last commit

03 Branching

git branchList 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 -vList remotes
git fetchDownload, don't merge
git pullFetch + merge
git pushUpload commits
git push -u origin <br>Push + track

05 Inspect history

git log --onelineCompact history
git log --graph --allVisual tree
git diffUnstaged changes
git diff --stagedStaged 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~1Undo commit, keep work
git reset --hard HEAD~1Undo + discard careful
git revert <hash>New commit that undoes
git reflogRecover lost commits

07 Stash

git stashShelve changes
git stash popRestore + remove
git stash listSee stashes
Rebase
git rebase <branch>Replay commits on top
git rebase -i HEAD~3Edit/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 / \DDigit / non-digit
\w / \WWord char / non-word
\s / \SWhitespace / 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
\bWord boundary
\BNot 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|ba or b
\1Backreference

05 Lookaround

(?=...)Lookahead (followed by)
(?!...)Negative lookahead
(?<=...)Lookbehind (preceded by)
(?<!...)Negative lookbehind

06 Flags

gGlobal (all matches)
iCase-insensitive
mMultiline (^ $ per line)
sDotall (. matches \n)
uUnicode

07 Handy patterns

^\d{4}-\d{2}-\d{2}$ISO date
\b[\w.]+@[\w.]+\.\w+\bEmail (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
\maketitleRender the title
\section{} \subsection{}Headings
\tableofcontentsAuto 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 lineNew 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 envsFor 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
\hlineHorizontal 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 / rowspanMerge 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 placeholderCommon 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

Global attributes
id / classHooks for CSS/JS
styleInline CSS
data-*Custom data
titleHover tooltip
hiddenHide element
Meta tags
<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\dirChange directory
cd ..Up one level
cd /d D:\Change drive + dir
dirList contents
dir /aInclude hidden
treeFolder tree
pushd / popdPush/pop dir stack
clsClear screen

02 File operations

copy a bCopy file
xcopy /s /e src dstCopy tree (recursive)
robocopy src dst /eRobust copy better
move a bMove / rename
ren old newRename
del fileDelete file
rmdir /s /q dirDelete folder + contents
mkdir dirMake directory
type filePrint file contents

03 Find & filter

findstr "text" fileSearch (grep-like)
findstr /s /i "x" *.txtRecursive, ignore case
find "text" fileSimple substring find
cmd | morePage output
sort fileSort lines
fc a bCompare two files

04 System & processes

tasklistList processes
taskkill /im app.exe /fForce-kill by name
ipconfig /allNetwork config
ping hostTest reachability
systeminfoMachine details
sfc /scannowRepair system files
shutdown /r /t 0Reboot now

05 Variables

set VAR=valueSet (this session)
setList all variables
echo %VAR%Read a variable
setx VAR valuePersist (new sessions)
%USERPROFILE%Home folder
%PATH% %TEMP% %CD%Common built-ins

06 Batch scripting

@echo offHide command echo
rem commentComment line
if exist file (…)Conditional
for %%f in (*.txt) do …Loop (%f in console)
goto :labelJump
call other.batRun another script
%1 %2Script arguments
pauseWait for keypress

07 Operators & redirection

&Run commands in sequence
&&Run next if prev succeeded
||Run next if prev failed
> fileRedirect output (overwrite)
>> fileAppend output
2> fileRedirect errors
cmd1 | cmd2Pipe

PowerShell Cheatsheet

Object-oriented shell. Commands are Verb-Noun; the pipeline passes objects, not text.

01 Cmdlets & discovery

Get-Help <cmd> -FullFull help
Get-Command *network*Find cmdlets
Get-MemberInspect object props/methods
Get-VerbApproved verbs
aliasesls cd cat cp rm map to cmdlets
Get-Help about_*Conceptual topics

02 Files & navigation

Get-ChildItemList (ls / dir)
Set-Locationcd
Get-Content fileRead file (cat)
Set-Content / Out-FileWrite file
Copy-Item Move-ItemCopy / move
Remove-Item -RecurseDelete
New-Item -ItemType DirectoryMake folder
Test-Path pathExists?

03 The pipeline

Objects flow through |; $_ is the current item.

Where-Object { $_.X -gt 5 }Filter
ForEach-Object { … }Act on each
Select-Object name, sizePick properties
Sort-Object size -DescSort
Measure-Object -SumCount / sum / avg
Group-ObjectGroup by value
Get-Process |
  Where-Object { $_.CPU -gt 10 } |
  Sort-Object CPU -Descending |
  Select-Object -First 5

04 Variables & types

$x = 10Assign
$arr = @(1,2,3)Array
$h = @{ a = 1; b = 2 }Hashtable
"value is $x"Interpolated (double quotes)
'literal $x'No expansion (single)
$env:PATHEnvironment variable
[int] [string] [datetime]Type casts

05 Operators

-eq -ne -gt -lt -ge -leComparison
-likeWildcard match (*)
-matchRegex match
-and -or -notLogical
-contains -inMembership
$null -eq $xNull 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-ProcessProcesses
Get-Service / Start-ServiceServices
Get-NetIPAddressIP config
Test-Connection hostPing
Invoke-RestMethod urlCall an API (JSON)
Invoke-WebRequest urlFetch a page
Get-ExecutionPolicyScript policy

Python Cheatsheet

Python 3. Indentation defines blocks; no semicolons or braces needed.

01 Basics & types

x = 10Dynamic assignment
int float str boolCore types
NoneNull value
type(x)Check type
f"{name} is {age}"f-string
# commentComment
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 / continueLoop control
a if cond else bTernary
match x: case …:Pattern match (3.10+)

05 Functions

def f(a, b=1):Define + default
return xReturn value
*args **kwargsVariadic args
lambda x: x + 1Anonymous fn
def f(x: int) -> str:Type hints
@decoratorDecorator

06 Classes

class Dog:
    def __init__(self, name):
        self.name = name
    def speak(self):
        return f"{self.name} barks"
__init__Constructor
selfInstance 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 osImport module
from x import yImport name
pip install pkgInstall 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 charScalar types
let x: i64 = 5;Type annotation
let x = 5; let x = x + 1;Shadowing

02 Functions & control

fn add(a: i32, b: i32) -> i32Function
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)
&xImmutable borrow
&mut xMutable borrow (one at a time)
x.clone()Deep copy
Copy typesIntegers 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 / &strOwned / 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 CircleImplement
fn f<T>(x: T)Generic
<T: Display>Trait bound
#[derive(Debug, Clone)]Auto-implement

08 Cargo & modules

cargo new projNew project
cargo buildCompile
cargo runBuild + run
cargo testRun 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 doubleBasic 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 / continueLoop 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
staticFile-local / persistent

04 Pointers

int *p;Pointer declaration
p = &x;Address-of
*pDereference
p++Pointer arithmetic
NULLNull 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
typedefType alias
p->xMember via pointer
malloc() free()Heap alloc / release
calloc() realloc()Zeroed / resize

07 Preprocessor

#define PI 3.14Constant macro
#define SQ(x) ((x)*(x))Function macro
#ifdef#endifConditional compile
#include "local.h"Local header
#pragma onceInclude guard

08 printf format specifiers

%dInteger
%uUnsigned
%f %.2fFloat (2 decimals)
%sString
%cCharacter
%xHex
%pPointer 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.

#2965f1
rgb(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.

Verify against an expected checksum

Links & Docs

References and tools worth a permanent bookmark.